@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=Cormorant+Garamond:ital@1&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Astra's default footer builder rows (empty light row + its own copyright line)
   sit below our real .mc-footer and were never disabled — showed as a stray white
   band plus a duplicate "© 2026" line. Our own footer already has its own legal row. */
.site-above-footer-wrap,
.site-primary-footer-wrap,
.mc-footer-bottom { display: none !important; }

/* Base typography */
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important;
  letter-spacing: 1px;
  font-weight: 700;
}
body, p, a, span, .elementor-widget-text-editor {
  font-family: 'Manrope', 'Helvetica Neue', sans-serif;
}
.mc-accent-serif {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
}

/* Collection cards — hover zoom + dark overlay */
.mc-collection-card { position: relative; overflow: hidden; transition: transform .45s ease, box-shadow .45s ease; }
.mc-collection-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.mc-collection-card .elementor-widget-image { overflow: hidden; }
.mc-collection-card .elementor-widget-image img { transition: transform .7s ease; display:block; }
.mc-collection-card:hover .elementor-widget-image img { transform: scale(1.08); }
.mc-collection-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,0) 75%);
  pointer-events: none;
  opacity: .7; transition: opacity .4s ease;
}
.mc-collection-card:hover::after { opacity: .92; }
.mc-collection-card .elementor-widget-heading,
.mc-collection-card .elementor-widget-button {
  position: relative; z-index: 2;
}

/* WooCommerce product cards on dark background */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
  color: #F8F8F6 !important;
}
.woocommerce ul.products li.product {
  background: #161616;
  padding: 18px 18px 24px;
  border-radius: 2px;
  transition: transform .4s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }
.woocommerce ul.products li.product .price { color: #C8A45D !important; }
.woocommerce ul.products li.product a.button {
  background: #C8A45D !important;
  color: #111111 !important;
  border-radius: 2px;
}
.woocommerce ul.products li.product a.button:hover {
  background: transparent !important;
  color: #C8A45D !important;
  box-shadow: inset 0 0 0 1px #C8A45D;
}

/* Buttons — gold fill, hover = gold outline / transparent */
.mc-btn-gold .elementor-button,
.mc-btn-gold.elementor-button {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* Hide default page title on the homepage */
.page-id-701 .entry-header,
.page-id-701 .page-header,
.page-id-701 h1.entry-title,
.page-id-701 .ast-archive-title {
  display: none !important;
}

/* Full-bleed safety for full-width containers */
.elementor-701 .e-con.e-con-full {
  max-width: 100% !important;
}

/* Generous breathing room between top-level sections */
.elementor-701 > .elementor-element > .e-con {
  scroll-margin-top: 100px;
}

/* Sticky header — subtle shadow once scrolled */
.mc-scrolled .ast-primary-header-bar,
.mc-scrolled #masthead {
  box-shadow: 0 2px 24px rgba(0,0,0,.10) !important;
  transition: box-shadow .3s ease;
}
#masthead, .ast-primary-header-bar {
  transition: box-shadow .3s ease;
}

/* Subtle fade-in for elements with Elementor entrance animation already respects reduced motion */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { opacity: 1 !important; transform: none !important; }
}

/* ---- Footer ---- */
footer, #colophon, .site-footer { background: #0A0A0A !important; position: relative; }
footer::before, #colophon::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,164,93,.5) 50%, transparent 100%);
}
.mc-footer { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 80px 60px 40px; max-width:1400px; margin:0 auto; }
.mc-footer-logo { font-family:'Playfair Display',serif; font-size:26px; letter-spacing:2px; background:linear-gradient(120deg,#8a6a2f,#C8A45D,#F3D9A4,#C8A45D,#8a6a2f); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.mc-footer-tagline { color:#C9C9C9; margin-top:8px; font-size:14px; }
.mc-footer-col h4 { color:#C8A45D; font-family:'Playfair Display',serif; font-weight:500; font-size:14px; letter-spacing:1.5px; margin-bottom:16px; text-transform:uppercase; }
.mc-footer-col ul { list-style:none; margin:0; padding:0; }
.mc-footer-col ul li { margin-bottom:10px; }
.mc-footer-col ul li a { color:#C9C9C9; text-decoration:none; font-size:14px; transition:color .3s ease; }
.mc-footer-col ul li a:hover { color:#C8A45D; }
.mc-footer-bottom { text-align:center; color:#666; font-size:12px; padding:24px 20px; border-top:1px solid rgba(255,255,255,.08); margin-top:20px; }
@media (max-width:768px){ .mc-footer{grid-template-columns:1fr 1fr; padding:60px 30px 30px;} }
/* Cause exacte confirmée par mesure réelle sur 375px (iPhone) : il manquait
   un palier sous 768px. À 2 colonnes, chaque colonne n'a que ~137px
   disponibles (375 - 2×30px de marge - 40px d'écart, ÷2), mais le contenu
   le plus large (149px) ne s'y adapte pas et fait déborder toute la grille
   de 38px (413px de large sur un écran de 375px). Une seule colonne
   pleine largeur en dessous de 480px règle la cause à la racine. */
@media (max-width:480px){ .mc-footer{grid-template-columns:1fr; padding:50px 24px 30px; gap:32px;} }

/* ---- Header: gold gradient logo + refined hover ---- */
.ast-site-identity .site-title a,
.ast-site-title-inner .site-title a,
.site-title a {
  font-family:'Playfair Display',serif !important;
  font-weight:500;
  font-size: 44px !important;
  letter-spacing:4px;
  background:linear-gradient(120deg,#8a6a2f 0%,#C8A45D 25%,#F3D9A4 50%,#C8A45D 75%,#8a6a2f 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent !important;
}
.ast-site-title-wrap { display: flex; flex-direction: column; align-items: center; line-height: 1; }
/* Playfair Display's "&" is an ornate calligraphic swash that reads oddly at
   a glance — swap just that glyph for a plain, conventional ampersand in a
   solid gold, and apply the same treatment everywhere "MISTER & CO." appears
   (custom.js wraps every instance site-wide) so the mark stays consistent. */
.mc-amp {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500;
  color: #C8A45D !important;
  -webkit-text-fill-color: #C8A45D !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: none !important;
}
/* Every other "MISTER & CO." on the site gets the same treatment as the
   logo: Playfair Display in the same gold gradient for "MISTER"/"CO.",
   with the conventional-font gold "&" (.mc-amp) nested inside — matching
   the logo exactly rather than approximating it. */
.mc-brandmark {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500;
  background: linear-gradient(120deg,#8a6a2f 0%,#C8A45D 25%,#F3D9A4 50%,#C8A45D 75%,#8a6a2f 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important;
}
.mc-tagline {
  font-family: Manrope, sans-serif; font-size: 19px; font-weight: 400;
  letter-spacing: .02em; color: #FFFFFF; opacity: .92;
  text-align: center; white-space: nowrap; margin-top: 2px; line-height: 1.25;
}
@media (max-width: 700px) {
  .mc-tagline { font-size: 14px; white-space: normal; max-width: 220px; }
}
@media (max-width: 480px) {
  .mc-tagline { font-size: 12px; max-width: 200px; }
}
/* ---- Shared full-bleed texture background for sections 2 and 3 ----
   Real <img> element (not Elementor's background_image or a CSS background-image
   property) — this project's proven technique after Elementor's native background
   setting was found unreliable on this install. */
.mc-presentation-section, .mc-why-section {
  position: relative;
  z-index: 2;
}
/* User explicitly asked to remove the marble/texture background from
   sections 2 and 3 entirely and keep them pure black ("je voulais tout
   noir") — the shared-image <img> and its overlay are hidden rather than
   deleted from the Elementor JSON, so this is a single reversible CSS
   toggle if a background image is wanted again later. */
.mc-section-bg-img, .mc-section-bg-overlay {
  display: none !important;
}
.mc-presentwhy-wrap {
  position: relative;
  overflow: hidden;
  background-color: #0A0A0A;
}
/* Elementor gives every widget's own wrapper div position:relative by
   default, which "steals" the positioning context from our intended
   ancestor (this is what caused the earlier per-section height bug — the
   background <img> was sizing against its own empty widget wrapper instead
   of the section). Forcing this one widget's wrapper back to static lets
   the absolute-positioned background correctly reference .mc-presentwhy-wrap. */
.elementor-element-sharedbg001,
.elementor-element-sharedbg001 > .elementor-widget-container {
  position: static !important;
}
.mc-presentation-grid, .mc-why-wrap {
  position: relative;
  z-index: 2;
}

/* ---- Presentation section (Section 2): image left / real HTML text right ---- */
.mc-presentation-grid {
  max-width: 1680px;
  margin: 0 auto;
  padding-top: clamp(70px, 8vw, 120px);
  padding-bottom: clamp(70px, 8vw, 120px);
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: 48% 48%;
  column-gap: 4%;
  row-gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
.mc-presentation-image {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.mc-presentation-image img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  display: block;
}
.mc-presentation-text {
  position: relative;
  border-left: 1px solid rgba(216,164,59,.45);
  padding-left: clamp(24px, 3vw, 48px);
}
.mc-presentation-text::before {
  content: "";
  position: absolute;
  top: -24px; bottom: -24px; left: -24px; right: -6%;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.58) 60%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.15) 100%);
  z-index: -1;
  pointer-events: none;
}
.mc-presentation-text h2, .mc-presentation-text h3 {
  color: #d8a43b !important;
  font-weight: 700;
  font-size: clamp(32px, 2.4vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em !important;
  margin: 0 0 22px;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
}
.mc-presentation-text h3 { font-size: clamp(24px, 1.8vw, 32px); }
.mc-presentation-text p {
  color: #ffffff;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.8;
  font-weight: 700;
  max-width: 760px;
  margin: 0 0 20px;
  text-shadow: 0 1px 6px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.mc-presentation-text p:last-child { margin-bottom: 0; }

.mc-presentation-image, .mc-presentation-text {
  opacity: 0; transition: opacity .8s ease, transform .8s ease;
}
.mc-presentation-image { transform: translateY(20px); }
.mc-presentation-text { transform: translateY(12px); transition-delay: .1s; }
.mc-presentation-grid.mc-in-view .mc-presentation-image,
.mc-presentation-grid.mc-in-view .mc-presentation-text { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .mc-presentation-grid { grid-template-columns: 1fr; gap: 32px; }
  .mc-presentation-text { border-left: none; padding-left: 0; border-top: 1px solid rgba(216,164,59,.32); padding-top: 32px; }
  .mc-presentation-image { aspect-ratio: 16/11; }
}
@media (max-width: 767px) {
  .mc-presentation-section { padding: 0; }
  .mc-presentation-grid { grid-template-columns: 1fr; gap: 0; max-width: 100%; padding: 0; }
  .mc-presentation-image { aspect-ratio: 4/3; border-radius: 0; box-shadow: none; }
  .mc-presentation-text { border-top: none; padding: 28px 18px 48px; }
  .mc-presentation-text h2, .mc-presentation-text h3 { font-size: 28px; line-height: 1.15; }
  .mc-presentation-text p { font-size: 16px; line-height: 1.65; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-presentation-image, .mc-presentation-text { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Why section (Section 3): compact 6-frame gallery grid ---- */
.mc-why-wrap {
  max-width: 1500px;
  margin: -54px auto 0;
  padding: 0px 40px 90px;
}
.mc-why-wrap h2 {
  color: #d8a43b !important;
  text-align: center;
  font-size: clamp(30px, 2.2vw, 42px);
  margin: 0 0 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
}
.mc-why-intro {
  color: #f2f2f2;
  text-align: center;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.7;
  font-weight: 700;
  max-width: 640px;
  margin: 0 auto 56px;
  text-shadow: 0 1px 6px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.mc-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 36px;
}
.mc-why-item { text-align: center; }

/* Layered gallery-frame effect: brushed-gold metal border (gradient + inset
   bevel shadows) wrapping a pale passe-partout mat, with a diagonal shine
   sweep on hover — built from two nested layers, not a single CSS border. */
.mc-why-frame {
  position: relative;
  display: flex;
  min-height: 170px;
  padding: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, #f3dd97 0%, #b8862f 20%, #f6e6b0 38%, #9c711d 56%, #f3dd97 74%, #8a6218 90%, #ecd28e 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  box-shadow:
    0 20px 45px rgba(0,0,0,.4),
    0 6px 14px rgba(0,0,0,.3),
    inset 0 1px 2px rgba(255,255,255,.65),
    inset 0 -2px 3px rgba(0,0,0,.55);
  transition: transform .45s ease, box-shadow .45s ease, background-position .6s ease;
  overflow: hidden;
}
.mc-why-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%);
  background-size: 250% 250%;
  background-position: -120% -120%;
  opacity: 0;
  transition: background-position .8s ease, opacity .5s ease;
  pointer-events: none;
}
.mc-why-item:hover .mc-why-frame {
  transform: translateY(-6px) rotate(.6deg);
  background-position: 100% 50%;
  box-shadow:
    0 30px 60px rgba(0,0,0,.5),
    0 10px 20px rgba(0,0,0,.35),
    inset 0 1px 2px rgba(255,255,255,.8),
    inset 0 -2px 3px rgba(0,0,0,.6);
}
.mc-why-item:hover .mc-why-frame::after {
  opacity: 1;
  background-position: 120% 120%;
}
.mc-why-frame-mat {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 1px;
  background: linear-gradient(160deg, #efe9dd 0%, #ddd5c4 100%);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06);
}
.mc-why-frame h3 {
  color: #241a0d !important;
  font-size: clamp(19px, 1.4vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  margin: 0;
}
.mc-why-item p {
  color: #f2f2f2;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 700;
  text-align: center;
  max-width: 420px;
  margin: 20px auto 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.mc-why-reassurance {
  color: rgba(242,242,242,.6);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  max-width: 520px;
  margin: 56px auto 0;
}
@media (prefers-reduced-motion: reduce) {
  .mc-why-frame, .mc-why-frame::after { transition: none; }
}
@media (max-width: 1024px) {
  .mc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mc-why-wrap { padding: 60px 18px; }
  .mc-why-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* Header: transparent over hero, solid on scroll; social icons injected via JS */
.ast-primary-header-bar { background: rgba(10,10,10,.55); backdrop-filter: blur(6px); }
.mc-scrolled .ast-primary-header-bar { background: rgba(10,10,10,.96) !important; }
/* TranslatePress's own floating switcher is replaced by a header-integrated one below.
   Its "yes" setting is force-reverted by the plugin itself on save (free-tier behavior) —
   hiding it in CSS is the only reliable way to remove it regardless of that option's state. */
#trp-floater-ls { display: none !important; }

.mc-lang-switcher { display: flex; align-items: center; gap: 6px; margin-left: 24px; position: relative; }
.mc-lang-switcher a {
  color: #C9C9C9; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: color .3s ease;
}
.mc-lang-switcher a:hover { color: #C8A45D; }
.mc-lang-switcher a.mc-lang-active { color: #C8A45D; pointer-events: none; }
.mc-lang-switcher .mc-lang-sep { color: #555; font-size: 12px; }
@media (max-width: 921px) {
  .mc-lang-switcher { margin-left: 0; margin-top: 16px; }
}
/* Desktop copy sits in the header top-right; mobile copy sits inside the off-canvas
   menu list (appended as its own item) so it's reachable once the hamburger is open. */
.mc-lang-switcher-desktop { flex-shrink: 0; }
@media (max-width: 921px) {
  .site-header-primary-section-right-center div.mc-lang-switcher-desktop { display: none; }
}
.mc-lang-switcher-mobile-item { list-style: none; padding-left: 20px; }
.mc-lang-switcher-mobile-item::before { content: none; }
@media (min-width: 922px) {
  .main-header-menu li.mc-lang-switcher-mobile-item,
  #ast-hf-menu-1 li.mc-lang-switcher-mobile-item { display: none; }
}
/* Icônes "Mon compte" / "Panier" — toujours visibles (desktop ET mobile,
   contrairement au sélecteur de langue qui bascule dans le menu mobile) :
   pratique courante des grandes boutiques en ligne d'avoir le panier
   accessible sans devoir ouvrir le menu hamburger. */
.mc-header-icons { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.mc-header-icon {
  position: relative;
  display: inline-flex;
  color: #F8F8F6;
  transition: color .25s ease;
}
.mc-header-icon:hover { color: #C8A45D; }
.mc-cart-count {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 50%;
  background: #C8A45D;
  color: #111111;
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.mc-cart-count:empty { display: none; }
@media (max-width: 921px) {
  .mc-header-icons { margin-left: auto; margin-right: 12px; }
}
.main-header-menu .menu-item a,
#primary-menu a {
  transition: color .3s ease;
}
.main-header-menu .menu-item a:hover,
#primary-menu a:hover {
  color: #C8A45D !important;
}
.ast-primary-header-bar { padding-top: 10px; padding-bottom: 10px; }

/* 27 juillet 2026 (v3) — structure convertie en vrai flexbox comme
   demandé, plutôt que de dépendre de la grille à largeurs de colonnes
   fixes d'Astra (grid-template-columns auto/1fr/auto), qui ne pouvait
   pas laisser le menu déborder de sa colonne sans le faire chevaucher
   les icônes. Mesuré précisément avant de modifier : le conteneur de
   l'en-tête est plafonné à max-width:1240px, et logo (517px) + menu
   serré (577px) + icônes (107px) = 1201px minimum — sur ~1265px
   disponibles, il ne reste struct que ~60px à répartir en marges/espaces,
   quel que soit l'écran (le plafond de largeur ne change pas sur un
   grand moniteur, le conteneur reste plafonné). Pour dégager un vrai
   espace visible avant les icônes
   sans toucher logo/typographie/hauteur, le padding interne de chaque
   lien du menu est légèrement resserré (16px -> 11px de chaque côté,
   uniformément, donc l'espacement ENTRE les liens reste cohérent d'un
   lien à l'autre) et la marge gauche de l'en-tête légèrement réduite.
   flex-wrap:nowrap empêche définitivement "Contact" de retomber sur une
   nouvelle ligne (cause racine du bug précédent : le <ul> avait
   flex-wrap:wrap hérité d'Astra). margin-left:auto sur le bloc
   icônes/langue absorbe alors tout l'espace récupéré en un seul bloc,
   juste avant ce bloc — jamais réparti ailleurs. */
/* BUG RÉEL TROUVÉ ET CORRIGÉ ICI : .ast-builder-grid-row-has-sides
   héritait un column-gap:20px de la grille Astra d'origine — qui
   continue de s'appliquer même après passage en display:flex (gap
   fonctionne pour les deux). Ce gap de 20px s'ajoutait à ma propre
   margin-left:20px sur le menu ET créait un espace de 20px avant le
   bloc icônes, consommant tout l'espace disponible — il ne restait
   donc plus RIEN pour margin-left:auto à distribuer (confirmé par
   mesure réelle : margin-left calculé = 0px). D'où les icônes collées
   juste après "Contact" au lieu d'être poussées à droite. gap:0 retire
   cet espacement fantôme ; margin-left:auto peut alors absorber tout
   l'espace réellement libre. */
#masthead .ast-builder-grid-row-has-sides {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  column-gap: 0 !important;
}
#masthead .site-header-primary-section-left {
  flex: 0 0 auto !important;
}
#masthead .site-header-primary-section-center {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  margin-left: 12px !important;
}
#masthead .site-header-primary-section-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
/* Logo confirmé sans marge récupérable (517px = besoin réel du texte
   "MISTER & CO." en no-wrap) : les seules marges restantes qui peuvent
   être resserrées sans toucher logo/typographie sont la marge gauche de
   l'en-tête et le padding interne des liens du menu — resserrés ici
   pour que l'espace avant les icônes soit visiblement volontaire. */
#masthead .ast-primary-header-bar { padding-left: 28px !important; padding-right: 10px !important; }
#masthead .ast-container { padding-right: 15px !important; }
.main-header-menu { flex-wrap: nowrap !important; }
.main-header-menu .menu-item > a { white-space: nowrap; padding-left: 8px !important; padding-right: 8px !important; }

/* ---- Hero ----
   FIXED: previous versions used a raw-HTML absolutely-positioned div for the background image so
   it could be Ken-Burns-zoomed independently of the text. That div's positioning context was the
   HTML widget's own (zero-height, auto-sized) wrapper, not the section — so the image never
   rendered at all (confirmed visually: solid black hero). Using Elementor's native
   background_image/background_overlay container settings instead: simple, reliably sized, proven. */
.mc-hero-content > * { position: relative; z-index: 2; }

/* ---- Museum-style gallery tiles for Collections ---- */
.mc-gallery-tile { position: relative; overflow: hidden; }
.mc-gallery-tile > .e-con-inner { position: relative; z-index: 2; height: 100%; }
.mc-gallery-tile .elementor-widget-image {
  position: absolute; inset: 0; z-index: 0; margin: 0;
}
.mc-gallery-tile .elementor-widget-image .elementor-widget-container,
.mc-gallery-tile .elementor-widget-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mc-gallery-tile .elementor-widget-image img { transition: transform 1.1s ease; }
.mc-gallery-tile:hover .elementor-widget-image img { transform: scale(1.06); }
.mc-gallery-tile::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 72%);
  transition: opacity .4s ease;
}
.mc-gallery-tile:hover::after { opacity: .85; }
.mc-gallery-tile .elementor-widget-heading {
  position: absolute; bottom: 34px; left: 34px; z-index: 2; margin: 0;
}
.mc-gallery-tile .elementor-widget-heading .elementor-heading-title {
  letter-spacing: 3px; text-transform: uppercase; font-size: 20px !important;
}

/* ---- Background via real <img> element ----
   Elementor's native background_image container setting silently fails to apply for several
   sections on this install: confirmed via direct CSSOM inspection that the generated rule exists,
   is correctly parsed with the right URL, and its selector matches the element (.matches()
   returns true) — yet getComputedStyle().backgroundImage still resolves to "none" while every
   other property from the same rule (size, position, repeat) applies correctly. An !important
   override targeting the same property from a separately-loaded stylesheet exhibits the exact
   same failure. Root cause not identified (not a caching issue — reproduced with a fully purged
   cache and cross-checked with adoptedStyleSheets, inline styles, and rule specificity — the
   background-image sub-property specifically is not being painted despite every inspectable signal
   saying it should be). Using a real <img> element sidesteps the CSS background-image mechanism
   entirely and is unaffected by whatever this is. */
.mc-bg-host { position: relative; overflow: hidden; }
.elementor-element-bannerbgimg, .elementor-element-whybgimg, .elementor-element-showcasebgimg,
.elementor-element-custombgimg, .elementor-element-tsbgimg, .elementor-element-herocarousel,
.elementor-element-introbgimg {
  position: absolute; inset: 0; z-index: 0; margin: 0; line-height: 0;
}
.elementor-element-herocarousel .elementor-widget-container { height: 100%; }
.mc-bg-host img.mc-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.mc-bg-overlay { position: absolute; inset: 0; }
.mc-bg-host > .e-con-inner > *:not(.elementor-element-bannerbgimg):not(.elementor-element-whybgimg):not(.elementor-element-showcasebgimg):not(.elementor-element-custombgimg):not(.elementor-element-tsbgimg):not(.elementor-element-herocarousel):not(.elementor-element-introbgimg),
.mc-bg-host > *:not(.elementor-element-bannerbgimg):not(.elementor-element-whybgimg):not(.elementor-element-showcasebgimg):not(.elementor-element-custombgimg):not(.elementor-element-tsbgimg):not(.elementor-element-herocarousel):not(.elementor-element-introbgimg) {
  position: relative; z-index: 1;
}

/* ---- Hero carousel ---- */
.mc-hero-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; }
.mc-hero-carousel img.mc-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
  filter: brightness(1.14) contrast(1.10) saturate(1.10);
}
.mc-hero-carousel img.mc-hero-slide.active { opacity: 1; }
.mc-hero-carousel .mc-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,.08);
}
.mc-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.3); color: #F8F8F6;
  font-size: 24px; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, border-color .3s ease;
}
.mc-hero-arrow:hover { background: rgba(200,164,93,.65); border-color: #C8A45D; }
.mc-hero-prev { left: 24px; }
.mc-hero-next { right: 24px; }
.mc-hero-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.mc-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; transition: background .3s ease, transform .3s ease; }
.mc-hero-dot.active { background: #C8A45D; transform: scale(1.35); }
@media (max-width: 767px) {
  .mc-hero-arrow { width: 34px; height: 34px; font-size: 18px; }
  .mc-hero-prev { left: 10px; }
  .mc-hero-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-hero-carousel img.mc-hero-slide { transition: none; }
}

/* ---- Painterly texture accent ----
   FIXED: previously used ::before/::after pseudo-elements + z-index to blend a texture photo
   behind the content. That relied on ".e-con-inner" being the container's flex wrapper and on
   z-index stacking that didn't hold in this Elementor version — result: the dark overlay painted
   OVER the text, making it nearly unreadable (confirmed visually). Sections needing a background
   photo now use Elementor's own native background_image + background_overlay_color settings
   (the same mechanism already proven reliable on the Hero) instead of custom CSS layering. */
.mc-texture-accent {
  background-color: #0A0A0A;
}

/* Hero logo mark */
.mc-hero-logo img {
  filter: drop-shadow(0 6px 30px rgba(200,164,93,.35));
}

/* Force dark background on Astra's own wrappers so nothing shows through white between sections */
#content, .site-content, .ast-container, #primary, .ast-separate-container .ast-article-single, main#main {
  background-color: #0A0A0A !important;
}

/* ---- Manifesto / big statement quote screen ---- */
.mc-manifesto blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.5;
  color: #F8F8F6;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.mc-manifesto .mc-quote-mark {
  color: #C8A45D;
  font-size: 60px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
}
.mc-manifesto em { color: #C8A45D; font-style: normal; }

/* ---- Collections: full-bleed large bands ---- */
.mc-band-tile { position: relative; overflow: hidden; width: 100%; }
.mc-band-tile .elementor-widget-image { position: absolute; inset: 0; margin: 0; z-index: 0; }
.mc-band-tile .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.mc-band-tile:hover .elementor-widget-image img { transform: scale(1.05); }
.mc-band-tile::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.55) 100%);
  transition: background .5s ease;
}
.mc-band-tile:hover::after { background: linear-gradient(100deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.4) 100%); }
.mc-band-tile .elementor-widget-heading { position: relative; z-index: 2; }
.mc-band-tile .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(32px, 5vw, 64px) !important;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #F8F8F6 !important;
}
.mc-band-tile .elementor-widget-text-editor { position: relative; z-index: 2; }

/* ---- Lifestyle placeholders (until real interior photos exist) ---- */
.mc-lifestyle-tile {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg,#141414,#0A0A0A 60%);
  border: 1px solid rgba(200,164,93,.18);
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 340px;
}
.mc-lifestyle-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 300px 200px at 50% 30%, rgba(200,164,93,.08), transparent 70%);
}
.mc-lifestyle-tile .elementor-widget-heading { position: relative; z-index: 1; padding-bottom: 24px; }
.mc-lifestyle-tile .elementor-heading-title {
  font-size: 15px !important; letter-spacing: 3px; text-transform: uppercase; color: #C9C9C9 !important;
}

/* ---- Product cards: hide clutter, show only image/name/price/button ---- */
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .product-category,
.woocommerce ul.products li.product .sku,
.woocommerce ul.products li.product mark.count,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product > a > span.onsale {
  display: none !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
}

/* ---- Section reveal on scroll (paired with JS) ---- */
.mc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.mc-reveal.mc-in { opacity: 1; transform: translateY(0); }

/* ==== Boutique (Shop archive) ==== */
body.woocommerce-shop #primary,
body.post-type-archive-product #primary,
body.woocommerce-page.woocommerce-shop .ast-container,
body.page-id-332 .ast-container {
  background: #0A0A0A;
  max-width: 100% !important;
  padding: 0 !important;
}
.mc-shop-banner {
  text-align: center;
  padding: 140px 20px 70px;
  background: #0A0A0A;
}
.mc-shop-banner h1 {
  font-family: 'Playfair Display', serif;
  color: #F8F8F6;
  font-size: 48px;
  letter-spacing: 2px;
  margin: 0 0 14px;
}
.mc-shop-banner p {
  color: #C9C9C9;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
}
.woocommerce-shop ul.products,
.post-type-archive-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 40px 60px 140px !important;
  background: #0A0A0A;
}
.woocommerce-shop ul.products li.product,
.post-type-archive-product ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
.woocommerce-shop .woocommerce-ordering,
.woocommerce-shop .woocommerce-result-count {
  color: #C9C9C9;
  font-family: 'Manrope', sans-serif;
  padding: 0 60px;
}
.woocommerce-shop .woocommerce-ordering select {
  background: #161616; color: #F8F8F6; border: 1px solid #333;
}
@media (max-width: 1024px) {
  .woocommerce-shop ul.products, .post-type-archive-product ul.products { grid-template-columns: repeat(2, 1fr) !important; padding: 30px !important; }
}
@media (max-width: 640px) {
  .woocommerce-shop ul.products, .post-type-archive-product ul.products { grid-template-columns: 1fr !important; padding: 20px !important; }
  .mc-shop-banner { padding: 100px 20px 50px; }
  .mc-shop-banner h1 { font-size: 34px; }
}

/* ==== Single product page ==== */
body.single-product #primary,
body.single-product .ast-container {
  background: #0A0A0A;
  color: #F8F8F6;
}
.single-product div.product .product_title {
  font-family: 'Playfair Display', serif;
  color: #F8F8F6;
  font-size: 34px;
}
.single-product div.product p.price {
  color: #C8A45D !important;
  font-size: 22px;
}
.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-Tabs-panel {
  color: #C9C9C9;
  font-family: 'Manrope', sans-serif;
}
.single-product div.product form.cart .button,
.single-product div.product .single_add_to_cart_button {
  background: #C8A45D !important;
  color: #111111 !important;
  border-radius: 2px;
  border: 1px solid #C8A45D;
  padding: 14px 34px;
  transition: background .3s ease, color .3s ease;
}
.single-product div.product form.cart .button:hover,
.single-product div.product .single_add_to_cart_button:hover {
  background: transparent !important;
  color: #C8A45D !important;
}
.single-product .woocommerce-tabs ul.tabs li a { color: #C9C9C9; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: #C8A45D; }
.single-product .related.products h2 {
  font-family: 'Playfair Display', serif;
  color: #F8F8F6;
}
/* hide SKU/category clutter on single product too */
.single-product .product_meta { display: none !important; }

.woocommerce-shop .woocommerce-info,
.post-type-archive-product .woocommerce-info {
  background: #161616; color: #C9C9C9; border-top-color: #C8A45D;
  max-width: 1400px; margin: 0 auto 140px; font-family: 'Manrope', sans-serif;
}

/* Product image zoom on hover (loop) */
.woocommerce ul.products li.product a img { transition: transform .8s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* ==== Why-choose cards: real premium cards, gold SVG icons ==== */
.mc-why-card {
  background: #131313;
  border: 1px solid rgba(200,164,93,.22);
  border-radius: 3px;
  transition: border-color .3s ease, transform .3s ease;
}
.mc-why-card:hover { border-color: rgba(200,164,93,.6); transform: translateY(-4px); }
.mc-why-icon { width: 40px; height: 40px; margin: 0 auto 18px; display: block; }
.mc-why-icon svg { width: 100%; height: 100%; }

/* ==== Footer v2 ==== */
.mc-footer-legal {
  text-align: center; padding: 18px 20px; font-size: 11px; color: #666;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mc-footer-legal a { color: #888; text-decoration: none; margin: 0 8px; }
.mc-footer-legal a:hover { color: #C8A45D; }

/* ==== Consistent section padding (no bare 100vh voids except Hero) ==== */
.mc-section { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 767px) {
  .mc-section { padding-top: 48px; padding-bottom: 48px; }
  .mc-hero-min { min-height: 72vh !important; }
}

/* "L'art réinventé" pre-composed image sits flush against the Hero carousel
   above it, so it opts out of the standard section padding. */
.elementor-element-intro001.mc-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Collections page: gallery-frame cards (3 + 2 centered), no photos ----
   Each card is a thin brushed-gold "gallery frame" holding a fine gold line-icon
   representing the collection's universe — never an actual artwork/photo. */
.mc-collections-wrap { padding: 40px 40px 90px; }
.mc-collections-intro { max-width: 960px; margin: 0 auto 16px; text-align: center; }
.mc-collections-intro h1 {
  font-family: Montserrat, sans-serif !important; font-weight: 700; color: #F8F8F6 !important;
  font-size: clamp(32px, 3vw, 44px); letter-spacing: 1px; margin: 0;
}
.mc-collections-intro p {
  font-family: Manrope, sans-serif; color: #C9C9C9; font-size: 16px;
  line-height: 1.75; margin: 14px auto 0; max-width: 940px;
}
.mc-collections-stat {
  text-align: center; font-family: Manrope, sans-serif; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #C8A45D;
  margin: 0 0 22px;
}
/* Flexbox (not grid) so a partial last row centers itself automatically via
   justify-content — CSS Grid would leave the trailing 2 cards flush left.
   3 columns by design: Animaux/Humains/Sports, then Couples/Divers centered. */
.mc-coll-grid {
  max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 44px 48px;
}
.mc-coll-card {
  display: block; text-decoration: none !important;
  flex: 0 0 calc((100% - 96px) / 3);
}
/* Brushed-gold gallery frame: metal band (padding) + inset bevel shadows for
   depth, a matte-black inner "canvas" recessed via its own inset shadow, and
   two soft corner glints to read as polished metal catching light from above.
   Same construction proven on .mc-why-frame (Pourquoi choisir), scaled down
   and thinned for this page's more minimal brief — no rotation/shine-sweep,
   no rounded corners, no ornamentation. */
.mc-coll-frame {
  position: relative; aspect-ratio: 2 / 1;
  padding: 9px;
  border-radius: 3px;
  background: linear-gradient(152deg, #ddbd7c 0%, #8a6b34 20%, #f1dc9f 38%, #7d5f2c 58%, #e9d093 76%, #8a6b34 90%, #ddbd7c 100%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.4),
    0 2px 6px rgba(0,0,0,.32),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -1px 2px rgba(0,0,0,.55);
  transition: transform .4s ease, box-shadow .4s ease, filter .4s ease;
}
.mc-coll-frame::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,255,255,.55), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.32), transparent 22%);
  opacity: .75;
  pointer-events: none;
  transition: opacity .4s ease;
}
.mc-coll-card:hover .mc-coll-frame {
  transform: translateY(-5px);
  filter: brightness(1.09);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 4px 10px rgba(0,0,0,.34),
    inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 -1px 2px rgba(0,0,0,.6);
}
.mc-coll-card:hover .mc-coll-frame::before { opacity: 1; }
.mc-coll-frame-inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 1px;
  background: linear-gradient(160deg, #0d0d0c 0%, #030303 100%);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  transition: background .4s ease;
}
.mc-coll-card:hover .mc-coll-frame-inner {
  background: linear-gradient(160deg, #151513 0%, #060605 100%);
}
.mc-coll-icon {
  width: 24%; max-width: 52px;
  color: rgba(200,164,93,.7);
  transition: color .4s ease;
}
.mc-coll-card:hover .mc-coll-icon { color: #F3D9A4; }
.mc-coll-body { padding-top: 26px; text-align: center; }
.mc-coll-title {
  font-family: 'Playfair Display', serif !important; font-weight: 600;
  color: #FFFFFF !important; font-size: clamp(20px, 1.6vw, 26px);
  margin: 0 0 12px; letter-spacing: .3px;
}
.mc-coll-desc {
  font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14px;
  line-height: 1.65; margin: 0 auto 16px; max-width: 32ch;
}
.mc-coll-link {
  font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .07em;
  text-transform: uppercase; color: #8c8c8c; font-weight: 500;
  transition: color .4s ease;
}
.mc-coll-card:hover .mc-coll-link { color: #C8A45D; }
@media (max-width: 1024px) {
  .mc-coll-card { flex-basis: calc((100% - 48px) / 2); }
}
@media (max-width: 767px) {
  .mc-collections-wrap { padding: 32px 20px 60px; }
  .mc-coll-grid { gap: 40px 20px; }
  .mc-coll-card { flex-basis: 100%; }
  .mc-collections-stat { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-coll-frame, .mc-coll-frame::before, .mc-coll-frame-inner, .mc-coll-icon, .mc-coll-link { transition: none; }
}

/* ---- Category hub pages (Niveau 2): Animaux / Humains / Couples / Sports / Divers ----
   Default WooCommerce/Astra archive title ("Animaux", "Humains", etc.) is hidden on all
   5 top-level category pages; a custom sub-category tab bar (injected by custom.js) replaces
   it on the 4 categories that have children. The product grid stays hidden on those 4 until a
   specific sub-category is chosen — Couples has no children, so its grid shows directly. */
body.mc-cat-top .woocommerce-products-header { display: none !important; }
body.mc-cat-hub ul.products:not(.mc-search-results-grid) { display: none !important; }
.mc-cat-tabs {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  max-width: 1100px; margin: 0 auto; padding: 34px 40px 60px;
}
.mc-cat-tab {
  font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: #C9C9C9; text-decoration: none;
  padding: 11px 24px; border: 1px solid rgba(200,164,93,.35); border-radius: 2px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.mc-cat-tab:hover { color: #0A0A0A; background: #C8A45D; border-color: #C8A45D; }
@media (max-width: 767px) {
  .mc-cat-tabs { padding: 110px 20px 30px; gap: 10px; }
  .mc-cat-tab { font-size: 12px; padding: 9px 16px; }
}

/* ---- Remove the redundant "Continuer la lecture" / "Read more" button from
   product loop cards site-wide (shop, category archives, related products) —
   the whole card (image + title) already links to the product, so the button
   added nothing. Both the hover-icon overlay button and the text button below
   the title show this same string, so both are hidden. */
.astra-shop-thumbnail-wrap .ast-on-card-button,
a.button.product_type_simple {
  display: none !important;
}

/* ---- Instant visual search (category & sub-category archive pages) ----
   100% client-side: builds a local searchable index from the public, unauthenticated
   wp/v2/product REST endpoint (title + content + excerpt + category/tag names via
   _embed=1), so it needs no new server code and never touches credentials. */
.mc-search-wrap {
  max-width: 700px; margin: 0 auto 6px; padding: 0 20px;
}
.mc-search-wrap.mc-search-top { margin-top: 0; padding-top: 150px; }
.mc-search-bar {
  position: relative; display: flex; align-items: center;
  background: #131211; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 0 18px; height: 52px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.mc-search-bar:focus-within {
  border-color: rgba(200,164,93,.7);
  box-shadow: 0 0 0 3px rgba(200,164,93,.12);
}
.mc-search-icon { width: 18px; height: 18px; color: #C8A45D; flex: 0 0 18px; margin-right: 12px; }
.mc-search-input {
  flex: 1; min-width: 0; background: transparent !important; border: none !important; outline: none;
  color: #F8F8F6 !important; font-family: Manrope, sans-serif; font-size: 15px;
  box-shadow: none !important;
}
.mc-search-input::placeholder { color: #767676 !important; }
.mc-search-spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; margin-left: 10px;
  border: 2px solid rgba(200,164,93,.25); border-top-color: #C8A45D;
  animation: mc-search-spin .7s linear infinite;
}
@keyframes mc-search-spin { to { transform: rotate(360deg); } }
.mc-search-confirm {
  background: none; border: none; color: #C8A45D; cursor: pointer; font-size: 16px;
  font-weight: 700; line-height: 1; padding: 4px 6px; flex: 0 0 auto; transition: color .2s ease;
}
.mc-search-confirm:hover { color: #F3D9A4; }
.mc-search-clear-x {
  background: none; border: none; color: #767676; cursor: pointer; font-size: 17px;
  line-height: 1; padding: 4px 2px 4px 8px; flex: 0 0 auto; transition: color .2s ease;
}
.mc-search-clear-x:hover { color: #F3D9A4; }
.mc-search-status {
  text-align: center; font-family: Manrope, sans-serif; font-size: 13px; color: #909090;
  margin: 18px 0 0; min-height: 16px;
}
.mc-search-status strong { color: #C8A45D; font-weight: 600; }
.mc-search-clear-btn {
  display: none; margin: 10px auto 0; background: none; border: 1px solid rgba(200,164,93,.4);
  color: #C8A45D; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; padding: 9px 20px; border-radius: 2px; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.mc-search-clear-btn:hover { background: #C8A45D; color: #0A0A0A; }
.mc-search-active .mc-search-clear-btn { display: inline-block; }
.mc-search-empty {
  text-align: center; color: #9a9a9a; font-family: Manrope, sans-serif; font-size: 15px;
  line-height: 1.7; padding: 50px 20px 70px; max-width: 460px; margin: 0 auto;
}
/* Hide the native grid/result-count/ordering/pagination only while a search is
   active — the pagination nav in particular sits right after the grid and was
   left showing (it belongs to the un-filtered category, e.g. page 1-16 of the
   full Animaux archive), pushing the actual matching images out of view. */
.mc-search-active ul.products:not(.mc-search-results-grid),
.mc-search-active .woocommerce-result-count,
.mc-search-active .woocommerce-ordering,
.mc-search-active nav.woocommerce-pagination,
.mc-search-active .woocommerce-pagination { display: none !important; }
/* Top-level Collections page (5 gallery-frame tiles) — same active-search
   behaviour: the tiles hide while a query is live, matching works appear
   directly below the bar instead. */
.mc-search-active .mc-coll-grid { display: none !important; }
.mc-search-wrap.mc-search-collections { padding-top: 0; margin-bottom: 20px; }
.mc-search-results-grid { margin-top: 8px; }
@media (max-width: 767px) {
  .mc-search-wrap { padding: 0 16px; }
  .mc-search-wrap.mc-search-top { padding-top: 110px; }
  .mc-search-bar { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-search-spinner { animation: none; }
}

/* =========================================================================
   PRODUCT CONFIGURATOR — deployed catalogue-wide on every single-product
   page (gated by body.mc-cfg-active, added by custom.js on all of them). */
body.mc-cfg-active .site-content,
body.mc-cfg-active #content,
body.mc-cfg-active #primary { background: #0A0A0A; }
.mc-cfg-demo-banner {
  position: sticky; top: 0; z-index: 50; text-align: center;
  background: #3a2e0f; color: #ffd580; border-bottom: 1px solid #8a6a2f;
  font-family: Manrope, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 16px;
}
body.postid-921 #primary, body.mc-cfg-active #primary { margin-top: 0 !important; }

.mc-cfg {
  display: grid; grid-template-columns: 57% 43%; column-gap: 56px; row-gap: 14px;
  max-width: 1500px; margin: 0 auto; padding: 20px 40px 100px;
  font-family: Manrope, sans-serif; color: #F8F8F6;
}
.mc-cfg-cat { grid-column: 1 / -1; font-size: 11px; letter-spacing: .1em; line-height: 1.3; margin: 0; color: #C8A45D; text-transform: uppercase; }
.mc-cfg-left { position: sticky; top: 70px; align-self: start; }
.mc-cfg-canvas-wrap { position: relative; border-radius: 4px; overflow: hidden; background: #050504; border: 1px solid rgba(200,164,93,.22); }
.mc-cfg-canvas { display: block; width: 100%; height: auto; }
.mc-cfg-auto-crop-caption {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: #9a9a9a; text-align: center;
}

.mc-cfg-right { padding-top: 0; }
.mc-cfg-title { font-family: 'Playfair Display', serif !important; font-weight: 600; color: #F8F8F6 !important; font-size: clamp(28px, 2.6vw, 40px); margin: 0 0 14px; letter-spacing: .3px; }
.mc-cfg-desc { font-size: 14.5px; line-height: 1.7; color: #b8b8b8; margin-bottom: 36px; max-width: 100%; }
.mc-cfg-desc p { margin: 0; }

.mc-cfg-step { padding: 28px 0; border-top: 1px solid rgba(255,255,255,.07); }
.mc-cfg-step:first-of-type { border-top: none; padding-top: 0; }
.mc-cfg-step-title { display: flex; align-items: center; gap: 12px; font-family: 'Playfair Display', serif !important; font-weight: 600; font-size: 19px; color: #F8F8F6 !important; margin: 0 0 18px; letter-spacing: .2px; }
.mc-cfg-step-num {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(200,164,93,.5); color: #C8A45D;
  font-family: Manrope, sans-serif; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.mc-cfg-family-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.mc-cfg-family-tab {
  font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 2px; border: 1px solid #2a2a2a; background: none; color: #9a9a9a; cursor: pointer;
  transition: all .25s ease;
}
.mc-cfg-family-tab.active { border-color: #C8A45D; color: #F3D9A4; background: rgba(200,164,93,.08); }
.mc-cfg-family-tab:hover { color: #F3D9A4; border-color: rgba(200,164,93,.5); }

.mc-cfg-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mc-cfg-format-card {
  position: relative; text-align: left; background: #131211; border: 1px solid #2a2a2a; border-radius: 3px;
  padding: 14px; cursor: pointer; transition: all .25s ease; display: flex; flex-direction: column; gap: 4px;
}
.mc-cfg-format-card:hover { border-color: rgba(200,164,93,.5); }
.mc-cfg-format-card.active { border-color: #C8A45D; background: rgba(200,164,93,.1); box-shadow: inset 0 0 0 1px rgba(200,164,93,.35); }
.mc-cfg-format-card.active::after {
  content: '✓'; position: absolute; top: 8px; right: 10px; color: #C8A45D; font-size: 13px; font-weight: 700;
}
.mc-cfg-format-dims { font-family: 'Playfair Display', serif; font-size: 16px; color: #F8F8F6; }
.mc-cfg-format-orientation { font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .04em; }
.mc-cfg-format-price { font-size: 12px; color: #C8A45D; margin-top: 4px; }
.mc-cfg-format-badge {
  font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: #F3D9A4;
  background: rgba(200,164,93,.15); border-radius: 2px; padding: 3px 6px; align-self: flex-start; margin-top: 2px;
}
.mc-cfg-custom-note { font-size: 12.5px; color: #8a8a8a; margin: 18px 0 6px; line-height: 1.6; }
.mc-cfg-custom-link { font-size: 12.5px; color: #C8A45D; text-decoration: underline; text-underline-offset: 3px; }
.mc-cfg-custom-link:hover { color: #F3D9A4; }

.mc-cfg-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mc-cfg-choice-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.mc-cfg-choice-card {
  position: relative; background: #131211; border: 1px solid #2a2a2a; border-radius: 3px; padding: 18px;
  cursor: pointer; transition: all .25s ease;
}
.mc-cfg-choice-card:hover { border-color: rgba(200,164,93,.5); }
.mc-cfg-choice-card.active { border-color: #C8A45D; background: rgba(200,164,93,.08); }
.mc-cfg-choice-check {
  position: absolute; top: 12px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #444; color: transparent; font-size: 11px; display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.mc-cfg-choice-card.active .mc-cfg-choice-check { border-color: #C8A45D; background: #C8A45D; color: #0A0A0A; }
.mc-cfg-choice-card h3 { font-family: 'Playfair Display', serif !important; font-weight: 600; font-size: 15px; color: #F8F8F6 !important; margin: 0 26px 8px 0; line-height: 1.35; }
.mc-cfg-choice-card p { font-size: 12.5px; line-height: 1.6; color: #a8a8a8; margin: 0 0 12px; }
.mc-cfg-choice-price { font-size: 12px; color: #C8A45D; font-weight: 600; }
.mc-cfg-auto-note { font-size: 12.5px; color: #e8c164; background: rgba(200,164,93,.08); border-left: 2px solid #C8A45D; padding: 10px 14px; margin-top: 14px; line-height: 1.6; }

.mc-cfg-summary { background: #131211; border: 1px solid #2a2a2a; border-radius: 4px; padding: 22px 24px; }
.mc-cfg-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.mc-cfg-summary-row span:first-child { color: #9a9a9a; }
.mc-cfg-summary-row span:last-child { color: #F8F8F6; text-align: right; }
.mc-cfg-summary-total { border-bottom: none; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(200,164,93,.3); }
.mc-cfg-summary-total span { font-size: 17px; font-weight: 700; }
.mc-cfg-summary-total span:first-child { color: #F8F8F6; }
.mc-cfg-summary-total span:last-child { color: #F3D9A4; font-family: 'Playfair Display', serif; }

.mc-cfg-add-to-cart {
  width: 100%; margin-top: 20px; padding: 16px; border-radius: 2px; border: none;
  background: #C8A45D; color: #0A0A0A; font-family: Manrope, sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .25s ease;
}
.mc-cfg-add-to-cart:hover:not(:disabled) { background: #F3D9A4; }
.mc-cfg-add-to-cart:disabled { background: #2a2a2a; color: #666; cursor: not-allowed; }
.mc-cfg-below-btn { font-size: 12px; color: #8a8a8a; text-align: center; margin: 14px 0 6px; line-height: 1.6; }
.mc-cfg-contact-link { display: block; text-align: center; font-size: 12.5px; color: #C8A45D; text-decoration: underline; text-underline-offset: 3px; }
.mc-cfg-contact-link:hover { color: #F3D9A4; }
.mc-cfg-phase-note {
  margin-top: 22px; font-size: 11px; color: #6a6a6a; text-align: center; line-height: 1.6;
  border-top: 1px dashed #2a2a2a; padding-top: 14px;
}

/* ---- Guide interactif des dimensions (prototype UX) ---- */
.mc-cfg-dim-guide-link {
  display: inline-block; background: none; border: none; padding: 0; margin: 8px 0 18px;
  font-family: Manrope, sans-serif; font-size: 12.5px; color: #C8A45D; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; text-transform: none;
}
.mc-cfg-dim-guide-link:hover { color: #F3D9A4; }

/* Réagencement titre/description sous l'image + ligne d'en-tête étape 1 —
   validé sur la fiche pilote (post 921), déployé à tout le catalogue. Voir
   initProductLayoutRework() dans custom.js. */
body.mc-cfg-active .mc-cfg-title { margin-top: 28px; }
body.mc-cfg-active .mc-cfg-step1-headrow {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px; margin-bottom: 18px;
}
body.mc-cfg-active .mc-cfg-step1-headrow .mc-cfg-step-title { margin-bottom: 0; }
body.mc-cfg-active .mc-cfg-dim-guide-link { font-size: 16px; margin: 0; }

.mc-cfg-modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(5,5,4,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.mc-cfg-modal-overlay.open { opacity: 1; pointer-events: auto; }
body.mc-cfg-modal-lock { overflow: hidden; }

.mc-cfg-modal {
  position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: #0A0A0A; border: 1px solid rgba(200,164,93,.25); border-radius: 4px;
  padding: 36px 32px 30px; text-align: center; color: #F8F8F6;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform: scale(.96); transition: transform .3s ease;
}
.mc-cfg-modal-overlay.open .mc-cfg-modal { transform: scale(1); }

.mc-cfg-modal-close {
  position: absolute; top: 16px; right: 18px; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: #8a8a8a; padding: 6px;
}
.mc-cfg-modal-close:hover { color: #F3D9A4; }

.mc-cfg-modal-eyebrow {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #C8A45D; margin: 0 0 8px;
}
.mc-cfg-modal-title {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; margin: 0 0 22px; color: #F8F8F6;
}

/* ---- Immersive layout (near-fullscreen): scene left, format picker right,
   zoom/action controls in a footer bar. The room photo itself is sized in
   JS (mcFitRoomBox) to fill its column like object-fit:contain would. ---- */
.mc-cfg-modal-immersive {
  max-width: 95vw; width: 95vw; max-height: 92vh; height: 92vh;
  padding: 22px 28px 20px; text-align: left; display: flex; flex-direction: column;
}
.mc-cfg-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex: 0 0 auto; }
.mc-cfg-modal-immersive .mc-cfg-modal-eyebrow { margin: 0 0 4px; }
.mc-cfg-modal-immersive .mc-cfg-modal-title { margin: 0; font-size: 20px; }
.mc-cfg-modal-immersive .mc-cfg-modal-close { position: static; flex: 0 0 auto; }

.mc-cfg-modal-body { display: flex; gap: 28px; flex: 1 1 auto; min-height: 0; margin-top: 16px; }
.mc-cfg-modal-scene-col { flex: 1 1 68%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mc-cfg-modal-room-frame {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
}
.mc-cfg-modal-side-col {
  flex: 0 0 300px; min-width: 260px; max-width: 320px; min-height: 0;
  display: flex; flex-direction: column; overflow-y: auto;
}

.mc-cfg-modal-room {
  position: relative; overflow: hidden; border-radius: 3px; background: #050504;
}
.mc-cfg-modal-scene {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.mc-cfg-modal-room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.mc-cfg-modal-art {
  position: absolute; background-size: cover; background-position: center;
  /* No decorative frame — reads as an actual canvas on the wall: a soft
     natural drop shadow for depth, plus a faint inset shade along the
     bottom/right suggesting the canvas's thin (1.5") wrapped edge. */
  box-shadow: 0 10px 22px rgba(0,0,0,.4), inset -3px -3px 5px rgba(0,0,0,.14);
  transition: width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1),
    left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
  cursor: grab; touch-action: none;
}
.mc-cfg-modal-art:hover {
  box-shadow: 0 10px 22px rgba(0,0,0,.4), inset -3px -3px 5px rgba(0,0,0,.14), 0 0 0 2px rgba(200,164,93,.5);
}
.mc-cfg-modal-art.dragging {
  cursor: grabbing; transition: box-shadow .2s ease;
  box-shadow: 0 14px 28px rgba(0,0,0,.48), inset -3px -3px 5px rgba(0,0,0,.14), 0 0 0 2px rgba(200,164,93,.85);
}

.mc-cfg-modal-hint {
  font-size: 11.5px; color: #ffffff; font-style: italic; line-height: 1.55; margin: 10px 0 0; text-align: center; flex: 0 0 auto;
}

.mc-cfg-modal-caption.mc-cfg-modal-dims {
  display: block; color: #C8A45D; font-size: 13px; font-weight: 600; letter-spacing: .02em; flex: 0 0 auto;
}

.mc-cfg-modal-picker {
  margin-top: 16px; text-align: left; border-top: 1px solid rgba(255,255,255,.07); padding-top: 16px;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.mc-cfg-modal-picker-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; margin: 0 0 12px; flex: 0 0 auto;
}
.mc-cfg-modal-guide-tabs { margin-bottom: 14px; flex: 0 0 auto; }
.mc-cfg-modal-guide-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px;
}
.mc-cfg-modal-guide-grid .mc-cfg-format-card { padding: 9px 8px; gap: 2px; }
.mc-cfg-modal-guide-grid .mc-cfg-format-dims { font-size: 12px; }
.mc-cfg-modal-guide-grid .mc-cfg-format-price { font-size: 11px; color: #8a8a8a; }
.mc-cfg-modal-guide-grid .mc-cfg-format-card.active .mc-cfg-format-price { color: #C8A45D; }

@media (max-width: 900px) {
  .mc-cfg-modal-immersive { width: 96vw; max-width: 96vw; height: 94vh; max-height: 94vh; padding: 18px 16px 16px; }
  .mc-cfg-modal-body { flex-direction: column; gap: 16px; }
  .mc-cfg-modal-scene-col { flex: 1 1 52%; }
  .mc-cfg-modal-side-col { flex: 1 1 40%; max-width: none; min-width: 0; }
}

@media (max-width: 640px) {
  .mc-cfg-modal { padding: 28px 18px 24px; }
  .mc-cfg-modal-title { font-size: 19px; margin-bottom: 18px; }
  .mc-cfg-modal-guide-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

@media (max-width: 1024px) {
  .mc-cfg { grid-template-columns: 1fr; padding: 20px 24px 70px; gap: 32px; }
  .mc-cfg-left { position: static; }
}
@media (max-width: 640px) {
  .mc-cfg { padding: 16px 16px 50px; }
  .mc-cfg-choice-row, .mc-cfg-choice-row-3 { grid-template-columns: 1fr; }
  .mc-cfg-format-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .mc-cfg-reference { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-cfg-zoom-btn, .mc-cfg-format-card, .mc-cfg-choice-card, .mc-cfg-add-to-cart { transition: none; }
}

/* ============================================================
   GALLERY CATEGORY PAGES — shared redesign applied identically to
   all 7 top-level categories (Animaux, Femmes, Hommes, Couples,
   Sports, Divers, Personnages fictifs). Every rule below keys off
   body.mc-gallery-page, one class set synchronously (before first
   paint — see initGalleryPageClass in custom.js) for exactly those
   7 pages, so there is a single place to touch if the design ever
   changes for all of them at once, and a single place (the
   MC_GALLERY_CATEGORIES array in custom.js) to add or remove one.
   No other category page is affected.
   ============================================================ */
body.mc-gallery-page .woocommerce-products-header { display: none; }

body.mc-gallery-page .woocommerce-breadcrumb {
  font-family: Manrope, sans-serif; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: #7a7a7a; margin: 0 0 20px;
}
body.mc-gallery-page .woocommerce-breadcrumb a { color: #9a9a9a; }

/* The search bar lives above the whole category layout (see
   .mc-search-hero below), so it's no longer a child of .ast-woocommerce-
   container — dropped from this reorder. Sort ("Tri") is removed outright
   per the brief rather than just reordered. The native grid, hidden by
   default on hub categories (see the mc-cat-hub rule above, Animaux/Sports/
   Divers only) so that only the tab bar shows, is explicitly restored here:
   with the result count and "Produits" both requested as visible, hiding
   the grid under them would read as broken, not intentional. Categories
   without sub-categories never get mc-cat-hub in the first place, so their
   grid was never hidden and this override is simply inert for them —
   nothing extra needed to handle that case. */
body.mc-gallery-page .ast-woocommerce-container { display: flex; flex-direction: column; }
body.mc-gallery-page .ast-woocommerce-container > .woocommerce-breadcrumb { order: 2; }
body.mc-gallery-page .ast-woocommerce-container > .woocommerce-result-count { order: 3; }
body.mc-gallery-page .ast-woocommerce-container > ul.products { order: 4; }
body.mc-gallery-page .ast-woocommerce-container > .woocommerce-pagination { order: 5; }
body.mc-gallery-page .woocommerce-ordering { display: none !important; }
body.mc-gallery-page.mc-cat-hub .ast-woocommerce-container > ul.products:not(.mc-search-results-grid) {
  display: grid !important;
}

/* Tightened on every gallery category — the brief asked for the whole top of
   the page (tabs, search, works, start of the grid) to be reachable without
   scrolling on a standard screen, so vertical rhythm is deliberately denser
   here than the site's usual spacing. Only Animaux/Sports/Divers actually
   render a .mc-cat-tabs bar (the other 4 have no sub-categories), so this is
   inert — not just inconsistent-looking — on the rest; no separate "no
   sub-categories" spacing rule is needed, the layout closes the gap on its
   own since the element simply isn't there. */
body.mc-gallery-page .mc-cat-tabs { padding: 16px 40px 26px; }

.mc-search-wrap.mc-search-hero {
  margin: 0 auto; padding: 26px 20px 6px;
}
@media (max-width: 767px) {
  .mc-search-wrap.mc-search-hero { padding: 18px 16px 4px; }
}

/* =========================================================================
   CONFIGURATEUR — ajout au panier : indicateur de chargement, message
   d'erreur, et fenêtre de confirmation post-ajout (misterco-configurator-cart).
   ========================================================================= */

.mc-cfg-add-to-cart.mc-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.mc-cfg-add-to-cart.mc-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mc-spin 0.7s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

.mc-cfg-cart-error {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: rgba(178, 58, 58, 0.12);
  border: 1px solid rgba(178, 58, 58, 0.4);
  color: #d98080;
  font-size: 12.5px;
  border-radius: 2px;
  display: none;
}
.mc-cfg-cart-error.show { display: block; }

body.mc-cart-modal-lock { overflow: hidden; }

.mc-cart-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* visibility switches to hidden only once the fade-out finishes, and back
     to visible instantly on open — without this, the modal's buttons stay
     keyboard-focusable (just invisible) between closes, which is a real
     keyboard-trap bug: opacity alone never removes elements from tab order. */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.mc-cart-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.mc-cart-modal {
  background: #0f0f0f;
  color: #f5f0e6;
  border: 1px solid rgba(197, 164, 90, 0.35);
  border-radius: 4px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 28px 24px;
  position: relative;
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.mc-cart-modal-overlay.open .mc-cart-modal { transform: translateY(0); }

.mc-cart-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: #cfc6b3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}
.mc-cart-modal-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #c5a45a;
  color: #c5a45a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 0 16px;
}
.mc-cart-modal h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
  font-weight: 600;
  color: #f5f0e6;
}
.mc-cart-modal-body { display: flex; gap: 16px; margin-bottom: 24px; }
.mc-cart-modal-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  background: #1c1c1c;
}
.mc-cart-modal-details { min-width: 0; }
.mc-cart-modal-work-title {
  font-size: 15px;
  margin: 0 0 10px;
  color: #f5f0e6;
  font-weight: 500;
}
.mc-cart-modal-specs {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12.5px;
}
.mc-cart-modal-specs > div { display: contents; }
.mc-cart-modal-specs dt { color: #8f8676; margin: 0; }
.mc-cart-modal-specs dd { margin: 0; color: #e4ddcb; }
.mc-cart-modal-price { font-size: 17px; color: #c5a45a; margin: 0; font-weight: 600; }

.mc-cart-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mc-cart-modal-continue,
.mc-cart-modal-viewcart {
  flex: 1 1 auto;
  min-width: 160px;
  text-align: center;
  padding: 13px 18px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
.mc-cart-modal-continue {
  background: transparent;
  border: 1px solid #6b6455;
  color: #e4ddcb;
}
.mc-cart-modal-viewcart {
  background: #c5a45a;
  border: 1px solid #c5a45a;
  color: #0f0f0f;
}
.mc-cart-modal-continue:hover,
.mc-cart-modal-viewcart:hover { opacity: 0.85; }

@media (max-width: 480px) {
  .mc-cart-modal { padding: 24px 18px 18px; }
  .mc-cart-modal-body { flex-direction: column; }
  .mc-cart-modal-img { width: 100%; height: 160px; }
  .mc-cart-modal-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-cart-modal-overlay, .mc-cart-modal { transition: none; }
  .mc-cfg-add-to-cart.mc-loading::after { animation: none; border-top-color: rgba(255, 255, 255, 0.6); }
}

/* =========================================================================
   PANIER / COMMANDE / MON COMPTE — habillage MISTER & CO.
   Portée strictement limitée à ces 3 pages via les classes body natives de
   WooCommerce (body.woocommerce-cart / -checkout / -account) : aucun style
   ci-dessous ne peut s'appliquer ailleurs sur le site. Aucun name/id/logique
   WooCommerce n'est modifié — uniquement l'apparence des mêmes éléments.
   ========================================================================= */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  --mcwc-bg: #0a0a0a;
  --mcwc-panel: #111111;
  --mcwc-line: rgba(197, 164, 90, 0.4);
  --mcwc-line-soft: rgba(255, 255, 255, 0.14);
  --mcwc-gold: #c5a45a;
  --mcwc-gold-soft: rgba(197, 164, 90, 0.14);
  --mcwc-text: #f5f2ea;
  --mcwc-text-dim: #d9d0bd;
  --mcwc-text-mute: #a89f8c;
  --mcwc-error: #e28080;
  --mcwc-error-bg: rgba(200, 90, 90, 0.14);
  --mcwc-success: #8fbf8a;
  --mcwc-success-bg: rgba(120, 175, 115, 0.14);
  --mcwc-info: #8fb4d9;
  --mcwc-info-bg: rgba(120, 155, 200, 0.14);
}

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce {
  color: var(--mcwc-text);
  font-family: 'Manrope', sans-serif;
}
body.woocommerce-cart .woocommerce a,
body.woocommerce-checkout .woocommerce a,
body.woocommerce-account .woocommerce a {
  color: inherit;
}
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header {
  border-bottom: 1px solid var(--mcwc-line-soft);
  padding-bottom: 22px;
  margin-bottom: 8px;
}
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-account .entry-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

/* ---- Bandeaux de notice WooCommerce (succès / erreur / info) — jamais
   masqués, juste réhabillés pour rester dans la charte tout en restant
   parfaitement lisibles et clairement distingués les uns des autres. ---- */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-account .woocommerce-info {
  background: var(--mcwc-panel);
  border: 1px solid var(--mcwc-line-soft);
  border-left-width: 3px;
  color: var(--mcwc-text);
  border-radius: 2px;
  padding: 16px 20px;
  font-size: 13.5px;
  list-style: none;
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-message {
  background: var(--mcwc-success-bg);
  border-left-color: var(--mcwc-success);
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error {
  background: var(--mcwc-error-bg);
  border-left-color: var(--mcwc-error);
}
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-account .woocommerce-info {
  background: var(--mcwc-info-bg);
  border-left-color: var(--mcwc-info);
}
body.woocommerce-cart .woocommerce-message a.button,
body.woocommerce-checkout .woocommerce-message a.button,
body.woocommerce-account .woocommerce-message a.button {
  background: var(--mcwc-gold);
  color: #0a0a0a;
}

/* =========================================================================
   PANIER
   ========================================================================= */

body.woocommerce-cart table.cart {
  background: none;
  border: none;
  width: 100%;
}
body.woocommerce-cart table.cart thead {
  display: none; /* les libellés réapparaissent en ligne dans chaque carte */
}
/* WooCommerce injecte ses propres étiquettes ("Produit:", "Quantité:"...) via
   ::before { content: attr(data-title) } dans son CSS responsive natif —
   neutralisé ici pour éviter un doublon avec nos propres libellés (dl.variation). */
body.woocommerce-cart table.cart td::before {
  content: none !important;
}
body.woocommerce-cart table.cart td {
  text-align: left !important;
  border-bottom: none !important;
  padding: 0 !important;
}
body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart tbody,
body.woocommerce-cart table.cart tr,
body.woocommerce-cart table.cart td {
  display: block;
  width: 100%;
}
body.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  grid-template-areas:
    "thumb name   name"
    "thumb qty    price"
    "thumb remove remove";
  column-gap: 22px;
  row-gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid var(--mcwc-line-soft);
  align-items: start;
}
body.woocommerce-cart table.cart tr.cart_item:first-child { padding-top: 0; }
body.woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; }
body.woocommerce-cart table.cart td.product-name { grid-area: name; }
body.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal { grid-area: price; text-align: right; }
body.woocommerce-cart table.cart td.product-remove { grid-area: remove; text-align: left; }
/* WooCommerce affiche le prix ET le sous-total séparément ; en quantité 1 ils
   sont identiques — on garde seulement le sous-total (déjà correct dans tous
   les cas, y compris quantité > 1) pour éviter la redondance visuelle. */
body.woocommerce-cart table.cart td.product-price { display: none; }

body.woocommerce-cart table.cart td.product-thumbnail img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 2px;
}
body.woocommerce-cart table.cart td.product-name > a {
  font-size: 16px; font-weight: 500; color: var(--mcwc-text); text-decoration: none;
  display: block; margin-bottom: 10px;
}
body.woocommerce-cart table.cart td.product-name dl.variation {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px;
}
body.woocommerce-cart table.cart td.product-name dl.variation dt {
  color: var(--mcwc-text-mute); font-weight: 400; margin: 0; float: none; clear: none; width: auto;
}
body.woocommerce-cart table.cart td.product-name dl.variation dd {
  color: var(--mcwc-text-dim); margin: 0; float: none; width: auto;
}
body.woocommerce-cart table.cart td.product-name dl.variation p { margin: 0; }

body.woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount {
  font-family: 'Playfair Display', serif; font-size: 16px; color: var(--mcwc-gold);
}

body.woocommerce-cart table.cart .quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--mcwc-line-soft); border-radius: 2px;
}
body.woocommerce-cart table.cart input.qty {
  background: none; border: none; color: var(--mcwc-text); width: 52px; text-align: center;
  font-size: 13px; padding: 9px 4px; font-family: 'Manrope', sans-serif;
}
body.woocommerce-cart table.cart input.qty:focus {
  outline: none; box-shadow: 0 0 0 2px var(--mcwc-gold-soft) inset;
}

body.woocommerce-cart table.cart td.product-remove a.remove {
  color: var(--mcwc-text-mute); font-size: 11px; text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; line-height: normal;
  background: none; border-radius: 0;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover { color: var(--mcwc-error); background: none; }
body.woocommerce-cart table.cart td.product-remove a.remove svg { width: 12px; height: 12px; }

/* ---- Totaux / bouton commander ---- */
body.woocommerce-cart .cart-collaterals {
  max-width: 380px; margin-left: auto; margin-top: 20px;
}
body.woocommerce-cart .cart_totals {
  background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 26px;
}
body.woocommerce-cart .cart_totals h2 {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px; margin: 0 0 18px;
  background: none; color: var(--mcwc-text); padding: 0;
}
/* Astra (thème) impose son propre fond clair sur ce titre précis via
   .woocommerce-cart .cart-collaterals .cart_totals > h2 { background-color:
   var(--ast-global-dark-lfs) } — plus spécifique que la règle ci-dessus,
   donc elle gagnait. Neutralisée explicitement, avec la même spécificité. */
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-cart .cart-collaterals .cross-sells > h2 {
  background-color: transparent !important;
  border-bottom: 1px solid var(--mcwc-line-soft) !important;
  color: var(--mcwc-text) !important;
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
}
/* Garde-fou : un style global du thème (fond quasi blanc sur les h2) peut
   se glisser sur n'importe quel titre de ces 3 pages — neutralisé partout. */
body.woocommerce-cart h1, body.woocommerce-cart h2, body.woocommerce-cart h3,
body.woocommerce-checkout h1, body.woocommerce-checkout h2, body.woocommerce-checkout h3,
body.woocommerce-account h1, body.woocommerce-account h2, body.woocommerce-account h3 {
  background: none;
  color: var(--mcwc-text);
}
body.woocommerce-cart .cart_totals table { width: 100%; border: none; table-layout: auto !important; }
body.woocommerce-cart .cart_totals table tr th,
body.woocommerce-cart .cart_totals table tr td {
  border: none; border-bottom: 1px solid var(--mcwc-line-soft); padding: 10px 0; font-size: 13px; color: var(--mcwc-text-dim);
  text-align: right; font-weight: 400;
}
body.woocommerce-cart .cart_totals table tr th { text-align: left; color: var(--mcwc-text-dim); }
body.woocommerce-cart .cart_totals table tr.order-total th,
body.woocommerce-cart .cart_totals table tr.order-total td { border-bottom: none; padding-top: 16px; color: var(--mcwc-text); font-size: 15px; }
body.woocommerce-cart .cart_totals table tr.order-total .woocommerce-Price-amount {
  font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 19px;
}
/* Bouton "Mettre à jour le panier" — même famille visuelle que le bouton
   principal, avec un état désactivé explicite et lisible (WooCommerce le
   désactive nativement tant que la quantité n'a pas changé — comportement
   fonctionnel intact, seul l'habillage change). */
body.woocommerce-cart .woocommerce-cart-form .button,
body.woocommerce-checkout .button {
  background: var(--mcwc-gold);
  border: 1px solid var(--mcwc-gold);
  color: #0a0a0a;
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 13px 22px;
}
body.woocommerce-cart .woocommerce-cart-form .button:disabled,
body.woocommerce-cart .woocommerce-cart-form .button.disabled,
body.woocommerce-checkout .button:disabled {
  background: transparent;
  border-color: var(--mcwc-line-soft);
  color: var(--mcwc-text-mute);
  cursor: not-allowed;
  opacity: 1;
}
body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin-top: 18px; }
body.woocommerce-cart .checkout-button {
  display: block; width: 100%; text-align: center; padding: 15px 20px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a !important;
  border-radius: 2px; font-weight: 600;
}
body.woocommerce-cart .checkout-button:hover { opacity: 0.88; }

/* ---- Panier vide ---- */
body.woocommerce-cart .cart-empty.woocommerce-info {
  text-align: center; padding: 60px 20px; border: 1px dashed var(--mcwc-line);
  background: none; list-style: none; border-left-width: 1px;
}
body.woocommerce-cart .return-to-shop .button {
  display: inline-block; margin-top: 18px; padding: 14px 30px;
  background: var(--mcwc-gold); color: #0a0a0a; text-decoration: none;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; font-weight: 600;
}

@media (max-width: 767px) {
  body.woocommerce-cart table.cart tr.cart_item {
    grid-template-columns: 68px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb qty"
      "thumb price"
      "thumb remove";
  }
  body.woocommerce-cart table.cart td.product-thumbnail img { width: 68px; height: 68px; }
  body.woocommerce-cart table.cart td.product-price,
  body.woocommerce-cart table.cart td.product-subtotal { text-align: left; }
  body.woocommerce-cart .cart-collaterals { max-width: 100%; }
}

/* =========================================================================
   COMMANDE (checkout) — portée : body.woocommerce-checkout uniquement.
   ========================================================================= */

/* form.checkout a en réalité 3 enfants directs (pas 2) : .col2-set (facturation),
   un <h3>Votre commande</h3> SANS classe, puis .woocommerce-checkout-review-order.
   Confirmé par inspection réelle du DOM — le h3 doit être explicitement placé
   dans la même colonne que le récapitulatif, sinon la grille à 2 pistes le
   place mal et écrase la largeur du panneau de droite. */
body.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-areas: "billing title" "billing review";
  column-gap: 56px;
  row-gap: 18px;
  align-items: start;
}
/* Les éléments de grille gardent, par défaut, une largeur minimale implicite
   basée sur leur contenu (min-width: auto) — combinée aux anciennes règles
   float de WooCommerce/Astra sur .col2-set (width:100% + float:left, hérité
   d'une mise en page à colonnes flottantes), cela empêchait l'étirement
   correct dans la grille et écrasait la largeur du panneau de droite.
   Confirmé par inspection réelle : .col2-set ne faisait que 255px au lieu
   des ~465px attendus. */
body.woocommerce-checkout form.checkout > .col2-set,
body.woocommerce-checkout form.checkout > h3,
body.woocommerce-checkout form.checkout > .woocommerce-checkout-review-order {
  min-width: 0;
  width: auto !important;
  float: none !important;
}
body.woocommerce-checkout form.checkout > .col2-set { grid-area: billing; }
body.woocommerce-checkout form.checkout > h3 { grid-area: title; }
body.woocommerce-checkout form.checkout > .woocommerce-checkout-review-order { grid-area: review; }
/* .col-1 (facturation) à l'intérieur de .col2-set garde le même piège
   float/width hérité — neutralisé pour occuper toute la largeur disponible. */
body.woocommerce-checkout .col2-set .col-1 {
  width: 100% !important; float: none !important; min-width: 0;
}
@media (max-width: 900px) {
  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    grid-template-areas: "billing" "title" "review";
    row-gap: 22px;
  }
}

/* ---- Champs de facturation ---- */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mcwc-gold);
  margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--mcwc-line);
  background: none; font-family: 'Manrope', sans-serif; font-weight: 600;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px;
}
@media (max-width: 500px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
}
body.woocommerce-checkout .form-row-wide,
body.woocommerce-checkout #order_comments_field { grid-column: 1 / -1; }
body.woocommerce-checkout p.form-row,
body.woocommerce-account p.form-row { margin: 0 0 4px; }
body.woocommerce-checkout .form-row label,
body.woocommerce-account .form-row label {
  display: block; font-size: 11px; letter-spacing: 0.03em; color: var(--mcwc-text-mute); margin-bottom: 8px;
}
body.woocommerce-checkout .form-row label .required,
body.woocommerce-account .form-row label .required { color: var(--mcwc-gold); text-decoration: none; }
body.woocommerce-checkout .form-row label .optional,
body.woocommerce-account .form-row label .optional { color: var(--mcwc-text-mute); font-size: 10.5px; }
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .select2-selection,
body.woocommerce-account .input-text,
body.woocommerce-account select,
body.woocommerce-account textarea,
body.woocommerce-account .select2-selection {
  width: 100%; background: var(--mcwc-panel) !important; border: 1px solid var(--mcwc-line-soft) !important;
  color: var(--mcwc-text) !important; padding: 12px 14px; font-size: 13.5px; border-radius: 2px;
  font-family: 'Manrope', sans-serif; box-shadow: none;
}
body.woocommerce-checkout .select2-selection__rendered,
body.woocommerce-account .select2-selection__rendered { color: var(--mcwc-text) !important; line-height: 2.4 !important; }
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-account .input-text:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
  outline: none; border-color: var(--mcwc-gold) !important; box-shadow: 0 0 0 3px var(--mcwc-gold-soft) !important;
}
/* État d'erreur — WooCommerce ajoute .woocommerce-invalid sur le <p class="form-row">
   parent quand la validation native échoue ; jamais masqué, toujours visible. */
body.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-account .form-row.woocommerce-invalid .input-text,
body.woocommerce-account .form-row.woocommerce-invalid select {
  border-color: var(--mcwc-error) !important; box-shadow: 0 0 0 3px var(--mcwc-error-bg) !important;
}
body.woocommerce-checkout .form-row.woocommerce-invalid label,
body.woocommerce-account .form-row.woocommerce-invalid label { color: var(--mcwc-error); }
/* Mot de passe : bouton "afficher" natif de WooCommerce, dans le champ */
body.woocommerce-account .show-password-input {
  right: 10px;
}
body.woocommerce-account span.password-input { position: relative; display: block; }

/* ---- Récapitulatif de commande — même traitement "carte" que le panier ---- */
body.woocommerce-checkout form.checkout > h3 {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px;
  background: none; color: var(--mcwc-text); margin: 0;
}
body.woocommerce-checkout #order_review {
  background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 26px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table { background: none; border: none; width: 100%; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead,
.woocommerce-page.woocommerce-checkout table.shop_table thead,
.woocommerce.woocommerce-checkout table.shop_table thead {
  display: none !important;
  background: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  display: block; width: 100%;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item {
  padding: 16px 0; border-bottom: 1px solid var(--mcwc-line-soft);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item:first-child { padding-top: 0; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td { padding: 0 !important; border: none !important; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
  font-size: 13px; color: var(--mcwc-text); margin-bottom: 6px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
  color: var(--mcwc-text-mute); font-weight: 400;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; font-size: 11px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dt { color: var(--mcwc-text-mute); font-weight: 400; float: none; width: auto; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dd { color: var(--mcwc-text-dim); margin: 0; float: none; width: auto; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation p { margin: 0; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
  text-align: left; margin-top: 6px; font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 14px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr {
  display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--mcwc-line-soft); font-size: 13px; color: var(--mcwc-text-dim);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr th { font-weight: 400; text-align: left; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total {
  border-bottom: none; padding-top: 16px; font-size: 15px; color: var(--mcwc-text);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
  font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 19px;
}

/* ---- Moyens de paiement ---- */
body.woocommerce-checkout ul.wc_payment_methods { list-style: none; margin: 20px 0 0; padding: 0; }
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
  border: 1px solid var(--mcwc-line-soft); border-radius: 2px; padding: 14px 16px; margin-bottom: 10px;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
  color: var(--mcwc-text); font-size: 13px; display: flex; align-items: center; gap: 10px;
}
/* #payment div.payment_box — fond gris clair imposé par Astra
   (rgb(223,220,222) + texte rgb(81,81,81)) : illisible sur fond noir,
   neutralisé avec la même spécificité que la règle du thème. */
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-page.woocommerce-checkout #payment div.payment_box,
.woocommerce.woocommerce-checkout #payment div.payment_box {
  background-color: var(--mcwc-gold-soft) !important;
  color: var(--mcwc-text-dim) !important;
  border: 1px solid var(--mcwc-line) !important;
  border-radius: 2px !important;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box p { color: var(--mcwc-text-dim); }

/* ---- Bouton "Commander" ---- */
body.woocommerce-checkout #place_order {
  width: 100%; background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a;
  padding: 16px 20px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px; margin-top: 18px;
}
body.woocommerce-checkout #place_order:hover { opacity: 0.88; }

@media (max-width: 767px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  body.woocommerce-checkout .form-row-first,
  body.woocommerce-checkout .form-row-last { grid-column: 1 / -1; }
}

/* =========================================================================
   FINITION PAGE COMMANDE — 27 juillet 2026. Corrections cosmétiques
   uniquement (traduction, alignement, séparateurs) — aucune disposition,
   couleur, police ni fonctionnalité WooCommerce modifiée.
   ========================================================================= */

/* Montants du récapitulatif (Sous-total/TPS/TVQ/Total) : le symbole $ et
   les décimales doivent tomber exactement au même endroit sur chaque
   ligne. Le JS (initCheckoutPolish) isole les chiffres dans leur propre
   <span class="mcwc-price-digits"> séparé du symbole $ — ce CSS donne à
   chacun une largeur fixe + chasse fixe (tabular-nums), ce qui aligne le $
   ET le point décimal sur toutes les lignes en même temps (impossible en
   CSS seul : "$165.00" et "$8.25" n'ont pas le même nombre de chiffres). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .woocommerce-Price-amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .woocommerce-Price-amount bdi {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .woocommerce-Price-currencySymbol {
  display: inline-block;
  width: 13px;
  text-align: left;
  flex: 0 0 auto;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .mcwc-price-digits {
  display: inline-block;
  width: 54px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* Champ Province (Select2) mesuré 4px plus haut que les autres champs
   (48px vs 44px) — cause confirmée : line-height:2.4 (réglé pour le champ
   texte natif) mal proportionné une fois appliqué au widget Select2.
   Centrage vertical par flexbox à la place, hauteur fixée à 44px comme
   tous les autres champs de cette page. */
body.woocommerce-checkout .select2-selection {
  height: 44px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
body.woocommerce-checkout .select2-selection__rendered {
  line-height: normal !important;
}
body.woocommerce-checkout .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
}

/* Cadre de la carte "Votre commande" (#order_review) : bordure asymétrique
   constatée en direct (0px en haut, 2px sur les 3 autres côtés, couleur du
   thème Astra au lieu de la couleur du site) — une règle plus prioritaire
   l'emportait sur la nôtre pour ces 4 propriétés précises. Rétabli à 1px
   uniforme sur les 4 côtés, couleur du système de design du site. */
body.woocommerce-checkout #order_review {
  border-top: 1px solid var(--mcwc-line-soft) !important;
  border-right: 1px solid var(--mcwc-line-soft) !important;
  border-bottom: 1px solid var(--mcwc-line-soft) !important;
  border-left: 1px solid var(--mcwc-line-soft) !important;
}

/* Titre "Votre commande" : aucun séparateur alors que "Facturation
   détails" en a un — même ligne que le reste de la carte pour une
   hiérarchie visuelle cohérente (typographie déjà existante inchangée,
   uniquement la ligne ajoutée). */
body.woocommerce-checkout form.checkout > h3 {
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--mcwc-line-soft) !important;
}

/* =========================================================================
   REPRODUCTION MAQUETTE COMMANDE — 28 juillet 2026. Restructuration
   visuelle du récapitulatif (miniature, cartes livraison/paiement, total,
   bouton premium) d'après la maquette de référence fournie par le client.
   Disposition générale à 2 colonnes, fonctions WooCommerce, polices et
   palette du site INCHANGÉES — uniquement présentation du contenu déjà
   existant (le JS initCheckoutPolish restructure certains éléments,
   voir mc-custom.js).
   ========================================================================= */

/* ---- A. Ligne produit : miniature + infos, prix aligné à droite ---- */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
body.woocommerce-checkout .mcwc-cart-item-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
body.woocommerce-checkout .mcwc-cart-item-thumb {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  min-width: 64px !important;
  object-fit: cover !important;
  border-radius: 8px;
  border: 1px solid var(--mcwc-line-soft);
  flex: 0 0 64px;
}
body.woocommerce-checkout .mcwc-cart-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding-top: 2px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
  flex: 0 0 auto;
  text-align: right !important;
  margin-top: 0 !important;
  align-self: center;
  font-size: 16px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation {
  font-size: 12px;
  gap: 4px 10px;
  margin-top: 6px !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dd {
  color: var(--mcwc-text);
  font-weight: 500;
}

/* ---- B. Totaux : plus d'air, gros TOTAL élégant ---- */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr {
  padding: 9px 0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total {
  border-top: 1px solid var(--mcwc-line-soft) !important;
  padding-top: 18px;
  margin-top: 2px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
  font-size: 15px;
  font-weight: 700;
  color: var(--mcwc-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
  padding-top: 4px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
  font-size: 30px !important;
  font-weight: 700;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .mcwc-price-digits {
  width: auto !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-currencySymbol {
  width: auto !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td::after {
  content: "Taxes incluses";
  font-size: 11px;
  font-weight: 400;
  color: var(--mcwc-text-mute);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 3px;
}

/* ---- C. Livraison : méthodes en cartes (icône + titre + sous-titre/prix) ---- */
body.woocommerce-checkout .woocommerce-shipping-methods {
  gap: 10px;
}
body.woocommerce-checkout .woocommerce-shipping-methods li {
  border: 1px solid var(--mcwc-line-soft);
  border-radius: 6px;
  padding: 12px 14px 12px 46px !important;
  min-height: auto;
  transition: border-color .15s ease, background-color .15s ease;
}
body.woocommerce-checkout .woocommerce-shipping-methods li input.shipping_method {
  left: 16px !important;
}
body.woocommerce-checkout .woocommerce-shipping-methods li label::before {
  left: 16px;
}
body.woocommerce-checkout .woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--mcwc-gold);
  background: var(--mcwc-gold-soft);
}
body.woocommerce-checkout .woocommerce-shipping-methods li label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  white-space: normal !important;
}
body.woocommerce-checkout .mcwc-ship-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mcwc-gold-soft);
  color: var(--mcwc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.woocommerce-checkout .mcwc-ship-icon svg { width: 15px; height: 15px; }
body.woocommerce-checkout .mcwc-ship-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.woocommerce-checkout .mcwc-ship-title { color: var(--mcwc-text); font-weight: 600; font-size: 13.5px; }
body.woocommerce-checkout .mcwc-ship-sub { color: var(--mcwc-text-mute); font-size: 12px; }
body.woocommerce-checkout .mcwc-ship-price.woocommerce-Price-amount {
  flex: 0 0 auto;
  color: var(--mcwc-gold) !important;
  font-weight: 600;
  font-size: 13.5px;
  font-family: 'Playfair Display', serif;
  display: inline-block !important;
  width: auto !important;
}
body.woocommerce-checkout .mcwc-ship-price .mcwc-price-digits,
body.woocommerce-checkout .mcwc-ship-price .woocommerce-Price-currencySymbol { width: auto !important; }

/* ---- D. Paiement : cartes avec icônes de marque ---- */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
  border-radius: 6px;
  transition: border-color .15s ease, background-color .15s ease;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--mcwc-gold);
  background: var(--mcwc-gold-soft);
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label { font-weight: 600; font-size: 13.5px; }
body.woocommerce-checkout .mcwc-payment-icons { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.woocommerce-checkout .mcwc-card-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 7px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.03em; font-family: 'Manrope', sans-serif;
}
body.woocommerce-checkout .mcwc-card-visa { background: #1A1F71; color: #fff; }
body.woocommerce-checkout .mcwc-card-paypal { background: #003087; color: #fff; }
body.woocommerce-checkout .mcwc-card-mc { width: 34px; padding: 0; background: transparent; position: relative; }
body.woocommerce-checkout .mcwc-mc-circle { position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; }
body.woocommerce-checkout .mcwc-mc-circle-a { left: 0; background: #EB001B; }
body.woocommerce-checkout .mcwc-mc-circle-b { left: 9px; background: #F79E1B; opacity: .92; }

/* ---- E. Bouton "Commander" premium + message de sécurité ---- */
body.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, #8a6a2f, #C8A45D 40%, #F3D9A4 55%, #C8A45D 70%, #8a6a2f);
  border: none;
  border-radius: 8px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.woocommerce-checkout #place_order::before {
  content: "";
  display: inline-block;
  width: 13px; height: 13px;
  background: #0a0a0a;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center / contain no-repeat;
}
body.woocommerce-checkout .mcwc-secure-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; font-size: 11.5px; color: var(--mcwc-text-mute);
}
body.woocommerce-checkout .mcwc-trust-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mcwc-line-soft);
}
body.woocommerce-checkout .mcwc-trust-item { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--mcwc-text-mute); }
/* Le bouton PayPal (carte ou PayPal) est rendu par le SDK PayPal dans un
   iframe cross-origin — son apparence exacte (couleur/forme) est hors de
   portée du CSS du site par conception (sécurité des paiements), le
   bouton natif WooCommerce #place_order étant alors masqué (classe
   ppcp-hidden, confirmé en direct). On harmonise seulement l'espacement
   autour de son conteneur pour qu'il s'intègre proprement à la carte. */
body.woocommerce-checkout [id^="ppc-button-"] { margin-top: 14px; }

/* ---- F. Colonne facturation : hiérarchie et espacements affinés ---- */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  gap: 22px 16px;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--mcwc-line-soft); border-radius: 6px;
  padding: 14px 16px; margin: 0 0 26px; font-size: 13px; color: var(--mcwc-text-dim);
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
  content: "";
  width: 15px; height: 15px; flex: 0 0 auto;
  background: var(--mcwc-gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") center / contain no-repeat;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a { color: var(--mcwc-gold); font-weight: 600; text-decoration: none; }
body.woocommerce-checkout h3#ship-to-different-address {
  margin: 4px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mcwc-line-soft);
}
body.woocommerce-checkout h3#ship-to-different-address label span {
  font-weight: 600;
  font-size: 14px;
  color: var(--mcwc-text);
}

/* =========================================================================
   MON COMPTE — portée : body.woocommerce-account uniquement.
   Structure ci-dessous basée sur les gabarits standards et stables de
   WooCommerce (myaccount/*.php, inchangés depuis de nombreuses versions).
   Vérifié en direct, sans connexion : connexion, mot de passe oublié.
   Le tableau de bord/commandes/adresses/détails exigent un compte connecté
   — voir la checklist de vérification manuelle fournie séparément.
   ========================================================================= */

/* ---- Connexion / inscription / mot de passe oublié ---- */
body.woocommerce-account .woocommerce > form.woocommerce-form-login,
body.woocommerce-account .woocommerce > form.lost_reset_password,
body.woocommerce-account .woocommerce > form.woocommerce-ResetPassword {
  max-width: 420px; margin: 0 auto; background: var(--mcwc-panel);
  border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 34px 32px;
}
body.woocommerce-account .woocommerce > p {
  max-width: 420px; margin: 0 auto 20px; text-align: center; color: var(--mcwc-text-dim); font-size: 13px;
}
/* 28 juillet 2026 — refonte complète de cette section (pas un correctif).
   DEUX causes racines trouvées par inspection réelle du DOM rendu (pas
   supposées) :
   1) .woocommerce (conteneur parent) applique plus bas (ligne ~2195) une
      grille "tableau de bord" (barre latérale 220px + contenu), pensée
      pour l'utilisateur CONNECTÉ (navigation Tableau de bord/Commandes/
      etc.). Cette grille s'appliquait aussi à la page de connexion/
      inscription, où cette barre latérale n'existe pas dans le DOM —
      confirmé (hasAccountNav:false, body sans classe .logged-in) —
      réservant 220px d'espace mort et écrasant les deux cartes dans le
      reste (940px au lieu de la pleine largeur). Corrigé en limitant
      cette grille à body.logged-in, seul état où la barre latérale
      existe réellement (voir plus bas).
   2) .u-column1/.u-column2 gardaient float:left/float:right, hérités du
      CSS natif de WooCommerce — en conflit avec le grid-template-columns
      ci-dessous, ce qui faisait tomber "Inscription" sous "Connexion"
      au lieu de la mettre à côté (mesuré : colonne 2 démarrait 557px
      plus bas que la colonne 1). float:none corrige ça à la racine.
   Chaque carte a maintenant son propre fond/bordure (au lieu d'un seul
   cadre partagé) et une largeur bien plus généreuse (max-width 1000px
   au lieu de 760px, dont une partie était de toute façon gaspillée par
   le bug n°1) — largement assez pour qu'aucun mot ne soit jamais coupé.
   Les champs/labels/boutons héritent déjà du style existant plus haut
   (body.woocommerce-account .input-text, .form-row label, etc.) —
   aucune redéfinition nécessaire, seule la largeur de leur conteneur
   était en cause. */
body.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  overflow: visible;
}
body.woocommerce-account .u-columns.col2-set .u-column1,
body.woocommerce-account .u-columns.col2-set .u-column2 {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box;
  grid-row: 1;
  background: var(--mcwc-panel);
  border: 1px solid var(--mcwc-line-soft);
  border-radius: 6px;
  padding: 40px 36px;
}
body.woocommerce-account .u-columns.col2-set .u-column1 { grid-column: 1; }
body.woocommerce-account .u-columns.col2-set .u-column2 { grid-column: 2; border-left: 1px solid var(--mcwc-line-soft); }
body.woocommerce-account .u-columns.col2-set h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  margin: 0 0 26px;
}
body.woocommerce-account .u-columns.col2-set form {
  max-width: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
}
body.woocommerce-account .u-columns.col2-set .password-input {
  display: flex; align-items: center; width: 100%; position: relative;
}
body.woocommerce-account .u-columns.col2-set .password-input input.input-text { padding-right: 42px; }
body.woocommerce-account .u-columns.col2-set .show-password-input {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
body.woocommerce-account .u-columns.col2-set p:not(.form-row):not(.woocommerce-LostPassword) {
  font-size: 12.5px; line-height: 1.6; color: var(--mcwc-text-dim); margin: 0 0 20px; width: 100%;
}
body.woocommerce-account .u-columns.col2-set button[type="submit"] {
  white-space: nowrap;
}
@media (max-width: 900px) {
  body.woocommerce-account .u-columns.col2-set { max-width: 620px; gap: 20px; }
  body.woocommerce-account .u-columns.col2-set .u-column1,
  body.woocommerce-account .u-columns.col2-set .u-column2 { padding: 30px 24px; }
}
@media (max-width: 700px) {
  body.woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; max-width: 480px; }
  /* Cause exacte du bug mobile trouvée par inspection réelle : le
     conteneur passait bien à une seule piste (1fr), mais .u-column1/
     .u-column2 gardaient grid-column:1 / grid-column:2 (fixés plus haut,
     jamais réinitialisés ici) — une grille à piste unique CRÉE
     automatiquement une piste implicite pour satisfaire grid-column:2,
     recréant silencieusement 2 colonnes (confirmé : gridTemplateColumns
     calculé = "50px 265px" au lieu de "1fr"). Les deux cartes doivent
     explicitement partager la colonne 1 pour s'empiler verticalement. */
  body.woocommerce-account .u-columns.col2-set .u-column1,
  body.woocommerce-account .u-columns.col2-set .u-column2 { grid-column: 1; grid-row: auto; }
  body.woocommerce-account .u-columns.col2-set .u-column2 { border-left: 1px solid var(--mcwc-line-soft); }
}

body.woocommerce-account .woocommerce-form-row--wide { margin: 0 0 16px; }
body.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mcwc-text-mute); font-weight: 400;
}
body.woocommerce-account .woocommerce-LostPassword {
  display: block; margin-top: 14px; font-size: 11.5px; color: var(--mcwc-gold); text-decoration: underline; text-underline-offset: 3px;
}
body.woocommerce-account button.woocommerce-Button,
body.woocommerce-account button.woocommerce-button {
  width: 100%; background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a;
  padding: 14px 20px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px; margin-top: 8px;
}
body.woocommerce-account button.woocommerce-Button:hover { opacity: 0.88; }

/* =========================================================================
   TABLEAU DE BORD CONNECTÉ — section unique, consolidée le 28 juillet 2026
   (remplace plusieurs blocs dispersés précédents pour cette même zone).

   CAUSE RÉELLE DE LA COLONNE MINUSCULE, confirmée par inspection directe
   du DOM rendu (pas supposée) : .woocommerce-MyAccount-navigation et
   .woocommerce-MyAccount-content héritent tous les deux d'un CSS natif
   WooCommerce avec float:left / float:right (confirmé : navFloat="left",
   contentFloat="right" en direct) — exactement le même piège que celui
   déjà corrigé sur les cartes Connexion/Inscription plus haut. Ce float
   entrait en conflit avec la grille définie ci-dessous, faisant
   physiquement échanger leurs positions et écrasant le contenu principal
   dans une largeur de ~150px (d'où les mots coupés lettre par lettre).
   float:none corrige ça à la racine, comme demandé — pas un habillage.

   La grille "220px 1fr" réservée aux utilisateurs connectés reste
   limitée à body.logged-in (cette barre latérale n'existe pas sur la
   page de connexion/inscription déconnectée — voir plus bas). ========================================================================= */
body.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  max-width: 1050px;
  margin: 0 auto;
}
body.woocommerce-account.logged-in .woocommerce > form.woocommerce-form-login,
body.woocommerce-account.logged-in .woocommerce > form.lost_reset_password,
body.woocommerce-account.logged-in .woocommerce > p,
body.woocommerce-account.logged-in .woocommerce > .u-columns,
body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper:only-of-type {
  grid-column: 1 / -1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important;
  width: auto !important;
  grid-column: 1;
  border: 1px solid var(--mcwc-line-soft); border-radius: 4px; overflow: hidden;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--mcwc-line-soft);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 13px 18px; font-size: 12.5px; color: var(--mcwc-text-dim); text-decoration: none;
  border-left: 3px solid transparent; white-space: nowrap;
  transition: background-color .15s ease, border-left-color .15s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--mcwc-gold); background: var(--mcwc-gold-soft); border-left-color: var(--mcwc-gold);
  font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--mcwc-text-mute); }

body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  grid-column: 2;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 30px;
}
body.woocommerce-account .woocommerce-MyAccount-content > p { color: var(--mcwc-text-dim); font-size: 13.5px; line-height: 1.8; }
/* Titre d'accueil réduit d'environ 25% (40px → 30px, mesuré en direct) pour
   que "Mon compte" (32px, titre réel de la page) reste visuellement dominant. */
body.woocommerce-account .woocommerce-MyAccount-content h2 {
  white-space: normal; font-size: 30px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
body.woocommerce-account .woocommerce-MyAccount-content h2 .mc-account-icon {
  flex-shrink: 0; color: var(--mcwc-gold);
}
body.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--mcwc-gold); font-weight: 600; }
body.woocommerce-account .woocommerce-MyAccount-content a { color: var(--mcwc-gold); }

@media (max-width: 782px) {
  body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 20px; max-width: 100%; }
  body.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
  body.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; }
  body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: none; flex-shrink: 0; }
  body.woocommerce-account .woocommerce-MyAccount-navigation li a { border-left: none; border-bottom: 3px solid transparent; }
  body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-left: none; border-bottom-color: var(--mcwc-gold); }
  body.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 24px; }
}

/* Page de connexion/inscription (déconnecté) : simple centrage, pas de
   grille tableau de bord — la largeur disponible est gérée directement
   par max-width:1000px sur .u-columns.col2-set plus haut. */
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- Historique des commandes → cartes ---- */
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.my_account_orders {
  background: none; border: none; width: 100%;
}
body.woocommerce-account table.woocommerce-orders-table thead { display: none; }
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.woocommerce-orders-table tbody,
body.woocommerce-account table.woocommerce-orders-table tr,
body.woocommerce-account table.woocommerce-orders-table td {
  display: block; width: 100%;
}
body.woocommerce-account table.woocommerce-orders-table td::before { content: none !important; }
body.woocommerce-account table.woocommerce-orders-table td { padding: 0 !important; border: none !important; text-align: left !important; }
body.woocommerce-account table.woocommerce-orders-table tr.order {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  border: 1px solid var(--mcwc-line-soft); border-radius: 3px; padding: 16px 18px; margin-bottom: 12px;
}
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
  font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 14px;
}
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date { color: var(--mcwc-text-mute); font-size: 12px; }
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--mcwc-success); color: var(--mcwc-success); width: fit-content;
}
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total { color: var(--mcwc-text); font-family: 'Playfair Display', serif; }
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { margin-left: auto; }
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
  background: transparent; border: 1px solid var(--mcwc-line); color: var(--mcwc-gold);
  padding: 8px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px;
}

/* ---- Détails d'une commande / téléchargements ---- */
body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details,
body.woocommerce-account .woocommerce-order-downloads {
  margin-top: 24px;
}
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .woocommerce-order-downloads__title {
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
  background: none !important; border: none !important; padding: 0 0 12px !important; margin: 0 0 16px !important;
  border-bottom: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text) !important;
}
body.woocommerce-account table.shop_table thead th {
  background: none !important; color: var(--mcwc-text-mute) !important; border-bottom: 1px solid var(--mcwc-line) !important;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
body.woocommerce-account table.shop_table td { border-bottom: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text-dim); }
body.woocommerce-account table.shop_table .woocommerce-Price-amount { color: var(--mcwc-gold); font-family: 'Playfair Display', serif; }

/* ---- Adresses ---- */
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .woocommerce-customer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) {
  body.woocommerce-account .woocommerce-Addresses,
  body.woocommerce-account .woocommerce-customer-details { grid-template-columns: 1fr; }
}
body.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--mcwc-line-soft); border-radius: 3px; padding: 22px;
}
/* Astra impose un fond quasi blanc sur ces titres — neutralisé, même
   spécificité que la règle du thème (confirmé pour .cart_totals h2 plus
   haut ; même piège probable ici, corrigé par précaution). */
.woocommerce .woocommerce-Addresses .woocommerce-Address-title,
.woocommerce .woocommerce-Addresses .woocommerce-column__title,
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title,
.woocommerce-account .woocommerce-Addresses .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
  background: none !important; border: none !important; border-bottom: 1px solid var(--mcwc-line-soft) !important;
  color: var(--mcwc-text) !important; padding: 0 0 12px !important; margin: 0 0 14px !important;
  font-family: 'Playfair Display', serif; font-size: 14px;
}
body.woocommerce-account .woocommerce-Address address { color: var(--mcwc-text-dim); font-size: 13px; line-height: 1.8; font-style: normal; }
body.woocommerce-account .woocommerce-Address a.edit {
  display: inline-block; margin-top: 14px; font-size: 11.5px; color: var(--mcwc-gold); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Formulaire modifier adresse / détails du compte : mêmes champs, même
   traitement que la facturation à la commande. ---- */
body.woocommerce-account .woocommerce-address-fields__field-wrapper,
body.woocommerce-account .woocommerce-EditAccountForm {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
body.woocommerce-account .woocommerce-EditAccountForm fieldset,
body.woocommerce-account .woocommerce-EditAccountForm > p:not([class*="form-row-"]) {
  grid-column: 1 / -1;
}
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: none; padding: 0; margin: 20px 0 0;
}
body.woocommerce-account .woocommerce-EditAccountForm legend {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mcwc-gold);
  padding-bottom: 12px; border-bottom: 1px solid var(--mcwc-line); width: 100%; margin-bottom: 18px;
}
@media (max-width: 600px) {
  body.woocommerce-account .woocommerce-address-fields__field-wrapper,
  body.woocommerce-account .woocommerce-EditAccountForm { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 2 — Refonte visuelle du panier (CSS uniquement)
   21 juillet 2026 (v2 — ajustements : largeur du résumé, note de
   ramassage distincte)

   Cause exacte du problème corrigé ici, confirmée par inspection réelle :
   Astra applique .cart-collaterals .cart_totals { float:right; width:48%; }
   (pensé pour deux boîtes côte à côte). Un CSS antérieur limitait déjà
   .cart-collaterals à max-width:380px, mais ne réinitialisait jamais ce
   48% sur l'enfant .cart_totals — 48% de 380px = 182px, d'où le texte
   coupé lettre par lettre. Corrigé en remplaçant la mise en page par
   flottants par une grille CSS explicite sur .woocommerce (qui contient
   exactement 3 enfants directs : notices, formulaire panier, totaux —
   confirmé par inspection du DOM réel), et en neutralisant les width
   hérités d'Astra sur .cart_totals lui-même.
   Aucun calcul, taxe, règle de livraison ni hook WooCommerce touché —
   uniquement de la présentation.
   ============================================================ */

body.woocommerce-cart .woocommerce {
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 1fr 410px;
	grid-template-areas:
		"notices notices"
		"form totals";
	column-gap: 40px;
	align-items: start;
}

body.woocommerce-cart .woocommerce-notices-wrapper {
	grid-area: notices;
}

body.woocommerce-cart .woocommerce-cart-form {
	grid-area: form;
	float: none;
	width: auto;
}

/* Neutralise le float:right et le width:48% hérités d'Astra — cause
   exacte du rétrécissement. La grille ci-dessus gère maintenant la
   position et la largeur de cette colonne. */
body.woocommerce-cart .cart-collaterals {
	grid-area: totals;
	float: none !important;
	width: 100% !important;
	max-width: 420px;
	min-width: 400px;
	margin: 0 !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none !important;
	width: 100% !important;
}

/* Le bouton héritait de la largeur figée à 182px de l'ancien conteneur —
   corrigé pour occuper toute la largeur du bloc, sur une seule ligne. */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart a.checkout-button {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	white-space: nowrap;
	text-align: center;
}

/* Note distincte sous le tableau des totaux, pour les instructions de
   ramassage détaillées — le titre de la méthode d'expédition a été
   raccourci séparément (réglage WooCommerce, pas du code). Bordure
   supérieure + espacement pour bien la séparer visuellement de la
   liste des méthodes d'expédition, plutôt que de sembler collée.
   IMPORTANT : .woocommerce-shipping-totals est la classe du <tr>, pas
   du <td> — un ::after display:block posé directement sur le <tr>
   crée une cellule de tableau anonyme (nouvelle colonne à DROITE),
   au lieu d'un bloc EN DESSOUS. D'où le ciblage explicite du <td>. */
body.woocommerce-cart tr.woocommerce-shipping-totals ul.woocommerce-shipping-methods {
	margin-bottom: 0 !important;
}

body.woocommerce-cart tr.woocommerce-shipping-totals td::after {
	content: "L'adresse complète et les instructions de ramassage seront transmises après la commande.";
	display: block;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 11px;
	line-height: 1.45;
	color: var(--mcwc-text-dim, #9a9a9a);
	font-style: italic;
}

body.woocommerce-cart .woocommerce-shipping-destination {
	margin: 4px 0 !important;
	font-size: 13px;
	line-height: 1.4;
}

/* Responsive : tablette et mobile repassent en une seule colonne */
@media (max-width: 1024px) {
	body.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
		grid-template-areas:
			"notices"
			"form"
			"totals";
	}
	body.woocommerce-cart .cart-collaterals {
		max-width: 100%;
		min-width: 0;
		margin-top: 24px !important;
	}
}

/* ============================================================
   RÈGLE GLOBALE PERMANENTE — 21 juillet 2026
   Le nom de marque « MISTER & CO. » ne doit JAMAIS se couper sur
   deux lignes, peu importe la page, le composant, l'appareil ou
   la résolution d'écran (en-tête, pied de page, menu mobile,
   fiches produits, panier, commande, compte, fenêtres modales…
   — toutes ces zones utilisent le même en-tête/pied de page
   globaux ci-dessous, donc une seule règle les couvre toutes).

   Cause racine trouvée par inspection réelle : .site-title a avait
   une largeur ET une hauteur fixes (336px × 59px) codées en dur.
   Sur mobile, son conteneur flex le compresse à ~235–265px de
   large — plus petit que sa largeur intrinsèque — donc le texte
   se répartissait sur 2 lignes pour tenir dans l'espace réduit.
   Corrigé en libérant la largeur/hauteur (auto), en empêchant le
   flex de le compresser (flex-shrink:0) et en interdisant tout
   retour à la ligne (white-space:nowrap). Une taille de police
   adaptative réduit le texte sur petits écrans pour qu'il tienne
   toujours dans l'en-tête sans jamais se couper, conformément à
   la consigne : le conteneur/la mise en page s'ajustent, jamais
   le nom de marque.
   ============================================================ */

.site-title,
.site-title a,
.ast-site-title-wrap .site-title a {
	white-space: nowrap !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	flex-shrink: 0 !important;
	overflow: visible !important;
}

.ast-site-title-wrap {
	flex-shrink: 0 !important;
}

/* Police adaptative pour l'en-tête mobile compact (logo + icône
   menu sur une seule rangée) — mesuré empiriquement : ce texte,
   dans cette police, occupe environ 7,6px de largeur par px de
   taille de police ; les valeurs ci-dessous restent toujours
   nettement sous la largeur disponible mesurée (~235–265px). */
@media (max-width: 480px) {
	.ast-site-identity .site-title a,
	.ast-site-title-inner .site-title a,
	.ast-site-title-wrap .site-title a,
	.site-title a {
		font-size: 26px !important;
	}
}

@media (min-width: 481px) and (max-width: 767px) {
	.ast-site-identity .site-title a,
	.ast-site-title-inner .site-title a,
	.ast-site-title-wrap .site-title a,
	.site-title a {
		font-size: 32px !important;
	}
}

/* Toute autre occurrence du nom de marque dans le contenu du site
   (pied de page, section « Pourquoi choisir », texte éditorial…)
   déjà marquée par la classe .mc-brandmark lors de sa création. */
.mc-brandmark {
	white-space: nowrap !important;
}

/* ============================================================
   CORRECTIFS AUDIT TEXTES COUPÉS — 21 juillet 2026
   A, B, C, D, E — validés empiriquement avant déploiement
   (chaque test a confirmé : zéro débordement de page introduit,
   redistribution automatique via la disposition existante).
   Aucun prix, taxe, règle de livraison ni logique WooCommerce
   touché — présentation uniquement.
   ============================================================ */

/* ---- A. Étape 1 du configurateur (mobile) ----
   Le titre et le bouton "Guide des dimensions" partageaient une
   même ligne flex trop étroite pour les deux combinés. Le titre
   reste toujours en texte complet sur une ligne ; si l'espace
   manque, le bouton (secondaire) passe sur sa propre ligne en
   dessous plutôt que de forcer le titre à se couper. */
.mc-cfg-step1-headrow {
	flex-wrap: wrap;
	row-gap: 8px;
}
.mc-cfg-step1-headrow .mc-cfg-step-title {
	white-space: nowrap;
}
.mc-cfg-step1-headrow .mc-cfg-dim-guide-link {
	white-space: nowrap;
}

/* ---- B. Format / Présentation / Finition (panier + commande) ----
   La règle grid existante (auto 1fr) répartissait déjà
   correctement l'espace disponible — il ne manquait que
   white-space:nowrap sur la valeur. Vérifié avec le texte le
   plus long possible ("96 × 48 po — Horizontal") : le tableau du
   panier se redistribue automatiquement sans débordement de page. */
body.woocommerce-cart dl.variation dd,
body.woocommerce-cart dl.variation dd p,
body.woocommerce-checkout dl.variation dd,
body.woocommerce-checkout dl.variation dd p {
	white-space: nowrap;
}

/* ---- C. Méthodes de livraison (panier + commande) ----
   27 juillet 2026 — refonte compacte demandée : le bouton radio doit
   être immédiatement à gauche du texte, parfaitement aligné verticalement,
   sans espace excédentaire entre les deux options. Remplace l'ancien
   simple white-space:nowrap (qui, dans la colonne étroite du panier,
   forçait le texte à déborder au lieu de s'aligner proprement avec le
   bouton radio — cause exacte du désalignement constaté). Layout flex
   explicite : aucune dépendance à la largeur héritée du <li>/<ul>. */
.woocommerce-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* 27 juillet 2026 (v4) — flexbox, padding+position absolue, puis grille
   CSS à colonnes fixes ont TOUTES les trois échoué de façon identique
   sur le navigateur réel du client, malgré des calculs de boîte corrects
   à chaque fois. Cette constance à travers 3 mécanismes de mise en page
   fondamentalement différents prouve que le problème n'est pas la mise
   en page : c'est le rendu NATIF du champ radio lui-même qui continue de
   dessiner quelque chose que appearance:none ne suffit pas à supprimer
   dans ce navigateur. Solution définitive : le champ <input> réel devient
   totalement invisible (opacity:0) mais reste cliquable exactement là où
   il est ; le rond visible n'est plus qu'un ::before dessiné sur le
   texte lui-même — aucun rendu de champ de formulaire natif n'entre plus
   du tout dans l'équation visuelle. */
/* CAUSE EXACTE DU CHEVAUCHEMENT, confirmée en listant toutes les règles
   CSS réellement chargées par le navigateur (document.styleSheets) :
   WooCommerce injecte nativement la règle
   "ul#shipping_method li:not(...) { padding: .25em 0 .25em 22px;
   text-indent: -22px; }" — la technique classique du retrait négatif
   pour aligner un texte à côté d'une puce. text-indent ne déplace PAS
   la boîte de l'élément (d'où mes calculs de boîte toujours corrects)
   mais décale la PREMIÈRE LIGNE DE TEXTE de 22px vers la gauche, et
   s'hérite à travers tous les enfants — donc à travers flexbox, grille
   ou position absolue, peu importe la technique de mise en page.
   Jamais neutralisé jusqu'ici. Seule la ligne ci-dessous corrige
   réellement la cause. */
.woocommerce-shipping-methods li {
	position: relative !important;
	display: block !important;
	padding: 0 0 0 28px !important;
	text-indent: 0 !important;
	margin: 0 !important;
	min-height: 16px;
	line-height: 16px;
}
.woocommerce-shipping-methods li input.shipping_method {
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}
.woocommerce-shipping-methods li label {
	position: static !important;
	display: block !important;
	width: 100% !important;
	white-space: nowrap;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	text-indent: 0 !important;
	cursor: pointer;
}
/* Le rond visible — dessiné entièrement en CSS sur le texte, jamais sur
   le champ de formulaire natif. Couleur dorée du site (--mcwc-gold),
   position absolue épinglée à gauche de la ligne (par rapport au <li>,
   qui est position:relative ci-dessus), centrée verticalement. */
.woocommerce-shipping-methods li label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 1.5px solid var(--mcwc-gold, #c5a45a);
	border-radius: 50%;
	background: transparent;
}
.woocommerce-shipping-methods li input.shipping_method:checked + label::before {
	background: radial-gradient(circle, var(--mcwc-gold, #c5a45a) 0 4px, transparent 4.5px);
}
/* Anneau de focus visible au clavier (Tab) — appliqué au rond dessiné en
   CSS puisque le vrai champ (opacity:0) ne peut rien afficher lui-même.
   :focus-visible (et non :focus) pour ne montrer l'anneau qu'à la
   navigation clavier, pas au clic souris — comportement natif attendu. */
.woocommerce-shipping-methods li input.shipping_method:focus-visible + label::before {
	box-shadow: 0 0 0 3px rgba(197, 164, 90, 0.45);
}
/* Cause exacte confirmée par inspection réelle : Astra applique
   table-layout:fixed sur .cart_totals table, qui fige la largeur des
   colonnes sur celle de la première ligne et empêche toute redistribution
   selon le contenu — la cellule "Shipment" gardait ainsi presque autant
   de largeur que "Ramassage à Saint-Colomban — Gratuit" en avait besoin,
   au détriment de la colonne de droite. Remis à table-layout:auto
   (ci-dessus, sur .cart_totals table) pour que chaque colonne se
   dimensionne selon son propre contenu ; width:1%+nowrap force ensuite
   la cellule "Shipment"/"Sous-Total"/etc. à ne garder que la largeur
   qu'exige son propre texte, laissant le reste à la liste des méthodes.
   Aucun calcul ni logique WooCommerce affecté — largeur de colonnes
   uniquement. */
body.woocommerce-cart .cart_totals table tr th {
	width: 1%;
	white-space: nowrap;
}
/* La colonne de droite restait encore trop étroite (~244px) pour loger
   28px d'espace radio + le texte le plus long ("Ramassage à
   Saint-Colomban — Gratuit", ~238px) sans déborder. min-width force
   une largeur suffisante ; comme les colonnes d'un tableau sont
   partagées entre toutes les lignes, cela élargit la colonne entière —
   sans affecter aucun calcul, uniquement la mise en page. */
body.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td {
	min-width: 275px;
}
@media (max-width: 480px) {
	.woocommerce-shipping-methods li label {
		white-space: normal;
	}
}

/* ---- D. Produits similaires (page produit) ----
   Même règle responsive déjà validée sur la grille principale de
   la Boutique (3 → 2 → 1 colonnes), appliquée ici à la section
   "Produits similaires" qui ne l'avait jamais reçue. */
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products {
	grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 1024px) {
	body.single-product .related.products ul.products,
	body.single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 640px) {
	body.single-product .related.products ul.products,
	body.single-product .upsells.products ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* ---- E. "Sous-Total" et libellés du tableau de totaux ----
   Confirmé visuellement : "Sous-Total" se coupait littéralement
   au trait d'union ("Sous-" / "Total"). Vérifié : le tableau se
   redistribue automatiquement (212px → colonne élargie) sans
   changer sa largeur totale ni déborder la page. Appliqué à tous
   les libellés de la table de totaux par cohérence (Sous-Total,
   Shipment, TPS, TVQ, Total). */
.cart_totals table.shop_table th,
.woocommerce-checkout-review-order-table th {
	white-space: nowrap;
}

/* ============================================================
   Réduction de l'espace vertical excessif — pages catégories
   « galerie » de premier niveau uniquement (Animaux, Femmes,
   Hommes, Couples, Sports, Divers, Personnages fictifs).

   Cause exacte confirmée par mesure réelle (pas une supposition) :
   #primary { margin-top: 4em; } est une règle du thème Astra
   lui-même (main.min.css), pas quelque chose ajouté précédemment.
   À 16px de police racine, 4em = 64px — c'est cette marge qui
   crée l'essentiel de l'espace vide entre la barre de recherche
   et le fil d'Ariane/titre/description sur ces 7 pages, puisque
   la barre de recherche s'insère juste au-dessus de #primary.

   Réduite ici à 30px, uniquement sur les 7 pages galerie (portée
   strictement limitée via body.mc-gallery-page) — combinée au
   padding-bottom de 6px déjà présent sur .mc-search-wrap.mc-search-hero,
   cela donne un espace final d'environ 36px, dans la fourchette
   cible de 30-40px demandée. Rien d'autre n'est modifié : ni la
   barre de recherche, ni l'en-tête, ni la grille de produits, ni
   la typographie, ni les largeurs, ni les images, ni les pages de
   sous-catégories (qui n'ont pas la classe mc-gallery-page).
   ============================================================ */
body.mc-gallery-page #primary {
	margin-top: 30px !important;
}

/* =========================================================================
   NOUVEAUX COMPOSANTS — À propos / Finitions / Informations (2026-07-22)
   Réutilisent la palette et les motifs déjà en place (mc-why-frame,
   mc-coll-*, mc-presentation-*) pour rester visuellement cohérents avec
   Collections et Accueil. Rien ci-dessous ne modifie une classe existante.
   ========================================================================= */

/* ---- Hero de page intérieure (photo + voile sombre + titre) ---- */
.mc-page-hero {
  position: relative;
  min-height: 43vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 40px 20px;
  background-color: #0A0A0A;
}
.mc-page-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  z-index: 0;
}
.mc-page-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,.72) 55%, rgba(6,6,6,.92) 100%);
}
.mc-page-hero-content { position: relative; z-index: 2; max-width: 780px; }
.mc-page-hero-eyebrow {
  display: block; font-family: Manrope, sans-serif; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: #C8A45D;
  margin: 0 0 18px;
}
.mc-page-hero h1 {
  font-family: 'Playfair Display', serif !important; font-weight: 600;
  color: #F8F8F6 !important; font-size: clamp(34px, 4vw, 54px);
  margin: 0; line-height: 1.12;
}
.mc-page-hero p {
  font-family: Manrope, sans-serif; color: #E4E1D8; font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75; margin: 20px auto 0; max-width: 620px;
}
.mc-page-hero .mc-btn-gold { margin-top: 24px; }
@media (max-width: 767px) {
  .mc-page-hero { min-height: 34vh; padding: 34px 20px; }
}

/* ---- Bouton doré générique (extrait du bouton CTA déjà en usage) ---- */
.mc-btn-gold {
  display: inline-block; font-family: Manrope, sans-serif; font-weight: 600;
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #111111 !important; background: #C8A45D; text-decoration: none !important;
  padding: 15px 34px; border: 1px solid #C8A45D; border-radius: 2px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.mc-btn-gold:hover { background: transparent; color: #C8A45D !important; }
.mc-btn-outline {
  display: inline-block; font-family: Manrope, sans-serif; font-weight: 600;
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #C8A45D !important; background: transparent; text-decoration: none !important;
  padding: 14px 32px; border: 1px solid rgba(200,164,93,.55); border-radius: 2px;
  transition: background .35s ease, border-color .35s ease;
}
.mc-btn-outline:hover { background: rgba(200,164,93,.1); border-color: #C8A45D; }

/* ---- Bande CTA générique (titre + bouton sur fond sombre) ---- */
.mc-cta-band {
  background: #111111; text-align: center;
  padding: clamp(36px, 4.6vw, 56px) 30px;
}
.mc-cta-band h2 {
  font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important;
  font-size: clamp(26px, 2.4vw, 36px); margin: 0 0 30px;
}

/* ---- Section "Notre philosophie" — 3 cartes sobres (icône + titre + texte) ---- */
.mc-value-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(42px, 4.6vw, 64px) 24px; }
.mc-value-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px;
  margin-top: 34px;
}
.mc-value-card {
  text-align: center; padding: 40px 26px; border: 1px solid rgba(200,164,93,.22);
  border-radius: 2px; transition: border-color .35s ease, transform .35s ease;
}
.mc-value-card:hover { border-color: rgba(200,164,93,.55); transform: translateY(-4px); }
.mc-value-icon {
  width: 46px; height: 46px; margin: 0 auto 22px; color: #C8A45D;
}
.mc-value-card h3 {
  font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important;
  font-size: 21px; margin: 0 0 14px;
}
.mc-value-card p {
  font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14.5px; line-height: 1.7; margin: 0;
}
@media (max-width: 900px) {
  .mc-value-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---- Section "Notre processus de création" — 5 étapes avec émoji ---- */
.mc-process-wrap { background: #0A0A0A; padding: clamp(42px, 4.6vw, 64px) 24px; }
.mc-process-inner { max-width: 1400px; margin: 0 auto; }
.mc-process-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px;
  margin-top: 34px;
}
.mc-process-card { text-align: center; position: relative; padding: 0 10px; }
.mc-process-emoji {
  font-size: 30px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 20px;
  background: radial-gradient(circle at 35% 30%, rgba(200,164,93,.22), rgba(200,164,93,.05));
  border: 1px solid rgba(200,164,93,.4);
}
.mc-process-card h3 {
  font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important;
  font-size: 17.5px; margin: 0 0 10px; letter-spacing: .2px;
}
.mc-process-card p {
  font-family: Manrope, sans-serif; color: #ABABAB; font-size: 13.5px; line-height: 1.65; margin: 0;
}
.mc-process-arrow {
  position: absolute; top: 34px; right: -18px; color: rgba(200,164,93,.4); font-size: 18px;
}
@media (max-width: 1100px) {
  .mc-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .mc-process-arrow { display: none; }
}
@media (max-width: 640px) {
  .mc-process-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---- Section "Notre engagement" — bande image plein-largeur avec citation ---- */
.mc-commit-band { position: relative; min-height: 36vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mc-commit-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mc-commit-veil { position: absolute; inset: 0; z-index: 1; background: rgba(6,6,6,.6); }
.mc-commit-content { position: relative; z-index: 2; max-width: 720px; text-align: center; padding: 40px 24px; }
.mc-commit-content p {
  font-family: 'Playfair Display', serif; font-style: italic; color: #F8F8F6;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.6; margin: 0;
}
@media (max-width: 767px) { .mc-commit-band { min-height: 30vh; } }

/* ---- Override d'espacement scopé à la page À propos pour .mc-presentation-grid
   (classe partagée avec l'Accueil — on ne touche jamais ses valeurs par défaut) ---- */
.mc-apropos-page .mc-presentation-grid {
  padding-top: clamp(42px, 4.6vw, 64px);
  padding-bottom: clamp(42px, 4.6vw, 64px);
}

/* ---- Section finale "Vous avez des questions ?" — grille de 9 cartes,
   même esthétique sobre à bordure que "Notre philosophie" (mc-value-card),
   avec icône émoji pour rester cohérent avec "Notre processus" ---- */
.mc-help-wrap { max-width: 1300px; margin: 0 auto; padding: clamp(42px, 4.6vw, 64px) 24px clamp(60px, 7vw, 90px); }
.mc-help-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
  margin-top: 40px;
}
.mc-help-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 24px; border: 1px solid rgba(200,164,93,.22); border-radius: 2px;
  text-decoration: none !important; transition: border-color .35s ease, transform .35s ease;
}
.mc-help-card:hover { border-color: rgba(200,164,93,.55); transform: translateY(-4px); }
.mc-help-emoji {
  font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin: 0 0 18px;
  background: radial-gradient(circle at 35% 30%, rgba(200,164,93,.22), rgba(200,164,93,.05));
  border: 1px solid rgba(200,164,93,.4);
}
.mc-help-card h3 {
  font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important;
  font-size: 18px; margin: 0 0 10px;
}
.mc-help-card p {
  font-family: Manrope, sans-serif; color: #ABABAB; font-size: 13.5px; line-height: 1.6;
  margin: 0 0 18px; flex: 1;
}
.mc-help-card .mc-help-btn {
  font-family: Manrope, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: #C8A45D; padding: 9px 20px; border: 1px solid rgba(200,164,93,.5);
  border-radius: 2px; transition: background .35s ease, color .35s ease;
}
.mc-help-card:hover .mc-help-btn { background: #C8A45D; color: #111111; }
@media (max-width: 900px) { .mc-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mc-help-grid { grid-template-columns: 1fr; } }

/* ---- Informations — grille 3x3 (réutilise la mécanique de mc-coll-*, pas ses classes,
   pour ne jamais interférer visuellement avec la page Collections) ---- */
.mc-hub-wrap { padding: 40px 40px 90px; }
.mc-hub-grid {
  max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 44px 48px;
}
.mc-hub-card { display: block; text-decoration: none !important; flex: 0 0 calc((100% - 96px) / 3); }
.mc-hub-frame {
  position: relative; aspect-ratio: 2 / 1; padding: 9px; border-radius: 3px;
  background: linear-gradient(152deg, #ddbd7c 0%, #8a6b34 20%, #f1dc9f 38%, #7d5f2c 58%, #e9d093 76%, #8a6b34 90%, #ddbd7c 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.32),
    inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.55);
  transition: transform .4s ease, box-shadow .4s ease, filter .4s ease;
}
.mc-hub-card:hover .mc-hub-frame { transform: translateY(-5px); filter: brightness(1.09); }
.mc-hub-frame-inner {
  position: relative; width: 100%; height: 100%; border-radius: 1px;
  background: linear-gradient(160deg, #0d0d0c 0%, #030303 100%);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  transition: background .4s ease;
}
.mc-hub-card:hover .mc-hub-frame-inner { background: linear-gradient(160deg, #151513 0%, #060605 100%); }
.mc-hub-icon { width: 24%; max-width: 46px; color: rgba(200,164,93,.75); transition: color .4s ease; }
.mc-hub-card:hover .mc-hub-icon { color: #F3D9A4; }
.mc-hub-body { padding-top: 24px; text-align: center; }
.mc-hub-title {
  font-family: 'Playfair Display', serif !important; font-weight: 600; color: #FFFFFF !important;
  font-size: clamp(18px, 1.4vw, 22px); margin: 0 0 10px;
}
.mc-hub-desc { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 13.5px; line-height: 1.6; margin: 0 auto 14px; max-width: 30ch; }
.mc-hub-link { font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #8c8c8c; font-weight: 500; transition: color .4s ease; }
.mc-hub-card:hover .mc-hub-link { color: #C8A45D; }
@media (max-width: 1024px) { .mc-hub-card { flex-basis: calc((100% - 48px) / 2); } }
@media (max-width: 767px) { .mc-hub-wrap { padding: 32px 20px 60px; } .mc-hub-grid { gap: 34px 20px; } .mc-hub-card { flex-basis: 100%; } }

/* ---- Lien retour, en haut des sous-pages ---- */
.mc-back-link-wrap { max-width: 1100px; margin: 0 auto; padding: 34px 24px 0; }
.mc-back-link {
  display: inline-flex; align-items: center; gap: 8px; font-family: Manrope, sans-serif;
  font-size: 13px; letter-spacing: .04em; color: #9c9c9c; text-decoration: none !important;
  transition: color .3s ease;
}
.mc-back-link:hover { color: #C8A45D; }

/* ---- Contenu texte standard d'une page d'information (intro + sections) ----
   Gabarit commun réutilisé par FAQ, Nos finitions, Livraison, Conditions,
   Confidentialité, Contact — un seul changement ici s'applique partout.
   En-tête (titre + texte d'intro) reste centré et étroit ; le corps (à partir
   du premier sous-titre) est plus large et ancré à gauche pour ne pas donner
   l'impression d'un contenu compressé au centre de l'écran. ---- */
.mc-info-page { max-width: 1300px; margin: 0 auto; padding: 20px 24px clamp(70px, 8vw, 110px); }
.mc-info-page h1 {
  font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important;
  font-size: clamp(32px, 3.2vw, 46px); margin: 8px auto 18px; text-align: center;
  max-width: 760px;
}
.mc-info-lede {
  font-family: Manrope, sans-serif; color: #C9C9C9; font-size: clamp(15.5px, 1.05vw, 18px);
  line-height: 1.8; text-align: center; max-width: 950px; margin: 0 auto 60px;
}
.mc-info-section { max-width: 960px; margin: 0 auto 56px 0; }

/* ---- Corps plus large et ancré à gauche sur toutes les sous-pages
   d'information (FAQ, Nos choix de qualité d'impression, Livraison,
   Conditions générales, Confidentialité, Contact). Le vrai plafond était le
   conteneur du thème Astra (max-width:1240px, partagé par tout le site) —
   même technique que la Boutique (page-id-332). En-tête (h1 + intro) reste
   centré via sa propre largeur/marge auto. ---- */
body.page-id-1540 .ast-container,
body.page-id-1542 .ast-container,
body.page-id-1545 .ast-container,
body.page-id-805 .ast-container,
body.page-id-804 .ast-container,
body.page-id-23 .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-id-1540 .mc-info-page, .page-id-1542 .mc-info-page,
.page-id-1545 .mc-info-page, .page-id-805 .mc-info-page,
.page-id-804 .mc-info-page, .page-id-23 .mc-info-page {
  max-width: none;
  margin: 0;
  padding-left: 40px;
  padding-right: 40px;
}
.page-id-1540 .mc-info-page h1, .page-id-1542 .mc-info-page h1,
.page-id-1545 .mc-info-page h1, .page-id-805 .mc-info-page h1,
.page-id-804 .mc-info-page h1, .page-id-23 .mc-info-page h1 {
  margin-left: auto;
  margin-right: auto;
}
.page-id-23 .mc-contact-split {
  max-width: none;
  margin: 0;
  padding-left: 40px;
  padding-right: 40px;
}

/* ---- Sélecteur de langue FR|EN poussé complètement à droite du header,
   sur toutes les pages (desktop uniquement — le comportement mobile,
   déjà correct, n'est pas touché). ---- */
@media (min-width: 922px) {
  .mc-lang-switcher {
    margin-left: auto;
  }
}
.mc-info-section h2 {
  font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important;
  font-size: clamp(21px, 1.7vw, 27px); margin: 0 0 18px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(200,164,93,.25);
}
.mc-info-section p, .mc-info-section li {
  font-family: Manrope, sans-serif; color: #C9C9C9; font-size: 15.5px; line-height: 1.85;
}
.mc-info-section p { margin: 0 0 16px; }
.mc-info-section ul { margin: 0 0 16px; padding-left: 22px; }
.mc-info-section li { margin-bottom: 8px; }
.mc-info-section strong { color: #F0E4CC; }

/* Étapes numérotées (Suivi, Retours) */
.mc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin-top: 10px; }
.mc-step { padding: 26px 22px; background: #111111; border: 1px solid rgba(200,164,93,.16); border-radius: 2px; }
.mc-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid #C8A45D; color: #C8A45D; font-family: 'Playfair Display', serif;
  font-size: 15px; margin-bottom: 16px;
}
.mc-step h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 16.5px; margin: 0 0 10px; }
.mc-step p { font-size: 14px !important; color: #ABABAB !important; margin: 0 !important; }

/* Grille d'icônes courte (Livraison zones/coûts) */
.mc-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 10px; }
.mc-fact { padding: 24px; background: #111111; border: 1px solid rgba(200,164,93,.16); border-radius: 2px; }
.mc-fact strong { display: block; color: #C8A45D !important; font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.mc-fact span { display: block; color: #F0EFEA; font-family: 'Playfair Display', serif; font-size: 20px; }

/* ---- FAQ en accordéon (details/summary — aucun JS requis) ---- */
.mc-faq-list { display: flex; flex-direction: column; gap: 2px; }
.mc-faq-item { background: #111111; border: 1px solid rgba(200,164,93,.14); border-radius: 2px; }
.mc-faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 52px 20px 24px; position: relative;
  font-family: Manrope, sans-serif; font-weight: 600; color: #F0EFEA; font-size: 15px;
}
.mc-faq-item summary::-webkit-details-marker { display: none; }
.mc-faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: #C8A45D; font-size: 22px; font-weight: 300; transition: transform .3s ease;
}
.mc-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mc-faq-item p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14.5px; line-height: 1.75; margin: 0; padding: 0 24px 22px; }

/* ---- Bandeau "texte à venir" pour Conditions / Confidentialité ---- */
.mc-legal-note {
  display: flex; gap: 16px; align-items: flex-start; max-width: 1100px; margin: 0 auto 50px;
  padding: 22px 26px; background: rgba(200,164,93,.07); border: 1px solid rgba(200,164,93,.3); border-radius: 2px;
}
.mc-legal-note svg { flex: none; width: 22px; height: 22px; color: #C8A45D; margin-top: 2px; }
.mc-legal-note p { font-family: Manrope, sans-serif; color: #D8D2C0; font-size: 14px; line-height: 1.7; margin: 0; }
.mc-legal-placeholder {
  padding: 18px 20px; background: rgba(255,255,255,.02); border: 1px dashed rgba(200,164,93,.3);
  border-radius: 2px; color: #7c7c7c !important; font-style: italic; font-size: 14px !important;
}

/* ---- Comparatif des finitions (3 cartes riches) ---- */
.mc-finish-wrap { max-width: 1300px; margin: 0 auto; padding: 20px 24px clamp(70px, 8vw, 110px); }
.mc-finish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 20px; }
.mc-finish-card { background: #111111; border: 1px solid rgba(200,164,93,.2); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.mc-finish-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mc-finish-card-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.mc-finish-card h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 21px; margin: 0 0 6px; }
.mc-finish-card .mc-finish-tagline { font-family: Manrope, sans-serif; color: #C8A45D; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; }
.mc-finish-card ul { margin: 0 0 20px; padding-left: 18px; flex: 1; }
.mc-finish-card li { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14px; line-height: 1.65; margin-bottom: 8px; }
.mc-finish-card .mc-finish-reco { font-family: Manrope, sans-serif; font-size: 13px; color: #8c8c8c; font-style: italic; border-top: 1px solid rgba(200,164,93,.15); padding-top: 16px; margin-top: auto; }
.mc-finish-card p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
@media (max-width: 1000px) { .mc-finish-grid { grid-template-columns: 1fr; } }

/* Tableau comparatif */
.mc-compare-scroll { overflow-x: auto; margin-top: 10px; }
.mc-compare-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.mc-compare-table th, .mc-compare-table td {
  padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(200,164,93,.15);
  font-family: Manrope, sans-serif; font-size: 14px;
}
.mc-compare-table thead th {
  color: #C8A45D; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid rgba(200,164,93,.4); font-weight: 600;
}
.mc-compare-table tbody td { color: #C9C9C9; }
.mc-compare-table tbody th {
  color: #F8F8F6; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 15px;
}
.mc-compare-table .mc-stars { color: #C8A45D; letter-spacing: 1px; }
.mc-compare-table tbody tr:hover { background: rgba(200,164,93,.04); }

@media (max-width: 767px) {
  .mc-value-wrap, .mc-process-wrap, .mc-info-page, .mc-finish-wrap { padding-left: 18px; padding-right: 18px; }
  .mc-info-page h1 { font-size: 30px; }
}

/* ---- Résultats de recherche : liste compacte, une œuvre par ligne, au lieu
   de la grille produit standard (4 colonnes, vignettes pleine taille boutique).
   Ne touche que .mc-search-results-grid et ses enfants directs — n'affecte
   ni la grille catégorie normale, ni le fonctionnement de la recherche. ---- */
.mc-search-results-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px;
  max-width: 360px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.mc-search-results-grid li.product {
  width: 100% !important;
  margin: 0 !important;
}
.mc-search-results-grid .astra-shop-thumbnail-wrap {
  width: 100%;
  max-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  background: #111111;
}
.mc-search-results-grid .astra-shop-thumbnail-wrap img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 190px;
  display: block;
  object-fit: contain;
}
.mc-search-results-grid .astra-shop-summary-wrap {
  padding: 8px 2px 0;
  text-align: center;
}
.mc-search-results-grid .ast-woo-product-category {
  font-size: 10.5px;
}
.mc-search-results-grid .woocommerce-loop-product__title {
  font-size: 14.5px;
  margin: 4px 0 0;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .mc-search-results-grid { max-width: 260px; gap: 20px; }
}

/* ---- Configurateur produit : lien "Guide des dimensions" déplacé au-dessus
   du titre d'étape (aligné à droite) au lieu d'être sur la même ligne, et
   agrandi (taille doublée). Ne touche à rien d'autre du configurateur. ---- */
body.mc-cfg-active .mc-cfg-step1-headrow {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
}
body.mc-cfg-active .mc-cfg-step1-headrow .mc-cfg-dim-guide-link {
  order: -1;
  align-self: center;
  text-align: center;
  white-space: nowrap !important;
  max-width: 100%;
  line-height: 1.3;
  font-size: 21px !important;
  text-transform: none !important;
}
body.mc-cfg-active .mc-cfg-step1-headrow .mc-cfg-step-title {
  order: 0;
  white-space: normal;
}
@media (max-width: 600px) {
  body.mc-cfg-active .mc-cfg-step1-headrow .mc-cfg-dim-guide-link {
    font-size: 22px !important;
    align-self: stretch;
    text-align: center;
  }
}

/* ---- Configurateur : "Inclus dans le prix de base [du format]" tenu sur
   une seule ligne partout (présentation + finition), au lieu de retomber
   sur 2 lignes dans les cartes plus étroites. ---- */
.mc-cfg-choice-price {
  white-space: nowrap;
  font-size: 10.5px;
}
@media (max-width: 480px) {
  .mc-cfg-choice-price { white-space: normal; font-size: 12px; }
}

/* ---- Lien "Cliquez pour voir exemple." sous "Toile seulement — livrée
   roulée" + lightbox image associée. Réutilise le fondu ouvert/fermé de
   .mc-cfg-modal-overlay déjà en place pour le guide des dimensions. ---- */
.mc-cfg-example-link {
  display: block; background: none; border: none; padding: 0; margin-top: 6px;
  font-family: Manrope, sans-serif; font-size: 11.5px; color: #C8A45D; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; text-align: left;
}
.mc-cfg-example-link:hover { color: #F3D9A4; }
.mc-cfg-example-modal {
  position: relative; max-width: min(96vw, 1500px); width: 100%; max-height: 94vh;
  background: #0A0A0A; border: 1px solid rgba(200,164,93,.25); border-radius: 4px;
  padding: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform: scale(.96); transition: transform .3s ease;
  display: flex; align-items: center; justify-content: center;
}
.mc-cfg-example-overlay.open .mc-cfg-example-modal { transform: scale(1); }
.mc-cfg-example-img {
  max-width: 100%; max-height: 90vh; width: auto; height: auto; display: block; border-radius: 2px; object-fit: contain;
}

/* ---- Sous-menu déroulant "À propos" (Astra affiche un fond blanc par défaut —
   on l'habille dans la même identité noir/or que le reste du site) ---- */
.main-header-menu .sub-menu {
  background-color: #0A0A0A !important;
  border: 1px solid rgba(200,164,93,.28) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  padding: 8px 0;
  min-width: 232px;
}
.main-header-menu .sub-menu .menu-item {
  border-bottom: 1px solid rgba(200,164,93,.12);
}
.main-header-menu .sub-menu .menu-item:last-child { border-bottom: none; }
.main-header-menu .sub-menu .menu-link {
  color: #C9C9C9 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .02em;
  padding: 12px 22px !important;
  transition: color .25s ease, background-color .25s ease;
}
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-link:hover {
  color: #C8A45D !important;
  background-color: rgba(200,164,93,.08) !important;
}
@media (max-width: 921px) {
  .main-header-menu .sub-menu {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none;
  }
  .main-header-menu .sub-menu .menu-link { color: #C9C9C9 !important; }
}

/* ---- Masquer le titre de page par défaut d'Astra sur les nouvelles pages
   d'information (même technique déjà utilisée pour page-id-701) — chaque
   page définit son propre h1 dans son propre widget HTML. ---- */
.page-id-1540 .entry-header,
.page-id-1540 .page-header,
.page-id-1540 h1.entry-title,
.page-id-1540 .ast-archive-title,
.page-id-1542 .entry-header,
.page-id-1542 .page-header,
.page-id-1542 h1.entry-title,
.page-id-1542 .ast-archive-title,
.page-id-1545 .entry-header,
.page-id-1545 .page-header,
.page-id-1545 h1.entry-title,
.page-id-1545 .ast-archive-title,
.page-id-805 .entry-header,
.page-id-805 .page-header,
.page-id-805 h1.entry-title,
.page-id-805 .ast-archive-title,
.page-id-804 .entry-header,
.page-id-804 .page-header,
.page-id-804 h1.entry-title,
.page-id-804 .ast-archive-title,
.page-id-23 .entry-header,
.page-id-23 .page-header,
.page-id-23 h1.entry-title,
.page-id-23 .ast-archive-title {
  display: none !important;
}

/* ---- Formulaire de contact (SureForms) — habillage dans l'identité noir/or ---- */
.srfm-single-form-container, .srfm-form-container {
  background: transparent !important;
}
.srfm-block-label {
  font-family: Manrope, sans-serif !important;
  color: #F0EFEA !important;
  font-size: 13.5px !important;
  letter-spacing: .02em;
}
.srfm-input-common {
  background: #111111 !important;
  border: 1px solid rgba(200,164,93,.3) !important;
  color: #F8F8F6 !important;
  border-radius: 2px !important;
}
.srfm-input-common:focus {
  border-color: #C8A45D !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(200,164,93,.4) !important;
}
.srfm-submit-button, button.srfm-button {
  background: #C8A45D !important;
  color: #111111 !important;
  border: 1px solid #C8A45D !important;
  font-family: Manrope, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 13px !important;
  border-radius: 2px !important;
  transition: background .3s ease, color .3s ease;
}
.srfm-submit-button:hover, button.srfm-button:hover {
  background: transparent !important;
  color: #C8A45D !important;
}
.srfm-cbx .srfm-span-wrap:first-child {
  border-color: rgba(200,164,93,.5) !important;
}
.srfm-single-form-container .srfm-page-break-container,
.srfm-form-container form {
  max-width: 640px; margin: 0;
}

/* ---- Page Contact — mise en page à deux colonnes : informations à gauche,
   formulaire à droite, tous deux alignés au même point de départ vertical
   (juste sous l'en-tête centré) pour une meilleure visibilité du formulaire. ---- */
.mc-contact-split {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px;
  align-items: start;
  padding: 10px 24px clamp(60px, 7vw, 90px);
}
.mc-contact-left .mc-info-section, .mc-contact-right .mc-info-section {
  max-width: none; margin-left: 0; margin-right: 0;
}
@media (max-width: 1000px) {
  .mc-contact-split { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 767px) {
  .mc-contact-split { padding-left: 18px; padding-right: 18px; }
}

/* ---- Page produit (configurateur) -- ancrer le bloc a gauche au lieu de le
   centrer, pour reduire la marge inutile sur les grands ecrans et donner
   plus de largeur a la colonne de droite (moins de retours a la ligne). ---- */
@media (min-width: 1025px) {
  body.single-product .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.single-product .mc-cfg {
    margin: 0 !important;
    max-width: 1760px !important;
    padding-left: clamp(20px, 4vw, 64px) !important;
    padding-right: clamp(20px, 3vw, 48px) !important;
    grid-template-columns: 640px 1fr !important;
  }
}

/* ---- Banniere cookies (Complianz) -- le bouton "Refuser" existe deja dans
   le DOM du plugin (liaison native au consentement), simplement rendu
   visible ici (masque par defaut). L'habillage visuel complet (taille,
   couleurs, mise en page en grille) vit maintenant dans le bloc dedie
   plus bas ("Bannière de consentement (Complianz)") -- ce bloc-ci ne
   force plus que la visibilite, pour eviter tout conflit de specificite
   avec les nouvelles regles. Le libelle FR est mis a jour via JS. ---- */
.cmplz-buttons .cmplz-deny {
  display: inline-flex !important;
}

/* ---- Badge "OU" entre les 2 cartes de presentation (etape 2 du configurateur) --
   rend visible que le choix est exclusif (l'un OU l'autre), pas cumulatif. ---- */
.mc-cfg-choice-row[data-group="presentation"] {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.mc-cfg-or-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0A0A0A;
  border: 1px solid rgba(200,164,93,.45);
  color: #C8A45D;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  justify-self: center;
}
@media (max-width: 1024px) {
  .mc-cfg-choice-row[data-group="presentation"] {
    grid-template-columns: 1fr;
  }
  .mc-cfg-or-badge {
    justify-self: center;
    margin: -2px auto;
  }
}

/* ---- Refonte epuree des 2 cartes "presentation" (toile roulee / chassis) --
   ajout du bloc livraison-ramassage, prix en forme de badge, respiration
   generale, sans toucher aux autres cartes (finition, format). ---- */
.mc-cfg-choice-card { padding: 20px 20px 18px; }
.mc-cfg-choice-card p { margin: 0 0 14px; }

.mc-cfg-choice-logistics {
  margin: 0 0 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mc-cfg-choice-logistics-label {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #C8A45D;
  margin-bottom: 7px;
}
.mc-cfg-choice-logistics p {
  font-size: 11.5px;
  line-height: 1.55;
  color: #8c8c8c;
  margin: 0 0 5px;
}
.mc-cfg-choice-logistics p:last-child { margin-bottom: 0; }

.mc-cfg-choice-price {
  display: inline-block;
  background: rgba(200,164,93,.1);
  border: 1px solid rgba(200,164,93,.32);
  border-radius: 20px;
  padding: 5px 13px;
  font-weight: 700 !important;
}
.mc-cfg-choice-card .mc-cfg-example-link { margin-top: 12px; }

/* ---- Ajustements suite retours client (etape 2, cartes presentation) ---- */
.mc-cfg-choice-price { margin: 6px 0 14px; }
[data-group="presentation"] .mc-cfg-example-link {
  text-align: center;
  text-transform: none;
  font-size: 13.5px;
}

/* ---- "ou" isole sur sa propre ligne entre livraison et ramassage (carte
   "Toile seulement / roulee"), pour bien distinguer les 2 options. ---- */
.mc-cfg-choice-logistics-or {
  display: block;
  font-family: Manrope, sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #6a6a6a;
  margin: 2px 0 5px;
}

/* ---- Refonte v2 des 2 cartes "presentation" : mise en page centree,
   epuree, sans paragraphe descriptif -- check / prix / titre / lien
   exemple / diviseur / logistique. Scope uniquement au groupe
   "presentation" -- n'affecte pas les 3 cartes de finition. ---- */
[data-group="presentation"].mc-cfg-choice-row .mc-cfg-choice-card,
.mc-cfg-choice-row[data-group="presentation"] .mc-cfg-choice-card {
  text-align: center;
  padding: 26px 24px 22px;
}
[data-group="presentation"] .mc-cfg-choice-check {
  position: static;
  display: inline-flex;
  margin: 0 0 14px;
}
[data-group="presentation"] .mc-cfg-choice-price {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C8A45D;
}
[data-group="presentation"] .mc-cfg-choice-card h3 {
  margin: 0 0 16px;
  font-size: 19px;
}
[data-group="presentation"] .mc-cfg-example-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 0;
}
[data-group="presentation"] .mc-cfg-choice-logistics {
  margin-top: 20px;
  padding-top: 16px;
  text-align: center;
}
[data-group="presentation"] .mc-cfg-choice-logistics-label {
  text-align: center;
}

/* ---- Ajustement suite retour client : tout le texte revient a gauche,
   seul le lien "exemple" reste centre. Rectangle rapetisse (~25%) : moins
   de padding/marges, plus compact. ---- */
.mc-cfg-choice-row[data-group="presentation"] .mc-cfg-choice-card,
[data-group="presentation"] .mc-cfg-choice-card {
  text-align: left;
  padding: 20px 18px 17px;
}
[data-group="presentation"] .mc-cfg-choice-check {
  margin: 0 0 10px;
}
[data-group="presentation"] .mc-cfg-choice-price {
  text-align: left;
  margin: 0 0 8px;
}
[data-group="presentation"] .mc-cfg-choice-card h3 {
  text-align: left;
  margin: 0 0 12px;
}
[data-group="presentation"] .mc-cfg-example-link {
  text-align: center;
}
[data-group="presentation"] .mc-cfg-choice-logistics {
  text-align: left;
  margin-top: 15px;
  padding-top: 12px;
}
[data-group="presentation"] .mc-cfg-choice-logistics-label {
  text-align: left;
}

/* ---- Refonte v3 des 2 cartes "presentation" : nouveau contenu (titres,
   sous-titre chassis, texte raccourci, prix en bas pour le chassis avec
   etiquette "Prix"), dividers pleine largeur, rectangle encore reduit
   (~15% de plus). ---- */
[data-group="presentation"] .mc-cfg-choice-card {
  padding: 17px 15px 14px;
}
[data-group="presentation"] .mc-cfg-choice-check {
  margin: 0 0 9px;
}
[data-group="presentation"] .mc-cfg-choice-card h3 {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .015em;
  margin: 0 0 10px;
}
.mc-cfg-choice-card .mc-cfg-choice-tagline {
  font-size: 11.5px;
  color: #8c8c8c;
  text-align: left;
  margin: -4px 0 5px;
}
.mc-cfg-choice-divider {
  display: block;
  height: 1px;
  background: rgba(255,255,255,.09);
  margin: 13px 0;
}
.mc-cfg-choice-divider-tight {
  margin: 8px 0;
}
[data-group="presentation"] .mc-cfg-choice-logistics {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
[data-group="presentation"] .mc-cfg-choice-logistics-label {
  text-align: center;
}
[data-group="presentation"] .mc-cfg-choice-price {
  display: block;
  text-align: center;
  margin: 2px 0 0;
}
.mc-cfg-choice-price-label {
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8c8c8c;
  margin-right: 6px;
}
.mc-cfg-choice-price .mc-cfg-price-chassis {
  font-size: 15px;
  font-weight: 700;
  color: #F3D9A4;
}

/* ---- Refonte finale (v4) des 2 cartes "presentation" : alignement a
   gauche partout sauf le pied de carte (Inclus / Prix), icones + fleche
   sur le lien exemple, sous-titre chassis en dore. Regles en fin de
   fichier avec !important pour trancher net la cascade accumulee. ---- */
[data-group="presentation"] .mc-cfg-choice-card {
  text-align: left !important;
}
[data-group="presentation"] .mc-cfg-example-link {
  text-align: left !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
[data-group="presentation"] .mc-cfg-choice-logistics-label {
  text-align: left !important;
}
.mc-cfg-choice-logistics-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.mc-cfg-choice-logistics-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(200,164,93,.45);
  color: #C8A45D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-cfg-choice-logistics-icon svg { width: 19px; height: 19px; }
.mc-cfg-choice-logistics-head .mc-cfg-choice-logistics {
  flex: 1 1 auto;
  min-width: 0;
}
.mc-cfg-choice-card .mc-cfg-choice-tagline {
  color: #C8A45D !important;
}
[data-group="presentation"] .mc-cfg-choice-price {
  text-align: center !important;
  display: block;
}
.mc-cfg-choice-included {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #F3D9A4;
}
.mc-cfg-choice-price .mc-cfg-choice-price-label {
  display: block;
  margin: 0 0 4px;
  color: #F8F8F6;
  font-size: 12px;
  letter-spacing: .12em;
}
.mc-cfg-choice-price .mc-cfg-price-chassis {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: #F3D9A4;
}
[data-group="presentation"] .mc-cfg-example-link::after {
  content: '\203A';
  font-size: 15px;
  line-height: 1;
}

/* ---- Grille identique pour les 2 cartes presentation -- chaque zone
   (titre, logistique, prix) recoit la meme hauteur reservee, mesuree sur
   le contenu le plus long des 2 cartes, pour un alignement pixel-perfect
   independant du texte. Seul le texte differe entre les 2 cartes. ---- */
.mc-cfg-choice-titlezone {
  min-height: 48px;
}
.mc-cfg-choice-logistics-head {
  min-height: 138px;
}
[data-group="presentation"] .mc-cfg-choice-price {
  min-height: 56px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* ---- Densification finale (~25% plus compact) : espacements verticaux
   resserres partout (padding, marges, interlignes), tailles de texte et
   d'icones intactes. Toutes les regles ci-dessous gagnent la cascade
   (!important) pour trancher net l'empilement de rondes precedentes. ---- */
[data-group="presentation"] .mc-cfg-choice-card {
  padding: 12px 18px 10px !important;
}
[data-group="presentation"] .mc-cfg-choice-check {
  margin: 0 0 5px !important;
}
.mc-cfg-choice-titlezone {
  min-height: 42px !important;
}
.mc-cfg-choice-card .mc-cfg-choice-tagline {
  margin: -2px 0 2px !important;
}
.mc-cfg-choice-divider {
  margin: 8px 0 !important;
}
[data-group="presentation"] .mc-cfg-choice-logistics-label {
  margin: 0 0 3px !important;
}
.mc-cfg-choice-logistics p {
  margin: 0 0 2px !important;
  line-height: 1.35 !important;
}
.mc-cfg-choice-logistics-or {
  margin: 1px 0 3px !important;
}
.mc-cfg-choice-logistics-head {
  min-height: 84px !important;
}
.mc-cfg-choice-price .mc-cfg-choice-price-label {
  margin: 0 0 2px !important;
}
[data-group="presentation"] .mc-cfg-choice-price {
  min-height: 40px !important;
}

/* ---- Passe 2 de densification : interlignes/marges encore resserres,
   tailles de police inchangees. Ajuste les hauteurs reservees a leur vrai
   minimum pour retablir la symetrie apres compression. ---- */
[data-group="presentation"] .mc-cfg-choice-card h3 {
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
}
.mc-cfg-choice-titlezone {
  min-height: 40px !important;
}
[data-group="presentation"] .mc-cfg-choice-card {
  padding: 10px 18px 8px !important;
}
.mc-cfg-choice-divider {
  margin: 6px 0 !important;
}
.mc-cfg-choice-logistics p {
  line-height: 1.2 !important;
  margin: 0 0 1px !important;
}
[data-group="presentation"] .mc-cfg-choice-logistics-label {
  margin: 0 0 2px !important;
}
.mc-cfg-choice-logistics-or {
  margin: 0px 0 2px !important;
}
.mc-cfg-choice-logistics-head {
  min-height: 115px !important;
}
.mc-cfg-choice-price .mc-cfg-choice-price-label {
  margin: 0 0 1px !important;
}
[data-group="presentation"] .mc-cfg-choice-price {
  min-height: 52.5px !important;
}

/* ---- Sous-titre chassis sur la meme ligne que le titre (vis-a-vis), et
   passe 3 de densification (~20% de plus). ---- */
.mc-cfg-choice-titlezone-row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.mc-cfg-choice-titlezone-row h3 {
  margin: 0 !important;
}
.mc-cfg-choice-titlezone-row .mc-cfg-choice-tagline {
  margin: 0 !important;
  white-space: nowrap;
}
.mc-cfg-choice-titlezone {
  min-height: 26px !important;
}

/* ---- Passe 3 de densification (~20% supplementaire). ---- */
[data-group="presentation"] .mc-cfg-choice-card {
  padding: 6px 18px 5px !important;
}
[data-group="presentation"] .mc-cfg-choice-check {
  margin: 0 0 3px !important;
}
.mc-cfg-choice-divider {
  margin: 4px 0 !important;
}
.mc-cfg-choice-logistics-head {
  min-height: 115px !important;
}
[data-group="presentation"] .mc-cfg-choice-price {
  min-height: 52.5px !important;
}
.mc-cfg-choice-titlezone {
  min-height: 48px !important;
}

/* ---- Retrait des hauteurs minimales forcees sur logistique/prix -- elles
   creaient un vide visible avant la barre de separation. Le contenu
   dicte maintenant sa propre hauteur (barre + prix "remontent"). Le
   sous-titre chassis, s'il ne tient pas sur la ligne du titre, s'aligne
   a droite au lieu de repartir a gauche. ---- */
.mc-cfg-choice-logistics-head {
  min-height: 0 !important;
}
[data-group="presentation"] .mc-cfg-choice-price {
  min-height: 0 !important;
}
.mc-cfg-choice-titlezone-row .mc-cfg-choice-tagline {
  white-space: normal !important;
  text-align: right;
  flex: 1 1 auto;
}

/* ---- Compense la difference de hauteur naturelle entre les 2 cartes
   (contenu plus court cote chassis) via un padding-bas dedie, plutot que
   par un vide au milieu de la carte. ---- */
.mc-cfg-choice-card[data-value="chassis"] {
  padding-bottom: 5px !important;
}

/* ---- Pour que le sous-titre tienne vraiment sur la ligne du titre (au
   lieu de repartir a la ligne), le titre et le sous-titre sont legerement
   reduits -- c'est le seul moyen geometrique de les faire tenir cote a
   cote a cette largeur de carte. ---- */
[data-group="presentation"] .mc-cfg-choice-card h3 {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}
.mc-cfg-choice-titlezone-row {
  gap: 6px 8px !important;
  flex-wrap: nowrap !important;
}
.mc-cfg-choice-titlezone-row h3 {
  flex: 0 1 auto;
  min-width: 0;
}
.mc-cfg-choice-titlezone-row .mc-cfg-choice-tagline {
  font-size: 9.5px !important;
  white-space: nowrap !important;
  flex: 0 0 auto;
}
.mc-cfg-choice-titlezone {
  min-height: 20px !important;
}

/* ---- Espace de respiration entre le titre et le lien "exemple" (etape 2). ---- */
[data-group="presentation"] .mc-cfg-example-link {
  margin-top: 10px !important;
}

/* ---- Refonte v5 : bandeau superieur (coche + statut), icone hero a
   gauche du titre, prix/inclus en badge plein dore. ---- */
.mc-cfg-choice-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mc-cfg-choice-eyebrow .mc-cfg-choice-check {
  position: static;
  margin: 0;
}
.mc-cfg-choice-eyebrow-label {
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C8A45D;
}
/* Étape "Choisissez votre option", carte "Toile seulement" : SEULE la
   phrase "Inclus dans le prix de base" disparaît, à la demande explicite.
   Le crochet/cercle et la forme du bandeau restent identiques à la carte
   "chassis" à droite -- visibility:hidden (pas display:none) pour que
   l'espace du texte reste réservé et que les deux cartes gardent
   exactement la même hauteur/alignement qu'avant. Premier essai (tout
   masquer) rendait la carte différente de celle de droite -- corrigé. */
[data-value="roulee"] .mc-cfg-choice-eyebrow-label {
  visibility: hidden !important;
}
.mc-cfg-choice-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}
.mc-cfg-choice-hero-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  color: #C8A45D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-cfg-choice-hero-icon svg { width: 100%; height: 100%; }
.mc-cfg-choice-hero-content {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
[data-group="presentation"] .mc-cfg-choice-hero-content h3 {
  font-size: 16px !important;
  letter-spacing: .01em !important;
  margin: 0 0 4px !important;
}
.mc-cfg-choice-hero-content .mc-cfg-choice-tagline {
  font-size: 11px !important;
  margin: 0 0 8px !important;
  text-align: left !important;
  white-space: normal !important;
  color: #C8A45D !important;
}
[data-group="presentation"] .mc-cfg-choice-hero-content .mc-cfg-example-link {
  text-align: left !important;
  margin-top: 4px !important;
  justify-content: flex-start;
}
.mc-cfg-choice-pill {
  display: flex !important;
  align-self: center !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 180px;
  background: linear-gradient(135deg, #E9C888, #C8A45D) !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 18px !important;
  margin: 4px auto 0 !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.2) !important;
}
.mc-cfg-choice-pill.mc-cfg-choice-included {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0A0A0A;
}
.mc-cfg-choice-pill .mc-cfg-choice-price-label {
  color: rgba(10,10,10,.65) !important;
  font-size: 10.5px !important;
}
.mc-cfg-choice-pill .mc-cfg-price-chassis {
  color: #0A0A0A !important;
  font-family: 'Playfair Display', serif;
  font-size: 17px !important;
}

/* ---- Meme habillage que les cartes presentation, applique aux 3 cartes
   finition (Canvas Premium / Relief 3D / Signature) : lien "exemple" en
   majuscules avec fleche, diviseur, prix en pilule doree. ---- */
[data-group="finition"] .mc-cfg-example-link {
  text-align: left;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
}
[data-group="finition"] .mc-cfg-example-link::after {
  content: '\203A';
  font-size: 15px;
  line-height: 1;
}
[data-group="finition"] .mc-cfg-choice-divider {
  margin: 16px 0 14px;
}
[data-group="finition"] .mc-cfg-choice-price.mc-cfg-choice-pill {
  display: flex !important;
  width: fit-content !important;
  margin: 4px auto 0 !important;
}
.mc-cfg-choice-pill .mc-cfg-price-relief3d,
.mc-cfg-choice-pill .mc-cfg-price-fullpainting,
.mc-cfg-choice-pill .mc-cfg-choice-pill-value {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: #0A0A0A;
}

/* ---- Reproduction fidele de la reference approuvee : icones hero
   encerclees (comme les icones camion/localisation), phrase d'avertissement
   en rouge sur une seule ligne (carte chassis). ---- */
.mc-cfg-choice-hero-icon {
  border-radius: 50%;
  border: 1px solid rgba(200,164,93,.45);
}
.mc-cfg-choice-hero-icon svg { width: 55%; height: 55%; }
.mc-cfg-choice-logistics-warning {
  color: #E5484D !important;
  white-space: nowrap;
}

/* ---- Alignement pixel-perfect des 3 cartes finition : titre et
   description recoivent une hauteur reservee identique sur les 3 cartes
   (mesuree sur le contenu le plus long), pour que liens/separateurs/prix
   soient exactement a la meme hauteur peu importe la longueur du texte. ---- */
[data-group="finition"] .mc-cfg-choice-card h3 {
  min-height: 41px;
}
[data-group="finition"] .mc-cfg-choice-card > p {
  min-height: 100px;
}
.mc-cfg-choice-hero-content {
  min-height: 74px;
}
.mc-cfg-choice-logistics-head {
  min-height: 115px !important;
}
[data-group="presentation"] .mc-cfg-choice-price {
  min-height: 0 !important;
}

/* ---- Badge "+" (toile toujours incluse + chassis optionnel en supplement,
   plus une simple alternative "OU"). ---- */
.mc-cfg-or-badge {
  font-size: 18px !important;
  line-height: 1;
}

/* ---- Uniformisation finale des 5 badges prix (2 cartes presentation + 3
   finition) : meme typographie, meme taille de bouton partout, et vrai
   centrage horizontal (le bug venait d'un display:inline-flex qui
   empechait le margin:auto de fonctionner sur les cartes finition). ---- */
.mc-cfg-choice-pill {
  padding: 8px 22px !important;
}
.mc-cfg-choice-pill .mc-cfg-price-chassis,
.mc-cfg-choice-pill .mc-cfg-price-relief3d,
.mc-cfg-choice-pill .mc-cfg-price-fullpainting,
.mc-cfg-choice-pill .mc-cfg-choice-pill-value {
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
}

/* ---- Reduction de hauteur des 5 badges prix (~25%) : le line-height fixe
   de 25.6px etait surdimensionne par rapport aux polices 10.5px/19px. ---- */
.mc-cfg-choice-pill {
  padding: 8px 20px !important;
}
.mc-cfg-choice-pill .mc-cfg-choice-price-label {
  line-height: 1.15 !important;
  margin: 0 0 1px 0 !important;
}
.mc-cfg-choice-pill .mc-cfg-price-chassis,
.mc-cfg-choice-pill .mc-cfg-price-relief3d,
.mc-cfg-choice-pill .mc-cfg-price-fullpainting,
.mc-cfg-choice-pill .mc-cfg-choice-pill-value {
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* ---- Deuxieme passe : encore -25% de hauteur sur les 5 badges prix, et
   alignement de la distance badge->bas de carte entre presentation et
   finition (les cartes finition gardaient encore le padding-bottom:18px
   de la regle de base .mc-cfg-choice-card, jamais aligne comme les
   cartes presentation qui avaient deja ete reduites a 5px). ---- */
.mc-cfg-choice-pill {
  padding: 4px 20px !important;
}
.mc-cfg-choice-pill .mc-cfg-choice-price-label {
  line-height: 1 !important;
  margin: 0 0 1px 0 !important;
}
.mc-cfg-choice-pill .mc-cfg-price-chassis,
.mc-cfg-choice-pill .mc-cfg-price-relief3d,
.mc-cfg-choice-pill .mc-cfg-price-fullpainting,
.mc-cfg-choice-pill .mc-cfg-choice-pill-value {
  line-height: 1 !important;
}
[data-group="finition"] .mc-cfg-choice-card {
  padding-bottom: 5px !important;
}

/* =========================================================================
   Configurateur — étape 1 : filtrage par Grandeur (Petit/Moyen/Grand/Géant),
   en plus de l'orientation existante. Nouvelle rangée .mc-cfg-size-tabs +
   cartes de format allégées. Scopé à .mc-cfg-format-grid (étape 1) pour ne
   jamais affecter la grille interne du guide des dimensions
   (.mc-cfg-modal-guide-grid, déjà stylée séparément plus haut). */
.mc-cfg-family-tabs { margin-bottom: 10px !important; }
.mc-cfg-family-tab {
  padding: 7px 15px !important;
  font-size: 11px !important;
}

.mc-cfg-size-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
.mc-cfg-size-tab {
  font-family: Manrope, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 9px 6px !important;
  border-radius: 3px !important;
  border: 1px solid #2a2a2a !important;
  background: none !important;
  color: #9a9a9a !important;
  cursor: pointer !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
.mc-cfg-size-tab:hover { color: #F3D9A4 !important; border-color: rgba(200,164,93,.5) !important; }
.mc-cfg-size-tab.active {
  border-color: #C8A45D !important;
  color: #F3D9A4 !important;
  background: rgba(200,164,93,.1) !important;
  box-shadow: inset 0 0 0 1px rgba(200,164,93,.35) !important;
}
.mc-cfg-size-tab-empty { opacity: .3 !important; cursor: not-allowed !important; }
.mc-cfg-size-tab-empty:hover { color: #9a9a9a !important; border-color: #2a2a2a !important; }

/* Cartes de format (étape 1 seulement) : plus petites, plus d'air, prix
   discret sous la dimension — le libellé d'orientation répété a été retiré
   côté JS (l'orientation est déjà indiquée par l'onglet du dessus). */
.mc-cfg-format-grid {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
  gap: 14px !important;
}
.mc-cfg-format-grid .mc-cfg-format-card {
  text-align: center !important;
  align-items: center !important;
  padding: 18px 10px !important;
  gap: 6px !important;
}
.mc-cfg-format-grid .mc-cfg-format-dims { font-size: 15.5px !important; }
.mc-cfg-format-grid .mc-cfg-format-price {
  font-size: 10.5px !important;
  color: #8a8a8a !important;
  margin-top: 0 !important;
}
.mc-cfg-format-grid .mc-cfg-format-card.active .mc-cfg-format-price { color: #C8A45D !important; }
.mc-cfg-format-grid .mc-cfg-format-card.active {
  box-shadow: 0 6px 18px rgba(200,164,93,.16), inset 0 0 0 1px rgba(200,164,93,.5) !important;
}

/* Bouton du guide des dimensions : repositionné sous la grille (près du
   format sélectionné) — texte, comportement et handler JS inchangés. */
.mc-cfg-dim-guide-link { margin-top: 16px !important; margin-bottom: 4px !important; display: inline-block; }

@media (max-width: 480px) {
  .mc-cfg-size-tabs { grid-template-columns: repeat(2, 1fr) !important; }
  .mc-cfg-format-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; gap: 10px !important; }
}

/* =========================================================================
   Étape 1 — carte "Guide des dimensions" premium (remplace l'ancien lien
   texte) + note format sur mesure harmonisée. Nouvelle structure de bouton
   (icône + titre + sous-titre + flèche) ; les anciennes règles .mc-cfg-
   dim-guide-link plus haut dans le fichier stylaient un simple lien texte
   et sont écrasées ici pour la nouvelle carte. */
.mc-cfg-dim-guide-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 16px 0 4px !important;
  padding: 15px 16px !important;
  background: #151515 !important;
  border: 1px solid rgba(200,164,93,.45) !important;
  border-radius: 4px !important;
  cursor: pointer;
  text-align: left !important;
  font-size: 15px !important;
  text-transform: none !important;
  transition: border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease !important;
}
.mc-cfg-dim-guide-link:hover {
  border-color: #C8A45D !important;
  background: #181818 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(200,164,93,.14) !important;
}
.mc-cfg-dim-guide-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(200,164,93,.5); display: flex; align-items: center; justify-content: center;
  color: #C8A45D; transition: border-color .25s ease;
}
.mc-cfg-dim-guide-icon svg { width: 18px; height: 18px; }
.mc-cfg-dim-guide-link:hover .mc-cfg-dim-guide-icon { border-color: #C8A45D; }
.mc-cfg-dim-guide-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mc-cfg-dim-guide-title {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 15px; color: #F8F8F6; letter-spacing: .2px;
}
.mc-cfg-dim-guide-sub { font-family: Manrope, sans-serif; font-size: 12px; color: #9a9a9a; line-height: 1.4; }
.mc-cfg-dim-guide-arrow {
  flex-shrink: 0; color: #C8A45D; font-size: 18px; line-height: 1; transition: transform .25s ease;
}
.mc-cfg-dim-guide-link:hover .mc-cfg-dim-guide-arrow { transform: translateX(3px); }
@media (max-width: 600px) {
  .mc-cfg-dim-guide-link { padding: 13px 14px !important; gap: 12px !important; }
  .mc-cfg-dim-guide-title { font-size: 14px !important; }
}

/* Note "format sur mesure" — plus visible, harmonisée avec la nouvelle carte */
.mc-cfg-custom-note {
  font-size: 13px !important;
  color: #ababab !important;
  line-height: 1.65 !important;
  margin: 20px 0 8px !important;
}
.mc-cfg-custom-link {
  display: inline-block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #C8A45D !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(200,164,93,.4) !important;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease !important;
}
.mc-cfg-custom-link:hover { color: #F3D9A4 !important; border-color: #F3D9A4 !important; }

/* ---- Carte "Guide des dimensions" : version compacte (60-70% de largeur),
   une seule ligne (sous-titre retiré), meilleur équilibre visuel. Écrase la
   version pleine-largeur précédente. ---- */
.mc-cfg-dim-guide-link {
  width: fit-content !important;
  max-width: 68% !important;
  padding: 13px 22px !important;
  gap: 12px !important;
}
.mc-cfg-dim-guide-icon { width: 32px !important; height: 32px !important; }
.mc-cfg-dim-guide-icon svg { width: 15px !important; height: 15px !important; }
.mc-cfg-dim-guide-title {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.mc-cfg-dim-guide-arrow { font-size: 17px !important; }
@media (max-width: 700px) {
  .mc-cfg-dim-guide-link { max-width: 100% !important; padding: 13px 16px !important; }
  .mc-cfg-dim-guide-title { white-space: normal; font-size: 14px !important; }
}

/* =========================================================================
   Collections — mosaïque de 3 œuvres réelles remplaçant l'icône (prototype
   Animaux). Le cadre doré existant (.mc-coll-frame / .mc-coll-frame-inner)
   n'est pas touché ; seul son contenu change quand un data-mc-artmix est
   présent. Même recadrage que les fiches produits : object-fit cover,
   object-position center (crop centré, aucun visage coupé côté haut/bas). */
.mc-coll-frame-inner[data-mc-artmix] { padding: 0; }
.mc-coll-artmix {
  display: flex; gap: 5px;
  width: calc(100% - 14px); height: calc(100% - 14px); margin: 7px;
}
.mc-coll-artmix-main, .mc-coll-artmix-small {
  position: relative; overflow: hidden; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.mc-coll-artmix-main { flex: 1.5; }
.mc-coll-artmix-side { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mc-coll-artmix-small { flex: 1; }
.mc-coll-artmix-main img, .mc-coll-artmix-small img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; filter: saturate(1.06) contrast(1.03);
  transition: transform .7s ease;
}
.mc-coll-card:hover .mc-coll-artmix-main img,
.mc-coll-card:hover .mc-coll-artmix-small img { transform: scale(1.07); }
.mc-coll-artmix-main::after, .mc-coll-artmix-small::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%);
}
@media (max-width: 480px) {
  .mc-coll-artmix { gap: 4px; width: calc(100% - 10px); height: calc(100% - 10px); margin: 5px; }
}

/* ---- Variante "3 bandes égales" pour la mosaïque Collections (essai
   demandé) — mêmes images/logique JS, juste 3 colonnes de largeur
   identique au lieu de 1 grande + 2 petites. ---- */
.mc-coll-artmix-band {
  position: relative; overflow: hidden; border-radius: 2px; flex: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.mc-coll-artmix-band img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; filter: saturate(1.06) contrast(1.03);
  transition: transform .7s ease;
}
.mc-coll-card:hover .mc-coll-artmix-band img { transform: scale(1.07); }
.mc-coll-artmix-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%);
}

/* ---- Hero carousel : diapositive active entièrement cliquable vers sa
   fiche produit. Calque transparent au-dessus des images mais sous les
   flèches/points (déjà en z-index:3) pour ne jamais leur voler le clic ni
   gêner le swipe tactile. Invisible/non cliquable tant que la diapositive
   active n'a pas d'URL de produit associée (data-product-url). ---- */
.mc-hero-slide-link {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.mc-hero-slide-link.has-link { pointer-events: auto; cursor: pointer; }

/* ---- Étape 1 : titre + CTA "format sur mesure" sur la même ligne, phrase
   longue retirée (garde uniquement "Vous ne trouvez pas le format idéal ?"
   + le lien), alignés à droite. ---- */
.mc-cfg-step1-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 18px;
}
.mc-cfg-step1-header .mc-cfg-step-title { margin-bottom: 0 !important; }
.mc-cfg-custom-cta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  text-align: right;
}
.mc-cfg-custom-cta .mc-cfg-custom-note {
  font-size: 12.5px !important; color: #ababab !important; margin: 0 !important; white-space: nowrap;
}
.mc-cfg-custom-cta .mc-cfg-custom-link {
  font-size: 12.5px !important; font-weight: 600 !important; color: #C8A45D !important;
  text-decoration: none !important; border-bottom: 1px solid rgba(200,164,93,.4) !important;
  white-space: nowrap;
}
.mc-cfg-custom-cta .mc-cfg-custom-link:hover { color: #F3D9A4 !important; border-color: #F3D9A4 !important; }
@media (max-width: 700px) {
  .mc-cfg-step1-header { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  .mc-cfg-custom-cta { text-align: left; }
}

/* ---- Plus d'espace au-dessus du lien "Une question avant de commander ?"
   sous le bouton Ajouter au panier. ---- */
.mc-cfg-contact-link { margin-top: 40px !important; }

/* ---- Carte "Cadrage de bois inclus" : titre et sous-texte "1,5 po
   épaisseur — prêt à accrocher" sur la même ligne, à droite du titre. ---- */
.mc-cfg-choice-hero-title-row {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.mc-cfg-choice-hero-title-row h3 { margin: 0 !important; }
.mc-cfg-choice-hero-title-row .mc-cfg-choice-tagline { margin: 0 !important; }

/* ---- Bouton "Guide des dimensions et aperçu visuel" : centré et plus
   d'espace au-dessus (trop collé à la grille de formats). ---- */
.mc-cfg-dim-guide-link {
  margin: 32px auto 4px !important;
}

/* ---- Carte "Cadrage de bois inclus" : icône légèrement réduite pour
   laisser assez de place au titre + "Prêt à être installé" sur la même
   ligne (espace limité sur cette carte). ---- */
[data-value="chassis"] .mc-cfg-choice-hero-icon {
  width: 30px !important; height: 30px !important; flex-shrink: 0;
}
[data-value="chassis"] .mc-cfg-choice-hero { gap: 8px !important; }
.mc-cfg-choice-hero-title-row {
  gap: 3px 8px !important;
}
[data-group="presentation"] .mc-cfg-choice-hero-title-row h3 { font-size: 15px !important; }

/* ---- Images "L'art réinventé" (accueil) cliquables vers leur fiche
   produit, même logique que le carrousel : toute l'image cliquable. ---- */
.mc-presentation-image-link {
  position: absolute; inset: 0; z-index: 2;
  display: block; cursor: pointer;
}
.mc-presentation-image img { transition: transform .6s ease; }
.mc-presentation-image:hover img { transform: scale(1.035); }

/* ---- Bouton "Guide des dimensions et aperçu visuel" en majuscules ---- */
.mc-cfg-dim-guide-title { text-transform: uppercase; letter-spacing: .04em; }

/* ---- Pied de page : ne garder que l'e-mail dans la colonne Contact
   (Instagram, Facebook et "Québec, Canada" retirés visuellement). ---- */
.mc-footer-col:nth-child(4) li:nth-child(n+2) { display: none !important; }

/* ---- Menu "Centre d'information" : les 8 sous-éléments restent dans la
   structure du menu (pour référence interne) mais ne doivent pas s'afficher
   au visiteur — la navigation se fait via les cartes de la page elle-même. ---- */
#menu-item-1577 .sub-menu { display: none !important; }
#menu-item-1577 .dropdown-menu-toggle { display: none !important; }

/* =========================================================================
   Bannière de consentement (Complianz) — refonte premium, compacte et
   centrée (v2). Palette noir/or et structure d'origine conservées ; les
   dimensions sont réduites d'environ un tiers dans toutes les directions
   pour un rendu discret façon grande maison de luxe. Hiérarchie des 3
   actions repensée : "Accepter" reste l'unique bouton plein (mis en
   valeur), "Refuser" et "Personnaliser" deviennent des liens texte sobres
   côte à côte — toujours les mêmes <button> du plugin (liaison de
   consentement native intacte), seul l'habillage visuel change, donc la
   conformité légale (action de refus en un clic, aussi accessible que
   l'acceptation) n'est pas affectée. Repositionné au centre-bas de
   l'écran, dans le coin inférieur droit d'origine du plugin -- position
   confirmée sans transform (surtout PAS transform:translateX, qui a fait
   disparaître la bannière pour de vrais visiteurs : le plugin anime
   probablement sa propre apparition via "transform" en JS, et un
   transform !important en CSS entre en conflit avec cette animation). */
.cmplz-cookiebanner.cmplz-bottom-right {
  left: auto !important;
  right: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  bottom: 16px !important;
}
.cmplz-cookiebanner {
  background: #111111 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(200,164,93,.22) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.4) !important;
  padding: 12px 20px !important;
  min-width: 0 !important; /* le plugin fixe min-width:526px par defaut, ce qui
                               gagne toujours sur max-width en CSS -- sans ce
                               reset, la largeur ne pouvait jamais descendre
                               sous 526px quel que soit le max-width fixe. */
  max-width: 470px !important; /* le texte du message (fourni par le plugin,
                                    non modifiable ici) reste a 4 lignes que la
                                    largeur soit 440, 470 ou 495px -- inutile
                                    de sacrifier la reduction de largeur pour
                                    un gain de hauteur qui ne se produit pas. */
  width: calc(100vw - 32px) !important;
}
/* Header (logo + titre) toujours vide dans cette configuration du plugin
   (aucun texte de titre defini) -- il ne reservait donc qu'un espace pour
   rien. Meme chose pour son diviseur juste en dessous. */
.cmplz-header, .cmplz-divider-header { display: none !important; }
.cmplz-title {
  font-family: 'Playfair Display', serif !important;
  color: #F8F8F6 !important;
  letter-spacing: .02em !important;
  font-size: 15px !important;
}
.cmplz-divider-footer { margin: 6px 0 !important; }
.cmplz-message {
  color: #C9C9C9 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.cmplz-message p { margin: 0 !important; }

/* Catégories (repliées par défaut ; visibles seulement après clic sur
   "Personnaliser") : mêmes proportions resserrées que le reste. */
.cmplz-category {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  padding: 2px 12px !important;
}
.cmplz-category-header { padding: 8px 0 !important; }
.cmplz-category-title {
  color: #F8F8F6 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 13px !important;
}
.cmplz-always-active { color: #C8A45D !important; font-size: 10px !important; opacity: 1 !important; }
.cmplz-description {
  color: #ABABAB !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  padding-bottom: 8px !important;
}

/* Interrupteurs : taille ramenée proche du défaut du plugin (35x19 -> 30x16),
   piste dorée conservée à l'état actif. */
.cmplz-label::before {
  width: 30px !important;
  height: 16px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.16) !important;
}
.cmplz-consent-checkbox:checked + .cmplz-label::before {
  background: #C8A45D !important;
}
.cmplz-label::after {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #F8F8F6 !important;
  left: 2px !important;
}
.cmplz-consent-checkbox:checked + .cmplz-label::after {
  left: 16px !important;
}

/* État "Personnaliser" ouvert (catégories visibles) : la bannière compacte
   devient plus large et sa hauteur reste libre (pas de max-height), pour
   que les 4 catégories + interrupteurs + bouton "Enregistrer les
   préférences" aient assez de place et ne soient jamais coupés. */
.cmplz-cookiebanner.cmplz-categories-visible {
  max-width: 560px !important;
}

/* Grille 2 colonnes plutôt que flex : "Accepter" occupe la ligne du haut
   en pleine largeur (bouton plein, mis en valeur) ; "Refuser" et
   "Personnaliser" se partagent la ligne du bas, chacun dans sa colonne,
   en lien texte discret — sans dépendre de leur ordre dans le DOM du
   plugin. "Enregistrer les préférences" (état "catégories ouvertes")
   garde un style bouton bordé, plus discret que l'accent doré, aligné
   avec "Refuser" au centre de la ligne (align-items:center) pour éviter
   tout décalage vertical entre un lien texte fin et un bouton plus haut. */
.cmplz-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 3px 16px !important;
  margin-top: 6px !important;
}
.cmplz-btn {
  width: auto !important;
  min-height: 0 !important; /* le plugin fixe min-height:45px par defaut sur
                                tous les .cmplz-btn -- meme piege que min-width
                                plus haut, sans ce reset aucune reduction de
                                hauteur n'etait possible. */
  border-radius: 3px !important;
  font-family: Manrope, sans-serif !important;
  font-weight: 600 !important;
  text-align: center !important;
  transition: background .2s ease, color .2s ease, opacity .2s ease !important;
}
.cmplz-accept {
  grid-column: 1 / -1 !important;
  background: #C8A45D !important;
  color: #111111 !important;
  border: 1px solid #C8A45D !important;
  padding: 7px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 14px rgba(200,164,93,.28) !important;
}
.cmplz-accept:hover {
  background: #D8B876 !important;
}
.cmplz-deny,
.cmplz-view-preferences {
  grid-row: 2 !important;
  background: transparent !important;
  border: none !important;
  color: #ABABAB !important;
  padding: 2px !important;
  min-height: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(171,171,171,.4);
}
.cmplz-deny { grid-column: 1 !important; }
.cmplz-view-preferences { grid-column: 2 !important; }
/* 27 juillet 2026 — "Tout refuser" retiré de la bannière principale
   (repliée), déplacé exclusivement dans la fenêtre "Personnaliser".
   Vérifié en direct (clic réel sur "Personnaliser") : Complianz affiche
   nativement .cmplz-deny dans les DEUX états (replié ET catégories
   visibles) — ce n'est pas un réglage officiel du plugin, uniquement du
   CSS. Dans l'état catégories visibles, "Refuser" est déjà positionné
   correctement à côté de "Enregistrer les préférences" par la grille
   existante ci-dessus (aucune modification nécessaire à cet endroit).
   Seul l'état replié est modifié ici : "Personnaliser" occupe alors
   seule la ligne, centrée par le text-align:center déjà présent sur
   .cmplz-btn, pour éviter un espace vide laissé par le retrait de
   "Refuser". Fonctionnement, textes et couleurs du plugin inchangés. */
.cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-deny {
  display: none !important;
}
.cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-view-preferences {
  grid-column: 1 / -1 !important;
}
.cmplz-deny:hover,
.cmplz-view-preferences:hover {
  color: #C8A45D !important;
  text-decoration-color: #C8A45D !important;
}
.cmplz-save-preferences,
.cmplz-manage-options.tcf {
  grid-column: 2 !important;
  grid-row: 2 !important;
  background: #1a1a1a !important;
  color: #F8F8F6 !important;
  border: 1px solid #C8A45D !important;
  padding: 8px !important;
  font-size: 12px !important;
}
.cmplz-save-preferences:hover,
.cmplz-manage-options.tcf:hover {
  background: rgba(200,164,93,.14) !important;
  color: #F3D9A4 !important;
}

.cmplz-documents { margin-top: 2px !important; line-height: 14px !important; }
.cmplz-documents ul, .cmplz-documents li { line-height: 14px !important; }
.cmplz-documents .cmplz-link {
  font-size: 10px !important;
  color: #7A7A7A !important;
}

@media (max-width: 600px) {
  .cmplz-cookiebanner.cmplz-bottom-right {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    bottom: 8px !important;
  }
  .cmplz-cookiebanner {
    padding: 14px 16px !important;
    width: calc(100vw - 20px) !important;
    max-width: 400px !important;
  }
  .cmplz-buttons { grid-template-columns: 1fr 1fr !important; }
}

/* ---- Refonte premium des 5 badges prix dorés (2 cartes présentation +
   3 cartes finition) : le fond doré est conservé tel quel, mais la
   typographie était jusqu'ici incohérente — le badge "Toile seulement"
   n'était jamais inclus dans la règle d'unification précédente et
   heritait donc de Manrope/18px/majuscules au lieu de Playfair Display
   /19px comme les 4 autres. Cette passe : (1) inclut enfin ce badge dans
   une règle commune unique, (2) réduit taille/graisse d'environ 20-25%
   pour un rendu plus fin et haut de gamme, (3) fixe une largeur identique
   sur les 5 badges peu importe la longueur du texte ("Inclus" vs
   "+ 180 $"), (4) réduit le signe "$" d'environ 15% par rapport au
   montant. ---- */
.mc-cfg-choice-pill {
  width: 82px !important;
  max-width: none !important;
  padding: 3px 10px !important;
}
[data-group="finition"] .mc-cfg-choice-price.mc-cfg-choice-pill {
  width: 82px !important;
}
.mc-cfg-choice-pill .mc-cfg-price-roulee,
.mc-cfg-choice-pill .mc-cfg-price-chassis,
.mc-cfg-choice-pill .mc-cfg-price-relief3d,
.mc-cfg-choice-pill .mc-cfg-price-fullpainting,
.mc-cfg-choice-pill .mc-cfg-choice-pill-value {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: #0A0A0A !important;
}
.mc-cfg-choice-pill .mc-cfg-price-currency {
  font-size: 14px !important;
}
.mc-cfg-choice-pill .mc-cfg-choice-price-label {
  font-size: 8.5px !important;
  letter-spacing: .06em !important;
}

/* ---- Menu principal : "Collections" en doré, même couleur que le logo. ---- */
#menu-item-786 > a.menu-link {
  color: #C8A45D !important;
}