/*
Theme Name:    MS Adhésif Child
Theme URI:     https://shop.msadhesif.fr
Description:   Thème enfant Astra pour la boutique MS Adhésif. Design pixel-perfect avec header/footer custom (bleu nuit + rouge + Poppins).
Author:        MS Adhésif
Author URI:    https://shop.msadhesif.fr
Template:      astra
Version:       2.5.1
License:       GNU General Public License v2 or later
License URI:   http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   ms-adhesif-child
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================================
   MS Adhésif — Design Tokens (extraits de styles.css du bundle)
   ============================================================ */
:root {
  --navy: #0B1B3D;
  --navy-700: #142657;
  --navy-600: #1E3370;
  --navy-50: #F2F5FB;
  --red: #E2261C;
  --red-600: #C81C13;
  --red-50: #FDECEB;
  --white: #FFFFFF;
  --bg: #F5F7FA;
  --bg-2: #EEF1F6;
  --border: #E5E9F0;
  --border-strong: #CFD6E2;
  --ink: #1A2540;
  --ink-2: #4A5876;
  --muted: #7A869F;
  --success: #1E8E5A;
  --shadow-sm: 0 1px 2px rgba(11,27,61,0.06);
  --shadow-md: 0 4px 16px rgba(11,27,61,0.08);
  --shadow-lg: 0 12px 32px rgba(11,27,61,0.12);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  color: var(--ink);
  background: var(--white);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Poppins', sans-serif;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }

/* ============================================================
   On masque l'header/footer natif d'Astra — on injecte le nôtre
   ============================================================ */
.ast-header-break-point .main-header-bar,
.ast-header-break-point #masthead .main-header-bar,
#masthead .main-header-bar,
.site-header,
.site-footer,
#colophon{
  display: none !important;
}
body.msa-custom-chrome { padding-top: 0 !important; }

/* ============================================================
   FULL-WIDTH OVERRIDE — Astra .ast-container contraint le contenu
   à 1960px max + flex + padding latéral. On le neutralise pour
   que nos pages MSA prennent toute la largeur du viewport.
   ============================================================ */
body.msa-custom-chrome .site-content,
body.msa-custom-chrome #content,
body.msa-custom-chrome #primary,
body.msa-custom-chrome .ast-container,
body.msa-custom-chrome .ast-container-fluid,
body.msa-custom-chrome .site-content > .ast-container,
body.msa-custom-chrome .site-content .ast-container,
body.msa-custom-chrome .site-primary-header-wrap + .site-content,
body.msa-custom-chrome article.page,
body.msa-custom-chrome article.post,
body.msa-custom-chrome .entry-content,
body.msa-custom-chrome .entry-header{
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: none !important;
  float: none !important;
  border: 0 !important;
}
body.msa-custom-chrome .site-content,
body.msa-custom-chrome #content{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.msa-custom-chrome article.page,
body.msa-custom-chrome article.post{
  padding: 0 !important;
}
body.msa-custom-chrome .entry-content > *:first-child{
  margin-top: 0 !important;
}

/* Astra cache parfois le titre auto en haut — on cache aussi les éléments par défaut WC qui pourraient apparaître */
body.msa-custom-chrome .ast-archive-description,
body.msa-custom-chrome .entry-banner,
body.msa-custom-chrome .ast-page-builder-template > .entry-header{
  display: none !important;
}

/* ============================================================
   TOPBAR (au-dessus du header)
   ============================================================ */
.msa-topbar {
  background: var(--navy-700);
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  padding: 8px 0;
  font-family: 'Poppins', sans-serif;
}
.msa-topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.msa-topbar-left { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.msa-topbar-left span { display: inline-flex; align-items: center; gap: 6px; }
.msa-topbar-right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.msa-topbar a { color: #fff; opacity: 0.85; }
.msa-topbar a:hover { opacity: 1; color: var(--red); }

/* ============================================================
   HEADER PRINCIPAL
   ============================================================ */
.msa-header {
  background: var(--navy);
  color: white;
  border-bottom: 3px solid var(--red);
  font-family: 'Poppins', sans-serif;
}
.msa-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.msa-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.msa-logo img { height: 56px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); }
.msa-logo-fallback {
  font-weight: 800; font-size: 24px; color: #fff;
  letter-spacing: -0.01em;
}
.msa-logo-fallback span { color: var(--red); }

/* === SEARCH BAR — refonte pill + ombre + icône intégrée === */
.msa-search {
  flex: 1 1 auto;
  display: flex;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  max-width: 620px;
  height: 48px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease;
}
.msa-search:focus-within {
  box-shadow: 0 6px 22px rgba(226,38,28,0.28), inset 0 0 0 2px var(--red);
}
.msa-search::before {
  content: '';
  position: absolute;
  left: 18px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A869F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}
.msa-search input {
  flex: 1;
  border: none;
  padding: 0 16px 0 44px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
  background: transparent;
  height: 100%;
}
.msa-search input::placeholder { color: var(--muted); font-weight: 400; }
.msa-search button {
  background: var(--red);
  color: white;
  padding: 0 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  border-radius: 999px;
  margin: 4px;
  transition: background .15s, transform .15s;
  letter-spacing: 0.01em;
}
.msa-search button:hover { background: var(--red-600); transform: translateY(-1px); }
.msa-search button svg { width: 16px; height: 16px; }

/* Hide redundant icon since we have ::before */
.msa-search input + input + button svg:first-child { display: none; }

/* === ACTIONS — poussées au bord droit === */
.msa-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto; /* pousse les actions au bord droit */
  flex-shrink: 0;
}
.msa-header-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  color: #fff !important;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 12px;
  gap: 5px;
  text-decoration: none;
  position: relative;
  min-width: 64px;
  transition: background .15s, transform .15s;
}
.msa-header-action:hover { background: rgba(255,255,255,0.08); color: #fff !important; transform: translateY(-1px); }
.msa-header-action svg { width: 22px; height: 22px; }
.msa-header-action .label { font-weight: 500; opacity: .92; letter-spacing: 0.01em; }
.msa-cart-badge::after {
  content: attr(data-count);
  position: absolute;
  top: 2px;
  right: 6px;
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msa-cart-badge[data-count="0"]::after { display: none; }

/* ============================================================
   NAV MENU
   ============================================================ */
.msa-nav {
  background: white;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: 'Poppins', sans-serif;
}
.msa-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
}

/* ============================================================
   BREADCRUMB GLOBAL — boxed dans 1280px + masque Astra natif
   ============================================================ */
/* Masque les breadcrumbs Astra et WC sur les pages MSA */
.ast-breadcrumbs-wrapper,
.ast-woocommerce-container .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.woocommerce > .woocommerce-breadcrumb { display: none !important; }
/* Masque le bandeau breadcrumb full-width injecté par le thème ou WC sur la boutique */
body.post-type-archive-product > .ast-breadcrumb-wrapper,
body.archive.tax-product_cat > .ast-breadcrumb-wrapper { display: none !important; }

.msa-cathero { font-family:'Poppins',sans-serif; }
.msa-cathero .breadcrumb {
  background:#fff; padding:14px 0; border-bottom:1px solid var(--border);
  font-size:13px; color:var(--ink-2);
}
.msa-cathero .breadcrumb-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.msa-cathero .breadcrumb a { color:var(--ink-2); }
.msa-cathero .breadcrumb a:hover { color:var(--red); }
.msa-cathero .breadcrumb .sep { color:var(--border-strong); }
.msa-cathero .breadcrumb .current { color:var(--navy); font-weight:600; }
.msa-nav-inner ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: stretch; height: 100%; }
.msa-nav-inner li { display: flex; }
.msa-nav-inner li a {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink) !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.msa-nav-inner li a:hover { color: var(--red) !important; }
.msa-nav-inner li.current-menu-item a,
.msa-nav-inner li.current-menu-parent a {
  border-bottom-color: var(--red);
  color: var(--navy) !important;
  font-weight: 600;
}
.msa-nav-cta {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-2);
}
.msa-nav-cta strong { color: var(--navy); }

/* ============================================================
   FOOTER
   ============================================================ */
.msa-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  padding: 56px 0 0;
  margin-top: 80px;
  font-family: 'Poppins', sans-serif;
}
.msa-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.msa-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.msa-footer h4 {
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.msa-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.msa-footer ul a { color: rgba(255,255,255,0.75); }
.msa-footer ul a:hover { color: var(--red); }
.msa-footer-brand img { height: 64px; margin-bottom: 16px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); }
.msa-footer-brand p { font-size: 13px; line-height: 1.6; margin: 0 0 16px; color: rgba(255,255,255,0.75); }
.msa-footer-social { display: flex; gap: 10px; }
.msa-footer-social a {
  width: 36px; height: 36px;
  background: var(--navy-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.msa-footer-social a:hover { background: var(--red); color: #fff; }
.msa-footer-bottom {
  border-top: 1px solid var(--navy-600);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  flex-wrap: wrap;
  gap: 16px;
}
.msa-payment-icons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.msa-payment-icons span {
  background: white;
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  transition: all .15s ease !important;
  white-space: nowrap !important;
  border: 1.5px solid transparent !important;
  background: var(--red) !important;
  color: white !important;
  font-family: inherit !important;
  text-transform: none !important;
}
.btn-navy,
.button.alt {
  background: var(--navy) !important;
}
.btn:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--red-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(226,38,28,.18);
}
.btn-outline {
  background: white !important;
  color: var(--navy) !important;
  border-color: var(--border-strong) !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--navy) !important;
}
.btn-lg { padding: 16px 28px !important; font-size: 15px !important; }

/* ============================================================
   WOOCOMMERCE — fiche & catalogue
   ============================================================ */
.woocommerce ul.products li.product {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: white !important;
  transition: all .15s ease !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-strong) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 14px 16px 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin: 0 16px 16px !important; }
.woocommerce ul.products li.product .price {
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
.woocommerce span.onsale {
  background: var(--red) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
}

.woocommerce div.product .product_title {
  color: var(--navy) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--red) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
}

/* ============================================================
   PANIER & CHECKOUT
   ============================================================ */
.woocommerce table.shop_table {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--navy) !important;
  color: white !important;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  font-weight: 600 !important;
}
.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--red) !important;
}
.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--red) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .msa-footer-cols { grid-template-columns: 1fr 1fr; }
  .msa-header-inner { flex-wrap: wrap; gap: 16px; padding: 14px 20px; }
  .msa-search { order: 3; flex: 1 1 100%; max-width: none; }
  .msa-header-actions { margin-left: auto; }
  .msa-topbar-inner, .msa-nav-inner { padding: 0 20px; }
}
@media (max-width: 600px) {
  .msa-footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .msa-topbar-inner { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11.5px; }
  .msa-header-action .label { display: none; }
  .msa-nav-inner { overflow-x: auto; }
  .msa-nav-inner ul { flex-wrap: nowrap; }
}

/* ============================================================
   GUTENBERG / SPECTRA — Pages Gutenberg sur les pages MSA
   Les blocs natifs alignfull doivent vraiment prendre toute la
   largeur et la typo Poppins doit s'imposer.
   ============================================================ */
body.msa-custom-chrome .wp-block-group.alignfull,
body.msa-custom-chrome .wp-block-cover.alignfull,
body.msa-custom-chrome .wp-block-image.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
body.msa-custom-chrome .entry-content > .wp-block-group,
body.msa-custom-chrome .entry-content > .wp-block-cover {
  font-family: 'Poppins', sans-serif !important;
}
body.msa-custom-chrome .wp-block-buttons .wp-block-button__link {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
}
/* Spectra (UAGB) — héritage charte */
body.msa-custom-chrome .uagb-container,
body.msa-custom-chrome [class*="uagb-block-"] {
  font-family: 'Poppins', sans-serif !important;
}
body.msa-custom-chrome .uagb-block-button .uagb-buttons-repeater {
  font-family: 'Poppins', sans-serif !important;
}
/* Spectra Container alignfull */
body.msa-custom-chrome .uagb-is-root-container.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ============================================================
   PATTERN HOME — polish iso maquette
   Cache le titre WP "Accueil" + style les sections msa-block-*
   pour se rapprocher du rendu PHP pixel-perfect.
   ============================================================ */

/* Cache le titre de page sur l'accueil + slug "accueil" / "home" */
body.home .entry-title,
body.home .ast-archive-description,
body.page-id-2 .entry-title,
body.page-template-default .entry-title:first-child {
	display: none !important;
}
/* Slug-based fallback (si page slug = accueil) */
body[class*="page-accueil"] .entry-title,
body[class*="page-home"] .entry-title { display: none !important; }

/* ===== MSA Block · Hero ===== */
.msa-block-hero {
	position: relative;
	overflow: hidden;
}
.msa-block-hero::before {
	content: '';
	position: absolute;
	top: -100px; right: -120px;
	width: 380px; height: 380px;
	background: radial-gradient(circle, rgba(226,38,28,0.22), transparent 70%);
	pointer-events: none;
	z-index: 1;
}
.msa-block-hero > * { position: relative; z-index: 2; }
/* Eyebrow pill rouge (premier paragraphe avec couleur rouge) */
.msa-block-hero .wp-block-column > .wp-block-paragraph:first-child,
.msa-block-hero p[style*="color:#E2261C"]:first-of-type {
	display: inline-block;
	background: rgba(226,38,28,0.12) !important;
	padding: 6px 14px !important;
	border-radius: 999px;
	font-size: 12px !important;
	margin-bottom: 16px !important;
}
/* Accent rouge sous "made in France" */
.msa-block-hero h1 span[style*="color:#E2261C"] {
	position: relative;
	display: inline-block;
}
.msa-block-hero h1 span[style*="color:#E2261C"]::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 8px;
	background: var(--red);
	opacity: 0.25;
	border-radius: 4px;
}
/* Visuel hero — group placeholder + image (si remplacée par le client) */
.msa-block-hero .msa-hero-visual {
	position: relative;
	background: linear-gradient(135deg, var(--navy-700) 0%, var(--red) 100%);
	border-radius: 16px !important;
	min-height: 380px !important;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
	padding: 0 !important;
}
.msa-block-hero .msa-hero-visual::after {
	content: '⚡ Production 24-72h    ★ 4,9/5    🚚 Livraison 48-72h';
	position: absolute;
	bottom: 16px; left: 16px; right: 16px;
	background: rgba(255,255,255,0.96);
	color: var(--navy);
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
	text-align: center;
}
.msa-block-hero .msa-hero-visual-hint {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.7;
	font-style: italic;
}
/* Si le client remplace par une vraie image */
.msa-block-hero .wp-block-image img {
	width: 100% !important;
	height: 380px !important;
	object-fit: cover !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

/* ===== MSA Block · Trust Strip ===== */
.msa-block-trust {
	border-top: 1px solid rgba(255,255,255,0.08);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.msa-block-trust .wp-block-column { display: flex; align-items: center; justify-content: center; }

/* ===== MSA Block · Eyebrow rouge sur les sections ===== */
.msa-block-categories p[style*="color:#E2261C"]:first-of-type,
.msa-block-process p[style*="color:#E2261C"]:first-of-type,
.msa-block-reviews p[style*="color:#E2261C"]:first-of-type,
.msa-block-banners .wp-block-cover p[style*="color:#E2261C"],
.msa-block-banners .wp-block-cover p[style*="color:#ffd9d6"] {
	display: inline-block !important;
	background: rgba(226,38,28,0.10) !important;
	padding: 5px 14px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	letter-spacing: 0.06em !important;
	margin-bottom: 8px !important;
}
.msa-block-banners .wp-block-cover p[style*="color:#ffd9d6"] {
	background: rgba(255,255,255,0.18) !important;
}

/* ===== MSA Block · Categories — tuiles colorées ===== */
.msa-block-categories .wp-block-column > .wp-block-group {
	overflow: hidden;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.msa-block-categories .wp-block-column > .wp-block-group:hover {
	transform: translateY(-2px);
	border-color: var(--border-strong) !important;
	box-shadow: 0 8px 22px rgba(11,27,61,0.10);
}
/* La première paragraphe (l'emoji) devient une tuile colorée */
.msa-block-categories .wp-block-column > .wp-block-group > .wp-block-paragraph:first-child,
.msa-block-categories .wp-block-column > .wp-block-group > p:first-child {
	width: 100% !important;
	aspect-ratio: 4/3 !important;
	margin: -24px -20px 16px -20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #FDECEB 0%, #FFE4E2 100%);
	font-size: 64px !important;
	border-radius: 0 !important;
}
/* Couleurs tournantes pour chaque tuile (1er à 8e enfant) */
.msa-block-categories .wp-block-columns:first-of-type .wp-block-column:nth-child(1) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #FDECEB 0%, #FFCFCB 100%); }
.msa-block-categories .wp-block-columns:first-of-type .wp-block-column:nth-child(2) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #E5EAF7 0%, #C9D4F0 100%); }
.msa-block-categories .wp-block-columns:first-of-type .wp-block-column:nth-child(3) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #E8F5EE 0%, #C4E3D2 100%); }
.msa-block-categories .wp-block-columns:first-of-type .wp-block-column:nth-child(4) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #FFF3E0 0%, #FFD9A8 100%); }
.msa-block-categories .wp-block-columns:nth-of-type(2) .wp-block-column:nth-child(1) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #F3E5F5 0%, #D9C0DD 100%); }
.msa-block-categories .wp-block-columns:nth-of-type(2) .wp-block-column:nth-child(2) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%); }
.msa-block-categories .wp-block-columns:nth-of-type(2) .wp-block-column:nth-child(3) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%); }
.msa-block-categories .wp-block-columns:nth-of-type(2) .wp-block-column:nth-child(4) > .wp-block-group > p:first-child { background: linear-gradient(135deg, #E8EAF6 0%, #C5CAE9 100%); }

/* ===== MSA Block · Process — numéro étape stylé ===== */
.msa-block-process .wp-block-column > .wp-block-group {
	position: relative;
	transition: transform .15s, box-shadow .15s;
}
.msa-block-process .wp-block-column > .wp-block-group:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(11,27,61,0.08);
}
/* Étape — eyebrow pill rouge (ÉTAPE 1, ÉTAPE 2, …) */
.msa-block-process p[style*="color:#E2261C"]:first-child {
	display: inline-block !important;
	background: rgba(226,38,28,0.12) !important;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	letter-spacing: 0.06em !important;
	margin-bottom: 14px !important;
	text-transform: uppercase;
}

/* ===== MSA Block · Reviews ===== */
.msa-block-reviews .wp-block-column > .wp-block-group {
	transition: transform .15s, box-shadow .15s;
}
.msa-block-reviews .wp-block-column > .wp-block-group:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(11,27,61,0.08);
}
.msa-block-reviews .wp-block-column > .wp-block-group p[style*="color:#1A2540"] {
	font-style: italic;
	position: relative;
	padding-left: 22px;
}
.msa-block-reviews .wp-block-column > .wp-block-group p[style*="color:#1A2540"]::before {
	content: '"';
	position: absolute;
	left: 0; top: -12px;
	font-size: 36px;
	color: var(--red);
	font-family: Georgia, serif;
	font-weight: 700;
	line-height: 1;
}

/* ===== MSA Block · Banners (Pro / Devis) — hover ===== */
.msa-block-banners .wp-block-cover {
	transition: transform .15s, box-shadow .15s;
}
.msa-block-banners .wp-block-cover:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}

/* ===== MSA Block · CTA final ===== */
.msa-block-cta {
	background-image: linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%) !important;
}

/* Constraint contenu interne des sections au 1280 (titres centrés etc.) */
body.msa-custom-chrome .msa-block-hero .wp-block-columns,
body.msa-custom-chrome .msa-block-trust .wp-block-columns {
	max-width: 1280px;
	margin: 0 auto;
}
body.msa-custom-chrome .msa-block-cta .wp-block-cover__inner-container {
	max-width: 1280px;
	margin: 0 auto;
}