/*
 * Harmony Sound — composants du theme.
 *
 * Ce qui est rendu par le THEME et non par Elementor : bandeau, en-tete,
 * navigation, pied de page, listes d'articles. Elementor gratuit ne sait pas
 * les editer ; ils se reglent dans Apparence > Personnaliser.
 *
 * Les couleurs viennent toutes de style.css (--hs-*), qui est lui-meme
 * alimente par le kit Elementor : une seule source de verite.
 */

/* ---- conteneurs ---------------------------------------------------------- */
.hs-large   { width: min(100% - 40px, var(--hs-wide)); margin-inline: auto; }
.hs-etroit  { width: min(100% - 40px, var(--hs-content)); margin-inline: auto; }
.hs-section { padding-block: clamp(40px, 7vw, 88px); }

/* ---- bandeau ------------------------------------------------------------- */
.hs-topbar {
  background: var(--hs-dark); color: #fff;
  font-size: 13px; letter-spacing: .02em;
}
.hs-topbar__message { margin: 0; padding: 9px 0; text-align: center; }

/* ---- en-tete ------------------------------------------------------------- */
.hs-header { background: var(--hs-surface); border-bottom: 1px solid var(--hs-line); }
.hs-header--colle { position: sticky; top: 0; z-index: 50; }

.hs-header__inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px; min-height: 72px;
}
.hs-header__marque img { max-height: 42px; width: auto; }
.hs-marque {
  font-family: var(--hs-font-head); font-size: 1.25rem; font-weight: 600;
  letter-spacing: -.02em; text-decoration: none;
}

.hs-nav__liste {
  display: flex; gap: 26px; margin: 0; padding: 0; list-style: none;
  justify-content: center;
}
.hs-nav__liste a { text-decoration: none; font-size: .96rem; }
.hs-nav__liste a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Sous-menus : reveles au survol ET au focus clavier. Sans :focus-within,
   un menu deroulant est inatteignable au clavier -- la revue Envato le
   verifie, et c'est de toute facon inacceptable. */
.hs-nav__liste li { position: relative; }
.hs-nav__liste .sub-menu {
  position: absolute; left: 0; top: 100%; min-width: 220px;
  display: none; margin: 0; padding: 10px; list-style: none;
  background: var(--hs-surface); border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-sm); box-shadow: var(--hs-shadow);
}
.hs-nav__liste li:hover > .sub-menu,
.hs-nav__liste li:focus-within > .sub-menu { display: block; }

.hs-header__actions { display: flex; align-items: center; gap: 14px; }
.hs-icone {
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
  font: inherit; font-size: .9rem; text-decoration: none; color: inherit;
}
.hs-icone:hover { text-decoration: underline; text-underline-offset: 4px; }
.hs-panier { position: relative; }
.hs-panier__compte {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 6px; padding: 0 6px;
  background: var(--hs-accent); color: var(--hs-accent-ink);
  border-radius: var(--hs-pill); font-size: 12px; font-variant-numeric: tabular-nums;
}

.hs-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hs-burger span[aria-hidden] {
  display: block; width: 22px; height: 2px; background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}
@media (max-width: 900px) {
  .hs-header__inner { grid-template-columns: auto 1fr; }
  .hs-nav { display: none; }
  .hs-burger { display: block; }
}

/* ---- titres et texte long ------------------------------------------------ */
.hs-titre-page { font-size: clamp(1.9rem, 4.6vw, 3rem); margin: 0 0 .4em; }
.hs-chapo { color: var(--hs-muted); max-width: 62ch; margin: 0 0 1.6em; }
.hs-prose { max-width: 70ch; }
.hs-prose > * + * { margin-top: 1.1em; }
.hs-prose img { border-radius: var(--hs-radius); }

/* ---- grilles et cartes --------------------------------------------------- */
.hs-grille { display: grid; gap: 28px; }
.hs-grille--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.hs-carte__image img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--hs-radius); margin-bottom: 14px;
}
.hs-carte__titre { font-size: 1.15rem; margin: 0 0 .4em; }
.hs-carte__titre a { text-decoration: none; }
.hs-carte__titre a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hs-carte__extrait { margin: 0; color: var(--hs-muted); font-size: .95rem; }

/* ---- boutons ------------------------------------------------------------- */
.hs-bouton {
  display: inline-block; text-decoration: none;
  background: var(--hs-text); color: var(--hs-bg);
  border-radius: var(--hs-pill); padding: 12px 26px; font-weight: 500;
  transition: transform .15s var(--hs-ease);
}
.hs-bouton:active { transform: scale(.97); }

/* ---- pied de page -------------------------------------------------------- */
.hs-footer { background: var(--hs-dark); color: #fff; margin-top: clamp(48px, 8vw, 96px); }
.hs-footer__inner {
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding-block: clamp(40px, 6vw, 72px);
}
.hs-footer .hs-marque { color: #fff; }
.hs-footer__baseline { margin: 10px 0 0; color: #9a9aa2; max-width: 34ch; }
.hs-footer__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hs-footer__liste a { color: #d7d7db; text-decoration: none; font-size: .95rem; }
.hs-footer__liste a:hover { color: #fff; text-decoration: underline; }
.hs-footer__mention {
  margin: 0; padding: 18px 0 26px; text-align: center;
  color: #6b6b73; font-size: 13px; border-top: 1px solid rgba(255,255,255,.08);
}

/* ---- pagination ---------------------------------------------------------- */
.pagination { margin-top: 44px; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--hs-line); border-radius: var(--hs-pill); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--hs-text); color: var(--hs-bg); border-color: transparent; }

.hs-vide { color: var(--hs-muted); }