/* =============================================================
   Aplastic94 — CSS Custom v2 (design validé client)
   ============================================================= */

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --c-navy: #16263D;
  --c-navy-dark: #0f1d2e;
  --c-teal: #6DB7B2;
  --c-teal-text: #2F7A75;
  --c-fuchsia: #D71361;
  --c-fuchsia-h: #D71361;
  --c-gold: #F2C34A;
  --c-gray: #F3F5F7;
  --c-border: #EDF1F6;
  --c-text: #16263D;
  --c-text-mid: #5A6B80;
  --c-text-light: #9DB4C8;
  --c-white: #FFFFFF;
  --shadow-card: 0 2px 16px rgba(22, 38, 61, 0.07);
  --shadow-hover: 0 8px 32px rgba(22, 38, 61, 0.14);
  --shadow-btn: 0 4px 14px rgba(158, 27, 90, 0.3);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --trans: 0.22s ease;
  --header-h: 129px; /* header à 3 bandeaux (barre contact + logo/recherche + menu) sur plexi-paris.com — valeur vérifiée en DevTools par l'utilisatrice (2026-08-21), l'ancienne valeur 156px laissait une bande blanche entre le header et le hero */
  /* topbar + mainbar */
}




/* ─── Base ───────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding-top: var(--header-h) !important;
  background: var(--c-white);
  color: var(--c-text);
  font-family: 'Montserrat', system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Barre d'administration WP (visible uniquement en étant connecté, jamais
   pour un visiteur) : elle fait 32px (46px sur mobile) et n'est prise en
   compte ni par .site-header (position:fixed, top:0, non décalé), ni par
   le padding-top du body ci-dessus (calibré pour le header seul). Sans ce
   correctif, header + barre admin se superposent et le padding du body ne
   compense que le header — d'où un espace en trop visible uniquement en
   étant connecté en admin. */
body.admin-bar .site-header {
  top: 32px;
}
body.admin-bar {
  padding-top: calc(var(--header-h) + 32px) !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
  body.admin-bar {
    padding-top: calc(var(--header-h) + 46px) !important;
  }
}

/* Blocs pleine largeur (alignfull) : etirement reel jusqu'aux bords du viewport.
   Sans cette regle, .alignfull garde la largeur de son conteneur parent et laisse
   apparaitre le fond blanc du body de part et d'autre (liseres blancs). */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  transition: color var(--trans);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-element-button{
 text-transform: none;
}

/* Bouton primaire — fuchsia plein */
.btn-hero-primary .wp-block-button__link {
  background-color: var(--c-fuchsia) !important;
  color: var(--c-white) !important;
   border: 2px solid var(--c-fuchsia) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-btn);
  padding: 0.85rem 1.75rem !important;
  font-size: 0.9rem !important;
}

.btn-hero-primary .wp-block-button__link:hover {
  background-color: var(--c-fuchsia-h) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(158, 27, 90, 0.4);
}

/* Bouton secondaire — contour navy */
.btn-hero-secondary .wp-block-button__link {
  background-color: transparent !important;
  color: var(--c-navy) !important;
  border: 2px solid var(--c-navy) !important;
  border-radius: var(--radius) !important;
  padding: 0.85rem 1.75rem !important;
  font-size: 0.9rem !important;
}

.btn-hero-secondary .wp-block-button__link:hover {
  background-color: var(--c-navy) !important;
  color: var(--c-white) !important;
  transform: translateY(-2px);
}
/* ─── Header sticky ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--c-white);
  box-shadow: 0 1px 0 #E2E8F0;
  transition: box-shadow var(--trans);
}

.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(22, 38, 61, 0.12);
}

/* Top bar */
.header-top {
  font-size: 0.8rem;
}

.header-top a {
  color: inherit;
  text-decoration: none;
}

.header-top a:hover {
  color: var(--c-teal);
}

.header-main {
  padding: 0.9rem 0;
}

.header-main > .wp-block-group {
  width: 100%;
  gap: 1.5rem;
}

/* Logo */
/* Sélecteur renforcé (.site-header .site-logo img) : sur les pages WooCommerce
   (catégorie, boutique...), le body porte la classe "woocommerce-page" et
   woocommerce-layout.css charge après main.css la règle ".woocommerce-page img"
   (même spécificité qu'un simple ".site-logo img") qui écrasait la hauteur du
   logo et le faisait revenir à sa taille native (220x91), agrandissant le header. */
.site-header .site-logo img {
  height: 60px;
  width: auto;
}

/* Logo carré mobile — masqué par défaut, affiché uniquement ≤768px
   (voir media query navigation mobile) en remplacement du logo mot-symbole */
.header-main__logo-mobile {
  display: none;
}

/* Recherche produits */
.header-search {
  flex: 1 1 auto;
  max-width: 560px;
}

.header-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

.header-search .wp-block-search__input {
  border: none;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}

.header-search .wp-block-search__button {
  background: var(--c-fuchsia);
  color: var(--c-white);
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 0 1.1rem;
  cursor: pointer;
}

.header-search .wp-block-search__button:hover {
  background: var(--c-fuchsia-h);
}

.has-autocomplete {
  position: relative;
}

/* Autocomplete recherche (produits + catégories) */
.search-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(22, 38, 61, 0.14);
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.search-autocomplete__section + .search-autocomplete__section {
  border-top: 1px solid var(--c-border);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.search-autocomplete__label {
  margin: 0;
  padding: 0.3rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-mid);
}

.search-autocomplete__cat,
.search-autocomplete__product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: inherit;
}

.search-autocomplete__cat {
  justify-content: space-between;
}

.search-autocomplete__cat-name {
  font-size: 0.9rem;
  color: var(--c-navy);
  font-weight: 600;
}

.search-autocomplete__cat-count {
  font-size: 0.78rem;
  color: var(--c-text-mid);
}

.search-autocomplete__cat:hover,
.search-autocomplete__cat.is-active,
.search-autocomplete__product:hover,
.search-autocomplete__product.is-active {
  background: var(--c-gray);
}

.search-autocomplete__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  flex-shrink: 0;
}

.search-autocomplete__product-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.search-autocomplete__product-name {
  font-size: 0.88rem;
  color: var(--c-navy);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-autocomplete__product-price {
  font-size: 0.82rem;
  color: var(--c-fuchsia);
  font-weight: 600;
}

.search-autocomplete__all {
  display: block;
  margin-top: 0.35rem;
  padding: 0.6rem 1rem 0.3rem;
  border-top: 1px solid var(--c-border);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-fuchsia);
  text-decoration: none;
}

.search-autocomplete__all:hover {
  color: var(--c-fuchsia-h);
}

.search-autocomplete__empty {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--c-text-mid);
}

/* Compte / Favoris / Panier */
.header-actions {
  flex-shrink: 0;
}

.header-action {
  margin: 0 !important;
  text-align: center;
  line-height: 1.3;
}

.header-action a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
}

.header-action a:hover {
  color: var(--c-teal-text);
}

.header-action__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.header-action__label {
  font-size: 0.72rem;
}

.header-action--cart-wrap {
  align-items: center;
  gap: 0.2rem;
}

.header-action--cart-wrap .header-action__label {
  color: var(--c-text);
  font-weight: 600;
  text-align: center;
  margin: 0;
}

.header-action--cart-wrap:hover .header-action__label {
  color: var(--c-teal-text);
}

/* Ciblage via ".header-action--cart-wrap" (le conteneur, className posé par le
   thème) et non ".header-action--cart" : cette 2e classe est bien présente
   dans les attributs du bloc woocommerce/mini-cart (voir parts/header.html),
   mais WooCommerce la rend corrompue à l'affichage — les 2 tirets "--"
   ressortent en "u002du002d" (bug d'échappement côté bloc Mini Cart /
   Interactivity API, hors de notre contrôle). ".header-action--cart-wrap",
   posée par un bloc Groupe classique, ne subit pas ce problème. */
.header-action--cart-wrap .wc-block-mini-cart {
  color: var(--c-text);
}

/* Aligne le mot "Panier" avec "Mon compte"/"Favoris" juste à côté : le bouton
   panier natif de WooCommerce (wc-block-mini-cart__button) porte son propre
   padding par défaut, ce qui rend la colonne icône+libellé du panier plus
   haute que celle des 2 autres (simples <span> sans padding) — la ligne
   d'actions étant centrée verticalement, ce surplus de hauteur pousse le mot
   "Panier" plus bas que les libellés voisins. */
.header-action--cart-wrap .wc-block-mini-cart__button {
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-action--cart-wrap .wc-block-mini-cart__icon {
  width: 26px;
  height: 26px;
}

.header-action--cart-wrap .wc-block-mini-cart__badge {
  background: var(--c-fuchsia) !important;
}

/* Panier (drawer) — WooCommerce rend 2 <img> par article (fallback masqué
   du catalogue + image liée normale) ; sur ce site aucun produit n'est
   masqué du catalogue, donc on masque toujours le fallback pour éviter
   l'image dupliquée quand le binding JS ne bascule pas. */
.wc-block-cart-item__image > img {
  display: none !important;
}

.wc-block-cart-item__image > a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg) !important;
}

/* Panier (drawer) — pied : un seul bouton ("Voir mon panier"), pas de
   "Valider la commande" ici (on préfère forcer un passage par la page
   panier avant le paiement) ; icône ajoutée en JS (voir main.js), et
   mention frais/taxes/remises retirée (redondante avec la page panier). */
.wc-block-mini-cart__footer-checkout {
  display: none !important;
}

.wc-block-mini-cart__footer-cart {
  width: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.wc-block-mini-cart__footer-cart .aplastic94-cart-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   Tiroir "Mon compte" (connexion) — voir functions.php (markup,
   uniquement si déconnecté) et account-drawer.js (ouverture/fermeture).
   ═══════════════════════════════════════════════════════════ */
.account-drawer {
  position: fixed;
  inset: 0;
  z-index: 9997;
  visibility: hidden;
}

.account-drawer.is-open {
  visibility: visible;
}

.account-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 38, 61, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.account-drawer.is-open .account-drawer__overlay {
  opacity: 1;
}

.account-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--c-white);
  box-shadow: -12px 0 40px rgba(22, 38, 61, 0.18);
  padding: 2rem 1.75rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.account-drawer.is-open .account-drawer__panel {
  transform: translateX(0);
}

.account-drawer__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--c-gray);
  color: var(--c-text-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--trans);
}

.account-drawer__close:hover {
  background: var(--c-border);
  color: var(--c-navy);
}

.account-drawer__intro {
  text-align: center;
  padding: 0.5rem 0 1.5rem;
}

.account-drawer__intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-fuchsia) 0%, var(--c-fuchsia-h) 100%);
  color: var(--c-white);
  margin-bottom: 0.85rem;
  animation: account-drawer-pop 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.1s both;
}

.account-drawer__intro-icon svg {
  width: 28px;
  height: 28px;
}

@keyframes account-drawer-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.account-drawer__intro h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c-navy);
  margin: 0 0 0.4rem;
}

.account-drawer__intro p {
  font-size: 0.88rem;
  color: var(--c-text-mid);
  margin: 0;
}

.account-drawer__perks {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--c-gray);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.account-drawer__perks li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--c-navy);
}

.account-drawer__perk-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-teal-text);
}

.account-drawer__perk-icon svg {
  width: 16px;
  height: 16px;
}

.account-drawer__field {
  margin-bottom: 1rem;
}

.account-drawer__field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 0.35rem;
}

.account-drawer__field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--c-text);
  box-sizing: border-box;
}

.account-drawer__field input:focus {
  outline: none;
  border-color: var(--c-fuchsia);
}

.account-drawer__remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--c-text-mid);
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.account-drawer__submit {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: var(--c-fuchsia);
  color: var(--c-white);
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.account-drawer__submit:hover {
  background: var(--c-fuchsia-h);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(158, 27, 90, 0.35);
}

.account-drawer__forgot {
  text-align: center;
  margin: 0.9rem 0 0;
}

.account-drawer__forgot a {
  font-size: 0.8rem;
  color: var(--c-text-mid);
  text-decoration: none;
}

.account-drawer__forgot a:hover {
  color: var(--c-fuchsia);
}

.account-drawer__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 1.1rem;
  color: var(--c-text-light);
  font-size: 0.8rem;
}

.account-drawer__divider::before,
.account-drawer__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.account-drawer__register {
  display: block;
  text-align: center;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid var(--c-navy);
  border-radius: var(--radius);
  color: var(--c-navy);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--trans);
}

.account-drawer__register:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

@media (max-width: 480px) {
  .account-drawer__panel {
    width: 100vw;
    padding: 1.5rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-drawer__panel {
    transition: none;
  }
  .account-drawer__intro-icon {
    animation: none;
  }
}

/* Bandeau de navigation séparé */
.header-nav-bar .primary-nav {
  width: 100%;
}

/* Ligne du menu : passe en grille 3 colonnes (slogan | menu | espace miroir via
   ::after) pour que le slogan s'affiche à gauche, sous le logo, tout en gardant
   le menu visuellement centré dans le bandeau — comme s'il n'y avait rien à
   gauche. !important nécessaire pour écraser le display:flex posé par Gutenberg
   (layout "flex" du bloc Groupe, utilisé pour le fallback si le CSS ne charge
   pas / JS désactivé). */
.header-nav-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

.header-nav-row::after {
  content: "";
}

/* Baseline — image (typographie Montserrat Black, coordonnée à celle du logo,
   rendue en PNG pour un rendu net et une composition sur-mesure) plutôt que du
   texte CSS. L'alt du <img> garde l'information indexable/accessible. */
.header-slogan {
  grid-column: 1;
  justify-self: start;
  margin: 0 !important;
}

/* Sélecteur renforcé (.site-header .header-slogan img), même piège que pour le
   logo (voir plus haut) : sur les pages WooCommerce (catégorie, boutique...),
   woocommerce-layout.css charge après main.css la règle ".woocommerce-page img"
   qui, à spécificité égale avec un simple ".header-slogan img", l'emportait et
   faisait revenir l'image à sa taille native (409x82) au lieu de 34px de haut. */
.site-header .header-slogan img {
  display: block;
  height: 34px;
  width: auto;
}


/* ═══════════════════════════════════════════════════════════════
   Navigation — desktop
   ═══════════════════════════════════════════════════════════════ */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Couleur de base — tous les liens et boutons du nav */
.primary-nav .wp-block-navigation-item__content,
.primary-nav .wp-block-navigation-submenu__toggle {
  color: #16263D !important;
}

/* Conteneur top-level */
.primary-nav .wp-block-navigation__container {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
}

/* Liens de premier niveau */
.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  display: block;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: color var(--trans), background var(--trans);
  text-decoration: none !important;
  white-space: nowrap;
}

.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  position: relative;
}
.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--c-fuchsia);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--trans);
}
.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover {
  color: #6DB7B2 !important;
  background: rgba(109, 183, 178, 0.10);
}
.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover::after {
  width: 60%;
}

/* Chevron toggle */
.primary-nav .wp-block-navigation__submenu-icon {
  color: #16263D !important;
  transition: color var(--trans);
}
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon {
  color: #6DB7B2 !important;
}

/* ─── Dropdown ───────────────────────────────────────────────── */

/* Ancrage relatif sur chaque item parent */
.primary-nav .wp-block-navigation__container > .wp-block-navigation-item,
.primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu {
  position: relative;
}

.primary-nav .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  margin-left: 0.5rem !important;
  transform: none !important;
  z-index: 999 !important;
  background: #ffffff !important;
  border: none !important;
  border-top: 3px solid #6DB7B2 !important;
  border-radius: 0 0 14px 14px !important;
  min-width: 240px !important;
  padding: 0.5rem !important;
  box-shadow: 0 20px 50px rgba(22, 38, 61, 0.13), 0 2px 8px rgba(22, 38, 61, 0.06) !important;
}

/* Pont invisible — évite la perte du hover */
.primary-nav .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

/* Items dans le dropdown */
.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  color: #16263D !important;
  background: transparent !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px !important;
  border-left: none !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transition: color var(--trans), background var(--trans), padding-left var(--trans);
}

.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: #6DB7B2 !important;
  background: rgba(109, 183, 178, 0.12) !important;
  padding-left: 1.25rem !important;
}

/* Séparateur subtil */
.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
  border-top: 1px solid rgba(22, 38, 61, 0.05);
}

/* ─── Mega menu (Matières / Catégories) ────────────────────────── */
/* Panneau large en grille — remplace la liste verticale simple pour
   les entrées à className "mega-menu" (nombreux termes de taxonomie).
   Desktop uniquement : au-delà de 768px l'accordéon mobile prend le relais. */
@media (min-width: 769px) {
  .primary-nav .wp-block-navigation-submenu.mega-menu > .wp-block-navigation__submenu-container {
    min-width: 480px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.15rem 1rem !important;
    padding: 0.75rem !important;
  }

  .primary-nav .wp-block-navigation-submenu.mega-menu > .wp-block-navigation__submenu-container
    .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: none;
  }
}

/* Burger caché sur desktop */
.primary-nav .wp-block-navigation__responsive-container-open {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Navigation — mobile (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ═══════════════════════════════════════════════════════════
     Header mobile — barre unique compacte (--header-h: 60px) :
     burger à gauche (tiré depuis header-nav-bar, voir plus bas),
     logo carré centré, compte/panier à droite.
     ═══════════════════════════════════════════════════════════ */

  /* Logo mot-symbole (desktop) masqué sur mobile, remplacé par le logo carré */
  .wp-block-site-logo { display: none !important; }

  .header-main__logo-mobile {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
  }
  .header-main__logo-mobile img {
    width: 40px;
    height: 40px;
    display: block;
  }

  .header-main {
    height: 60px;
    padding: 0 1rem !important;
  }
  .header-main > .wp-block-group {
    position: relative;
    height: 100%;
    justify-content: flex-end !important;
  }

  /* Slogan : place manque à côté du burger sur mobile, on le masque */
  .header-slogan { display: none !important; }
  .header-nav-row { grid-template-columns: 1fr; }

  /* Cacher menu inline desktop */
  .primary-nav > .wp-block-navigation__container { display: none !important; }

  /* Recherche masquée sur mobile — icônes compte/panier restent visibles,
     libellés texte masqués (icônes seules) pour tenir sur une barre de
     60px sans déborder à côté du logo carré centré */
  .header-search { display: none !important; }
  .header-actions { gap: 1.1rem !important; }
  .header-action__label { display: none !important; }

  /* Bandeau nav (slogan + burger) : remonté par marge négative pour se
     superposer exactement à header-main (même bande de 60px), plutôt que
     d'occuper sa propre ligne — c'est ce qui provoquait le header sur
     2 lignes en mobile. pointer-events désactivé sur le bandeau pour
     laisser passer les clics vers header-main en dessous (logo, panier…),
     ré-activé uniquement sur le burger lui-même. */
  .header-nav-bar {
    position: relative;
    height: 60px;
    margin-top: -60px !important;
    margin-block-start: -60px !important;
    padding: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    pointer-events: none;
  }
  .header-nav-row {
    height: 100%;
    pointer-events: none;
  }

  /* Le bloc Navigation (core) pose déjà position:relative sur .primary-nav
     pour son propre système de overlay — on en reprend le contrôle en lui
     donnant une hauteur connue (60px, = header-nav-bar) pour que le
     centrage vertical du burger (top:50%/translateY) soit fiable, plutôt
     que de dépendre de la hauteur intrinsèque du bloc. */
  .primary-nav {
    position: relative;
    height: 60px;
  }

  /* ── Burger — remonté dans la barre unique, aligné à gauche ──── */
  .primary-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.35rem;
    cursor: pointer;
    color: #16263D;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
    pointer-events: auto;
  }

  /* Le tiroir plein écran (ouvert) doit rester cliquable malgré le
     pointer-events:none posé plus haut sur header-nav-bar/header-nav-row */
  .primary-nav .wp-block-navigation__responsive-container {
    pointer-events: auto;
  }
  .primary-nav .wp-block-navigation__responsive-container-open svg {
    width: 26px;
    height: 26px;
    color: #16263D;
  }

  /* Fermé par défaut — indispensable depuis WP 7.1 : le bloc Navigation ne
     rend plus qu'UNE seule liste, imbriquée dans .responsive-container (avant,
     une 2e liste séparée existait en enfant direct de .primary-nav pour le
     desktop, cachée ici ligne "Cacher menu inline desktop" — cette règle est
     désormais sans effet, la liste visée n'existe plus). Sans ce verrou, le
     tiroir reste dans le flux normal (non fixed/masqué) et son contenu
     déborde par-dessus le hero de la page, superposé au header. */
  .primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  /* ── Overlay — commence juste sous le header ───────────────── */
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top:0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #16263D !important;
    padding: 0 !important;
    z-index: 9998 !important;
    overflow-y: auto !important;
  }

  /* Dialogue interne — pleine largeur + scrollable */
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close,
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog,
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
  }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
    padding: 0.5rem 0 2rem !important;
    display: flex;
    flex-direction: column;
  }

  /* Bouton ✕ — discret en haut à droite */
  .primary-nav .wp-block-navigation__responsive-container-close {
    align-self: flex-end;
    color: rgba(255,255,255,0.5) !important;
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    line-height: 1;
  }
  .primary-nav .wp-block-navigation__responsive-container-close svg {
    width: 22px;
    height: 22px;
  }

  /* ── Liste principale dans le drawer ──────────────────────── */
  .primary-nav .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Chaque item de premier niveau — pleine largeur + séparateur bord à bord */
  .primary-nav .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  .wp-block-navigation__container
  > .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    width: 100%;
  }

  /* Lien / bouton parent — padding horizontal sur le contenu */
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.9rem 1.25rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    width: 100%;
    box-sizing: border-box;
  }
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation-item__content:hover {
    color: #6DB7B2 !important;
    background: transparent !important;
    padding-left: 1.25rem !important;
  }

  /* ── Flèche chevron sur les items avec sous-menu ──────────── */
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-icon {
    display: inline-flex !important;
    margin-left: auto;
    padding-right: 1.25rem;
    color: #6DB7B2 !important;
    transition: transform 0.22s ease;
    flex-shrink: 0;
  }
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-icon svg {
    width: 20px;
    height: 20px;
    stroke: #6DB7B2;
  }

  /* Rotation quand le sous-menu est ouvert (.open ajouté par le JS WP) */
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation-item.open
  .wp-block-navigation__submenu-icon {
    transform: rotate(180deg);
    color: #6DB7B2 !important;
  }

  /* ── Sous-menus — accordéon (fermés par défaut) ───────────── */
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container {
    display: none !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    background: rgba(255,255,255,0.05) !important;
    border: none !important;
    border-left: 3px solid #6DB7B2 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
    min-width: unset !important;
    padding: 0.25rem 0 !important;
    margin: 0 0 1rem 5rem !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* Ouvert quand WP JS ajoute .open sur le <li> parent */
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation-item.open
  > .wp-block-navigation__submenu-container {
    display: block !important;
  }

  /* Items du sous-menu */
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
    color: rgba(255,255,255,0.78) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.25rem 0.55rem 30px !important;
    border-bottom: none !important;
    border-radius: 6px !important;
    white-space: normal !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .primary-nav .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
    color: #6DB7B2 !important;
    background: rgba(109,183,178,0.1) !important;
  }

}


/* ─── Boutons globaux ────────────────────────────────────────── */
.wp-block-button__link {
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans) !important;
  text-decoration: none !important;
  font-weight: 700;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform: none;
}

/* ─── Hero section (design blanc) ───────────────────────────── */
.hero-section {
  background: var(--c-white);
  overflow: hidden;
  /* Espace supplémentaire en bas pour accueillir le chevauchement de la carte USP */
  padding-bottom: 72px;
}

/* H1 hero avec texte coloré */
.hero-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  margin: 1rem 0 0;
}

.hero-h1__accent {
  color: var(--c-fuchsia);
  font-style: normal;
}

/* Badge expertise */
.hero-expertise-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(109, 183, 178, 0.1);
  border: 1px solid rgba(109, 183, 178, 0.25);
  border-radius: 100px;
  padding: 0.35rem 0.9rem 0.35rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-teal-text);
  letter-spacing: 0.02em;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
}

/* Hero desc */
.hero-desc {
  max-width: 480px;
}

/* Fix global : empêche l'étirement à 100% dans les colonnes horizontales */
.wp-block-buttons:not(.is-vertical) .wp-block-button:not(.has-custom-width) {
  width: auto;
}






/* ─── Materials section ───────────────────────────────────────── */
/* Grille : 2 rangées de 4 colonnes Gutenberg */
.mat-grid-row {
  gap: 1.25rem !important;
}

.mat-grid-row+.mat-grid-row {
  margin-top: 1.25rem;
}

/* ─── Section Réalisations (carousel) ────────────────────────── */
.section-realisations {
  border-top: 1px solid var(--c-border);
}

.realisations-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.realisations-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding-bottom: 4px;
}

.realisations-carousel::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 calc(20% - 0.8rem);
  scroll-snap-align: start;
  transition: transform var(--trans);
}

.carousel-slide:hover {
  transform: scale(1.02);
}

/* Carousel buttons */
.carousel-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  box-shadow: var(--shadow-card);
}

.carousel-btn:hover {
  background: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
}

/* ─── Section Logos clients ────────────────────────────────────── */
.section-logos-clients {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.logos-carousel-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.logos-carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 2px;
  align-items: stretch;
}

.logos-carousel::-webkit-scrollbar {
  display: none;
}

.logo-slide {
  flex: 0 0 160px;
  width: 160px;
  scroll-snap-align: start;
}

.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 76px;
  border: 2px dashed #D1D9E3;
  border-radius: 8px;
  background: #F3F5F7;
  color: #8FA3B8;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color var(--trans);
  overflow: hidden;
}

.logo-placeholder img {
  max-width: 140px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--trans), opacity var(--trans);
}

.logo-placeholder:hover {
  border-color: var(--c-teal);
}

.logo-placeholder:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ─── CTA Section ─────────────────────────────────────────────── */
.section-cta {
  border-top: none;
}

.cta-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-content {
  flex: 1;
  min-width: 200px;
}

.cta-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--c-white);
  margin: 0 0 0.4rem;
  font-family: 'Montserrat', sans-serif;
}

.cta-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.5;
  font-family: 'Montserrat', sans-serif;
}

/* Bouton CTA — blanc sur fond foncé (wp:button natif) */
.btn-cta .wp-block-button__link {
  background: var(--c-white) !important;
  color: var(--c-fuchsia) !important;
  border-radius: var(--radius) !important;
  padding: 0.875rem 2rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0;
}

.btn-cta .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  color: var(--c-fuchsia) !important;
}

/* ─── Footer ──────────────────────────────────────────────────── */
.footer-col__title {
  color: var(--c-white) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.25rem !important;
  margin-top: 0 !important;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
}

.footer-list li {
  padding: 0.28rem 0;
}

.footer-list a {
  color: rgba(157, 180, 200, 0.85);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--trans), padding-left var(--trans);
  display: inline-block;
}

.footer-list a:hover {
  color: var(--c-teal);
  padding-left: 4px;
}

.footer-col--contact p {
  margin: 0 0 0.6rem 0;
}

/* Icônes sociales footer */
/* wp:social-links natif */
.footer-social.wp-block-social-links {
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: nowrap;
}

.footer-social .wp-block-social-link a,
.footer-social .wp-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: background var(--trans) !important;
}

.footer-social .wp-block-social-link svg {
  fill: var(--c-text-light);
  width: 18px;
  height: 18px;
  transition: fill var(--trans);
}

.footer-social .wp-block-social-link a:hover,
.footer-social .wp-social-link:hover {
  background: var(--c-teal) !important;
  color: var(--c-white);
}

.footer-social .wp-block-social-link a:hover svg {
  fill: var(--c-white);
}

/* ─── Page hero (pages internes) ──────────────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-navy);
  padding: 3rem 0;
}

/* ─── Section FAQ → voir sections.css (.svc-faq-section) ─────── */


/* ─── 404 ──────────────────────────────────────────────────────── */
.error-404 {
  min-height: calc(100vh - var(--header-h) - 300px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Marges latérales mobile — pages "colonne de contenu" ───────
   Les templates en layout:constrained (catégorie, boutique, recherche,
   panier, checkout, mon compte, confirmation de commande, 404) n'ont aucune
   marge horizontale propre : en dessous de leur wideSize (1440px), le
   contenu touche directement les bords de l'écran. Contrairement à la
   homepage/fiche produit (layout:default, bandeaux pleine largeur gérés
   section par section), ces pages sont de simples colonnes de contenu — un
   padding uniforme ici ne casse aucun bandeau plein-largeur volontaire. */
@media (max-width: 782px) {
  .site-main.is-layout-constrained {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box;
  }
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .carousel-slide {
    flex: 0 0 calc(33.33% - 0.67rem);
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 60px;
  }

  .header-top {
    display: none;
  }

  .hero-section .wp-block-columns {
    flex-direction: column;
  }

  .hero-image-col {
    display: none;
  }

  .hero-h1 {
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

  .carousel-slide {
    flex: 0 0 calc(50% - 0.5rem);
  }

  .cta-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .cta-icon {
    width: 64px;
    height: 64px;
  }

  .footer-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 640px) {
  body {
    padding-top: 60px;
  }

  .hero-section {
    padding-bottom: 32px;
  }

  .carousel-slide {
    flex: 0 0 calc(80% - 0.8rem);
  }

  /* Hero accueil mobile : supprime l'image de fond sur le bloc interne
     pour garantir la lisibilité du texte sur fond gris clair (#f5f4f6) */
  .svc-hero > .wp-block-group {
    background-image: none !important;
    padding: 2rem 1.25rem 2.5rem !important;
  }

  /* Assure que le H1 et le paragraphe restent lisibles */
  .svc-hero .hero-h1 {
    color: var(--c-navy) !important;
  }
  .svc-hero .hero-desc {
    color: #4a5568 !important;
  }
}

@media print {

  .site-header,
  .section-cta,
  .hero-section {
    display: none !important;
  }

  body {
    padding-top: 0 !important;
  }
}

/* ─── Éditeur Gutenberg — neutralise les règles frontend ───────── */
.editor-styles-wrapper {
  /* Pas de padding-top dans l'éditeur (le header sticky n'existe pas) */
  padding-top: 0 !important;
  /* Police identique au frontend */
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* Le header ne s'affiche pas dans l'éditeur */
.editor-styles-wrapper .site-header {
  display: none !important;
}

/* Assure que les sections full-width s'affichent bien dans la colonne éditeur */
.editor-styles-wrapper .alignfull {
  margin-left: calc(-1 * var(--wp--custom--layout--padding-horizontal, 1rem));
  margin-right: calc(-1 * var(--wp--custom--layout--padding-horizontal, 1rem));
}

/* Hero H1 dans l'éditeur */
.editor-styles-wrapper .hero-h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-navy);
  margin: 0.5rem 0 0;
}

.editor-styles-wrapper .hero-h1__accent {
  color: var(--c-fuchsia);
  font-style: normal;
}

/* Blocs wp:html — aperçu visuel dans l'éditeur */
.editor-styles-wrapper .hero-expertise-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(109, 183, 178, 0.1);
  border: 1px solid rgba(109, 183, 178, 0.25);
  border-radius: 100px;
  padding: 0.35rem 0.9rem 0.35rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-teal-text);
  margin-bottom: 1rem;
}



/* Dans l'éditeur le hero n'a pas besoin du padding-bottom extra
   (le wrapper React compense) — on le laisse à 0 pour ne pas
   créer un espace vide sous le hero dans l'aperçu éditeur */
.editor-styles-wrapper .hero-section {
  padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   FAQ — bloc deux colonnes (accordéon), utilisé partout où le
   contenu contient des <div class="faq-item"><h3>…</h3><p>…</p></div>
   (description de catégorie produit, contenu de page...). La
   transformation HTML (ajout de l'éditorial gauche + accordéon natif
   <details>/<summary> à droite) est faite côté PHP, voir functions.php
   ("aplastic94_wrap_faq_blocks") — cette classe ne doit donc jamais
   être ajoutée manuellement par un rédacteur.
   ═══════════════════════════════════════════════════════════ */
.faq-block {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 2.5rem;
  align-items: start;
  background: var(--c-gray);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin: 3rem 0;
}

.faq-block__intro {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.faq-block__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-teal-text);
  margin-bottom: 0.6rem;
}

.faq-block__title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-navy);
  margin: 0 0 0.9rem;
}

.faq-block__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text-mid);
  margin: 0 0 1.5rem;
}

.faq-block__cta {
  display: inline-block;
  border: none;
  background: var(--c-teal);
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius);
  padding: 0.75rem 1.4rem;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: background-color var(--trans), transform var(--trans);
}

.faq-block__cta:hover {
  background: var(--c-teal-text);
  color: var(--c-white);
  transform: translateY(-1px);
}

.faq-block__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.faq-accordion__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow-card);
}

.faq-accordion__item[open] {
  border-color: var(--c-teal);
}

.faq-accordion__question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-navy);
}

.faq-accordion__question::-webkit-details-marker {
  display: none;
}

.faq-accordion__question::marker {
  content: "";
}

.faq-accordion__icon {
  flex-shrink: 0;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-gray);
  transition: transform var(--trans), background-color var(--trans);
}

.faq-accordion__icon::before,
.faq-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-teal-text);
  transform: translate(-50%, -50%);
}

.faq-accordion__icon::before {
  width: 12px;
  height: 2px;
}

.faq-accordion__icon::after {
  width: 2px;
  height: 12px;
}

.faq-accordion__item[open] .faq-accordion__icon {
  transform: rotate(45deg);
  background: var(--c-teal);
}

.faq-accordion__item[open] .faq-accordion__icon::before,
.faq-accordion__item[open] .faq-accordion__icon::after {
  background: var(--c-white);
}

.faq-accordion__answer {
  padding: 0 1.4rem 1.1rem;
  color: var(--c-text-mid);
  font-size: 0.9rem;
  line-height: 1.7;
}

.faq-accordion__answer p {
  margin: 0 0 0.6rem;
}

.faq-accordion__answer p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .faq-block {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .faq-block__intro {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════
   Notice "Ajouté au panier" — toast dynamique
   Remplace la barre verte pleine largeur par défaut de WooCommerce.
   Base = carte discrète en flux normal (fonctionne sans JS) ;
   quand main.js s'exécute, il déplace la carte dans #aplastic94-toasts
   (classe .is-toast ajoutée) pour un vrai toast flottant animé,
   voir main.js ("Notice panier → toast flottant").
   ═══════════════════════════════════════════════════════════ */
/* Thème bloc (FSE) : WooCommerce sert ses notices via le rendu "blocks"
   (Automattic\WooCommerce\Blocks\Domain\Services\Notices — actif dès que
   wp_is_block_theme() est vrai), pas via l'ancien template
   woocommerce/notices/success.php. Markup réel :
   <div class="wc-block-components-notice-banner is-success" role="alert">
     <svg>…</svg><div class="wc-block-components-notice-banner__content">…</div>
   </div>
   D'où le ciblage de .wc-block-components-notice-banner.is-success et non
   .woocommerce-message (classique, absente de ce thème). */
.wc-block-components-notice-banner.is-success {
  position: relative !important;
  display: flex !important;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--c-white) !important;
  color: var(--c-text) !important;
  border: none !important;
  border-left: 4px solid var(--c-teal) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem !important;
  margin: 0 0 1.5rem !important;
  list-style: none;
}

.wc-block-components-notice-banner.is-success .button.wc-forward {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem !important;
  background: var(--c-fuchsia) !important;
  color: var(--c-white) !important;
  font-size: 0.82rem;
  font-weight: 600;
  border: none !important;
  border-radius: 100px !important;
  float: none !important;
}

.aplastic94-toasts {
  position: fixed;
  z-index: 9999;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.wc-block-components-notice-banner.is-success.is-toast {
  pointer-events: auto;
  box-shadow: var(--shadow-hover);
  padding-right: 2.5rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), opacity 0.35s ease;
}

.wc-block-components-notice-banner.is-success.is-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wc-block-components-notice-banner.is-success.is-toast.is-leaving {
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.aplastic94-toast__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(109, 183, 178, 0.15);
  color: var(--c-teal-text);
  animation: aplastic94-toast-pop 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.05s both;
}

.aplastic94-toast__icon svg {
  width: 18px;
  height: 18px;
}

.aplastic94-toast__body {
  flex: 1;
  min-width: 0;
}

.aplastic94-toast__text {
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--c-text);
}

.aplastic94-toast__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  background: var(--c-fuchsia);
  color: var(--c-white) !important;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 100px;
  text-decoration: none !important;
  transition: var(--trans);
}

.aplastic94-toast__action:hover {
  background: var(--c-fuchsia-h);
  transform: translateX(2px);
}

.aplastic94-toast__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--c-text-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: var(--trans);
}

.aplastic94-toast__close:hover {
  background: var(--c-gray);
  color: var(--c-navy);
}

.aplastic94-toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--c-teal);
  transform-origin: left;
  animation: aplastic94-toast-countdown 5s linear forwards;
}

@keyframes aplastic94-toast-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes aplastic94-toast-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .aplastic94-toasts {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-components-notice-banner.is-success.is-toast {
    transition: opacity 0.2s ease;
    transform: none !important;
  }
  .aplastic94-toast__icon {
    animation: none;
  }
}