/* >>> HTE p01-accueil */
/* =====================================================================
   HB Clean Auto 64 – custom.css (UN SEUL fichier pour tout le site)
   Préfixe : hb-   ·   Identité du logo : néon cyan #00E6FF + rose #FF3EB5 sur noir.
   Les couleurs, typos, espacements et largeurs sont dans le JSON (réglages natifs Elementor) ;
   ce fichier ne porte que le décor : fonds, vagues fixes, bulles, survols, habillage FAQ / tableaux.
   Fluidité : aucune animation en boucle sauf les bulles (transform + opacity, 6 au maximum, en pause hors écran).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --hb-ink: #0A0A0A;
  --hb-night: #111018;
  --hb-panel: #1B1A21;
  --hb-cyan: #00E6FF;
  --hb-cyan-d: #0090A8;
  --hb-pink: #FF3EB5;
  --hb-pink-d: #C42E8C;
  --hb-text: #1B1A21;
  --hb-muted: #5C5A66;
  --hb-soft: #A6A4B3;
  --hb-light: #F7F6F9;
  --hb-line: #E4E2E8;
  --hb-grad: linear-gradient(120deg, #00E6FF 8%, #FF3EB5 92%);
  --hb-wave: #FFFFFF;
  --hb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30Q180 0 360 30T720 30T1080 30T1440 30V60H0Z'/%3E%3C/svg%3E");
}

/* ---------- Socle des sections ---------- */
.hb-section { position: relative; overflow: hidden; isolation: isolate; }
.hb-section .hb-in { position: relative; z-index: 2; }
.hb-section .hb-in .elementor-widget-html, .hb-section .hb-in .elementor-widget-image-carousel, .hb-section .hb-in .elementor-widget-google_maps, .hb-section .hb-in .elementor-widget-nested-accordion { width: 100%; }
.hb-section p, .hb-section li, .hb-section td, .hb-section th { font-family: Inter, system-ui, sans-serif; }
.hb-section .elementor-heading-title { font-family: Sora, system-ui, sans-serif; }
.hb-section .elementor-widget-text-editor { max-width: none; }
.hb-section .elementor-widget-text-editor p { margin: 0 0 1em; }
.hb-section .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.hb-bg-white { background-color: #FFFFFF; }
.hb-bg-light { background-color: var(--hb-light); }
.hb-bg-night { background: radial-gradient(55% 70% at 100% 0%, rgba(0, 230, 255, .10), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgba(255, 62, 181, .12), transparent 70%), #111018; }
.hb-bg-dark { background: radial-gradient(60% 70% at 100% 0%, rgba(0, 230, 255, .16), transparent 70%), radial-gradient(50% 65% at 0% 100%, rgba(255, 62, 181, .16), transparent 70%), #0A0A0A; }

/* ---------- Vagues fixes entre les sections (couleur = celle de la section suivante) ---------- */
.hb-w-white { --hb-wave: #FFFFFF; }
.hb-w-light { --hb-wave: #F7F6F9; }
.hb-w-night { --hb-wave: #111018; }
.hb-w-dark { --hb-wave: #0A0A0A; }
.hb-wave-b { margin-bottom: -1px; }
.hb-wave-b.hb-wave-b::after {
  content: ""; position: absolute; top: auto; right: auto; bottom: -1px; left: 0; width: 100%; height: 56px; z-index: 1; pointer-events: none; border-radius: 0;
  background: var(--hb-wave);
  -webkit-mask: var(--hb-mask) no-repeat 0 100% / 100% 100%; mask: var(--hb-mask) no-repeat 0 100% / 100% 100%;
}

/* ---------- Héro : fond noir, lueurs néon, filet de séparation ---------- */
.hb-hero { background: radial-gradient(55% 70% at 92% 8%, rgba(0, 230, 255, .22), transparent 70%), radial-gradient(45% 60% at 4% 96%, rgba(255, 62, 181, .22), transparent 70%), #0A0A0A; }

/* ---------- Bulles (créées par le JS) ---------- */
.hb-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hb-bubble {
  position: absolute; bottom: -60px; border-radius: 50%;
  border: 1px solid rgba(0, 230, 255, .55);
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .5) 0 7%, rgba(0, 230, 255, .1) 38%, transparent 70%);
  animation: hb-rise var(--hb-d, 18s) linear infinite; animation-delay: var(--hb-delay, 0s);
}
.hb-bubble:nth-child(3n) { border-color: rgba(255, 62, 181, .6); background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .5) 0 7%, rgba(255, 62, 181, .1) 38%, transparent 70%); }
.hb-off, .hb-off * { animation-play-state: paused !important; }
@keyframes hb-rise {
  0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: .8; }
  100% { transform: translate3d(var(--hb-x, 20px), calc(-1 * var(--hb-rise, 720px)), 0) scale(1.05); opacity: 0; }
}

/* ---------- Mots mis en valeur ---------- */
.hb-grad { background: var(--hb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- Sur-titre ---------- */
.hb-eyebrow .elementor-heading-title {
  display: inline-flex; align-items: center; gap: .7em; font-size: .78rem; line-height: 1; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--hb-cyan-d);
}
.hb-eyebrow .elementor-heading-title::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--hb-grad); }
.hb-eyebrow--light .elementor-heading-title { color: var(--hb-cyan); }

/* ---------- Boutons ---------- */
.hb-btn .elementor-button { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }
.hb-btn--primary .elementor-button { background-image: var(--hb-grad); color: #0A0A0A; font-weight: 700; }
.hb-btn--primary .elementor-button:hover { transform: translateY(-2px); color: #0A0A0A !important; box-shadow: 0 0 0 1px rgba(0, 230, 255, .4), 0 16px 38px -14px rgba(255, 62, 181, .65); }
.hb-btn--ghost .elementor-button:hover { background-color: var(--hb-ink) !important; color: #FFFFFF !important; border-color: var(--hb-ink) !important; transform: translateY(-2px); }
.hb-btn--ghost-light .elementor-button:hover { background-color: rgba(255, 255, 255, .12) !important; color: #FFFFFF !important; border-color: var(--hb-cyan) !important; transform: translateY(-2px); }
.hb-btn .elementor-button:active { transform: translateY(1px); }

/* ---------- Ligne de réassurance du héro ---------- */
.hb-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.hb-trust li { position: relative; margin: 0; padding: 0 0 0 26px; font: 500 .92rem/1.4 Inter, system-ui, sans-serif; color: #D9D8E0; }
.hb-trust li::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border-radius: 50%; background: var(--hb-grad); }
.hb-trust li::after { content: ""; position: absolute; left: 6px; top: .38em; width: 5px; height: 9px; border: solid #0A0A0A; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Photo du héro ---------- */
.hb-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 0 0 1px rgba(0, 230, 255, .55), 0 34px 70px -30px rgba(255, 62, 181, .6), 0 0 64px -22px rgba(0, 230, 255, .55); }
.hb-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: 0 22px 46px -26px rgba(10, 10, 10, .55); }

/* ---------- Cartes ---------- */
.hb-card { position: relative; box-shadow: 0 10px 28px -20px rgba(10, 10, 10, .35); transition: translate .3s ease, box-shadow .3s ease, border-color .3s ease; }
.hb-card:hover { translate: 0 -6px; border-color: transparent !important; box-shadow: 0 0 0 1.5px var(--hb-cyan), 0 22px 46px -22px rgba(255, 62, 181, .45); }
.hb-card--dark { box-shadow: none; }
.hb-card--dark:hover { box-shadow: 0 0 0 1.5px var(--hb-cyan), 0 22px 46px -22px rgba(255, 62, 181, .55); }
.hb-card--pop { border-color: transparent !important; box-shadow: 0 0 0 2px var(--hb-cyan), 0 24px 54px -26px rgba(255, 62, 181, .6); }
.hb-badge p { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 999px; font: 700 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #0A0A0A; background: var(--hb-grad); }
.hb-icon .elementor-icon { transition: transform .4s ease; }
.hb-card:hover .hb-icon .elementor-icon { transform: translateY(-4px) rotate(-6deg); }
.hb-pill p { display: inline-block; margin: 0; padding: 7px 14px; border-radius: 999px; font: 700 .9rem/1 Sora, system-ui, sans-serif; color: #0A0A0A; background: var(--hb-grad); }
.hb-card .hb-btn { margin-top: auto; }
.hb-price .elementor-heading-title { background: var(--hb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- Pastilles de liens (prestations liées, communes) ---------- */
.hb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hb-chips li { margin: 0; padding: 0; }
.hb-chips a { display: inline-block; padding: 9px 16px; border: 1px solid var(--hb-line); border-radius: 999px; font: 500 .9rem/1.2 Inter, system-ui, sans-serif; color: var(--hb-text); background: #FFFFFF; text-decoration: none; transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.hb-chips a:hover, .hb-chips a:focus-visible { border-color: var(--hb-cyan); color: var(--hb-cyan-d); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(0, 230, 255, .8); outline: none; }
.hb-chips--dark a { border-color: rgba(255, 255, 255, .22); color: #F1F0F5; background: rgba(255, 255, 255, .05); }
.hb-chips--dark a:hover, .hb-chips--dark a:focus-visible { border-color: var(--hb-cyan); color: var(--hb-cyan); box-shadow: 0 10px 22px -14px rgba(0, 230, 255, .8); }

/* ---------- Étapes ---------- */
.hb-steps { counter-reset: hb-s; }
/* Elementor pose déjà un ::before en position absolue sur chaque conteneur (calque de fond) : on le remet dans le flux, sélecteurs doublés. */
.hb-step { counter-increment: hb-s; position: relative; }
.hb-step.hb-step::before {
  content: counter(hb-s, decimal-leading-zero); display: grid; place-items: center; position: relative; inset: auto; flex: 0 0 auto; opacity: 1; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%;
  font: 700 1.1rem/1 Sora, system-ui, sans-serif; color: #0A0A0A; background: var(--hb-grad); box-shadow: 0 0 0 7px rgba(0, 230, 255, .12);
}
@media (min-width: 1025px) {
  .hb-step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 76px; right: -22px; border-top: 2px dashed rgba(255, 255, 255, .22); }
}

/* ---------- Listes à coches ---------- */
.hb-checks ul { list-style: none; margin: 0; padding: 0; }
.hb-checks li { position: relative; margin: 0 0 10px; padding-left: 32px; line-height: 1.55; font-size: .97rem; }
.hb-checks li::before { content: ""; position: absolute; left: 0; top: .12em; width: 20px; height: 20px; border-radius: 50%; background: var(--hb-grad); }
.hb-checks li::after { content: ""; position: absolute; left: 7px; top: .4em; width: 5px; height: 10px; border: solid #0A0A0A; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Tableaux de tarifs ---------- */
.hb-table-wrap { width: 100%; overflow-x: auto; }
.hb-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--hb-line); border-radius: 18px; background: #FFFFFF; box-shadow: 0 14px 34px -24px rgba(10, 10, 10, .4); }
.hb-table caption { padding: 0 0 12px; text-align: left; font: 600 .95rem/1.3 Sora, system-ui, sans-serif; color: var(--hb-text); caption-side: top; }
.hb-table th { padding: 16px 20px; text-align: left; font: 600 .85rem/1.3 Sora, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; background: #0A0A0A; }
.hb-table td { padding: 14px 20px; border-bottom: 1px solid var(--hb-line); color: var(--hb-text); font-size: .97rem; line-height: 1.5; vertical-align: top; }
.hb-table tr:last-child td { border-bottom: 0; }
.hb-table tbody tr { transition: background-color .2s ease; }
.hb-table tbody tr:hover td { background: #F1FCFE; }
.hb-table td strong { font-family: Sora, system-ui, sans-serif; color: var(--hb-text); white-space: nowrap; }
.hb-table-note { margin: 12px 0 0; font: 400 .9rem/1.6 Inter, system-ui, sans-serif; color: var(--hb-muted); }

/* ---------- FAQ (accordéon natif) ---------- */
.hb-faq .e-n-accordion { display: flex; flex-direction: column; gap: 12px; }
.hb-faq .e-n-accordion-item { overflow: hidden; border: 1px solid var(--hb-line) !important; border-radius: 14px; background: #FFFFFF; transition: border-color .25s ease, box-shadow .25s ease; }
.hb-faq .e-n-accordion-item:hover { border-color: #C9C6D0 !important; }
.hb-faq .e-n-accordion-item[open] { border-color: transparent !important; box-shadow: 0 0 0 1.5px var(--hb-cyan), 0 14px 34px -18px rgba(255, 62, 181, .35); }
.hb-faq .e-n-accordion-item-title { padding: 18px 22px !important; background: none !important; border: 0 !important; cursor: pointer; }
.hb-faq .e-n-accordion-item-title-text { color: var(--hb-text) !important; font: 700 1.02rem/1.4 Sora, system-ui, sans-serif !important; text-align: left; }
.hb-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text, .hb-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text { color: var(--hb-cyan-d) !important; }
.hb-faq .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--hb-cyan); outline-offset: -3px; }
.hb-faq .e-n-accordion-item > .e-con { padding: 0 22px 20px !important; }
.hb-faq p { margin: 0; color: var(--hb-muted); line-height: 1.7; }

/* ---------- Carrousel de réalisations ---------- */
.hb-carousel .swiper-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 18px 38px -24px rgba(10, 10, 10, .6); }
.hb-carousel .swiper-pagination-bullet-active { background: var(--hb-pink) !important; }

/* ---------- Avis ---------- */
.hb-testi .elementor-testimonial { position: relative; padding: 26px; border: 1px solid var(--hb-line); border-radius: 18px; background: #FFFFFF; box-shadow: 0 12px 30px -22px rgba(10, 10, 10, .45); }
.hb-testi .elementor-testimonial-content { font: 400 1rem/1.7 Inter, system-ui, sans-serif; color: var(--hb-text); }
.hb-testi .elementor-testimonial-name { font: 700 .95rem/1.3 Sora, system-ui, sans-serif; color: var(--hb-text); }
.hb-testi .elementor-testimonial-job { color: var(--hb-muted); }


/* ---------- Fil d'Ariane (en tête du héro, sur fond noir) ---------- */
.hb-crumbs-wrap { margin-bottom: 18px; }
.hb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0; padding: 0; list-style: none; }
.hb-crumbs li { display: inline-flex; align-items: center; margin: 0; padding: 0; font: 500 .86rem/1.3 Inter, system-ui, sans-serif; }
.hb-crumbs li::before { content: none; }
.hb-crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 8px; border: solid var(--hb-cyan); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.hb-crumbs a { color: var(--hb-cyan); text-decoration: none; background: linear-gradient(var(--hb-cyan), var(--hb-cyan)) 0 100% / 0 2px no-repeat; transition: background-size .3s ease; }
.hb-crumbs a:hover, .hb-crumbs a:focus-visible { background-size: 100% 2px; outline: none; }
.hb-crumbs__here { color: #BDBBC8; }

/* ---------- Barre d'appel mobile (créée par le JS) ---------- */
.hb-mbar { display: none; }
@media (max-width: 767px) {
  .hb-has-mbar { padding-bottom: 68px; }
  .hb-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, .94); border-top: 1px solid rgba(255, 255, 255, .1); }
  .hb-mbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 13px 10px; border-radius: 999px; font: 700 .9rem/1 Inter, system-ui, sans-serif; text-decoration: none; }
  .hb-mbar a:first-child { color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .35); }
  .hb-mbar a:last-child { color: #0A0A0A; background: var(--hb-grad); }
}

/* ---------- Apparition au scroll (sans JS, tout reste visible) ---------- */
.hb-js .hb-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), translate .3s ease, box-shadow .3s ease; }
.hb-js .hb-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Accessibilité et mobile ---------- */
.hb-btn .elementor-button:focus-visible { outline: 3px solid var(--hb-cyan); outline-offset: 3px; }
@media (max-width: 767px) {
  .hb-wave-b.hb-wave-b::after { height: 34px; }
  .hb-table th, .hb-table td { padding: 12px 14px; }
  .hb-table td strong { white-space: normal; }
  .hb-step.hb-step::before { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-bubble { animation: none !important; }
  .hb-bubbles { display: none; }
  .hb-js .hb-reveal { opacity: 1; transform: none; transition: none; }
  .hb-card, .hb-btn .elementor-button, .hb-chips a { transition: none; }
}
/* <<< HTE p01-accueil */

/* >>> HTE zones-intervention */
/* ===========================================================
   Page « Zones d'intervention » : grille de communes
   Tout est préfixé .hbz- : aucun effet sur le reste du site.
   Palette du thème : dégradé #00E6FF → #FF3EB5, cartes #262331, survol #FF80EC.
   =========================================================== */

.hbz {
  --hbz-card: #262331;
  --hbz-card-2: #1b1824;
  --hbz-grad: linear-gradient(120deg, #00E6FF, #FF3EB5);
  --hbz-accent: #FF80EC;
  --hbz-text: #FFFFFF;
  --hbz-muted: #B9B5C8;
  --hbz-line: #E4E2E8;
  width: 100%;
}

/* --- Barre d'outils (ajoutée par le JS) ----------------------------- */

.hbz-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 22px;
}

.hbz-search {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
}

.hbz-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: #6D6980;
  pointer-events: none;
}

.hbz .hbz-search input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 20px 14px 50px;
  border: 1px solid var(--hbz-line);
  border-radius: 100px;
  background: #FFFFFF;
  color: #0A0A0A;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.hbz .hbz-search input::placeholder {
  color: #7B7790;
}

.hbz .hbz-search input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #00E6FF, 0 12px 30px -16px rgba(255, 62, 181, .5);
}

.hbz-count {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1px solid var(--hbz-line);
  color: #0A0A0A;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}

.hbz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.hbz .hbz-chip {
  margin: 0;
  padding: 7px 15px;
  border: 1px solid var(--hbz-line);
  border-radius: 100px;
  background: #FFFFFF;
  color: #0A0A0A;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.hbz .hbz-chip:hover {
  border-color: var(--hbz-accent);
}

.hbz .hbz-chip:focus-visible {
  outline: 2px solid #00E6FF;
  outline-offset: 2px;
}

.hbz .hbz-chip.is-on {
  border-color: transparent;
  background: var(--hbz-grad);
  color: #0A0A0A;
}

/* --- Grille ---------------------------------------------------------- */

.hbz .hbz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hbz .hbz-card {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 18px;
  background: var(--hbz-card);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .06);
  transition: transform .3s ease, box-shadow .3s ease, opacity .5s ease;
}

/* Liseré dégradé, révélé au survol (même logique que .card:hover du site) */
.hbz .hbz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--hbz-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.hbz .hbz-card:hover,
.hbz .hbz-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(231, 8, 216, .2), 0 5px 10px rgba(0, 0, 0, .1);
}

.hbz .hbz-card:hover::before,
.hbz .hbz-card:focus-within::before {
  opacity: 1;
}

.hbz .hbz-card a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name go"
    "cp   go";
  align-items: end;
  row-gap: 4px;
  min-height: 100px;
  padding: 22px 22px 20px;
  border-radius: inherit;
  color: var(--hbz-text);
  text-decoration: none;
}

.hbz .hbz-card a:hover,
.hbz .hbz-card a:focus {
  color: var(--hbz-text);
  text-decoration: none;
}

.hbz .hbz-card a:focus-visible {
  outline: 2px solid #00E6FF;
  outline-offset: 3px;
}

.hbz .hbz-name {
  grid-area: name;
  font-family: Adamina, Georgia, serif;
  font-size: clamp(1.1rem, 1.4vw + .6rem, 1.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hbz .hbz-cp {
  grid-area: cp;
  color: var(--hbz-muted);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.hbz .hbz-go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hbz-grad);
  color: #0A0A0A;
  transition: transform .3s ease, box-shadow .3s ease;
}

.hbz .hbz-go svg {
  width: 18px;
  height: 18px;
}

.hbz .hbz-card:hover .hbz-go,
.hbz .hbz-card:focus-within .hbz-go {
  transform: translateX(4px);
  box-shadow: 0 0 0 1px rgba(0, 230, 255, .4), 0 10px 24px -10px rgba(255, 62, 181, .7);
}

/* --- Cartes mises en avant (Pau, Gan) -------------------------------- */

.hbz .hbz-card--feature {
  background: linear-gradient(135deg, var(--hbz-card) 0%, var(--hbz-card-2) 100%);
}

.hbz .hbz-card--feature::before {
  opacity: .55;
}

/* Seules les cartes mises en avant ont un badge : une ligne en plus */
.hbz .hbz-card--feature a {
  grid-template-areas:
    "badge badge"
    "name  go"
    "cp    go";
  min-height: 130px;
}

.hbz .hbz-card--feature .hbz-name {
  font-size: clamp(1.4rem, 1.8vw + .8rem, 1.9rem);
}

.hbz .hbz-badge {
  grid-area: badge;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--hbz-grad);
  color: #0A0A0A;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hbz .hbz-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0A0A0A;
  animation: hbz-pulse 2.2s ease-out infinite;
}

@keyframes hbz-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(10, 10, 10, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(10, 10, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0); }
}

@media (min-width: 720px) {
  .hbz .hbz-card--feature {
    grid-column: span 2;
  }
}

/* --- Filtre, état vide, apparition ---------------------------------- */

.hbz .hbz-card.is-hidden {
  display: none;
}

.hbz .hbz-empty {
  display: none;
  margin: 20px 0 0;
  padding: 26px 22px;
  border: 1px dashed #C9C6D0;
  border-radius: 15px;
  background: #FFFFFF;
  color: #0A0A0A;
  text-align: center;
}

.hbz .hbz-empty.is-on {
  display: block;
}

.hbz-js .hbz-card.hbz-pre {
  opacity: 0;
  transform: translateY(14px);
}

.hbz-js .hbz-card.hbz-pre.is-in {
  opacity: 1;
  transform: none;
}

.hbz-js .hbz-card.hbz-pre.is-in:hover,
.hbz-js .hbz-card.hbz-pre.is-in:focus-within {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .hbz .hbz-card,
  .hbz .hbz-card::before,
  .hbz .hbz-go,
  .hbz .hbz-search input,
  .hbz .hbz-chip {
    transition: none;
  }
  .hbz .hbz-badge::before {
    animation: none;
  }
  .hbz .hbz-card:hover,
  .hbz .hbz-card:focus-within,
  .hbz .hbz-card:hover .hbz-go,
  .hbz .hbz-card:focus-within .hbz-go {
    transform: none;
  }
  .hbz-js .hbz-card.hbz-pre {
    opacity: 1;
    transform: none;
  }
}
/* <<< HTE zones-intervention */