/* Hubs du site (vidéos, guide, outils, glossaire, métiers) sur le design system LE LABO IA 8.2.0,
   même langage que le radar /modeles/ : angles droits, étiquettes à fond plein, 1 accent Boska or
   par titre, en-tête en 2 colonnes avec une donnée vivante, chiffres générés en grand, sections
   qui alternent encre, panneau, champ violet, ivoire et aplat or. Chaque hub garde ses composants
   propres (cartes, filtres, recherche) dans sa page ; ce fichier porte ce qu'ils partagent. */

.hb-main {
  --hb-ink: #030712;
  --hb-charcoal: #0e1630;
  --hb-violet-base: #111634;
  --hb-violet-wash: color-mix(in srgb, var(--primary) 18%, transparent);
  --hb-paper: #f4efe5;
  --hb-paper-text: #0c1429;
  --hb-paper-muted: #3f4250;
  --hb-primary-deep: #4a56d4;
  --hb-ember: #c96a3d;
  --hb-on-fill: #030712;
  --hb-hair: color-mix(in srgb, var(--primary) 14%, transparent);
  --hb-hair-strong: color-mix(in srgb, var(--primary) 32%, transparent);
  --hb-lift: 0 24px 64px rgba(0, 0, 0, 0.5);
  --hb-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
  background: var(--hb-ink);
}

.hb-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.hb-shell > *,
.hb-hero__grid > * {
  min-width: 0;
}

.hb-main a:focus-visible,
.hb-main button:focus-visible,
.hb-main summary:focus-visible,
.hb-main input:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 3px;
}

.hb-label {
  margin: 0;
  color: var(--primary-soft);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ étiquettes pleines */

.hb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-tag {
  display: inline-block;
  padding: 4px 9px;
  background: var(--primary);
  color: var(--hb-on-fill);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hb-tag--gold { background: var(--gold); }
.hb-tag--success { background: var(--success); }
.hb-tag--warning { background: var(--warning); }
.hb-tag--ember { background: var(--hb-ember); }
.hb-tag--plain { background: rgba(244, 245, 251, 0.1); color: var(--text-primary); }

/* ------------------------------------------------------------------ en-tête */

.hb-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 124px 0 clamp(52px, 6vw, 80px);
  background:
    radial-gradient(ellipse 55% 65% at 88% 22%, var(--hb-violet-wash), transparent 70%),
    radial-gradient(ellipse 45% 50% at 0% 0%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%),
    var(--hb-ink);
}

.hb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px 56px;
}

.hb-hero__copy {
  display: grid;
  gap: 20px;
}

.hb-hero__copy > * {
  margin: 0;
}

.hb-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-tertiary);
  font-size: 0.86rem;
}

.hb-crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--text-muted);
}

.hb-crumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.hb-crumb a:hover,
.hb-crumb a:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le H1 garde le balisage de chaque hub : la partie Cabinet puis l'accent Boska or. */
.hb-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
}

.hb-title .hb-accent,
.hb-title [data-font="boska"],
.hb-title [data-font-family="boska"] {
  display: inline;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.04em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hb-lead {
  max-width: 60ch;
  color: var(--body-text);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Chiffres générés en grand : le nombre au-dessus, son libellé dessous. */
.hb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--hb-hair-strong);
  background: var(--hb-hair-strong);
}

.hb-stats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hb-stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(3, 7, 18, 0.82);
}

.hb-stats dt {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hb-stats dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: clamp(1.4rem, 1rem + 1.1vw, 1.95rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hb-stats dd.is-date {
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ carte vivante de l'en-tête */

.hb-spot {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--hb-hair-strong);
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, var(--hb-violet-wash), transparent 70%),
    rgba(17, 22, 52, 0.94);
  box-shadow: var(--hb-lift);
}

.hb-spot > * {
  margin: 0;
}

.hb-spot .hb-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hb-live {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--success);
}

.hb-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--success);
  border-radius: 50%;
  animation: hb-live 2s ease-out infinite;
}

@keyframes hb-live {
  from { opacity: 0.9; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.8); }
}

.hb-spot__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hb-hair);
  background: #0b1026;
}

.hb-spot__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--hb-ease);
}

.hb-spot__media:hover img,
.hb-spot__media:focus-visible img {
  transform: scale(1.04);
}

.hb-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  background: var(--gold);
  color: var(--hb-on-fill);
  transform: translate(-50%, -50%);
}

.hb-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 9px solid transparent;
  border-left: 14px solid currentColor;
}

.hb-spot__title {
  color: var(--text-primary);
  font-size: 1.24rem;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.hb-spot__title a {
  color: inherit;
  text-decoration: none;
}

.hb-spot__title a:hover {
  color: var(--primary-soft);
}

.hb-spot__text {
  color: var(--body-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.hb-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--primary-soft);
  font-weight: 700;
  text-decoration: none;
}

.hb-go::after {
  content: "→";
  transition: transform 200ms var(--hb-ease);
}

.hb-go:hover::after,
.hb-go:focus-visible::after {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ surfaces de section */

.hb-band {
  padding-block: clamp(64px, 8vw, 96px);
}

.hb-band--slim {
  padding-block: 22px;
}

.hb-band--ink { background: var(--hb-ink); }

.hb-band--charcoal {
  border-block: 1px solid var(--hb-hair);
  background: var(--hb-charcoal);
}

.hb-band--violet {
  border-block: 1px solid var(--hb-hair);
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, var(--hb-violet-wash), transparent 70%),
    var(--hb-violet-base);
}

.hb-band--paper {
  --text-primary: var(--hb-paper-text);
  --text-secondary: var(--hb-paper-muted);
  --text-tertiary: var(--hb-paper-muted);
  --body-text: var(--hb-paper-muted);
  --hb-hair: rgba(12, 20, 41, 0.14);
  --hb-hair-strong: rgba(12, 20, 41, 0.24);
  background: var(--hb-paper);
  color: var(--hb-paper-text);
}

.hb-band--paper .hb-label {
  color: var(--hb-primary-deep);
}

.hb-head {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 28px;
}

.hb-head > * {
  margin: 0;
}

.hb-head h2,
.hb-cta h2 {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hb-head p {
  color: var(--body-text);
  line-height: 1.65;
}

.hb-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: none;
}

.hb-head--split > div {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.hb-head--split > div > * {
  margin: 0;
}

/* Logo d'éditeur ou de famille, en masque : il prend la couleur du texte de sa surface. */
.hb-mark {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--hb-hair-strong);
  background: rgba(3, 7, 18, 0.35);
  color: var(--text-primary);
  font-weight: 800;
}

.hb-logo {
  display: block;
  width: 24px;
  height: 24px;
  background: var(--text-primary);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.hb-band--paper .hb-mark {
  background: rgba(12, 20, 41, 0.04);
}

/* ------------------------------------------------------------------ tuiles de rubrique */

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

.hb-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
  height: 100%;
  padding: 18px 18px 20px;
  border: 1px solid var(--hb-hair-strong);
  background: rgba(3, 7, 18, 0.5);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms var(--hb-ease), transform 200ms var(--hb-ease), background 200ms var(--hb-ease);
}

.hb-tile b {
  color: var(--text-primary);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
}

.hb-tile p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.hb-tile__count {
  display: grid;
  justify-items: end;
  color: var(--text-primary);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hb-tile__count small {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Autant de colonnes que de tuiles tant qu'elles tiennent : 5 sujets sur une ligne. */
.hb-tiles--fit {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr));
}

/* Tuile avec logo : le logo à gauche, le nom et sa ligne de détail à droite. */
.hb-tile--mark {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 4px 14px;
}

.hb-tile--mark .hb-mark {
  grid-row: span 2;
}

.hb-tile--mark p {
  grid-column: 2;
  font-size: 0.84rem;
}

a.hb-tile:hover,
a.hb-tile:focus-visible {
  border-color: var(--primary);
  background: rgba(3, 7, 18, 0.75);
  transform: translateY(-2px);
}

a.hb-tile:hover b {
  color: var(--primary-soft);
}

.hb-band--paper .hb-tile {
  background: #fbf8f1;
}

.hb-band--paper a.hb-tile:hover,
.hb-band--paper a.hb-tile:focus-visible {
  border-color: var(--hb-primary-deep);
  background: #ffffff;
}

.hb-band--paper a.hb-tile:hover b {
  color: var(--hb-primary-deep);
}

/* ------------------------------------------------------------------ CTA sur aplat or */

.hb-cta {
  --text-primary: #1a1408;
  --text-secondary: rgba(26, 20, 8, 0.84);
  --body-text: rgba(26, 20, 8, 0.84);
  padding-block: clamp(56px, 7vw, 88px);
  background: var(--gold);
  color: #1a1408;
}

.hb-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 56px;
}

/* Variante centrée : elle rompt l'axe gauche de la page, une fois, sur l'appel final. */
.hb-cta__inner--center {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.hb-cta__inner--center h2 {
  margin: 0;
}

.hb-cta__inner--center .hb-cta__actions {
  justify-content: center;
  margin-top: 16px;
}

.hb-cta h2 {
  margin: 0 0 12px;
  color: #1a1408;
}

.hb-cta p {
  max-width: 62ch;
  margin: 0;
  color: rgba(26, 20, 8, 0.84);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hb-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hb-cta .btn-gold,
.hb-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: #030712;
  color: var(--gold);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms var(--hb-ease), color 200ms var(--hb-ease), box-shadow 200ms var(--hb-ease);
}

.hb-cta .btn-gold:hover,
.hb-cta__button:hover {
  background: #0c1429;
  color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(3, 7, 18, 0.18);
}

.hb-cta__button--ghost {
  border: 2px solid #030712;
  background: transparent;
  color: #1a1408;
}

.hb-cta__button--ghost:hover {
  background: rgba(3, 7, 18, 0.08);
  color: #1a1408;
}

.hb-cta a:focus-visible,
.hb-cta button:focus-visible {
  outline: 3px solid #030712;
  outline-offset: 4px;
}

/* ------------------------------------------------------------------ motifs vivants de l'en-tête */

.hb-motif {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Vidéos : piste d'égaliseur et tête de lecture qui balaie la timeline. */
.hb-motif--wave {
  right: max(-40px, calc(50% - 760px));
  bottom: 36px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  width: 560px;
  height: 180px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}

.hb-motif--wave i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(to top, color-mix(in srgb, var(--primary) 46%, transparent), color-mix(in srgb, var(--primary) 8%, transparent));
  transform-origin: bottom;
  animation: hb-bar 2.8s ease-in-out infinite;
  animation-delay: var(--d);
}

.hb-motif--wave::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -6px;
  left: 0;
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold-glow);
  animation: hb-playhead 9s linear infinite;
}

@keyframes hb-bar {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

@keyframes hb-playhead {
  from { left: 6%; }
  to { left: 94%; }
}

/* Guide : table des matières dont un repère or descend, ligne après ligne. */
.hb-motif--index {
  top: 96px;
  right: max(-60px, calc(50% - 780px));
  display: grid;
  gap: 18px;
  width: 520px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, #000 45%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, #000 45%, transparent 75%);
}

.hb-motif--index i {
  display: block;
  height: 2px;
  width: var(--w);
  margin-left: var(--x, 0);
  background: color-mix(in srgb, var(--primary) 26%, transparent);
}

.hb-motif--index::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  width: 10px;
  height: 10px;
  background: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
  animation: hb-index 8s steps(1, end) infinite;
}

@keyframes hb-index {
  0% { top: -4px; }
  12.5% { top: 16px; }
  25% { top: 36px; }
  37.5% { top: 56px; }
  50% { top: 76px; }
  62.5% { top: 96px; }
  75% { top: 116px; }
  87.5% { top: 136px; }
}

/* Outils : établi en grille, une case s'allume à tour de rôle. */
.hb-motif--rack {
  top: 84px;
  right: max(-80px, calc(50% - 800px));
  display: grid;
  grid-template-columns: repeat(8, 54px);
  gap: 8px;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 55% 45%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 70% at 55% 45%, #000 40%, transparent 75%);
}

.hb-motif--rack i {
  display: block;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  animation: hb-cell 6.4s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes hb-cell {
  0%, 82%, 100% { background: transparent; border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
  88% { background: color-mix(in srgb, var(--primary) 30%, transparent); border-color: var(--primary-soft); }
  94% { background: color-mix(in srgb, var(--gold) 28%, transparent); border-color: var(--gold); }
}

/* Glossaire : constellation de notions reliées, chaque nœud s'allume à son tour. */
.hb-motif--nodes {
  top: 70px;
  right: max(-60px, calc(50% - 780px));
  width: 560px;
  height: 420px;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 55% 50%, #000 45%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 65% at 55% 50%, #000 45%, transparent 75%);
}

.hb-motif--nodes svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hb-motif--nodes line {
  stroke: color-mix(in srgb, var(--primary) 30%, transparent);
  stroke-width: 1;
}

.hb-motif--nodes circle {
  fill: var(--primary-soft);
  animation: hb-node 4.8s ease-in-out infinite;
  animation-delay: var(--d);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes hb-node {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.35); fill: var(--gold); }
}

/* Métiers : carte de points, des secteurs s'allument comme sur un radar. */
.hb-motif--map {
  top: 70px;
  right: max(-80px, calc(50% - 800px));
  width: 600px;
  height: 440px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--primary) 32%, transparent) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 55% 50%, #000 40%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 60% at 55% 50%, #000 40%, transparent 72%);
}

.hb-motif--map i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
  animation: hb-blip 4.2s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes hb-blip {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  45% { opacity: 1; transform: scale(1.3); }
}

/* ------------------------------------------------------------------ responsive et mouvement */

@media (max-width: 980px) {
  .hb-hero__grid,
  .hb-cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hb-stats--3 div:last-child {
    grid-column: 1 / -1;
  }

  .hb-motif {
    opacity: 0.55;
  }
}

@media (max-width: 640px) {
  .hb-hero {
    padding-top: 100px;
  }

  .hb-shell {
    width: calc(100% - 32px);
  }

  .hb-title {
    font-size: clamp(2.3rem, 1.4rem + 4.6vw, 3rem);
  }

  .hb-spot {
    padding: 18px;
  }

  .hb-cta .btn-gold,
  .hb-cta__button {
    width: 100%;
  }

  .hb-motif--wave {
    width: 360px;
    height: 120px;
  }

  /* Sur téléphone, les motifs du haut passeraient derrière le titre : seul celui du bas reste. */
  .hb-motif:not(.hb-motif--wave) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-live::after,
  .hb-motif i,
  .hb-motif circle,
  .hb-motif::after {
    animation: none;
  }

  .hb-main *,
  .hb-main *::after {
    transition: none !important;
  }

  a.hb-tile:hover,
  a.hb-tile:focus-visible,
  .hb-spot__media:hover img,
  .hb-spot__media:focus-visible img {
    transform: none;
  }
}