/* ============================================================
   BiomeBounty — animations, hovers, gradients
   ------------------------------------------------------------
   Tout est exprimé en var(--wp--preset--color--*) ou
   var(--wp--custom--*) : changer la palette dans theme.json
   (ou depuis le panneau Styles de l'éditeur) propage tout.

   Aucune couleur n'est hardcodée, sauf les rgba() avec
   opacité — calculées une fois sur la palette de référence.
   ============================================================ */

/* ============================================================
   1) Reset doux + base
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Selection en couleur primaire */
::selection {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-content);
}

/* Scrollbar dark (WebKit only) */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wp--preset--color--base); }
::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--base-400);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--primary); }

/* ============================================================
   2) HERO BACKGROUND GRID (à appliquer sur un Group ou Cover)
   Classe : is-style-hero-grid
   ============================================================ */
.is-style-hero-grid {
  position: relative;
  overflow: hidden;
}

.is-style-hero-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(220, 38, 38, 0.08) 1px, transparent 0);
  background-size: 40px 40px;
  animation: bb-grid-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.is-style-hero-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,  rgba(220, 38, 38, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.is-style-hero-grid > * { position: relative; z-index: 1; }

@keyframes bb-grid-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ============================================================
   3) ANIMATIONS — fade-in / scroll reveal
   Classes : is-style-fade-in-up, is-style-fade-in,
             is-style-fade-in-scale + has-animation-delay-{n}
   ============================================================ */
@keyframes bb-fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bb-fade-in-scale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.is-style-fade-in-up    { opacity: 0; animation: bb-fade-in-up    0.7s ease-out forwards; }
.is-style-fade-in       { opacity: 0; animation: bb-fade-in       0.7s ease-out forwards; }
.is-style-fade-in-scale { opacity: 0; animation: bb-fade-in-scale 0.6s ease-out forwards; }

.has-animation-delay-100 { animation-delay: 0.1s; }
.has-animation-delay-200 { animation-delay: 0.2s; }
.has-animation-delay-300 { animation-delay: 0.3s; }
.has-animation-delay-400 { animation-delay: 0.4s; }
.has-animation-delay-500 { animation-delay: 0.5s; }
.has-animation-delay-600 { animation-delay: 0.6s; }
.has-animation-delay-700 { animation-delay: 0.7s; }
.has-animation-delay-800 { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .is-style-fade-in-up,
  .is-style-fade-in,
  .is-style-fade-in-scale {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   4) GRADIENT TEXT — texte avec dégradé
   Classes : is-style-gradient-primary, is-style-gradient-accent
   ============================================================ */
.is-style-gradient-primary,
.is-style-gradient-accent {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  background-size: 200% auto;
  background-repeat: no-repeat;
  display: inline-block;
}

.is-style-gradient-primary {
  background-image: linear-gradient(135deg,
    var(--wp--preset--color--primary) 0%,
    var(--wp--preset--color--primary-soft) 100%);
}

.is-style-gradient-accent {
  background-image: linear-gradient(135deg,
    var(--wp--preset--color--accent) 0%,
    var(--wp--preset--color--info) 100%);
}

/* ============================================================
   5) TRUST BADGES (icône + texte, fond glass)
   Classe : is-style-trust-badge (sur un Group horizontal)
   ============================================================ */
.is-style-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--wp--custom--radius--md);
  background: rgba(22, 19, 30, 0.6);
  border: 1px solid var(--wp--preset--color--base-400);
  transition: all var(--wp--custom--transition--base);
}

.is-style-trust-badge:hover {
  background: rgba(22, 19, 30, 0.85);
  border-color: rgba(220, 38, 38, 0.3);
  transform: translateY(-2px);
}

.is-style-trust-badge svg {
  color: var(--wp--preset--color--primary);
  flex-shrink: 0;
}

/* ============================================================
   6) PILL BADGES (catégorie, status…)
   Classes : is-style-pill-{primary|secondary|accent|info|warning}
   ============================================================ */
.is-style-pill-primary,
.is-style-pill-secondary,
.is-style-pill-accent,
.is-style-pill-info,
.is-style-pill-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid;
  white-space: nowrap;
}

.is-style-pill-primary   { color: var(--wp--preset--color--primary-soft); background: rgba(220, 38, 38, 0.12);  border-color: rgba(220, 38, 38, 0.30); }
.is-style-pill-secondary { color: #34d399;                                background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.30); }
.is-style-pill-accent    { color: #a78bfa;                                background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.30); }
.is-style-pill-info      { color: #22d3ee;                                background: rgba(6, 182, 212, 0.12);  border-color: rgba(6, 182, 212, 0.30); }
.is-style-pill-warning   { color: #fbbf24;                                background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.30); }

/* ============================================================
   7) CTA — bouton primaire avec shimmer + glow
   Classe : is-style-glow sur core/button
   ============================================================ */
.wp-block-button.is-style-glow > .wp-block-button__link {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    var(--wp--preset--color--primary) 0%,
    #be123c 100%);
  color: var(--wp--preset--color--primary-content);
  font-weight: 600;
  border-radius: var(--wp--custom--radius--md);
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);
  transition: transform var(--wp--custom--transition--base),
              box-shadow var(--wp--custom--transition--base);
}

.wp-block-button.is-style-glow > .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.wp-block-button.is-style-glow > .wp-block-button__link:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 40px rgba(220, 38, 38, 0.5);
}

.wp-block-button.is-style-glow > .wp-block-button__link:hover::after {
  transform: translateX(100%);
}

.wp-block-button.is-style-glow > .wp-block-button__link:active {
  transform: translateY(0) scale(0.98);
}

/* CTA — bouton outline (Classe : is-style-outline) */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--base-content);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--md);
  transition: all var(--wp--custom--transition--base);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: rgba(220, 38, 38, 0.6);
  background: rgba(220, 38, 38, 0.10) !important;
  color: var(--wp--preset--color--error);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button.is-style-glow > .wp-block-button__link::after { display: none; }
}

/* ============================================================
   8) FEATURE CARD (Group avec hover + glow)
   Classe : is-style-feature-card
   ============================================================ */
.is-style-feature-card {
  background: rgba(22, 19, 30, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  padding: 2rem;
  transition: all var(--wp--custom--transition--base);
}

/* Equal-height cards in a wp:columns grid (features-grid pattern). When a
   feature-card sits alone outside a columns row, leave it on its natural
   height so it does not collapse / overflow the parent column. */
.wp-block-columns > .wp-block-column.is-style-feature-card,
.wp-block-columns > .wp-block-column > .is-style-feature-card {
  height: 100%;
}

/* Account-page CTA card — pin the height to the natural content size.
   Defensive override for the cases where a stretched parent column (flex
   align-items: stretch as a side effect of layout: flex on wp-block-columns)
   or a stale cached version of this stylesheet keeps inflating the card. */
.biomebounty-account-cta {
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start;
}

.is-style-feature-card:hover {
  background: rgba(30, 26, 42, 0.85);
  border-color: rgba(220, 38, 38, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Icone d'une feature card (sur un Group/Image enfant) */
.is-style-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--wp--custom--radius--md);
  background: rgba(220, 38, 38, 0.10);
  color: var(--wp--preset--color--primary);
  transition: all var(--wp--custom--transition--base);
}

.is-style-feature-card:hover .is-style-feature-icon {
  background: rgba(220, 38, 38, 0.20);
  transform: scale(1.08);
}

/* Variantes de teinte pour l'icône */
.is-style-feature-icon.is-tint-secondary { background: rgba(16, 185, 129, 0.12);  color: var(--wp--preset--color--secondary); }
.is-style-feature-icon.is-tint-accent    { background: rgba(139, 92, 246, 0.12); color: var(--wp--preset--color--accent); }
.is-style-feature-icon.is-tint-info      { background: rgba(6, 182, 212, 0.12);  color: var(--wp--preset--color--info); }
.is-style-feature-icon.is-tint-warning   { background: rgba(245, 158, 11, 0.12); color: var(--wp--preset--color--warning); }

/* ============================================================
   9) PLAN CARD (carte de tarif)
   Classe : is-style-plan-card / is-style-plan-card.is-featured
   ============================================================ */
.is-style-plan-card {
  position: relative;
  background: var(--wp--preset--color--base-200);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  padding: 2rem;
  transition: all var(--wp--custom--transition--base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.is-style-plan-card:hover {
  border-color: rgba(220, 38, 38, 0.4);
  box-shadow: 0 0 30px rgba(220, 38, 38, 0.12), 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
}

.is-style-plan-card.is-featured {
  border-color: rgba(220, 38, 38, 0.5);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.18);
}

/* Conic gradient rim — aperçu "premium gaming" */
.is-style-plan-card-pro {
  position: relative;
  isolation: isolate;
  background: var(--wp--preset--color--base-200);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.is-style-plan-card-pro::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--bb-card-angle, 0deg),
    rgba(220, 38, 38, 0)    0deg,
    rgba(220, 38, 38, 0)    200deg,
    rgba(220, 38, 38, 0.55) 250deg,
    rgba(244, 63,  94, 0.85) 280deg,
    rgba(220, 38, 38, 0.55) 310deg,
    rgba(220, 38, 38, 0)    360deg
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 0;
  animation: bb-card-angle 6s linear infinite;
}

.is-style-plan-card-pro:hover::before,
.is-style-plan-card-pro.is-featured::before { opacity: 1; }
.is-style-plan-card-pro.is-featured::before { animation-duration: 8s; }

@property --bb-card-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes bb-card-angle {
  to { --bb-card-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .is-style-plan-card-pro::before { animation: none; }
}

/* Prix dans une plan-card (sur un Heading) */
.is-style-plan-price {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--6xl);
  color: var(--wp--preset--color--white);
  line-height: 1;
}

.is-style-plan-price small {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--muted);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* ============================================================
   10) CATEGORY CARD (Cover-style avec image + overlay)
   Classe : is-style-category-card
   ============================================================ */
.is-style-category-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--xl);
  transition: transform var(--wp--custom--transition--base),
              box-shadow var(--wp--custom--transition--base);
}

.is-style-category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.is-style-category-card img {
  transition: transform 0.6s ease;
}

.is-style-category-card:hover img {
  transform: scale(1.08);
}

/* ============================================================
   11) TESTIMONIAL CARD
   Classe : is-style-testimonial
   ============================================================ */
.is-style-testimonial {
  background: rgba(22, 19, 30, 0.6);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  padding: 2rem;
  position: relative;
  transition: all var(--wp--custom--transition--base);
}

.is-style-testimonial:hover {
  border-color: rgba(220, 38, 38, 0.25);
  transform: translateY(-2px);
}

.is-style-testimonial::before {
  content: """;
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--wp--preset--color--primary);
  opacity: 0.3;
  line-height: 1;
}

/* ============================================================
   12) FAQ ACCORDION (utilise <details>)
   Classe : is-style-faq-item
   ============================================================ */
.is-style-faq-item {
  background: rgba(22, 19, 30, 0.6);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color var(--wp--custom--transition--base);
}

.is-style-faq-item:hover {
  border-color: rgba(220, 38, 38, 0.25);
}

.is-style-faq-item summary {
  font-weight: 600;
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--white);
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--wp--custom--transition--fast);
}

.is-style-faq-item summary::-webkit-details-marker { display: none; }

.is-style-faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--wp--preset--color--primary);
  transition: transform var(--wp--custom--transition--base);
  font-weight: 300;
}

.is-style-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.is-style-faq-item summary:hover {
  background: rgba(220, 38, 38, 0.05);
}

.is-style-faq-item .wp-block-paragraph,
.is-style-faq-item p {
  padding: 0 1.5rem 1rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   13) ROADMAP item
   Classe : is-style-roadmap-item / .is-status-{done|wip|planned}
   ============================================================ */
.is-style-roadmap-item {
  position: relative;
  background: rgba(22, 19, 30, 0.6);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  padding: 1.5rem 1.75rem;
  padding-left: 2.5rem;
  transition: all var(--wp--custom--transition--base);
}

.is-style-roadmap-item::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.85rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--muted);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}

.is-style-roadmap-item.is-status-done::before    { background: var(--wp--preset--color--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
.is-style-roadmap-item.is-status-wip::before     { background: var(--wp--preset--color--warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); animation: bb-pulse 2s ease-in-out infinite; }
.is-style-roadmap-item.is-status-planned::before { background: var(--wp--preset--color--info);    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15); }

@keyframes bb-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ============================================================
   14) SECTION DIVIDER
   Classe : is-style-divider-fade (sur core/separator)
   ============================================================ */
.wp-block-separator.is-style-divider-fade {
  background: linear-gradient(90deg,
    transparent,
    var(--wp--preset--color--base-400),
    transparent);
  border: none;
  height: 1px;
  max-width: 80%;
  margin-inline: auto;
  opacity: 1;
}

/* ============================================================
   15) NAVBAR sticky avec backdrop blur
   Classe : is-style-navbar-glass (sur le Group du header)
   ============================================================ */
.is-style-navbar-glass {
  background: rgba(12, 10, 20, 0.80);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--wp--preset--color--base-400);
}

/* ============================================================
   16) FOOTER
   Classe : is-style-footer-dark (Group du footer)
   ============================================================ */
.is-style-footer-dark {
  background: #080610;
  border-top: 1px solid var(--wp--preset--color--base-400);
}

/* ============================================================
   17) CARD HOVER GENERIQUE
   Classe : is-style-card-hover (Group ou Column)
   ============================================================ */
.is-style-card-hover {
  background: var(--wp--preset--color--base-200);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  padding: 1.75rem;
  transition: transform var(--wp--custom--transition--base),
              box-shadow var(--wp--custom--transition--base),
              border-color var(--wp--custom--transition--base);
  height: 100%;
}

.is-style-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
              0 0 30px rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}

/* ============================================================
   18) COVER OVERLAY (Cover blocks / category-card)
   Classe : is-style-cover-overlay
   ============================================================ */
.is-style-cover-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 10, 20, 0) 0%,
    rgba(12, 10, 20, 0.50) 60%,
    rgba(12, 10, 20, 0.95) 100%);
  pointer-events: none;
  z-index: 1;
}

.is-style-cover-overlay > * { position: relative; z-index: 2; }

/* ============================================================
   19) STATS / KPI
   Classe : is-style-stat-block
   ============================================================ */
.is-style-stat-block {
  text-align: center;
  padding: 2rem 1rem;
}

.is-style-stat-block .wp-block-heading {
  font-family: var(--wp--preset--font-family--mono);
  background: linear-gradient(135deg,
    var(--wp--preset--color--primary) 0%,
    var(--wp--preset--color--primary-soft) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 0.5rem;
}

/* ============================================================
   20) FORMULAIRES (contact, search…)
   Toutes les inputs natives + Greenshift
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--base-400);
  color: var(--wp--preset--color--base-content);
  border-radius: var(--wp--custom--radius--md);
  padding: 0.75rem 1rem;
  width: 100%;
  font-family: var(--wp--preset--font-family--sans);
  transition: border-color var(--wp--custom--transition--fast),
              box-shadow   var(--wp--custom--transition--fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--wp--preset--color--subtle);
}

/* ============================================================
   21) IMAGE — radius doux par défaut sur figures
   ============================================================ */
.wp-block-image img,
.wp-block-cover img,
.wp-block-media-text img {
  border-radius: var(--wp--custom--radius--lg);
}

/* Mais on respecte l'override utilisateur explicite */
.wp-block-image.is-style-rounded img { border-radius: 9999px; }
.wp-block-image.is-style-default img { border-radius: 0; }

/* ============================================================
   22) UTILITAIRES — micro classes (peuvent être utilisées dans
   l'attribut `additional CSS class` du panneau Avancé)
   ============================================================ */
.bb-uppercase     { text-transform: uppercase; letter-spacing: 0.1em; }
.bb-mono          { font-family: var(--wp--preset--font-family--mono); }
.bb-text-balance  { text-wrap: balance; }
.bb-text-shadow   { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); }
.bb-glass         { background: rgba(22, 19, 30, 0.6); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); }
.bb-noise         { position: relative; }
.bb-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/></svg>");
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* ============================================================
   23) BLOG GRID — grille d'articles (Query Loop)
   ============================================================ */
.is-style-post-card {
  background: var(--wp--preset--color--base-200);
  border: 1px solid var(--wp--preset--color--base-400);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  transition: all var(--wp--custom--transition--base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.is-style-post-card:hover {
  border-color: rgba(220, 38, 38, 0.30);
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.is-style-post-card .wp-block-post-featured-image img { border-radius: 0; }
.is-style-post-card .wp-block-post-title              { padding: 0 1.5rem; margin-top: 1.25rem; }
.is-style-post-card .wp-block-post-excerpt            { padding: 0 1.5rem; color: var(--wp--preset--color--muted); }
.is-style-post-card .wp-block-post-date               { padding: 0 1.5rem; color: var(--wp--preset--color--subtle); font-size: var(--wp--preset--font-size--sm); }
.is-style-post-card .wp-block-post-terms              { padding: 0 1.5rem; }

/* ============================================================
   24) NAVIGATION — items sobres, hover primary
   ============================================================ */
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base-content);
  transition: color var(--wp--custom--transition--fast);
  font-weight: 500;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary-soft);
}

.wp-block-navigation .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--base-content);
}

/* ============================================================
   25) ÉDITEUR — petites compensations pour le rendu Gutenberg
   ============================================================ */
.editor-styles-wrapper .is-style-hero-grid::before,
.editor-styles-wrapper .is-style-hero-grid::after {
  /* L'éditeur n'aime pas les pseudos absolus qui mangent les clics
     sur le canvas — on les laisse en pointer-events: none, c'est ok */
}

/* Permet à l'éditeur de visualiser les Group avec is-style-feature-card
   sans perdre la sélection. */
.editor-styles-wrapper .is-style-feature-card,
.editor-styles-wrapper .is-style-card-hover {
  min-height: 4rem;
}