/* HUB MÉTIERS */
.hero.hero-hub .hero-grid {
  grid-template-columns:minmax(0,1fr);
  max-width:980px
}
.hero.hero-hub h1 {
  max-width:900px
}
.hub-intro {
  max-width:820px
}
.metier-search-wrap {
  margin-top:34px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 48px rgba(15,23,42,.08)
}
.metier-search-label {
  display:block;
  margin-bottom:10px;
  color:var(--navy);
  font-weight:900;
  font-size:.98rem
}
.metier-search-box {
  position:relative
}
.metier-search-box::before {
  content:"⌕";
  position:absolute;
  left:17px;
  top:50%;
  transform:translateY(-53%);
  color:#64748b;
  font-size:1.45rem;
  line-height:1;
  pointer-events:none
}
.metier-search {
  width:100%;
  min-height:56px;
  padding:14px 18px 14px 50px;
  border-radius:18px;
  border:1px solid rgba(37,99,235,.16);
  outline:none;
  color:var(--navy);
  background:#fff;
  font:inherit;
  font-size:1rem
}
.metier-search::placeholder {
  color:#94a3b8
}
.metier-search:focus {
  border-color:rgba(37,99,235,.42);
  box-shadow:0 0 0 4px rgba(37,99,235,.08)
}
.metier-search-help {
  margin:10px 2px 0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5
}
.metier-browser {
  margin-top:22px
}
.metier-browser.is-idle {
  display:none
}
.metier-browser-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px
}
.metier-browser-head strong {
  color:var(--navy);
  font-size:1rem
}
.metier-count {
  color:var(--muted);
  font-size:.9rem;
  font-weight:750
}
.metier-tabs {
  display:flex;
  flex-wrap:nowrap;
  gap:9px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 2px 8px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none
}
.metier-tabs::-webkit-scrollbar {
  display:none
}
.metier-tab {
  flex:0 0 auto;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.14);
  background:rgba(255,255,255,.84);
  color:#1e3a8a;
  font-weight:900;
  font-size:.91rem;
  white-space:nowrap;
  scroll-snap-align:start;
  transition:transform .16s ease,background .16s ease,border-color .16s ease
}
.metier-tab:hover {
  transform:translateY(-1px);
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.24)
}
.metier-tab[hidden] {
  display:none!important
}
.metier-empty {
  display:none;
  margin-top:12px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(249,115,22,.08);
  border:1px solid rgba(249,115,22,.16);
  color:#9a3412;
  line-height:1.55;
  font-weight:760
}
.metier-empty.is-visible {
  display:block
}
.metier-category-list {
  display:grid;
  gap:12px;
  width:100%
}
.metier-category {
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(37,99,235,.13);
  background:rgba(255,255,255,.84);
  box-shadow:0 12px 34px rgba(15,23,42,.055)
}
.metier-category-toggle {
  width:100%;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  border:0;
  background:transparent;
  color:var(--navy);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease
}
.metier-category-toggle:hover {
  background:rgba(37,99,235,.055)
}
.metier-category-toggle:focus-visible {
  outline:3px solid rgba(37,99,235,.22);
  outline-offset:-3px
}
.metier-category-label {
  min-width:0;
  font-size:1rem;
  font-weight:900;
  line-height:1.35
}
.metier-category-meta {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px
}
.metier-category-count {
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
  white-space:nowrap
}
.metier-category-chevron {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#1d4ed8;
  transition:transform .18s ease,background .18s ease
}
.metier-category-chevron::before {
  content:"⌄";
  display:block;
  margin-top:-4px;
  font-size:1.2rem;
  font-weight:900;
  line-height:1
}
.metier-category.is-open .metier-category-toggle {
  background:rgba(37,99,235,.045)
}
.metier-category.is-open .metier-category-chevron {
  transform:rotate(180deg);
  background:rgba(37,99,235,.13)
}
.metier-category-panel {
  padding:0 18px 17px;
  border-top:1px solid rgba(37,99,235,.09)
}
.metier-category-panel[hidden] {
  display:none
}
.metier-category-tabs {
  flex-wrap:wrap;
  overflow:visible;
  padding:15px 0 0;
  scroll-snap-type:none
}
.hub-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.hub-card {
  padding:24px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.84);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 44px rgba(15,23,42,.07)
}
.hub-card-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:15px;
  background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(6,182,212,.15));
  font-size:1.25rem
}
.hub-card h3 {
  margin:0;
  color:var(--navy);
  font-size:1.18rem;
  letter-spacing:-.03em
}
.hub-card p {
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.65
}
.fit-note {
  padding:28px;
  border-radius:28px;
  background:radial-gradient(circle at top right,rgba(6,182,212,.12),transparent 32%),rgba(255,255,255,.86);
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 20px 54px rgba(15,23,42,.07)
}
.fit-note h3 {
  margin:0;
  color:var(--navy);
  font-size:1.4rem;
  letter-spacing:-.04em
}
.fit-note p {
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.7
}
@media(max-width:900px) {
  .hub-grid {
    grid-template-columns:1fr
  }

}
@media(max-width:560px) {
  .metier-search-wrap {
    padding:14px;
    border-radius:20px
  }
  .metier-browser-head {
    align-items:flex-start;
    flex-direction:column;
    gap:4px
  }
  .metier-category-toggle {
    gap:10px;
    padding:14px 15px
  }
  .metier-category-meta {
    gap:7px
  }
  .metier-category-count {
    font-size:.84rem
  }
  .metier-category-panel {
    padding:0 15px 15px
  }
  .fit-note {
    padding:22px;
    border-radius:22px
  }

}