@import url("https://use.typekit.net/xqh7zqb.css");
:root {
  --ink: #0d2026;
  --ink-2: #17343c;
  --muted: #66777c;
  --paper: #ffffff;
  --soft: #eff7f8;
  --soft-2: #dceff3;
  --line: #d7e3e6;
  --brand: #389cb1;
  --brand-dark: #24788a;
  --brand-deep: #123e48;
  --hot: #ff0a78;
  --sun: #f4cf58;
  --max: 1260px;
  --wide: 1380px;
  --article: 980px;
  --article-body: 1180px;
  --media: 1380px;
  --sans: "urca","DM Sans", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --lbvg: "apotek", sans-serif;
  --shadow-sm: 0 8px 28px rgba(13, 32, 38, .08);
  --shadow-lg: 0 24px 70px rgba(13, 32, 38, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 118px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open, body.search-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-dark); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.shell-wide { width: min(calc(100% - 24px), var(--wide)); margin-inline: auto; }
.shell-article { width: min(calc(100% - 40px), var(--article)); margin-inline: auto; }
.shell-article-body { width: min(calc(100% - 40px), var(--article-body)); margin-inline: auto; }
.shell-media { width: min(calc(100% - 24px), var(--media)); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { transform: translateY(0); }

/* Mouvement éditorial */
@keyframes header-arrival {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,10,120,.14); }
  50% { box-shadow: 0 0 0 8px rgba(255,10,120,0); }
}
.site-header { animation: header-arrival .55s cubic-bezier(.22,.61,.36,1) both; }
.header-tip span { animation: soft-pulse 2.2s ease-in-out infinite; }
.reveal-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .62s ease var(--reveal-delay, 0ms), transform .72s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-item.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.button span, .section-link span, .video-text-link span, .topic-highlight-arrow { transition: transform .22s ease; }
.button:hover span, .section-link:hover span, .video-text-link:hover span { transform: translateX(4px); }
.topic-highlight-box:hover .topic-highlight-arrow { transform: translate(3px,-3px); }
.story-card-media img, .reader-card-media img, .video-card-media img, .startracks-main-media img { will-change: transform; }

/* En-tête sticky, logo et navigation */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: var(--brand);
  border-top: 4px solid var(--hot);
  box-shadow: 0 1px 0 rgba(13,32,38,.18), 0 7px 26px rgba(13,32,38,.10);
  backdrop-filter: blur(14px);
}
.header-utility {
  position: relative;
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 24px;
  color: #fff;
  transition: min-height .28s ease;
}
.header-utility::before {
  content: "";
  position: absolute;
  inset: 10px 28% 10px;
  border: 1px solid rgba(255,255,255,.14);
  transform: skewX(-12deg);
  pointer-events: none;
}
.header-left, .header-actions { display: flex; align-items: center; gap: 11px; }
.header-actions { justify-content: flex-end; }
.header-edition {
  color: rgba(255,255,255,.78);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
.brand { justify-self: center; display: inline-flex; align-items: center; justify-content: center; }
.brand img {
  width: min(39vw, 440px);
  max-height: 92px;
  object-fit: contain;
  transition: width .28s ease, max-height .28s ease;
}
.header-newsletter, .header-tip {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.header-newsletter { border: 1px solid rgba(255,255,255,.8); color: #fff; }
.header-newsletter:hover { background: #fff; color: var(--brand-dark); transform: translateY(-1px); }
.header-tip { gap: 7px; background: var(--ink); color: #fff; }
.header-tip span { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 4px rgba(255,10,120,.14); }
.header-tip:hover { background: var(--hot); color: #fff; transform: translateY(-1px); }
.header-tip:hover span { background: #fff; }
.icon-button {
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.icon-button:hover { background: rgba(255,255,255,.16); color: #fff; }
.menu-toggle { display: block; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 5px 0; background: currentColor; }
.search-toggle { position: relative; }
.search-icon { display: block; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }
.search-icon::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 9px;
  width: 8px;
  height: 2px;
  transform: rotate(45deg);
  background: currentColor;
}
.main-nav { border-top: 1px solid rgba(255,255,255,.2); border-bottom: 3px solid var(--hot); background: #fff; }
.nav-inner {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(13px, 1.7vw, 27px);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a {
  flex: 0 0 auto;
  padding: 13px 0 9px;
  border-bottom: 3px solid transparent;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.nav-inner a:hover, .nav-inner a.on { border-color: var(--hot); color: var(--ink); }
.nav-inner .nav-home { color: var(--hot); }
.site-header.is-compact { box-shadow: 0 10px 28px rgba(13,32,38,.16); }
.site-header.is-compact .header-utility { min-height: 64px; }
.site-header.is-compact .brand img { width: min(30vw, 250px); max-height: 58px; }
.site-header.is-compact .header-edition { opacity: .72; }
.site-header.is-compact .header-tip, .site-header.is-compact .header-newsletter { min-height: 33px; padding-block: 6px; }

/* Recherche enrichie */
.search-panel {
  position: absolute;
  z-index: 12;
  inset: 100% 0 auto;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.search-panel-accent { display: grid; grid-template-columns: 72% 28%; height: 6px; }
.search-panel-accent span:first-child { background: var(--brand); }
.search-panel-accent span:last-child { background: var(--hot); }
.search-panel-inner {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 64px;
  align-items: center;
  padding-block: 38px 42px;
}
.search-panel-kicker { color: var(--hot); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.search-panel-copy h2 { margin: 5px 0 8px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -.045em; }
.search-panel-copy p { max-width: 450px; margin: 0; color: var(--muted); }
.search-panel-tool { position: relative; }
.search-panel-close {
  position: absolute;
  right: 0;
  top: -32px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.8rem;
  cursor: pointer;
}
.search-form-shell { position: relative; padding-left: 43px; border-bottom: 3px solid var(--ink); }
.search-form-icon {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-58%);
  border: 2px solid var(--brand-dark);
  border-radius: 50%;
}
.search-form-icon::after { content: ""; position: absolute; width: 8px; height: 2px; right: -6px; bottom: -3px; transform: rotate(45deg); background: var(--brand-dark); }
.search-form-shell form { display: flex; width: 100%; margin: 0; }
.search-form-shell .editer-groupe, .search-form-shell .editer { display: contents; }
.search-form-shell label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-form-shell input[type="search"], .search-form-shell input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 8px 14px 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.08rem;
}
.search-form-shell input[type="submit"] { min-width: 112px; border: 0; background: var(--ink); color: #fff; font-weight: 800; cursor: pointer; }
.search-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.search-shortcuts strong { width: 100%; margin-bottom: 2px; color: var(--muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.search-shortcuts a { padding: 6px 10px; border: 1px solid var(--line); font-size: .72rem; font-weight: 700; }
.search-shortcuts a:hover, .search-shortcuts-video { border-color: var(--brand) !important; color: var(--brand-dark); }
.search-overlay, .menu-overlay { position: fixed; z-index: 89; inset: 0; background: rgba(8, 28, 34, .6); backdrop-filter: blur(3px); }

/* Menu latéral */
.site-drawer {
  position: fixed;
  z-index: 120;
  inset: 0 auto 0 0;
  width: min(430px, 92vw);
  padding: 26px 30px 34px;
  overflow-y: auto;
  transform: translateX(-105%);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transition: transform .3s ease;
}
.site-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 4px solid var(--brand); }
.drawer-kicker { display: inline-flex; width: 190px; padding: 8px 10px; background: var(--brand); }
.drawer-kicker img { width: 100%; height: auto; }
.drawer-close { width: 38px; height: 38px; border: 0; background: var(--soft); font-size: 1.65rem; cursor: pointer; }
.drawer-search { padding: 22px 0; border-bottom: 1px solid var(--line); }
.drawer-search-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-search-form form { display: flex; }
.drawer-search-form input[type="search"], .drawer-search-form input[type="text"] { width: 100%; min-width: 0; height: 45px; padding: 10px 12px; border: 1px solid var(--line); }
.drawer-search-form input[type="submit"] { width: 90px; border: 0; background: var(--ink); color: #fff; font-weight: 800; }
.drawer-nav { display: grid; padding: 10px 0; }
.drawer-nav a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 1.06rem; font-weight: 800; }
.drawer-nav a span { color: var(--brand); }
.drawer-service-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.drawer-service-links a { padding: 15px; background: var(--soft); border-top: 4px solid var(--brand); }
.drawer-service-links .drawer-tip-link { grid-column: 1 / -1; border-top-color: var(--hot); background: #fff0f6; }
.drawer-service-links strong, .drawer-service-links span { display: block; }
.drawer-service-links strong { color: var(--brand-dark); }
.drawer-service-links span { margin-top: 4px; color: var(--muted); font-size: .72rem; }

/* En ce moment */
.trend-bar { color: #fff; background: var(--brand-deep); }
.trend-inner { min-height: 43px; display: flex; align-items: center; gap: 20px; overflow: hidden; }
.trend-inner > strong { flex: none; color: var(--sun); font-size: .69rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.trend-links { display: flex; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.trend-links::-webkit-scrollbar { display: none; }
.trend-links a { color: #fff; font-size: .79rem; font-weight: 600; }
.trend-links a:hover { color: var(--sun); }
.trend-links a + a::before { content: "•"; display: inline-block; margin: 0 12px; color: rgba(255,255,255,.38); }

/* Éléments éditoriaux */
.eyebrow, .section-kicker { color: var(--brand-dark); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.meta, .hero-meta { margin: 9px 0 0; color: var(--muted); font-size: .71rem; }
.section { padding-block: clamp(38px, 4.4vw, 58px); }
.section-heading { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding-top: 15px; }
.section-heading::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--brand) 0 79%, var(--hot) 79%); }
.section-heading h2 { display: inline; margin: 3px 0 0; font-family: var(--sans); font-size: clamp(1.8rem, 2.8vw, 2.65rem); font-weight: 900; line-height: 1.04; letter-spacing: -.05em; box-shadow: inset 0 -.20em 0 rgba(56,156,177,.58); }
.section-heading-main { min-width: 0; }
.section-badge { display: inline-block; padding: 4px 8px 3px; background: var(--hot); color: #fff; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.section-heading-note { max-width: 420px; margin: 0 0 4px; color: var(--muted); font-size: .81rem; text-align: right; }
.section-link { flex: none; padding-bottom: 3px; border-bottom: 2px solid var(--brand); font-size: .71rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.section-tinted { background: var(--soft); }
.button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 0; font-size: .75rem; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; }
.button-outline { border: 1px solid currentColor; background: transparent; }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: var(--brand); color: #fff; }

/* Cadre photographique LBVGroove : filet noir et passe-partout blanc de 3 px */
.hero-media,
.hot-top-media,
.story-card-media,
.reader-card-media,
.startracks-main-media,
.startracks-thumb,
.rubrique-lead-media,
.aside-reco-media,
.video-card-media,
.video-queue-media {
  padding: 3px;
  border: 1px solid #111;
  background: #fff;
}
.hero-media img,
.hot-top-media img,
.story-card-media img,
.reader-card-media img,
.startracks-main-media img,
.startracks-thumb img,
.rubrique-lead-media img,
.aside-reco-media img,
.video-card-media img,
.video-queue-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Polices éditoriales validées en v15 */
.hero-copy h1,
.reader-card h3,
.startracks-copy h3,
.story-card--feature h3,
.article-header h1,
.article-text blockquote,
.section-masthead h1,
.rubrique-lead h2,
.search-page-title h1,
.contact-hero h1,
.newsletter-page-copy h1,
.video-lead-copy h2,
.info-masthead h1 {
  font-family: var(--serif);
  font-weight: 800;
}
.story-card--side h3,
.story-card--horizontal h3,
.story-card--compact h3,
.story-card--archive h3,
.video-card h3,
.video-queue-card h3,
.most-read-list h3,
.aside-reco-card h3 { font-family: var(--sans); }

/* Accueil à double rythme */
.home-layout {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-inline: auto;
  padding-top: 22px;
}
.home-main { min-width: 0; }
.home-main > .shell { width: 100%; }
.page-home .home-main > .section,
.page-home .home-main > .startracks-section,
.page-home .home-main > .topic-section,
.page-home .home-main > .newsletter-section { margin-top: 18px; }
.home-hot {
  position: sticky;
  top: 122px;
  max-height: calc(100vh - 138px);
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  border-top: 7px solid var(--hot);
  box-shadow: var(--shadow-sm);
}
.home-hot-head { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.16); }
.home-hot-label { color: var(--sun); font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.home-hot-head h2 { margin: 2px 0 7px; font-size: 1.55rem; font-weight: 900; line-height: 1.05; letter-spacing: -.045em; }
.home-hot-head p { margin: 0; color: rgba(255,255,255,.63); font-size: .75rem; }
.home-hot-scroll { max-height: calc(100vh - 270px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
.hot-podium { padding: 8px 14px 0; }
.hot-item--top { padding: 12px 0 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
.hot-top-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-2); }
.hot-top-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hot-item--top:hover img { transform: scale(1.035); }
.hot-top-rank { position: absolute; left: 4px; bottom: 4px; display: grid; width: 34px; height: 34px; place-items: center; background: var(--hot); color: #fff; font-size: 1.1rem; font-weight: 900; }
.hot-top-copy { padding-top: 9px; }
.hot-section { color: var(--brand); font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hot-item h3 { margin: 3px 0 0; font-size: .93rem; font-weight: 800; line-height: 1.2; letter-spacing: -.018em; }
.hot-item h3 a:hover { color: var(--sun); }
.hot-list { margin: 0; padding: 0 15px 14px; list-style: none; counter-reset: hot 3; }
.hot-item--compact { counter-increment: hot; display: grid; grid-template-columns: 29px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.hot-rank::before { content: counter(hot, decimal-leading-zero); color: var(--hot); font-size: .82rem; font-weight: 900; }
.hot-item--compact h3 { font-size: .83rem; }

/* Grande une */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(315px, .86fr);
  grid-template-areas: "heading heading" "main side";
  gap: 16px 22px;
  padding: 17px 15px 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #f7fcfd 100%);
  box-shadow: 0 12px 30px rgba(24,85,99,.07);
}
.hero-heading { grid-area: heading; display: flex; align-items: end; gap: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.hero-heading > div { flex: none; }
.hero-heading-kicker { display: block; color: var(--hot); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hero-heading h2 { display: inline; margin: 1px 0 0; font-size: 1.85rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; box-shadow: inset 0 -.2em 0 rgba(56,156,177,.36); }
.hero-heading-line { height: 5px; flex: 1; margin-bottom: 3px; background: linear-gradient(90deg, var(--brand) 0 82%, var(--hot) 82%); }
.hero-main { grid-area: main; min-width: 0; padding: 10px; border-top: 6px solid var(--brand); background: linear-gradient(180deg, var(--soft) 0%, #fff 100%); }
.hero-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); }
.hero-media img { object-position: center 20%; transition: transform .45s ease; }
.hero-main:hover .hero-media img { transform: scale(1.018); }
.hero-copy { padding-top: 12px; }
.hero-copy h1 { margin: 5px 0 8px; font-size: clamp(1.85rem, 2.75vw, 2.65rem); line-height: 1.02; letter-spacing: -.045em; }
.hero-deck { max-width: 780px; margin: 0; color: #4e6166; font-size: .95rem; }
.hero-side { grid-area: side; min-width: 0; padding: 10px; border: 1px solid #efd4df; border-top: 6px solid var(--hot); background: linear-gradient(180deg, #fff7fb 0%, #fff 100%); }
.hero-side-title { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-side-title span { color: var(--hot); font-weight: 900; }
.hero-side-title strong { font-weight: 900; }
.story-card { min-width: 0; }
.story-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); }
.story-card-media img { transition: transform .35s ease; }
.story-card:hover .story-card-media img { transform: scale(1.025); }
.story-card-body { min-width: 0; }
.story-card h3 { margin: 5px 0 0; font-size: 1.3rem; font-weight: 800; line-height: 1.17; letter-spacing: -.03em; }
.story-card-deck { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.story-card--side { display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.story-card--side .story-card-media { aspect-ratio: 4 / 3; }
.story-card--side .story-card-body { align-self: center; }
.story-card--side h3 { font-size: .87rem; line-height: 1.16; }
.story-card--side .story-card-deck, .story-card--side .meta { display: none; }

/* Sujets qui font réagir */
.section-talking { position: relative; padding: 20px 18px 24px; overflow: hidden; background: linear-gradient(145deg, #fff 0%, #f8fcfd 58%, #fff1f7 100%); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(13,32,38,.07); }
.section-heading--talking::before { background: linear-gradient(90deg, var(--hot) 0 25%, var(--ink) 25% 100%); }
.section-heading--talking h2 { box-shadow: inset 0 -.24em 0 rgba(255,10,120,.27); }
.readers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.reader-card { display: flex; min-width: 0; height: 100%; flex-direction: column; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(13,32,38,.05); transition: transform .25s ease, box-shadow .25s ease; }
.reader-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(13,32,38,.11); }
.reader-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft-2); }
.reader-card-media img { transition: transform .35s ease; }
.reader-card:hover img { transform: scale(1.025); }
.reader-card-body { display: grid; grid-template-columns: 36px 1fr; gap: 10px; flex: 1; padding: 13px 14px 16px; }
.reader-rank { color: var(--hot); font-size: 1.35rem; font-weight: 900; line-height: 1; }
.reader-card h3 { margin: 4px 0 0; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.15; letter-spacing: -.018em; }
.talking-flag { margin: 9px 0 0; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* En images */
.startracks-section { padding-block: 18px; }
.startracks-box { position: relative; padding: 18px 16px; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #fff 0%, #f7fcfd 100%); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(19,58,69,.055); }
.startracks-box::before { content: ""; position: absolute; width: 190px; height: 190px; right: -92px; top: -92px; border: 38px solid rgba(56,156,177,.12); border-radius: 50%; }
.startracks-top { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding-bottom: 11px; border-bottom: 4px solid var(--ink); }
.startracks-top h2 { margin: 0; font-family: var(--sans); font-size: clamp(2rem, 3.6vw, 3.45rem); font-weight: 900; line-height: .9; letter-spacing: -.065em; box-shadow: inset 0 -.2em 0 rgba(56,156,177,.55); }
.startracks-top p { margin: 7px 0 0; color: var(--muted); }
.startracks-stamp { display: grid; width: 76px; height: 76px; place-items: center; padding: 10px; border-radius: 50%; background: var(--hot); color: #fff; font-size: .58rem; font-weight: 900; line-height: 1.15; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(-7deg); }
.startracks-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(250px, .72fr); gap: 22px; align-items: center; }
.startracks-main-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-2); }
.startracks-main-media img { width: 100%; height: 100%; object-fit: cover; }
.startracks-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.startracks-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; opacity: .62; transition: opacity .2s ease, border-color .2s ease; }
.startracks-thumb:hover, .startracks-thumb.is-current { opacity: 1; border-color: var(--brand); }
.startracks-copy .eyebrow { color: var(--brand-dark); }
.startracks-copy h3 { margin: 6px 0 10px; font-size: clamp(1.45rem, 2.25vw, 2.15rem); line-height: 1.06; letter-spacing: -.04em; }
.startracks-copy p { color: var(--muted); }
.startracks-copy .button { margin-top: 8px; color: var(--ink); }
.startracks-copy .button:hover { color: #fff; background: var(--ink); }

/* Dernières nouvelles */
.latest-section { position: relative; padding: 20px 18px 22px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, #edf8fa 0%, #fff 13%, #fff 100%); box-shadow: 0 14px 34px rgba(13,32,38,.065); }
.latest-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: linear-gradient(90deg, var(--brand) 0 82%, var(--hot) 82%); }
.latest-layout { display: grid; grid-template-columns: minmax(0,1fr) 295px; gap: 28px; align-items: start; }
.latest-list { border-top: 1px solid var(--line); }
.story-card--horizontal { display: grid; grid-template-columns: 175px minmax(0,1fr); gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.story-card--horizontal .story-card-media { aspect-ratio: 16 / 9; }
.story-card--horizontal .story-card-body { align-self: center; }
.story-card--horizontal h3 { font-size: clamp(1.08rem, 1.45vw, 1.4rem); line-height: 1.13; }
.editor-picks { position: sticky; top: 148px; }
.picks-box { padding: 16px 17px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--brand); }
.picks-box .section-kicker { color: var(--hot); }
.picks-box h2 { margin: 4px 0 20px; font-size: 1.85rem; font-weight: 900; line-height: 1.05; letter-spacing: -.045em; }
.picks-box article { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 15px 0; border-top: 1px solid var(--line); }
.picks-box h3 { margin: 4px 0 0; font-size: .97rem; line-height: 1.25; }
.pick-number { color: var(--hot); font-size: 1.2rem; font-weight: 900; }
.pick-topic { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 800; }

/* Blocs de rubriques */
.topic-section {
  position: relative;
  padding: 25px 18px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #fff 0%, #f5fbfc 100%);
  box-shadow: 0 14px 34px rgba(13,32,38,.065);
  transition: transform .25s ease, box-shadow .25s ease;
}
.topic-section:hover { transform: translateY(-3px); box-shadow: 0 21px 42px rgba(13,32,38,.1); }
.topic-section::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--brand) 0 78%, var(--hot) 78%); }
.topic-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  right: 0;
  width: 135px;
  height: 66px;
  background: var(--brand) url('../images/logo-lbvgroove-white.svg') center / 112px auto no-repeat;
  transform: skewX(-9deg) translateX(7px);
  transform-origin: top right;
}
.topic-section:nth-of-type(even) { background: linear-gradient(145deg, #fff 0%, #fff5f9 100%); }
.topic-section:nth-of-type(even)::before { background: linear-gradient(90deg, var(--hot) 0 24%, var(--ink) 24%); }
.topic-section:nth-of-type(even)::after { background-color: var(--hot); }
.section-heading--graphic, .topic-grid { position: relative; z-index: 1; }
.section-heading--graphic { padding-right: 146px; }
.section-heading--graphic::before { display: none; }
.topic-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .78fr); gap: 22px; }
.topic-lead { min-width: 0; }
.story-card--feature .story-card-media { aspect-ratio: 16 / 9; }
.story-card--feature .story-card-body { margin-top: 10px; padding: 13px 14px 14px; border-left: 5px solid var(--brand); background: rgba(255,255,255,.92); }
.story-card--feature h3 { font-size: clamp(1.55rem, 2.35vw, 2.25rem); line-height: 1.07; letter-spacing: -.04em; }
.topic-side-stack { display: flex; flex-direction: column; min-width: 0; }
.story-card--compact { display: grid; grid-template-columns: 42% minmax(0,1fr); gap: 13px; margin-bottom: 10px; padding: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.88); }
.story-card--compact .story-card-media { aspect-ratio: 4 / 3; }
.story-card--compact h3 { font-size: 1.02rem; }
.story-card--compact .story-card-deck, .story-card--compact .meta { display: none; }
.topic-highlight-box { position: relative; margin-top: auto; padding: 17px 50px 17px 17px; color: var(--ink); background: linear-gradient(180deg, #fff0f6 0%, #fff 100%); border: 1px solid #f0ccdc; }
.topic-highlight-box .eyebrow { color: var(--hot); }
.topic-highlight-box h3 { margin: 5px 0 0; font-size: 1.2rem; line-height: 1.17; }
.topic-highlight-arrow { position: absolute; right: 16px; bottom: 16px; display: grid; width: 30px; height: 30px; place-items: center; background: var(--hot); color: #fff; }

/* Newsletter */
.newsletter-section { position: relative; scroll-margin-top: 140px; margin-top: 12px; padding: 58px 0; overflow: hidden; color: #fff; background: linear-gradient(110deg, var(--brand-dark), var(--brand) 70%); border-top: 7px solid var(--ink); border-bottom: 7px solid var(--hot); }
.newsletter-section::before { content: ""; position: absolute; right: -45px; top: 50%; width: min(48vw, 610px); aspect-ratio: 2048 / 500; transform: translateY(-50%) rotate(-4deg); background: url('../images/logo-lbvgroove-white.svg') center / contain no-repeat; opacity: .1; pointer-events: none; }
.newsletter-live { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; }
.newsletter-section .section-badge { color: var(--sun); }
.newsletter-section h2 { max-width: 670px; margin: 5px 0 8px; font-size: clamp(2rem, 3.7vw, 3.55rem); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.newsletter-section p { margin: 0; color: rgba(255,255,255,.78); }
.newsletter-live-form { padding: 23px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); }

/* Formulaires */
.formulaire_spip form { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .035em; }
.form-field label span { color: var(--muted); font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #b8c8cc;
  border-radius: 0;
  outline: 0;
  background: #fff;
  color: var(--ink);
}
.form-field select { min-height: 48px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--brand-dark); box-shadow: 0 0 0 3px rgba(56,156,177,.15); }
.field-help { margin-top: 6px; color: var(--muted); font-size: .69rem; }
.form-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.erreur_message { display: block; margin-top: 5px; color: #a31535; font-size: .72rem; font-weight: 700; }
.reponse_formulaire { padding: 12px 14px; font-weight: 700; }
.reponse_formulaire_ok { color: #0b6244; background: #e4f6ef; }
.reponse_formulaire_erreur { color: #8e1532; background: #fde9ee; }
.newsletter-fields { display: grid; gap: 14px; }
.newsletter-email-row { display: flex; }
.newsletter-email-row input { min-width: 0; border-right: 0; }
.newsletter-email-row .button { flex: none; }
.newsletter-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.newsletter-consent input { flex: none; margin-top: 3px; accent-color: var(--brand-dark); }

/* Rubriques, mots et archives */
.section-masthead { padding-block: 44px 36px; border-bottom: 1px solid var(--line); }
.breadcrumbs { margin: 0 0 14px; color: var(--muted); font-size: .72rem; }
.breadcrumbs span { margin: 0 7px; }
.section-masthead-title { display: grid; grid-template-columns: minmax(0,.85fr) minmax(300px,1.15fr); align-items: end; gap: 48px; }
.section-masthead h1 { margin: 4px 0 0; font-size: clamp(3.2rem, 7vw, 6.5rem); font-weight: 900; line-height: .9; letter-spacing: -.075em; }
.section-description { max-width: 720px; color: var(--muted); }
.section-description p:first-child { margin-top: 0; }
.section-description p:last-child { margin-bottom: 0; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }
.subnav a { padding: 7px 12px; border: 1px solid var(--line); font-size: .75rem; font-weight: 800; }
.subnav a:hover { border-color: var(--brand); background: var(--soft); }
.rubrique-lead { padding-block: 38px 58px; }
.rubrique-lead-card { display: grid; grid-template-columns: minmax(0,1.46fr) minmax(290px,.74fr); gap: 40px; align-items: center; }
.rubrique-lead-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); }
.rubrique-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.rubrique-lead h2 { margin: 6px 0 12px; font-size: clamp(2rem, 3.7vw, 3.45rem); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.rubrique-lead p:not(.meta) { color: var(--muted); }
.rubrique-archive { padding-top: 62px; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 24px; align-items: stretch; }
.archive-grid--four { grid-template-columns: repeat(4, 1fr); }
.story-card--archive { display: flex; height: 100%; flex-direction: column; }
.story-card--archive .story-card-body { flex: 1; padding-top: 12px; }
.story-card--archive h3 { font-size: 1.28rem; }
.pagination { display: flex; justify-content: center; margin-top: 44px; }
.pagination .pagination-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.pagination a, .pagination .on { display: grid; min-width: 41px; height: 41px; place-items: center; padding: 0 10px; border: 1px solid var(--line); }
.pagination .on { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Article */
.reading-progress { position: fixed; z-index: 180; top: 0; left: 0; width: 0; height: 4px; background: var(--hot); }
.article-header { padding-top: 50px; }
.article-header .breadcrumbs { margin-bottom: 24px; }
.article-kicker { margin: 14px 0 0; color: var(--muted); font-family: var(--serif); font-style: italic; }
.article-header h1 { max-width: 960px; margin: 10px 0 17px; font-size: clamp(2.8rem, 5.6vw, 3.25rem); font-weight: 900; line-height: .98; letter-spacing: -.07em; }
.article-deck { max-width: 850px; margin: 0; color: #45595f; font-family: var(--serif); font-size: clamp(1.12rem, 1.9vw, 1.45rem); line-height: 1.48; }
.article-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 25px; color: var(--muted); font-size: .73rem; }
.byline-author { color: var(--ink); font-weight: 800; }
.article-hero { margin-top: 35px; }
.article-hero img { width: 100%; max-height: 850px; padding: 3px; border: 1px solid #111; background: #fff; object-fit: cover; }
.article-hero figcaption { max-width: var(--max); margin: 8px auto 0; color: var(--muted); font-size: .71rem; }
.article-layout { display: grid; grid-template-columns: 58px minmax(0,700px) minmax(240px,1fr); gap: 42px; justify-content: center; padding-block: 52px 88px; }
.share-rail { position: sticky; top: 150px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.share-rail > span { margin-bottom: 3px; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.share-rail a, .share-rail button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-weight: 900; cursor: pointer; }
.share-rail a:hover, .share-rail button:hover { border-color: var(--brand); color: var(--brand-dark); }
.article-text { font-family: var(--serif); font-size: 1.08rem; line-height: 1.84; }
.article-text p { margin: 0 0 1.32em; }
.article-text h2, .article-text h3 { margin: 1.6em 0 .58em; font-family: var(--sans); line-height: 1.12; letter-spacing: -.035em; }
.article-text h2 { padding-top: .5em; border-top: 1px solid var(--line); font-size: 2.05rem; }
.article-text h3 { font-size: 1.55rem; }
.article-text blockquote { margin: 2em 0; padding: 12px 0 12px 25px; border-left: 6px solid var(--brand); color: var(--ink-2); font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.article-text a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.article-text img { margin: 30px auto; padding: 3px; border: 1px solid #111; background: #fff; }
.article-text table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-family: var(--sans); font-size: .88rem; }
.article-text th, .article-text td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.article-text th { background: var(--soft); }
.article-text tr:nth-child(even) td { background: #f8fbfb; }
.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 35px; padding-top: 22px; border-top: 1px solid var(--line); }
.article-tags span { margin-right: 5px; font-weight: 900; }
.article-tags a { padding: 6px 10px; background: var(--soft); font-family: var(--sans); font-size: .76rem; }
.article-aside { align-self: start; }
.article-aside-stack { position: sticky; top: 150px; display: grid; gap: 28px; }
.aside-box { padding-left: 22px; border-left: 1px solid var(--line); }
.aside-title { margin: 4px 0 16px; font-size: 1.35rem; line-height: 1.08; }
.most-read-list { margin: 0; padding: 0; list-style: none; }
.most-read-list li { display: grid; grid-template-columns: 31px 1fr; gap: 9px; padding: 12px 0; border-top: 1px solid var(--line); }
.most-read-rank { color: var(--hot); font-size: .91rem; font-weight: 900; }
.most-read-rubrique { color: var(--brand-dark); font-size: .59rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.most-read-list h3 { margin: 3px 0 0; font-size: .91rem; line-height: 1.24; }
.aside-reco-card { padding: 13px 0; border-top: 1px solid var(--line); }
.aside-reco-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 9px; }
.aside-reco-media img { width: 100%; height: 100%; object-fit: cover; }
.aside-reco-card h3 { margin: 4px 0 0; font-size: .92rem; line-height: 1.22; }
.related-section { width: 100%; }

/* Vidéos — LBV Play */
.page-videos main { padding-bottom: 70px; }
.video-masthead { position: relative; display: flex; min-height: 300px; align-items: end; justify-content: space-between; gap: 30px; margin-top: 24px; padding: 42px 42px 34px; overflow: hidden; color: #fff; background: var(--ink); }
.video-masthead::before { content: ""; position: absolute; inset: 0; background: url('../images/logo-lbvgroove-white.svg') 88% 18% / min(45vw, 520px) auto no-repeat, radial-gradient(circle at 80% 25%, rgba(56,156,177,.7), transparent 31%), linear-gradient(118deg, transparent 0 67%, rgba(255,10,120,.42) 67% 100%); opacity: .22; pointer-events: none; }
.video-masthead::after { content: ""; position: absolute; inset: auto 0 0; height: 8px; background: linear-gradient(90deg, var(--brand) 0 76%, var(--hot) 76%); }
.video-masthead-copy, .video-masthead-mark { position: relative; z-index: 1; }
.video-live-chip { display: inline-block; padding: 6px 10px; color: #fff; background: var(--hot); font-size: .67rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.video-masthead h1 { margin: 12px 0 5px; font-family: var(--serif); font-size: clamp(3rem, 7vw, 6rem); font-weight: 800; line-height: .8; letter-spacing: -.075em; }
.video-masthead h1 em { color: #79cbda; font-style: italic; }
.video-masthead p { max-width: 610px; margin: 20px 0 0; color: rgba(255,255,255,.68); }
.video-masthead-mark { display: grid; justify-items: end; align-content: end; color: #fff; transform: rotate(-3deg); }
.video-masthead-mark span { padding: 3px 7px; background: var(--hot); font-size: .9rem; font-weight: 900; letter-spacing: .09em; }
.video-masthead-mark strong { color: #79cbda; font-size: 5.1rem; line-height: .78; letter-spacing: -.08em; }
.video-masthead-mark i { margin-top: 8px; color: rgba(255,255,255,.58); font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.video-subnav { display: flex; align-items: center; gap: 8px; padding-block: 14px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.video-subnav::-webkit-scrollbar { display: none; }
.video-subnav > span { flex: none; margin-right: 6px; color: var(--hot); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.video-subnav a { flex: none; padding: 6px 10px; border: 1px solid var(--line); font-size: .72rem; font-weight: 800; }
.video-subnav a:hover { border-color: var(--brand); background: var(--soft); }
.video-feature { display: grid; grid-template-columns: minmax(0,1.56fr) minmax(285px,.74fr); gap: 26px; padding-block: 30px 48px; }
.video-lead-main { min-width: 0; padding: 12px; background: var(--soft); border-top: 7px solid var(--brand); }
.video-player-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 9; padding: 3px; border: 1px solid #111; background: #fff; }
.video-player, .video-cover, .video-cover img { width: 100%; height: 100%; }
.video-player { object-fit: contain; }
.video-cover { display: block; }
.video-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.5)); }
.video-cover img { object-fit: cover; opacity: .9; }
.video-play-button, .video-card-play { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; background: var(--hot); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.26); }
.video-play-button { left: 50%; top: 50%; width: 74px; height: 74px; transform: translate(-50%,-50%); font-size: 1.45rem; transition: transform .25s ease; }
.video-cover:hover .video-play-button { transform: translate(-50%,-50%) scale(1.08); }
.video-now-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; padding: 5px 8px; color: #fff; background: rgba(13,32,38,.8); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.video-lead-copy { padding: 18px 7px 8px; }
.video-lead-copy h2 { max-width: 18ch; margin: 6px 0 9px; font-size: clamp(1.85rem, 3vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.video-lead-copy p { max-width: 780px; margin: 0; color: var(--muted); }
.video-text-link { display: inline-flex; gap: 18px; margin-top: 13px; padding-bottom: 3px; border-bottom: 2px solid var(--hot); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.video-queue { align-self: stretch; padding: 17px; color: #fff; background: var(--ink); border-top: 7px solid var(--hot); }
.video-queue-head { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.19); }
.video-queue-head span, .video-queue-head strong { display: block; }
.video-queue-head span { color: #78cad9; font-size: .65rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.video-queue-head strong { margin-top: 3px; font-size: 1.15rem; }
.video-queue-card { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: 11px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.video-queue-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.video-queue-media img { opacity: .86; }
.video-queue-media span { position: absolute; left: 9px; bottom: 9px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: var(--hot); font-size: .55rem; }
.video-queue-card .eyebrow { color: #78cad9; font-size: .56rem; }
.video-queue-card h3 { margin: 3px 0 0; font-size: .86rem; line-height: 1.17; }
.video-queue-card a:hover { color: #ff91bf; }
.video-library { padding-top: 30px; }
.video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 20px; align-items: stretch; }
.video-card { display: flex; min-width: 0; height: 100%; flex-direction: column; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.video-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); }
.video-card-media img { opacity: .9; transition: transform .3s ease; }
.video-card:hover img { transform: scale(1.025); }
.video-card-play { left: 16px; bottom: 16px; width: 40px; height: 40px; font-size: .78rem; }
.video-card-copy { flex: 1; padding-top: 11px; }
.video-card h3 { margin: 4px 0 0; font-size: 1.12rem; line-height: 1.16; }
.video-submit-cta { display: grid; grid-template-columns: minmax(280px,1fr) minmax(260px,.85fr) auto; gap: 28px; align-items: center; margin-top: 30px; padding: 24px 26px; color: #fff; background: var(--brand-deep); border-bottom: 7px solid var(--hot); }
.video-submit-cta h2 { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(1.45rem,2.4vw,2.25rem); line-height: 1.04; }
.video-submit-cta p { margin: 0; color: rgba(255,255,255,.7); font-size: .85rem; }
.video-submit-cta .button { background: #fff; color: var(--ink); }

/* Appel à information sur l'accueil */
.tip-section { position: relative; margin-top: 20px; padding: 22px 0; overflow: hidden; background: linear-gradient(105deg, var(--ink) 0 68%, var(--brand-deep) 68%); border-bottom: 7px solid var(--hot); }
.tip-section::after { content: ""; position: absolute; right: 2%; top: 50%; width: min(32vw, 410px); aspect-ratio: 2048 / 500; transform: translateY(-50%) rotate(-3deg); background: url('../images/logo-lbvgroove-white.svg') center / contain no-repeat; opacity: .055; pointer-events: none; }
.tip-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 24px; align-items: center; color: #fff; }
.tip-mark { display: grid; width: 92px; height: 92px; align-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.25); transform: rotate(-3deg); }
.tip-mark span { padding: 2px 6px; background: var(--hot); font-size: .6rem; font-weight: 900; letter-spacing: .1em; }
.tip-mark strong { color: #76cad9; font-size: 2.6rem; line-height: .9; }
.tip-copy h2 { margin: 6px 0 5px; font-family: var(--serif); font-size: clamp(1.6rem,2.7vw,2.55rem); line-height: 1; }
.tip-copy p { max-width: 650px; margin: 0; color: rgba(255,255,255,.68); font-size: .84rem; }
.tip-button { color: var(--ink); background: #fff; }
.tip-button:hover { color: #fff; background: var(--hot); }

/* Envoyez-nous une info */
.info-masthead { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: 50px; align-items: end; padding-block: 45px 34px; border-bottom: 1px solid var(--line); }
.info-masthead h1 { max-width: 850px; margin: 12px 0 13px; font-size: clamp(2.7rem,5.7vw,5.2rem); line-height: .94; letter-spacing: -.06em; }
.info-masthead-copy > p { max-width: 720px; margin: 0; color: var(--muted); }
.info-trust { display: grid; grid-template-columns: repeat(3,1fr); border-top: 6px solid var(--brand); }
.info-trust div { min-height: 116px; padding: 14px 11px; border: 1px solid var(--line); border-top: 0; }
.info-trust div + div { border-left: 0; }
.info-trust strong, .info-trust span { display: block; }
.info-trust strong { color: var(--hot); font-size: 1.3rem; }
.info-trust span { margin-top: 12px; font-size: .69rem; font-weight: 800; line-height: 1.25; }
.info-layout { display: grid; grid-template-columns: minmax(0,1fr) 295px; gap: 38px; align-items: start; padding-block: 38px 75px; }
.info-form-panel { min-width: 0; padding: 28px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.info-panel-head { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 4px solid var(--ink); }
.info-panel-head h2 { margin: 4px 0 5px; font-family: var(--serif); font-size: 2rem; }
.info-panel-head p { margin: 0; color: var(--muted); font-size: .8rem; }
.info-form-section { min-width: 0; margin: 0; padding: 26px 0; border: 0; border-top: 1px solid var(--line); }
.info-form-section:first-of-type { padding-top: 0; border-top: 0; }
.info-form-heading { width: 100%; margin: 0 0 18px; padding: 0; font-size: 1.1rem; font-weight: 900; }
.info-form-heading span { display: inline-grid; width: 29px; height: 29px; margin-right: 8px; place-items: center; color: #fff; background: var(--brand); font-size: .7rem; vertical-align: middle; }
.info-upload-zone { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: center; min-height: 112px; padding: 18px; border: 1px dashed var(--brand-dark); background: var(--soft); }
.info-upload-zone:hover { background: #e6f5f7; }
.info-upload-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font-size: 1.5rem; }
.info-upload-zone label { display: block; font-weight: 900; }
.info-upload-zone p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }
.info-upload-zone input { grid-column: 2; width: 100%; font-size: .76rem; }
.info-credit-field { margin-top: 17px; }
.erreur_message--block { margin-block: 9px; }
.info-checkbox-grid { display: grid; gap: 9px; margin-top: 21px; }
.info-checkbox { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding: 13px; border: 1px solid var(--line); cursor: pointer; }
.info-checkbox:hover { border-color: var(--brand); background: var(--soft); }
.info-checkbox input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--brand-dark); }
.info-checkbox strong, .info-checkbox span { display: block; }
.info-checkbox span { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.info-checkbox strong { margin-bottom: 2px; color: var(--ink); font-size: .78rem; }
.info-submit-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 25px; align-items: center; padding-top: 24px; border-top: 4px solid var(--ink); }
.info-privacy { max-width: 560px; margin: 0; color: var(--muted); font-size: .74rem; }
.info-privacy strong { color: var(--ink); }
.info-aside { position: sticky; top: 125px; display: grid; gap: 10px; }
.info-card { padding: 20px; background: var(--soft); border-top: 5px solid var(--brand); }
.info-card-number { color: var(--hot); font-size: .7rem; font-weight: 900; }
.info-card h2 { margin: 8px 0 6px; font-family: var(--serif); font-size: 1.3rem; }
.info-card p { margin: 0; color: var(--muted); font-size: .78rem; }
.info-card--dark { color: #fff; background: var(--ink); border-top-color: var(--hot); }
.info-card--dark p { color: rgba(255,255,255,.65); }
.info-card--pink { background: #fff0f6; border-top-color: var(--hot); }

/* Recherche, contact, newsletter et 404 */
.search-page { min-height: 65vh; padding-bottom: 75px; }
.search-page-masthead { display: grid; grid-template-columns: .82fr 1.18fr; gap: 55px; align-items: center; padding-block: 55px; }
.search-page-title h1 { margin: 6px 0 10px; font-size: clamp(3.2rem, 7vw, 6rem); font-weight: 900; line-height: .92; letter-spacing: -.07em; }
.search-page-title p { color: var(--muted); }
.search-page-box { padding: 28px; background: var(--soft); }
.search-form-shell--page { background: #fff; }
.search-results-section { padding-top: 40px; }
.empty-state { margin-block: 40px; padding: 45px; background: var(--soft); text-align: center; }
.empty-state strong { font-size: 1.4rem; }
.contact-hero { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding-block: 55px 42px; border-bottom: 1px solid var(--line); }
.contact-hero h1 { max-width: 920px; margin: 6px 0 14px; font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 900; line-height: .96; letter-spacing: -.07em; }
.contact-hero p { max-width: 700px; color: var(--muted); }
.contact-hero-mark { color: var(--soft-2); font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 900; line-height: .72; text-align: right; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 50px; align-items: start; padding-block: 48px 85px; }
.contact-form-panel { padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contact-panel-head h2 { margin: 3px 0 24px; font-size: 2rem; }
.contact-submit { margin-top: 22px; }
.contact-aside { display: grid; gap: 12px; }
.contact-card { padding: 22px; background: var(--soft); }
.contact-card strong { display: block; font-size: 1.1rem; }
.contact-card p { margin: 6px 0 0; color: var(--muted); font-size: .86rem; }
.contact-card--accent { color: #fff; background: var(--brand-deep); }
.contact-card--accent p { color: rgba(255,255,255,.7); }
.contact-card--pink { background: #fdeaf0; }
.contact-card--pink a { display: inline-block; margin-top: 12px; color: #a42447; font-weight: 800; }
.newsletter-page { display: grid; grid-template-columns: .78fr 1.22fr; min-height: 640px; align-items: center; gap: 60px; padding-block: 60px; }
.newsletter-page-art { position: relative; min-height: 410px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--brand-deep); }
.newsletter-page-art::before, .newsletter-page-art::after { content: ""; position: absolute; border-radius: 50%; }
.newsletter-page-art::before { width: 300px; height: 300px; left: -100px; top: -100px; background: var(--brand); }
.newsletter-page-art::after { width: 210px; height: 210px; right: -70px; bottom: -80px; background: var(--hot); }
.newsletter-page-art span, .newsletter-page-art strong, .newsletter-page-art em { position: absolute; z-index: 1; font-style: normal; font-weight: 900; }
.newsletter-page-art span { font-size: 6rem; transform: rotate(-7deg); }
.newsletter-page-art strong { top: 35px; right: 38px; color: var(--sun); font-size: 2rem; }
.newsletter-page-art em { left: 35px; bottom: 30px; font-size: 2.2rem; }
.newsletter-page-copy h1 { margin: 6px 0 16px; font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 900; line-height: .98; letter-spacing: -.065em; }
.newsletter-page-copy > p { color: var(--muted); }
.newsletter-page-copy .formulaire_spip { margin-top: 28px; padding: 24px; background: var(--soft); }
.error-page { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 80px; text-align: center; }
.error-code { color: var(--brand); font-size: 7rem; font-weight: 900; line-height: .85; letter-spacing: -.08em; }
.error-page h1 { margin: 10px 0; font-size: clamp(2rem,5vw,4rem); }
.error-page p { margin: 0 0 25px; color: var(--muted); }

/* Footer */
.site-footer { position: relative; padding-top: 64px; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--brand-deep) 0%, var(--ink) 78%); }
.site-footer::before { content: ""; position: absolute; z-index: 0; right: -90px; top: 120px; width: min(55vw, 760px); aspect-ratio: 2048 / 500; transform: rotate(-5deg); background: url('../images/logo-lbvgroove-white.svg') center / contain no-repeat; opacity: .045; pointer-events: none; }
.site-footer > * { position: relative; z-index: 1; }
.footer-accent { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 76% 24%; height: 7px; }
.footer-accent span:first-child { background: var(--brand); }
.footer-accent span:last-child { background: var(--hot); }
.footer-topline { display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items: end; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-brand-block { min-width: 0; }
.brand-footer { display: block; justify-self: start; width: min(100%, 370px); }
.brand-footer img { width: 100%; height: auto; }
.footer-signature { display: block; margin-top: 10px; color: rgba(255,255,255,.56); font-size: .71rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.footer-manifesto { text-align: right; }
.footer-kicker { color: var(--sun); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.footer-manifesto p { max-width: 650px; margin: 8px 0 0 auto; font-size: clamp(1.25rem,2.5vw,2.15rem); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; }
.footer-quickbar { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; margin-top: 28px; padding: 16px 18px; color: var(--ink); background: rgba(56,156,177,.88); border: 1px solid rgba(255,255,255,.18); }
.footer-quickbar-label { display: block; color: #fff; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.footer-quickbar strong { color: #fff; }
.footer-quickbar a { padding: 10px 14px; background: #fff; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .65fr .65fr; gap: 55px; padding-block: 43px 49px; }
.site-footer h2 { margin: 0 0 17px; color: rgba(255,255,255,.5); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a:hover { color: var(--sun); }
.footer-nav-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 25px; }
.footer-nav-grid a { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-nav-grid b { color: var(--sun); }
.footer-column--pink a:hover { color: #ff99b0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 19px 25px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.5); font-size: .71rem; }
.footer-bottom p { margin: 0; }

@media (max-width: 1080px) {
  .home-layout { grid-template-columns: 1fr; width: min(calc(100% - 40px), var(--max)); padding-top: 24px; }
  .home-hot { position: static; max-height: none; }
  .home-hot-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
  .home-hot-head p { max-width: 360px; text-align: right; }
  .home-hot-scroll { max-height: none; overflow: visible; }
  .hot-podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 8px 18px 18px; }
  .hot-item--top { border-bottom: 0; }
  .hot-list { display: none; }
  .home-main > .shell { width: 100%; }
  .home-hot { top: auto; border-right: 0; }
}

@media (max-width: 1040px) {
  .header-utility { min-height: 88px; grid-template-columns: 1fr auto 1fr; }
  .header-edition { display: none; }
  .brand img { width: min(42vw, 390px); max-height: 76px; }
  .site-header.is-compact .brand img { width: min(35vw, 255px); }
  .header-newsletter { display: none; }
  .search-panel-inner { gap: 35px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "heading" "main" "side"; }
  .hero-side { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 22px; }
  .hero-side-title { grid-column: 1 / -1; }
  .story-card--side { grid-template-columns: 138px 1fr; }
  .latest-layout { grid-template-columns: 1fr; gap: 40px; }
  .editor-picks { position: static; }
  .topic-grid { grid-template-columns: 1.12fr .88fr; }
  .archive-grid { grid-template-columns: repeat(2,1fr); }
  .archive-grid--four { grid-template-columns: repeat(2,1fr); }
  .section-masthead-title { grid-template-columns: 1fr; gap: 18px; }
  .rubrique-lead-card { grid-template-columns: 1.16fr .84fr; }
  .article-layout { grid-template-columns: 58px minmax(0,720px); }
  .article-aside { display: none; }
  .video-feature { grid-template-columns: minmax(0,1.2fr) minmax(275px,.8fr); }
  .video-submit-cta { grid-template-columns: 1fr auto; }
  .video-submit-cta p { grid-column: 1 / -1; grid-row: 2; }
  .info-masthead { grid-template-columns: 1fr; gap: 26px; }
  .info-layout { grid-template-columns: minmax(0,1fr) 255px; gap: 25px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .shell, .home-layout { width: min(calc(100% - 28px), var(--max)); }
  .shell-wide, .shell-media { width: 100%; }
  .shell-article, .shell-article-body { width: min(calc(100% - 28px), var(--article)); }
  .site-header { border-top-width: 3px; }
  .header-utility, .site-header.is-compact .header-utility { min-height: 72px; grid-template-columns: 46px minmax(0,1fr) 46px; gap: 5px; padding-inline: 8px; }
  .header-left, .header-actions { gap: 0; }
  .header-newsletter, .header-tip { display: none; }
  .brand img, .site-header.is-compact .brand img { width: min(61vw, 245px); max-height: 60px; }
  .main-nav { display: none; }
  .search-panel { position: fixed; inset: 75px 0 auto; max-height: calc(100vh - 75px); overflow-y: auto; }
  .search-panel-inner { display: block; padding-block: 26px 30px; }
  .search-panel-copy { margin-bottom: 23px; }
  .search-panel-copy h2 { font-size: 2rem; }
  .search-panel-close { top: -11px; }
  .trend-inner { padding-inline: 14px; gap: 14px; }
  .home-layout { padding-top: 14px; }
  .home-hot-head { display: block; }
  .home-hot-head p { margin-top: 6px; text-align: left; }
  .hot-podium { display: flex; gap: 14px; padding-right: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .hot-item--top { flex: 0 0 78%; scroll-snap-align: start; }
  .section { padding-block: 36px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: 2.1rem; }
  .section-heading-note { display: none; }
  .section-link { margin-top: 7px; }
  .hero { gap: 18px; padding: 16px 14px; }
  .hero-heading h2 { font-size: 1.75rem; }
  .hero-main { width: 100%; margin-left: 0; }
  .hero-copy { width: 100%; margin-inline: 0; }
  .hero-copy h1 { font-size: clamp(1.9rem,9vw,2.65rem); }
  .hero-side { display: block; }
  .story-card--side { grid-template-columns: 125px 1fr; }
  .section-talking { width: calc(100% + 28px) !important; margin-left: -14px; padding-inline: 14px; border-inline: 0; }
  .readers-grid { grid-template-columns: 1fr; gap: 22px; }
  .startracks-section { width: 100%; }
  .startracks-box { padding: 18px 14px 22px; }
  .startracks-top { align-items: flex-start; }
  .startracks-layout { grid-template-columns: 1fr; gap: 25px; }
  .startracks-thumbs { overflow-x: auto; }
  .startracks-thumb { min-width: 95px; }
  .story-card--horizontal { grid-template-columns: 132px minmax(0,1fr); gap: 14px; padding: 17px 0; }
  .story-card--horizontal .story-card-deck { display: none; }
  .story-card--horizontal h3 { font-size: 1.06rem; }
  .topic-section { padding: 22px 14px 18px; }
  .topic-section::after { display: none; }
  .section-heading--graphic { padding-right: 0; }
  .topic-grid { grid-template-columns: 1fr; gap: 27px; }
  .story-card--feature h3 { font-size: 2rem; }
  .story-card--compact { grid-template-columns: 132px 1fr; }
  .newsletter-live { grid-template-columns: 1fr; gap: 28px; }
  .newsletter-live-form { padding: 18px; }
  .newsletter-email-row { display: block; }
  .newsletter-email-row input { border-right: 1px solid #b8c8cc; }
  .newsletter-email-row .button { width: 100%; margin-top: 8px; }
  .section-masthead { padding-block: 34px 28px; }
  .section-masthead h1 { font-size: clamp(3rem,16vw,4.8rem); }
  .rubrique-lead { padding-top: 27px; }
  .rubrique-lead-card { grid-template-columns: 1fr; gap: 20px; }
  .rubrique-lead h2 { font-size: 2.2rem; }
  .archive-grid, .archive-grid--four { grid-template-columns: 1fr; gap: 34px; }
  .article-header { padding-top: 35px; }
  .article-header h1 { font-size: clamp(2.5rem,12vw,3.75rem); }
  .article-deck { font-size: 1.1rem; }
  .article-byline { display: block; }
  .article-byline span { display: block; margin-top: 4px; }
  .article-hero { margin-top: 25px; }
  .article-layout { display: block; padding-top: 27px; }
  .share-rail { position: static; flex-direction: row; justify-content: flex-start; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .share-rail > span { margin: 0 5px 0 0; }
  .article-text { font-size: 1.03rem; line-height: 1.78; }
  .article-text h2 { font-size: 1.75rem; }
  .video-masthead { min-height: 255px; align-items: flex-start; margin-top: 14px; padding: 28px 20px 25px; }
  .video-masthead-mark { display: none; }
  .video-masthead h1 { font-size: clamp(3rem,15vw,4.7rem); }
  .video-feature { grid-template-columns: 1fr; gap: 18px; padding-block: 22px 35px; }
  .video-queue { padding: 15px; }
  .video-queue-card { grid-template-columns: 105px 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .video-submit-cta { grid-template-columns: 1fr; gap: 16px; padding: 21px 18px; }
  .video-submit-cta p { grid-column: auto; grid-row: auto; }
  .video-submit-cta .button { justify-self: start; }
  .tip-inner { grid-template-columns: 1fr; gap: 15px; }
  .tip-mark { display: none; }
  .tip-button { justify-self: start; }
  .info-masthead { padding-block: 32px 27px; }
  .info-masthead h1 { font-size: clamp(2.4rem,12vw,3.8rem); }
  .info-trust { grid-template-columns: 1fr; }
  .info-trust div { min-height: 0; }
  .info-trust div + div { border-left: 1px solid var(--line); border-top: 0; }
  .info-layout { grid-template-columns: 1fr; padding-block: 28px 55px; }
  .info-form-panel { padding: 19px 15px; }
  .info-aside { position: static; grid-template-columns: 1fr; }
  .info-submit-row { grid-template-columns: 1fr; }
  .info-submit { width: 100%; }
  .search-page-masthead, .contact-layout, .newsletter-page { grid-template-columns: 1fr; gap: 30px; }
  .search-page-masthead { padding-block: 38px; }
  .contact-hero { grid-template-columns: 1fr; }
  .contact-hero-mark { display: none; }
  .contact-form-panel { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: auto; }
  .newsletter-page { padding-block: 35px 55px; }
  .newsletter-page-art { min-height: 300px; }
  .footer-topline { grid-template-columns: 1fr; gap: 27px; }
  .footer-manifesto { text-align: left; }
  .footer-manifesto p { margin-left: 0; }
  .footer-quickbar { grid-template-columns: 1fr 1fr 1fr; }
  .footer-quickbar > div { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 24px; }
  .footer-column--wide { grid-column: 1 / -1; }
  .footer-bottom { display: block; }
  .footer-bottom p + p { margin-top: 5px; }
}

@media (max-width: 430px) {
  .brand img, .site-header.is-compact .brand img { width: min(58vw, 205px); }
  .site-drawer { padding-inline: 22px; }
  .drawer-service-links { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 2.22rem; }
  .story-card--side, .story-card--horizontal, .story-card--compact { grid-template-columns: 112px 1fr; }
  .story-card--side h3, .story-card--horizontal h3, .story-card--compact h3 { font-size: .96rem; }
  .footer-nav-grid { grid-template-columns: 1fr; }
  .footer-quickbar { grid-template-columns: 1fr; }
  .footer-quickbar > div { grid-column: auto; }
  .info-upload-zone { grid-template-columns: 1fr; }
  .info-upload-zone input { grid-column: auto; }
  .info-upload-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* =========================================================
   V18 — sections d'accueil inspirées de la V15
   Polices V18 conservées : DM Sans + Playfair Display
   Alternance explicite des compositions
   ========================================================= */
.page-home .topic-section--graphic {
  position: relative;
  margin-top: 18px;
  padding: 22px 20px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
  box-shadow: none;
  transition: none;
}
.page-home .topic-section--graphic:hover {
  transform: none;
  box-shadow: none;
}
.page-home .topic-section--graphic::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0 82%, var(--hot) 82% 100%);
}
.page-home .topic-section--graphic::after {
  display: none;
}

/* Titres de section façon V15, avec les polices de la V18 */
.page-home .topic-section--graphic .section-heading--graphic {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 18px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.page-home .topic-section--graphic .section-heading--graphic::before {
  display: none;
}
.page-home .topic-section--graphic .section-heading-main {
  min-width: 0;
}
.page-home .topic-section--graphic .section-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 4px 8px 3px;
  background: var(--hot);
  color: #fff;
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.page-home .topic-section--graphic .section-heading h2 {
  display: inline;
  margin: 0;
  padding-right: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(2.15rem, 3.8vw, 3.75rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.065em;
  text-transform: uppercase;
  box-shadow: inset 0 -.20em 0 rgba(56,156,177,.58);
}
.page-home .topic-section--graphic .section-link {
  margin-bottom: 2px;
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* Composition principale inspirée de la V15 */
.page-home .topic-section--graphic .topic-grid--graphic {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr);
  gap: 22px 26px;
  align-items: start;
}
.page-home .topic-section--graphic .topic-lead,
.page-home .topic-section--graphic .topic-side-stack {
  min-width: 0;
}
.page-home .topic-section--graphic .topic-side-stack {
  display: grid;
  gap: 18px;
}
.page-home .topic-section--graphic .topic-side-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Grand sujet */
.page-home .topic-section--graphic .story-card--feature .story-card-media {
  aspect-ratio: 16 / 10;
}
.page-home .topic-section--graphic .story-card--feature .story-card-body {
  margin-top: 0;
  padding: 13px 14px 12px;
  border-left: 5px solid var(--brand);
  background: #fff;
}
.page-home .topic-section--graphic .story-card--feature h3 {
  margin-top: 5px;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.5vw, 2.45rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
}
.page-home .topic-section--graphic .story-card--feature .story-card-deck {
  margin-top: 8px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.46;
}

/* Deux sujets secondaires, plus proches de la V15 */
.page-home .topic-section--graphic .story-card--compact {
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.page-home .topic-section--graphic .story-card--compact .story-card-media {
  aspect-ratio: 16 / 10;
}
.page-home .topic-section--graphic .story-card--compact .story-card-body {
  padding-top: 9px;
}
.page-home .topic-section--graphic .story-card--compact h3 {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.17;
}
.page-home .topic-section--graphic .story-card--compact .meta {
  display: block;
  margin-top: 7px;
  font-size: .66rem;
}

/* Cartouche de quatrième sujet */
.page-home .topic-section--graphic .topic-highlight-box {
  position: relative;
  margin: 0;
  padding: 17px 52px 17px 18px;
  border: 1px solid #efcedd;
  background: linear-gradient(180deg, #fff1f7 0%, #fff 100%);
}
.page-home .topic-section--graphic .topic-highlight-box .eyebrow {
  color: var(--hot);
}
.page-home .topic-section--graphic .topic-highlight-box h3 {
  max-width: 100%;
  margin: 5px 0 0;
  font-family: var(--sans);
  font-size: clamp(1.18rem, 1.75vw, 1.65rem);
  font-weight: 900;
  line-height: 1.13;
  letter-spacing: -.025em;
}
.page-home .topic-section--graphic .topic-highlight-arrow {
  right: 16px;
  bottom: 16px;
  background: var(--hot);
}

/* Alternance réelle des dispositions */
.page-home .topic-section--pos-2,
.page-home .topic-section--pos-4,
.page-home .topic-section--pos-6 {
  background: linear-gradient(180deg, #ffffff 0%, #fff7fa 100%);
}
.page-home .topic-section--pos-2::before,
.page-home .topic-section--pos-4::before,
.page-home .topic-section--pos-6::before {
  background: linear-gradient(90deg, var(--hot) 0 18%, var(--brand) 18% 100%);
}
.page-home .topic-section--pos-2 .topic-grid--graphic,
.page-home .topic-section--pos-4 .topic-grid--graphic,
.page-home .topic-section--pos-6 .topic-grid--graphic {
  grid-template-columns: minmax(310px, .88fr) minmax(0, 1.12fr);
}
.page-home .topic-section--pos-2 .topic-lead,
.page-home .topic-section--pos-4 .topic-lead,
.page-home .topic-section--pos-6 .topic-lead {
  grid-column: 2;
  grid-row: 1;
}
.page-home .topic-section--pos-2 .topic-side-stack,
.page-home .topic-section--pos-4 .topic-side-stack,
.page-home .topic-section--pos-6 .topic-side-stack {
  grid-column: 1;
  grid-row: 1;
}
.page-home .topic-section--pos-2 .section-heading--graphic,
.page-home .topic-section--pos-4 .section-heading--graphic,
.page-home .topic-section--pos-6 .section-heading--graphic {
  flex-direction: row-reverse;
  text-align: right;
}
.page-home .topic-section--pos-2 .section-heading h2,
.page-home .topic-section--pos-4 .section-heading h2,
.page-home .topic-section--pos-6 .section-heading h2 {
  padding-right: 0;
  padding-left: 6px;
  box-shadow: inset 0 -.20em 0 rgba(255,10,120,.24);
}
.page-home .topic-section--pos-2 .section-badge,
.page-home .topic-section--pos-4 .section-badge,
.page-home .topic-section--pos-6 .section-badge {
  background: var(--brand);
}
.page-home .topic-section--pos-2 .story-card--feature .story-card-body,
.page-home .topic-section--pos-4 .story-card--feature .story-card-body,
.page-home .topic-section--pos-6 .story-card--feature .story-card-body {
  border-left: 0;
  border-right: 5px solid var(--hot);
  text-align: right;
}
.page-home .topic-section--pos-2 .story-card--feature .story-card-deck,
.page-home .topic-section--pos-4 .story-card--feature .story-card-deck,
.page-home .topic-section--pos-6 .story-card--feature .story-card-deck {
  margin-left: auto;
}

/* La section vidéo s'intègre au même système sans perdre son identité */
.page-home .topic-section--pos-7 .section-badge {
  background: var(--brand-deep);
}
.page-home .topic-section--pos-7::before {
  background: linear-gradient(90deg, var(--brand-deep) 0 76%, var(--hot) 76% 100%);
}

@media (max-width: 1040px) {
  .page-home .topic-section--graphic .section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.15rem);
  }
  .page-home .topic-section--graphic .topic-grid--graphic,
  .page-home .topic-section--pos-2 .topic-grid--graphic,
  .page-home .topic-section--pos-4 .topic-grid--graphic,
  .page-home .topic-section--pos-6 .topic-grid--graphic {
    grid-template-columns: 1.08fr .92fr;
  }
}

@media (max-width: 760px) {
  .page-home .topic-section--graphic {
    padding: 18px 14px 20px;
  }
  .page-home .topic-section--graphic .section-heading--graphic,
  .page-home .topic-section--pos-2 .section-heading--graphic,
  .page-home .topic-section--pos-4 .section-heading--graphic,
  .page-home .topic-section--pos-6 .section-heading--graphic {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    text-align: left;
  }
  .page-home .topic-section--graphic .section-heading h2 {
    font-size: 2.15rem;
  }
  .page-home .topic-section--graphic .topic-grid--graphic,
  .page-home .topic-section--pos-2 .topic-grid--graphic,
  .page-home .topic-section--pos-4 .topic-grid--graphic,
  .page-home .topic-section--pos-6 .topic-grid--graphic {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-home .topic-section--pos-2 .topic-lead,
  .page-home .topic-section--pos-4 .topic-lead,
  .page-home .topic-section--pos-6 .topic-lead,
  .page-home .topic-section--pos-2 .topic-side-stack,
  .page-home .topic-section--pos-4 .topic-side-stack,
  .page-home .topic-section--pos-6 .topic-side-stack {
    grid-column: auto;
    grid-row: auto;
  }
  .page-home .topic-section--pos-2 .topic-lead,
  .page-home .topic-section--pos-4 .topic-lead,
  .page-home .topic-section--pos-6 .topic-lead {
    order: 0;
  }
  .page-home .topic-section--pos-2 .topic-side-stack,
  .page-home .topic-section--pos-4 .topic-side-stack,
  .page-home .topic-section--pos-6 .topic-side-stack {
    order: 1;
  }
  .page-home .topic-section--graphic .topic-side-list {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .page-home .topic-section--pos-2 .story-card--feature .story-card-body,
  .page-home .topic-section--pos-4 .story-card--feature .story-card-body,
  .page-home .topic-section--pos-6 .story-card--feature .story-card-body {
    border-right: 0;
    border-left: 5px solid var(--brand);
    text-align: left;
  }
}

@media (max-width: 520px) {
  .page-home .topic-section--graphic .section-heading--graphic {
    display: block;
  }
  .page-home .topic-section--graphic .section-link {
    display: inline-block;
    margin-top: 10px;
  }
  .page-home .topic-section--graphic .topic-side-list {
    grid-template-columns: 1fr;
  }
  .page-home .topic-section--graphic .story-card--feature h3 {
    font-size: 1.75rem;
  }
}

/* =========================================================
   LBV Groove v19 — têtes de sections harmonisées, menu rose, passe-partout renforcé
   ========================================================= */

/* menu principal en rose, texte blanc plus lisible */
.main-nav {
  background: var(--hot);
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 0;
}
.nav-inner {
  min-height: 48px;
  justify-content: center;
  gap: clamp(14px, 1.75vw, 28px);
}
.nav-inner a {
  padding: 14px 0 12px;
  color: #fff;
  font-size: .79rem;
  font-weight: 900;
  letter-spacing: .065em;
}
.nav-inner a:hover,
.nav-inner a.on {
  color: #fff;
  border-color: rgba(255,255,255,.95);
}
.nav-inner .nav-home { color: #fff; }

/* titres de tête alignés sur le style des sections */
.hero-heading,
.latest-section .section-heading,
.section-talking .section-heading,
.startracks-top {
  justify-content: space-between;
  align-items: end;
}
.hero-heading > div,
.latest-section .section-heading > div,
.section-talking .section-heading > .section-heading-main,
.startracks-top > div {
  min-width: 0;
}
.hero-heading-kicker,
.latest-section .section-kicker,
.section-talking .section-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 4px 8px 3px;
  background: var(--hot);
  color: #fff;
  font-size: .63rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero-heading h2,
.latest-section .section-heading h2,
.section-talking .section-heading h2,
.startracks-top h2 {
  display: inline;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(2.15rem, 3.85vw, 3.75rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.065em;
  text-transform: uppercase;
  box-shadow: inset 0 -.20em 0 rgba(56,156,177,.58);
}
.hero-heading-line {
  margin-bottom: 4px;
}
.section-talking .section-heading-note,
.startracks-top p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .82rem;
  text-align: left;
}
.startracks-top {
  padding-top: 15px;
  margin-bottom: 18px;
}
.startracks-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0 79%, var(--hot) 79%);
}
.startracks-top {
  position: relative;
  border-bottom: 0;
}

/* les titres des sections restent à gauche, même dans l'alternance */
.page-home .topic-section--pos-2 .section-heading--graphic,
.page-home .topic-section--pos-4 .section-heading--graphic,
.page-home .topic-section--pos-6 .section-heading--graphic {
  flex-direction: row;
  text-align: left;
}
.page-home .topic-section--pos-2 .section-heading h2,
.page-home .topic-section--pos-4 .section-heading h2,
.page-home .topic-section--pos-6 .section-heading h2 {
  padding-left: 0;
  padding-right: 6px;
  box-shadow: inset 0 -.20em 0 rgba(56,156,177,.58);
}
.page-home .topic-section--pos-2 .section-badge,
.page-home .topic-section--pos-4 .section-badge,
.page-home .topic-section--pos-6 .section-badge {
  background: var(--hot);
}

/* passe-partout plus fort pour mieux occuper l'espace */
.hero-media,
.hot-top-media,
.story-card-media,
.reader-card-media,
.startracks-main-media,
.startracks-thumb,
.rubrique-lead-media,
.aside-reco-media,
.video-card-media,
.video-queue-media {
  position: relative;
  overflow: hidden;
  padding: 4px;
  border: 1px solid #111;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfc 62%, #eaf4f7 100%);
  box-shadow: inset 0 0 0 1px rgba(56,156,177,.12);
}
.hero-media::after,
.hot-top-media::after,
.story-card-media::after,
.reader-card-media::after,
.startracks-main-media::after,
.startracks-thumb::after,
.rubrique-lead-media::after,
.aside-reco-media::after,
.video-card-media::after,
.video-queue-media::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78);
}
.hero-media img,
.hot-top-media img,
.story-card-media img,
.reader-card-media img,
.startracks-main-media img,
.startracks-thumb img,
.rubrique-lead-media img,
.aside-reco-media img,
.video-card-media img,
.video-queue-media img {
  object-position: center 18%;
  background: linear-gradient(180deg, #eef5f7 0%, #e2edf1 100%);
}
.page-home .topic-section--graphic .story-card--feature .story-card-media,
.page-home .topic-section--graphic .story-card--compact .story-card-media,
.story-card--horizontal .story-card-media,
.reader-card-media,
.startracks-main-media,
.startracks-thumb {
  background: linear-gradient(180deg, #f7fbfc 0%, #edf6f8 100%);
}

/* garde le lien à droite mais le bloc titre à gauche */
.section-heading-main,
.hero-heading > div,
.startracks-top > div {
  text-align: left;
}

/* responsive */
@media (max-width: 980px) {
  .nav-inner a { font-size: .74rem; }
  .hero-heading h2,
  .latest-section .section-heading h2,
  .section-talking .section-heading h2,
  .startracks-top h2 {
    font-size: clamp(1.95rem, 5vw, 2.8rem);
  }
}

@media (max-width: 720px) {
  .hero-heading,
  .latest-section .section-heading,
  .section-talking .section-heading,
  .startracks-top {
    display: block;
  }
  .section-talking .section-heading-note,
  .startracks-top p {
    margin-top: 10px;
  }
  .hero-heading h2,
  .latest-section .section-heading h2,
  .section-talking .section-heading h2,
  .startracks-top h2 {
    font-size: 2rem;
  }
}

/* =========================================================
   LBV Groove v20 — titres plus lisibles, site plus coloré et tendance
   ========================================================= */

:root {
  --hot-soft: #ffe4f0;
  --brand-soft: #e6f6fa;
  --brand-soft-2: #f2fbfd;
  --ink-soft: #31474f;
}

/* titres : meilleur rendu et meilleure respiration */
.hero-copy h1,
.reader-card h3,
.story-card--horizontal h3,
.page-home .topic-section--graphic .story-card--feature h3,
.page-home .topic-section--graphic .story-card--compact h3,
.page-home .topic-section--graphic .topic-highlight-box h3,
.startracks-copy h3,
.picks-box h2,
.hot-item h3 {
  text-wrap: balance;
}
.hero-copy h1 a,
.reader-card h3 a,
.story-card--horizontal h3 a,
.page-home .topic-section--graphic .story-card--feature h3 a,
.page-home .topic-section--graphic .story-card--compact h3 a,
.page-home .topic-section--graphic .topic-highlight-box h3 a,
.startracks-copy h3 a,
.picks-box h2 a,
.hot-item h3 a {
  text-decoration: none;
}
.hero-copy h1 {
  max-width: 15ch;
  font-size: clamp(2rem, 2.9vw, 2.95rem);
  line-height: 1;
}
.reader-card h3 {
  max-width: 16ch;
  font-size: clamp(.98rem, 1.18vw, 1.12rem);
  line-height: 1.12;
}
.story-card--horizontal h3 {
  max-width: 18ch;
  font-size: clamp(1.15rem, 1.55vw, 1.52rem);
  line-height: 1.08;
  letter-spacing: -.028em;
}
.page-home .topic-section--graphic .story-card--feature h3 {
  max-width: 12.5ch;
  font-size: clamp(1.55rem, 2.15vw, 2.15rem);
  line-height: 1.03;
}
.page-home .topic-section--graphic .story-card--compact h3 {
  max-width: 16ch;
  font-size: 1.02rem;
  line-height: 1.13;
}
.page-home .topic-section--graphic .topic-highlight-box h3 {
  max-width: 15ch;
  font-size: clamp(1.22rem, 1.7vw, 1.55rem);
  line-height: 1.1;
}
.startracks-copy h3 {
  max-width: 14ch;
  font-size: clamp(1.55rem, 2.05vw, 2.05rem);
}
.picks-box h2 {
  line-height: .98;
}

/* traitement coloré et plus tendance des grands modules */
.hero {
  background: linear-gradient(135deg, #ffffff 0%, var(--brand-soft-2) 55%, #fff0f7 100%);
  box-shadow: 0 16px 40px rgba(16, 46, 54, .08);
}
.hero-main {
  border-top-color: var(--hot);
  background: linear-gradient(180deg, #f0fafc 0%, #ffffff 100%);
}
.hero-copy {
  position: relative;
}
.hero-copy::before {
  content: "";
  display: block;
  width: 82px;
  height: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--hot) 0%, var(--brand) 100%);
}
.hero-side {
  background: linear-gradient(180deg, #fff8fb 0%, #fff 100%);
  box-shadow: inset 0 0 0 1px rgba(255,10,120,.06);
}

.section-talking {
  background:
    radial-gradient(circle at top right, rgba(255,10,120,.10) 0, rgba(255,10,120,0) 26%),
    linear-gradient(145deg, #fff 0%, #f7fcfd 54%, #fff3f8 100%);
}
.reader-card {
  border-top: 4px solid var(--brand);
  background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
}
.reader-card:nth-child(2n) { border-top-color: var(--hot); }
.reader-card:nth-child(3n) { border-top-color: var(--ink); }
.reader-rank {
  color: var(--hot);
  text-shadow: 1px 1px 0 rgba(255,255,255,.9);
}
.talking-flag {
  color: var(--brand-dark);
}

.startracks-box {
  background:
    radial-gradient(circle at top right, rgba(255,10,120,.10) 0, rgba(255,10,120,0) 22%),
    linear-gradient(180deg, #ffffff 0%, #f4fbfd 100%);
}
.startracks-box::before {
  border-color: rgba(56,156,177,.14);
}
.startracks-copy .button {
  border-color: var(--hot);
  color: var(--hot);
}
.startracks-copy .button:hover {
  background: var(--hot);
  border-color: var(--hot);
}

.latest-section {
  background:
    linear-gradient(180deg, #ebf9fc 0%, #ffffff 13%, #fff7fb 100%);
}
.story-card--horizontal {
  position: relative;
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid #dfeaec;
}
.story-card--horizontal::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--hot) 100%);
  opacity: 0;
  transition: opacity .2s ease;
}
.story-card--horizontal:hover::before {
  opacity: 1;
}
.story-card--horizontal .eyebrow {
  color: var(--brand-dark);
}
.picks-box {
  background: linear-gradient(180deg, #ffffff 0%, #fff6fa 100%);
  border-top-color: var(--hot);
}
.picks-box h2 {
  color: var(--ink);
}
.pick-topic:hover,
.picks-box article:hover h3 a {
  color: var(--hot);
}

.page-home .topic-section--graphic {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fcfd 100%);
}
.page-home .topic-section--pos-2,
.page-home .topic-section--pos-4,
.page-home .topic-section--pos-6 {
  background:
    linear-gradient(180deg, #ffffff 0%, #fff6fa 100%);
}
.page-home .topic-section--graphic .story-card--feature .story-card-body {
  border-left-width: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
  box-shadow: 0 8px 24px rgba(12, 38, 46, .05);
}
.page-home .topic-section--pos-2 .story-card--feature .story-card-body,
.page-home .topic-section--pos-4 .story-card--feature .story-card-body,
.page-home .topic-section--pos-6 .story-card--feature .story-card-body {
  background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
}
.page-home .topic-section--graphic .story-card--compact .story-card-body {
  padding: 10px 10px 0 0;
}
.page-home .topic-section--graphic .story-card--compact .eyebrow,
.page-home .topic-section--graphic .story-card--feature .eyebrow,
.hero-copy .eyebrow,
.startracks-copy .eyebrow {
  color: var(--brand-dark);
}
.page-home .topic-section--graphic .topic-highlight-box {
  border-color: #f2b8d0;
  background: linear-gradient(135deg, #fff1f7 0%, #fff 100%);
  box-shadow: 0 10px 26px rgba(255, 10, 120, .08);
}
.page-home .topic-section--graphic .topic-highlight-arrow {
  box-shadow: 0 8px 20px rgba(255,10,120,.24);
}

/* titres de section encore plus affirmés */
.hero-heading h2,
.latest-section .section-heading h2,
.section-talking .section-heading h2,
.startracks-top h2,
.page-home .topic-section--graphic .section-heading h2 {
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hero-heading h2::after,
.latest-section .section-heading h2::after,
.section-talking .section-heading h2::after,
.startracks-top h2::after,
.page-home .topic-section--graphic .section-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -.12em;
  width: 100%;
  height: .22em;
  z-index: -1;
  background: rgba(56,156,177,.20);
}

/* couleur sur les liens et hovers */
a:hover h3,
a:hover h2,
a:hover h1,
.reader-card h3 a:hover,
.story-card h3 a:hover,
.hero-copy h1 a:hover,
.startracks-copy h3 a:hover {
  color: var(--hot);
}

/* mobile */
@media (max-width: 720px) {
  .hero-copy h1,
  .story-card--horizontal h3,
  .page-home .topic-section--graphic .story-card--feature h3,
  .startracks-copy h3 {
    max-width: none;
  }
}

/* =========================================================
   LBV Groove v21 — titres plus fluides, modules un peu plus compacts
   ========================================================= */

/* hot rail */
.home-hot-head h2 {
  text-transform: uppercase;
  letter-spacing: -.03em;
}

/* les titres utilisent mieux toute la largeur disponible */
.hero-copy h1,
.reader-card h3,
.story-card--horizontal h3,
.page-home .topic-section--graphic .story-card--feature h3,
.page-home .topic-section--graphic .story-card--compact h3,
.page-home .topic-section--graphic .topic-highlight-box h3,
.startracks-copy h3,
.hot-item h3,
.picks-box h2 {
  max-width: none;
  width: 100%;
  text-wrap: pretty;
}
.page-home .topic-section--graphic .story-card--feature h3,
.hero-copy h1,
.startracks-copy h3,
.story-card--horizontal h3 {
  text-wrap: balance;
}

/* densité générale plus élégante */
.page-home .home-main > .section,
.page-home .home-main > .startracks-section,
.page-home .home-main > .topic-section,
.page-home .home-main > .newsletter-section {
  margin-top: 14px;
}
.hero {
  padding: 16px 16px 18px;
}
.hero-heading,
.latest-section .section-heading,
.section-talking .section-heading,
.page-home .topic-section--graphic .section-heading--graphic,
.startracks-top {
  margin-bottom: 14px;
  padding-bottom: 10px;
}
.hero-heading h2,
.latest-section .section-heading h2,
.section-talking .section-heading h2,
.startracks-top h2,
.page-home .topic-section--graphic .section-heading h2 {
  font-size: clamp(1.9rem, 3.25vw, 3.15rem);
  line-height: .94;
}
.hero-copy h1 {
  font-size: clamp(1.82rem, 2.45vw, 2.48rem);
}
.startracks-copy h3 {
  font-size: clamp(1.4rem, 1.85vw, 1.8rem);
}
.story-card--horizontal h3 {
  font-size: clamp(1.04rem, 1.35vw, 1.34rem);
}
.reader-card h3 {
  font-size: clamp(.96rem, 1.08vw, 1.05rem);
}
.page-home .topic-section--graphic .story-card--feature h3 {
  font-size: clamp(1.42rem, 1.95vw, 1.88rem);
}
.page-home .topic-section--graphic .topic-highlight-box h3 {
  font-size: clamp(1.12rem, 1.45vw, 1.36rem);
}
.page-home .topic-section--graphic {
  padding: 18px 18px 20px;
}
.section-talking {
  padding: 16px 16px 18px;
}
.startracks-box {
  padding: 16px 16px 18px;
}
.latest-section {
  padding: 16px 16px 18px;
}
.latest-layout {
  gap: 22px;
}
.story-card--horizontal {
  gap: 13px;
  padding: 12px 8px 12px 0;
}
.picks-box {
  padding: 14px 15px;
}
.page-home .topic-section--graphic .topic-grid--graphic {
  gap: 18px 22px;
}
.page-home .topic-section--graphic .topic-side-stack {
  gap: 14px;
}
.page-home .topic-section--graphic .topic-side-list {
  gap: 14px;
}
.page-home .topic-section--graphic .topic-highlight-box {
  padding: 14px 46px 14px 16px;
}

/* header / footer wording blocks un peu plus propres */
.header-tip,
.footer-tip-link,
.drawer-tip-link strong,
.tip-button {
  letter-spacing: .01em;
}

@media (max-width: 720px) {
  .hero-heading h2,
  .latest-section .section-heading h2,
  .section-talking .section-heading h2,
  .startracks-top h2,
  .page-home .topic-section--graphic .section-heading h2 {
    font-size: 2rem;
  }
  .hero-copy h1,
  .page-home .topic-section--graphic .story-card--feature h3,
  .startracks-copy h3 {
    font-size: 1.58rem;
  }
}

/* =========================================================
   LBV Groove v22 — têtes épurées, titres bicolores, surtitres stylisés
   ========================================================= */

/* suppression visuelle des anciens labels de tête */
.hero-heading > div,
.latest-section .section-heading > div,
.section-talking .section-heading-main,
.page-home .topic-section--graphic .section-heading-main,
.startracks-top > div {
  display: block;
}
.hero-heading-kicker,
.section-badge:empty,
.section-kicker:empty {
  display: none !important;
}

/* meilleur système bicolore pour les titres de sections */
.hero-heading h2,
.latest-section .section-heading h2,
.section-talking .section-heading h2,
.startracks-top h2,
.page-home .topic-section--graphic .section-heading h2 {
  display: inline-block;
  color: var(--ink);
  background-image: linear-gradient(90deg, var(--ink) 0 78%, var(--hot) 78% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  box-shadow: none;
  position: relative;
}
.hero-heading h2::before,
.latest-section .section-heading h2::before,
.section-talking .section-heading h2::before,
.startracks-top h2::before,
.page-home .topic-section--graphic .section-heading h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.12em;
  width: 100%;
  height: .20em;
  z-index: -1;
  background: linear-gradient(90deg, rgba(56,156,177,.55) 0 72%, rgba(255,10,120,.42) 72% 100%);
}
.hero-heading h2::after,
.latest-section .section-heading h2::after,
.section-talking .section-heading h2::after,
.startracks-top h2::after,
.page-home .topic-section--graphic .section-heading h2::after {
  display: none;
}
.hero-heading-line {
  height: 4px;
  background: linear-gradient(90deg, rgba(56,156,177,.92) 0 78%, rgba(255,10,120,.92) 78% 100%);
}

/* surtitres plus stylés */
.eyebrow,
.section-kicker,
.hero-copy .eyebrow,
.startracks-copy .eyebrow,
.page-home .topic-section--graphic .story-card--feature .eyebrow,
.page-home .topic-section--graphic .story-card--compact .eyebrow,
.story-card--horizontal .eyebrow,
.reader-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 4px;
  background: linear-gradient(90deg, rgba(56,156,177,.11) 0%, rgba(255,10,120,.08) 100%);
  border-left: 3px solid var(--hot);
  color: var(--brand-dark);
  font-size: .63rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow:hover,
.section-kicker:hover {
  color: var(--hot);
}

/* tailles de titres harmonisées dans les sections */
.reader-card h3,
.story-card--horizontal h3,
.page-home .topic-section--graphic .story-card--compact h3,
.page-home .topic-section--graphic .topic-highlight-box h3,
.hot-item h3,
.picks-box article h3 {
  width: 100%;
  max-width: none;
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
}
.page-home .topic-section--graphic .story-card--feature h3,
.startracks-copy h3 {
  width: 100%;
  max-width: none;
  font-size: clamp(1.5rem, 2vw, 1.92rem);
  line-height: 1.06;
}
.story-card--horizontal h3,
.reader-card h3,
.page-home .topic-section--graphic .story-card--compact h3,
.picks-box article h3,
.hot-item h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-card--horizontal h3,
.reader-card h3,
.page-home .topic-section--graphic .topic-highlight-box h3,
.page-home .topic-section--graphic .story-card--compact h3,
.picks-box article h3 {
  -webkit-line-clamp: 3;
}
.hot-item h3 { -webkit-line-clamp: 2; }
.page-home .topic-section--graphic .story-card--feature h3,
.startracks-copy h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* légère réduction des masses visuelles pour plus d'élégance */
.hero,
.section-talking,
.startracks-box,
.latest-section,
.page-home .topic-section--graphic {
  padding-top: 14px;
}
.hero-heading h2,
.latest-section .section-heading h2,
.section-talking .section-heading h2,
.startracks-top h2,
.page-home .topic-section--graphic .section-heading h2 {
  font-size: clamp(1.78rem, 3vw, 2.8rem);
}
.hero-copy h1 {
  font-size: clamp(1.76rem, 2.25vw, 2.28rem);
}

@media (max-width: 720px) {
  .reader-card h3,
  .story-card--horizontal h3,
  .page-home .topic-section--graphic .story-card--compact h3,
  .page-home .topic-section--graphic .topic-highlight-box h3,
  .hot-item h3,
  .picks-box article h3 {
    font-size: 1.02rem;
  }
  .page-home .topic-section--graphic .story-card--feature h3,
  .startracks-copy h3 {
    font-size: 1.45rem;
  }
}

/* =========================================================
   LBV Groove v23 — surtitres sobres, colorés, hot15 sans coupe
   ========================================================= */

/* surtitres : plus fins, moins cartouche */
.eyebrow,
.section-kicker,
.hero-copy .eyebrow,
.startracks-copy .eyebrow,
.page-home .topic-section--graphic .story-card--feature .eyebrow,
.page-home .topic-section--graphic .story-card--compact .eyebrow,
.story-card--horizontal .eyebrow,
.reader-card .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 4px 13px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(56,156,177,.5);
  color: var(--brand-dark);
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.eyebrow::before,
.section-kicker::before,
.hero-copy .eyebrow::before,
.startracks-copy .eyebrow::before,
.page-home .topic-section--graphic .story-card--feature .eyebrow::before,
.page-home .topic-section--graphic .story-card--compact .eyebrow::before,
.story-card--horizontal .eyebrow::before,
.reader-card .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-65%);
  background: var(--hot);
}
.eyebrow:hover,
.section-kicker:hover {
  color: var(--hot);
  border-bottom-color: var(--hot);
}

/* Hot 15 : aucun tronquage des titres */
.hot-item h3,
.hot-item--compact h3,
.hot-item--top h3 {
  display: block !important;
  width: 100%;
  max-width: none;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  white-space: normal;
  text-overflow: clip;
}

/* harmonisation des titres coupés dans les autres modules */
.reader-card h3,
.story-card--horizontal h3,
.page-home .topic-section--graphic .story-card--compact h3,
.page-home .topic-section--graphic .topic-highlight-box h3,
.picks-box article h3 {
  font-size: 1.08rem;
  line-height: 1.14;
}
.page-home .topic-section--graphic .story-card--feature h3,
.startracks-copy h3 {
  font-size: clamp(1.48rem, 1.95vw, 1.86rem);
  line-height: 1.06;
}

/* =========================================================
   LBV Groove v24 — Hot 15 hiérarchisé, sections x6, article/rubrique/mot modernisés
   ========================================================= */

/* Hot 15 : les trois premiers restent éditoriaux, les 12 suivants plus compacts */
.home-hot-head h2 {
  font-size: 1.42rem;
}
.hot-podium {
  padding-top: 6px;
}
.hot-item--top {
  padding: 10px 0 12px;
}
.hot-item--top .hot-top-media {
  aspect-ratio: 16 / 9;
}
.hot-item--top h3 {
  margin-top: 4px;
  font-size: .91rem !important;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.015em;
}
.hot-item--top:nth-child(1) .hot-top-rank { background: var(--hot); }
.hot-item--top:nth-child(2) .hot-top-rank { background: var(--brand); }
.hot-item--top:nth-child(3) .hot-top-rank { background: #26383f; }
.hot-item--compact {
  grid-template-columns: 27px minmax(0,1fr);
  gap: 8px;
  padding: 9px 0;
}
.hot-item--compact h3 {
  margin-top: 2px;
  font-size: .76rem !important;
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.hot-item--compact .hot-section {
  font-size: .55rem;
}
.hot-rank::before {
  font-size: .72rem;
}

/* Sections : 1 grande + 4 secondaires en 2x2 + 1 sujet au bas */
.page-home .topic-section--graphic .topic-grid--graphic {
  grid-template-columns: minmax(0, 1.04fr) minmax(350px, .96fr);
  grid-template-areas:
    "lead side"
    "bottom bottom";
  gap: 18px 22px;
  align-items: stretch;
}
.page-home .topic-section--graphic .topic-lead {
  grid-area: lead;
  min-width: 0;
}
.page-home .topic-section--graphic .topic-side-stack {
  grid-area: side;
  min-width: 0;
  display: block;
}
.page-home .topic-section--graphic .topic-side-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  height: 100%;
}
.page-home .topic-section--graphic .story-card--compact {
  min-height: 0;
}
.page-home .topic-section--graphic .story-card--compact .story-card-media {
  aspect-ratio: 16 / 10;
}
.page-home .topic-section--graphic .story-card--compact .story-card-body {
  padding-top: 8px;
}
.page-home .topic-section--graphic .story-card--compact h3 {
  font-size: .94rem;
  line-height: 1.14;
}
.page-home .topic-section--graphic .topic-highlight-box--bottom {
  grid-area: bottom;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 14px 52px 14px 16px;
}
.page-home .topic-section--graphic .topic-highlight-box--bottom h3 {
  max-width: 70ch;
  font-size: 1.15rem;
}

/* alternance : on échange seulement la grande news et la grille 2x2 */
.page-home .topic-section--pos-2 .topic-grid--graphic,
.page-home .topic-section--pos-4 .topic-grid--graphic,
.page-home .topic-section--pos-6 .topic-grid--graphic {
  grid-template-columns: minmax(350px, .96fr) minmax(0, 1.04fr);
  grid-template-areas:
    "side lead"
    "bottom bottom";
}
.page-home .topic-section--pos-2 .topic-lead,
.page-home .topic-section--pos-4 .topic-lead,
.page-home .topic-section--pos-6 .topic-lead,
.page-home .topic-section--pos-2 .topic-side-stack,
.page-home .topic-section--pos-4 .topic-side-stack,
.page-home .topic-section--pos-6 .topic-side-stack {
  grid-column: auto;
  grid-row: auto;
}

/* Grande news : passe-partout plein cadre et image qui remplit réellement son espace */
.page-home .topic-section--graphic .story-card--feature {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-home .topic-section--graphic .story-card--feature .story-card-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 330px;
  aspect-ratio: auto;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #111;
  background: #fff;
}
.page-home .topic-section--graphic .story-card--feature .story-card-media::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85);
}
.page-home .topic-section--graphic .story-card--feature .story-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center 18%;
}
.page-home .topic-section--graphic .story-card--feature .story-card-body {
  flex: 0 0 auto;
}

/* Article : métadonnées plus éditoriales, chapeau affirmé, corps normal */
.article-header {
  padding-top: 40px;
}
.article-header .eyebrow {
  margin-bottom: 10px;
}
.article-kicker {
  display: inline-block;
  margin: 4px 0 0;
  padding: 7px 10px 6px;
  border-left: 4px solid var(--hot);
  background: linear-gradient(90deg, rgba(255,10,120,.08), rgba(56,156,177,.07));
  color: var(--brand-dark);
  font-family: var(--sans);
  font-size: .78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .035em;
}
.article-header h1 {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(2.55rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.055em;
}
.article-deck {
  max-width: 900px;
  margin-top: 4px;
  color: #263b43;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.15vw, 1.72rem);
  font-weight: 700;
  line-height: 1.44;
}
.article-byline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,auto));
  justify-content: start;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.article-meta-item {
  min-width: 150px;
  padding: 11px 18px 10px 0;
}
.article-meta-item + .article-meta-item {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.article-meta-label {
  display: block;
  margin-bottom: 3px;
  color: var(--hot);
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.article-meta-item strong,
.article-meta-item time {
  color: var(--ink);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
}
.article-text,
.article-text p,
.article-text li {
  font-weight: 400;
}
.article-text {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.84;
}
.article-text h1,
.article-text h2 {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.035em;
}
.article-text h2 {
  font-size: 2.05rem;
}
.article-text h3 {
  font-family: var(--sans);
  font-weight: 800;
}

/* Menu hamburger : nouvelle organisation LBV Groove */
.site-drawer {
  width: min(455px, 94vw);
  padding: 0 28px 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbfc 68%, #fff5f9 100%);
  border-right: 1px solid rgba(56,156,177,.22);
}
.drawer-head {
  margin: 0 -28px;
  padding: 22px 28px 18px;
  border-bottom: 0;
  background: linear-gradient(105deg, var(--brand-deep) 0 72%, var(--hot) 72% 100%);
}
.drawer-kicker {
  width: 178px;
  padding: 0;
  background: transparent;
}
.drawer-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.45rem;
}
.drawer-close:hover {
  background: #fff;
  color: var(--hot);
}
.drawer-search {
  padding: 19px 0 17px;
  border-bottom: 1px solid var(--line);
}
.drawer-search-label {
  margin-bottom: 9px;
  color: var(--brand-dark);
}
.drawer-search-form {
  padding: 4px;
  border: 1px solid rgba(56,156,177,.32);
  background: #fff;
}
.drawer-search-form input[type="search"],
.drawer-search-form input[type="text"] {
  height: 42px;
  border: 0;
  background: #fff;
}
.drawer-search-form input[type="submit"] {
  width: 82px;
  background: var(--hot);
}
.drawer-nav {
  counter-reset: drawer-item;
  padding: 10px 0 4px;
}
.drawer-nav a {
  counter-increment: drawer-item;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(32,70,80,.12);
  color: var(--ink);
  font-size: .98rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.drawer-nav a::before {
  content: counter(drawer-item, decimal-leading-zero);
  color: var(--hot);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .07em;
}
.drawer-nav a span {
  color: var(--brand);
  transition: transform .2s ease;
}
.drawer-nav a:hover {
  color: var(--hot);
}
.drawer-nav a:hover span {
  transform: translateX(4px);
}
.drawer-nav .drawer-home {
  color: var(--brand-dark);
}
.drawer-service-links {
  gap: 8px;
  margin-top: 16px;
}
.drawer-service-links a {
  min-height: 76px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  background: #fff;
}
.drawer-service-links .drawer-tip-link {
  border-top-color: var(--hot);
  background: linear-gradient(180deg, #fff3f8, #fff);
}
.drawer-service-links strong {
  color: var(--ink);
  font-size: .82rem;
}
.drawer-service-links span {
  margin-top: 5px;
  font-size: .68rem;
  line-height: 1.35;
}

/* Rubrique et mot : masthead bicolore, capitales et grilles alignées sur la nouvelle DA */
.page-section .section-masthead,
.page-topic .section-masthead {
  position: relative;
  padding: 34px 22px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 6px solid var(--brand);
  background: linear-gradient(135deg, #f2fbfd 0%, #fff 58%, #fff2f7 100%);
}
.page-section .section-masthead::after,
.page-topic .section-masthead::after {
  content: "";
  position: absolute;
  right: -55px;
  top: -75px;
  width: 180px;
  height: 180px;
  border: 34px solid rgba(255,10,120,.08);
  border-radius: 50%;
  pointer-events: none;
}
.section-masthead-name {
  position: relative;
  z-index: 1;
}
.page-section .section-masthead .section-badge,
.page-topic .section-masthead .section-badge {
  margin-bottom: 9px;
  background: var(--hot);
}
.page-section .section-masthead h1,
.page-topic .section-masthead h1 {
  display: inline-block;
  margin: 0;
  color: var(--ink);
  background-image: linear-gradient(90deg, var(--ink) 0 76%, var(--hot) 76% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--sans);
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.page-section .section-masthead-name::after,
.page-topic .section-masthead-name::after {
  content: "";
  display: block;
  width: min(260px, 70%);
  height: 6px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--brand) 0 72%, var(--hot) 72% 100%);
}
.page-section .section-description,
.page-topic .section-description {
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  border-left: 4px solid var(--brand);
  background: rgba(255,255,255,.7);
  color: var(--ink-soft);
}
.page-section .subnav {
  position: relative;
  z-index: 1;
}
.page-section .subnav a {
  border-color: rgba(56,156,177,.25);
  background: #fff;
}
.page-section .subnav a:hover {
  border-color: var(--hot);
  color: var(--hot);
}
.page-section .rubrique-lead-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--hot);
  background: linear-gradient(180deg, #fff, #f8fcfd);
}
.page-section .rubrique-lead-copy {
  padding-right: 16px;
}
.page-section .rubrique-lead h2 {
  font-family: var(--serif);
}
.page-section .rubrique-archive .section-heading h2,
.page-topic .section-heading h2 {
  background-image: linear-gradient(90deg, var(--ink) 0 76%, var(--hot) 76% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  box-shadow: none;
}
.page-section .archive-grid .story-card--archive,
.page-topic .archive-grid .story-card--archive {
  padding: 10px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  background: #fff;
}
.page-section .archive-grid .story-card--archive:nth-child(even),
.page-topic .archive-grid .story-card--archive:nth-child(even) {
  border-top-color: var(--hot);
}

@media (max-width: 1020px) {
  .page-home .topic-section--graphic .topic-grid--graphic,
  .page-home .topic-section--pos-2 .topic-grid--graphic,
  .page-home .topic-section--pos-4 .topic-grid--graphic,
  .page-home .topic-section--pos-6 .topic-grid--graphic {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "side"
      "bottom";
  }
  .page-home .topic-section--graphic .story-card--feature .story-card-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .page-home .topic-section--graphic .story-card--feature .story-card-media img {
    min-height: 0;
  }
  .article-byline {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .article-meta-item:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .page-home .topic-section--graphic .topic-side-list {
    grid-template-columns: 1fr 1fr;
  }
  .article-byline {
    display: block;
  }
  .article-meta-item,
  .article-meta-item + .article-meta-item,
  .article-meta-item:nth-child(3) {
    padding: 9px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .article-meta-item:first-child {
    border-top: 0;
  }
  .article-header h1 {
    font-size: 2.45rem;
  }
  .article-deck {
    font-size: 1.22rem;
  }
  .page-section .section-masthead,
  .page-topic .section-masthead {
    padding: 26px 16px 22px;
  }
}

@media (max-width: 520px) {
  .page-home .topic-section--graphic .topic-side-list {
    grid-template-columns: 1fr;
  }
  .hot-item--top h3 { font-size: .88rem !important; }
  .hot-item--compact h3 { font-size: .73rem !important; }
}

/* Correctifs de poids typographiques : le corps courant reste réellement normal */
.article-text {
  font-family: var(--sans);
  font-weight: 400;
}
.article-text p,
.article-text li {
  font-weight: 400;
}
.article-text h1,
.article-text h2,
.article-header h1 {
  font-family: var(--serif);
}
.hot-item--compact h3 { font-weight: 700; }
.drawer-nav a { font-weight: 800; }
.page-home .topic-section--pos-2 .topic-lead,
.page-home .topic-section--pos-4 .topic-lead,
.page-home .topic-section--pos-6 .topic-lead { grid-area: lead; }
.page-home .topic-section--pos-2 .topic-side-stack,
.page-home .topic-section--pos-4 .topic-side-stack,
.page-home .topic-section--pos-6 .topic-side-stack { grid-area: side; }

/* =========================================================
   LBV Groove v25 — surtitre article v23 + titres structurants bicolores
   ========================================================= */

/* Article : surtitre simple comme en v23 */
.page-article .article-kicker {
  display: block;
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .96rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

/* Titre d'article légèrement réduit */
.page-article .article-header h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.7vw, 4.15rem);
  line-height: .995;
  letter-spacing: -.052em;
}

/* Titres éditoriaux structurants : capitales + vrai bicolore turquoise/rose */
.page-article .aside-title,
.page-article .related-section .section-heading h2,
.page-section .rubrique-archive .section-heading h2,
.page-topic .topic-archive .section-heading h2,
.page-videos .video-library .section-heading h2,
.page-home .picks-box h2 {
  display: inline-block;
  color: var(--brand-deep);
  background-image: linear-gradient(90deg, var(--brand-deep) 0 74%, var(--hot) 74% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--sans);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.045em;
  text-transform: uppercase;
  box-shadow: none;
}

/* Recommandations : pas de label superflu, titre plus graphique */
.page-article .aside-recommended .aside-title {
  margin: 0 0 16px;
  font-size: 1.28rem;
}
.page-article .section-heading--recommendations {
  margin-bottom: 18px;
}
.page-article .section-heading--recommendations::before,
.page-section .section-heading--archive::before,
.page-topic .section-heading--archive::before {
  background: linear-gradient(90deg, var(--brand) 0 76%, var(--hot) 76% 100%);
}
.page-article .section-heading--recommendations h2,
.page-section .section-heading--archive h2,
.page-topic .section-heading--archive h2 {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
}

/* Rubrique / mot : nom principal plus franchement bicolore */
.page-section .section-masthead h1,
.page-topic .section-masthead h1 {
  background-image: linear-gradient(90deg, var(--brand-deep) 0 70%, var(--hot) 70% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-section .section-masthead-name::after,
.page-topic .section-masthead-name::after {
  background: linear-gradient(90deg, var(--brand) 0 70%, var(--hot) 70% 100%);
}

/* Même logique visuelle pour les zones éditoriales déjà structurées */
.page-article .aside-most-read .aside-title,
.page-home .picks-box h2,
.page-videos .video-library .section-heading h2 {
  text-transform: uppercase;
}

/* Les labels secondaires restent discrets : ils ne concurrencent plus les titres */
.page-article .aside-box .section-kicker,
.page-section .rubrique-archive .section-kicker,
.page-topic .topic-archive .section-kicker,
.page-videos .video-library .section-badge,
.page-home .picks-box .section-kicker {
  font-size: .58rem;
  letter-spacing: .1em;
}

@media (max-width: 720px) {
  .page-article .article-header h1 {
    font-size: 2.3rem;
  }
  .page-article .section-heading--recommendations h2,
  .page-section .section-heading--archive h2,
  .page-topic .section-heading--archive h2 {
    font-size: 1.9rem;
  }
}

/* Cohérence bicolore sur tous les grands titres de modules du site */
.page-home .hero-heading h2,
.page-home .latest-section .section-heading h2,
.page-home .section-talking .section-heading h2,
.page-home .startracks-top h2,
.page-home .topic-section--graphic .section-heading h2,
.page-section .rubrique-archive .section-heading h2,
.page-topic .topic-archive .section-heading h2,
.page-videos .video-library .section-heading h2,
.page-article .related-section .section-heading h2,
.page-article .aside-title {
  background-image: linear-gradient(90deg, var(--brand-deep) 0 74%, var(--hot) 74% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   LBV Groove v26 — partage rose, filigranes article, métadonnées sociales
   ========================================================= */

/* Boutons de partage sur fond rose */
.page-article .share-rail a,
.page-article .share-rail button {
  border-color: var(--hot);
  background: var(--hot);
  color: #fff;
  box-shadow: 0 7px 18px rgba(255,10,120,.16);
}
.page-article .share-rail a:hover,
.page-article .share-rail button:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px);
}

/* Filigrane visible uniquement dans article.html */
.page-article .article-watermarked-media,
.page-article .article-watermark-wrap {
  position: relative;
}
.page-article .article-hero.article-watermarked-media::after,
.page-article .article-text .article-watermarked-media::after,
.page-article .article-watermark-wrap::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  width: clamp(92px, 15%, 145px);
  aspect-ratio: 2048 / 500;
  pointer-events: none;
  background: url('../images/logo-lbvgroove-white.svg') left top / contain no-repeat;
  opacity: .66;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.34));
}
.page-article .article-watermark-wrap {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 30px auto;
}
.page-article .article-watermark-wrap > img {
  display: block;
  margin: 0 !important;
}
.page-article .article-text figure.article-watermarked-media {
  overflow: hidden;
}

@media (max-width: 720px) {
  .page-article .article-hero.article-watermarked-media::after,
  .page-article .article-text .article-watermarked-media::after,
  .page-article .article-watermark-wrap::after {
    top: 10px;
    left: 10px;
    width: 92px;
  }
}