/* =========================================================
   Media Notes — partitions pour chorales et orchestres.
   Thème clair (data-theme="light" posé par functions.php) ; les jetons sombres
   du :root servent encore aux sections --contrast et au hero.
   ========================================================= */

:root {
  color-scheme: dark;

  --bg: #100d0b;
  --surface: #171310;
  --surface-2: #211b16;
  --contrast: #14100d;
  --border: #2a231d;
  --border-strong: #43392f;

  --text: #f7f3ee;
  --text-2: #c3b8ac;
  --text-3: #9b9086;

  --accent: #f08a2e;
  --accent-hover: #ff9d4d;
  --accent-text: #ffab5c;
  --on-accent: #ffffff;

  --glass-bg: rgba(23, 19, 16, 0.72);
  --glass-border: rgba(255, 255, 255, 0.14);
  --header-bg: rgba(16, 13, 11, 0.68);
  --header-border: rgba(255, 255, 255, 0.12);
  --header-tint: rgba(240, 138, 46, 0.08);
  --card-ring: rgba(240, 138, 46, 0.24);
  --card-border: rgba(240, 138, 46, 0.5);
  --pill-bg: rgba(240, 138, 46, 0.16);
  --pill-border: rgba(240, 138, 46, 0.32);

  --shadow-lift: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
  --shadow-panel: 0 24px 56px -24px rgba(0, 0, 0, 0.65);

  --radius-card: 16px;
  --radius-glass: 12px;
  --wrap: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f4f0e9;
  --contrast: #1b1714;
  --border: #e8e1d7;
  --border-strong: #d6cdc0;

  --text: #1b1714;
  --text-2: #63594f;
  --text-3: #736a60;

  --accent: #e0611c;
  --accent-hover: #f0772a;
  --accent-text: #b84610;
  --on-accent: #ffffff;

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(27, 23, 20, 0.08);
  --header-bg: rgba(255, 255, 255, 0.72);
  --header-border: rgba(27, 23, 20, 0.08);
  --header-tint: rgba(224, 97, 28, 0.06);
  --card-ring: rgba(224, 97, 28, 0.2);
  --card-border: rgba(224, 97, 28, 0.55);
  --pill-bg: rgba(224, 97, 28, 0.12);
  --pill-border: rgba(224, 97, 28, 0.3);

  --shadow-lift: 0 20px 40px -16px rgba(27, 23, 20, 0.16);
  --shadow-panel: 0 24px 56px -24px rgba(27, 23, 20, 0.2);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 640px) { .wrap { padding: 0 40px; } }

/* Grain : additif sur fond sombre, soustractif sur fond clair. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

:root[data-theme="light"] .grain { mix-blend-mode: multiply; opacity: 0.035; }

/* ---------- Typographie ---------- */

.h1, .h2, .card__title, .genre-panel__title, .grille__h, .pillars__h,
.faq dt, .voice__name, .shot__label, .review__name, .site-footer__title,
.stats__value, .format__nom, .cinema__title, .promo figcaption {
  font-family: var(--font-display);
  font-weight: 500;
  font-synthesis-weight: none;
  letter-spacing: -0.015em;
}

.h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.12;
  color: var(--text);
  max-width: 20ch;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  color: var(--text);
  max-width: 22ch;
}

.h1--light, .h2--light { color: #fff; }

.lead {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
  max-width: 46ch;
  margin-top: 20px;
}

.lead--light { color: rgba(255, 255, 255, 0.68); }
.lead--wide { max-width: 60ch; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-3);
  margin-bottom: 16px;
}

.eyebrow--accent { color: var(--accent-text); }
.eyebrow--light { color: rgba(255, 255, 255, 0.6); }

.rule {
  height: 1px;
  width: 7rem;
  background: var(--border-strong);
  margin: 34px 0 0;
  transform-origin: left;
}

.text-link {
  display: inline-block;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease);
}

.text-link:hover { color: var(--accent-hover); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--accent { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn--accent:hover { background: var(--accent-hover); }

.btn--white { background: #fff; color: #16181c; font-weight: 700; }
.btn--white:hover { background: rgba(255, 255, 255, 0.9); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.btn--solid-dark {
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
}
.btn--solid-dark:hover { background: var(--accent-hover); border-color: #fff; }

.btn--ghost { border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); }

.btn--sm { padding: 10px 18px; font-size: 13px; }

.note-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s;
}

.icon-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn[disabled] { opacity: 0.3; pointer-events: none; }

.pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--accent-text);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---------- En-tête ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 16px;
}

@media (min-width: 640px) { .site-header { padding: 24px; } }

.site-header__shell {
  display: flex;
  align-items: center;
  /* La loupe se range entre le logo et le menu : le trio reste groupe a gauche
     et les actions sont repoussees a droite par leur marge automatique. */
  justify-content: flex-start;
  gap: 18px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 20px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius-glass);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

@media (min-width: 640px) { .site-header__shell { padding: 12px 24px; } }

/* Au-dessus du hero, l'en-tête bascule en sombre quelle que soit la préférence. */
.site-header.is-over-media .site-header__shell {
  background: rgba(11, 13, 16, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
}

.site-header.is-over-media .site-nav a { color: rgba(255, 255, 255, 0.8); }
.site-header.is-over-media .site-nav a:hover { color: #fff; }
.site-header.is-over-media .icon-btn { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.site-header.is-over-media .icon-btn:hover { border-color: #fff; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: 100px; height: auto; }

@media (min-width: 640px) { .brand img { width: 124px; } }

.site-nav { display: none; align-items: center; gap: 26px; }

@media (min-width: 900px) { .site-nav { display: flex; } }

.site-nav a {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--text-2);
  transition: color 0.3s var(--ease);
}

.site-nav a:hover { color: var(--accent-text); }

.site-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.site-header__loupe { flex: none; }
.site-header__live { display: none; }

@media (min-width: 640px) { .site-header__live { display: inline-flex; } }
@media (min-width: 900px) { .site-header__burger { display: none; } }

.site-header__burger span { font-size: 20px; line-height: 1; }

.mobile-nav {
  display: flex;
  flex-direction: column;
  max-width: var(--wrap);
  margin: 8px auto 0;
  padding: 8px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius-glass);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.mobile-nav a {
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 15px;
  color: var(--text-2);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.mobile-nav a:hover { background: var(--surface-2); color: var(--text); }

.mobile-nav__cta {
  margin-top: 4px;
  background: var(--accent);
  color: var(--on-accent) !important;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav[hidden] { display: none; }

/* ---------- Préchargement ---------- */

/* ---------- Révélations ---------- */

[data-reveal], .lines__inner {
  --d: 0s;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease) var(--d), transform 0.9s var(--ease) var(--d);
}

[data-reveal].is-in { opacity: 1; transform: none; }

.lines { display: block; }

.lines__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.lines__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease) var(--d);
}

.lines.is-in .lines__inner { transform: none; }

[data-intro] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease) var(--d), transform 0.9s var(--ease) var(--d);
}

body.is-revealed [data-intro] { opacity: 1; transform: none; }

/* ---------- Hero cinéma ---------- */

.stage { position: relative; isolation: isolate; }

.stage__media {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
  will-change: clip-path;
}

.stage__layer { position: absolute; inset: 0; }

.stage__layer picture,
.stage__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage__layer img {
  transform: scale(1.14);
  transition: transform 0.2s linear;
}

.stage__layer--soft img { filter: blur(5px); }

/* La couche nette n'apparait que sur la droite, la ou il n'y a pas de texte. */
.stage__layer--sharp {
  -webkit-mask-image: linear-gradient(to right, transparent 55%, #000 96%);
  mask-image: linear-gradient(to right, transparent 55%, #000 96%);
}

@media (min-width: 701px) {
  .stage__layer--sharp {
    -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 74%);
    mask-image: linear-gradient(to right, transparent 34%, #000 74%);
  }
}

.stage__veil { position: absolute; inset: 0; background: #0b0906; opacity: 0.34; }

.stage__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.74) 30%, rgba(0, 0, 0, 0.4) 52%, rgba(0, 0, 0, 0.08) 76%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 42%);
}

/* Sur mobile le texte couvre tout l'ecran : voile uniforme, la partition reste lisible derriere. */
@media (max-width: 700px) {
  .stage__scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.44) 45%, rgba(0, 0, 0, 0.56) 100%);
  }
}

.stage__cinema {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100svh;
  margin-top: -100svh;
  /* L'en-tete flotte au-dessus du hero : sans ce decalage, le bloc est centre
     sur tout l'ecran et parait colle sous le logo. On le centre sur la zone
     reellement libre, celle qui commence sous l'en-tete. */
  padding-top: 96px;
}

@media (min-width: 1024px) { .stage__cinema { padding-top: 116px; } }

.cinema { display: flex; flex-direction: column; align-items: flex-start; max-width: 780px; }

.cinema__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.8);
}

.cinema__title {
  margin-top: 28px;
  font-size: clamp(2.1rem, 6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.cinema__sub {
  margin-top: 30px;
  max-width: 34rem;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.cinema__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Sur un ecran etroit les deux boutons passent l'un sous l'autre : ils prennent
   la meme largeur, sinon la colonne part en escalier. */
@media (max-width: 520px) {
  .cinema__actions { display: grid; gap: 12px; }
  .cinema__actions .btn { width: 100%; }
}

/* ---------- Le hero doit tenir dans un ecran de telephone ----------
   Le bloc est centre dans une boite d'une hauteur d'ecran : des qu'il est plus
   haut que cette boite, il deborde des deux cotes a la fois et le surtitre comme
   la ligne d'arguments se retrouvent coupes. Sur un iPhone SE (667 px) les
   609 px de contenu ne passaient pas. On enleve donc les deux lignes secondaires
   et on resserre les intervalles : la barre de reassurance juste dessous reprend
   les memes arguments (PDF et mp3, telechargement immediat, a partir de 4 EUR). */
@media (max-width: 700px) {
  .cinema__eyebrow,
  .cinema__note { display: none; }

  .cinema__title { margin-top: 0; }
  .cinema__sub { margin-top: 20px; }
  .cinema__actions { margin-top: 26px; }
}

/* Ecrans courts (SE, paysage) : on gagne encore sur le titre et le paragraphe. */
@media (max-width: 700px) and (max-height: 720px) {
  .cinema__title { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .cinema__sub { margin-top: 16px; font-size: 15.5px; line-height: 1.6; }
  .cinema__actions { margin-top: 22px; }
}

/* Tres petits ecrans (320 x 568) : le paragraphe seul fait plus de 200 px, il
   passe a l'essentiel et laisse la place au titre et aux deux boutons. */
@media (max-width: 700px) and (max-height: 620px) {
  .stage__cinema { padding-top: 118px; }
  .cinema__title { font-size: 1.7rem; }
  .cinema__sub {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cinema__actions { margin-top: 18px; }
}

/* Ligne de titre qui bascule d'une phrase à l'autre. */
.alt { position: relative; display: block; overflow: hidden; }
/* Le fantome reserve la largeur du titre. Son texte passe par un pseudo-element :
   le contenu genere ne fait pas partie du texte de la page, donc le H1 reste une
   seule phrase pour les moteurs et les lecteurs d'ecran. */
.alt__ghost { visibility: hidden; white-space: nowrap; display: block; }
.alt__ghost::before { content: attr(data-texte); }
.alt__item[data-texte]::before { content: attr(data-texte); }

.alt__item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  transform: translateY(105%);
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.alt__item.is-on { transform: none; }
.alt__item.no-anim { transition: none; }
.alt__item.is-out { transform: translateY(-105%); }

.stage__flow { position: relative; z-index: 10; }

.stage__slot-wrap { padding-top: 8svh; padding-bottom: 44px; }

@media (min-width: 640px) { .stage__slot-wrap { padding-top: 11svh; padding-bottom: 72px; } }

.slot {
  position: relative;
  /* Sur telephone la carte doit loger le panneau ET son champ de recherche :
     en 16/10 elle ne fait que 195 px de haut a 360 px de large et le bouton
     debordait. Le cadrage portrait de `hero-mob.webp` s'y prete mieux. */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

/* Sous 360 px la ligne de description passe sur trois lignes : la carte prend
   un cadrage portrait pour ne pas rogner le bouton. */
@media (max-width: 359px) { .slot { aspect-ratio: 4 / 5; } }

@media (min-width: 640px) { .slot { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .slot { aspect-ratio: 21 / 9; } }

.slot__top {
  position: absolute;
  inset: 0 0 auto;
  height: 33%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}

.slot__card { position: absolute; inset: 14px 14px auto; opacity: 0; }
.slot__card .glass-media { max-width: min(100%, 560px); padding: 12px 16px; }
@media (min-width: 640px) { .slot__card { inset: 16px 16px auto; }
  .slot__card .glass-media { padding: 16px 20px; } }

.glass-media {
  display: inline-flex;
  flex-direction: column;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-glass);
  background: rgba(22, 24, 28, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.slot__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.75);
}

.slot__main {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  color: #fff;
}

@media (min-width: 640px) { .slot__main { font-size: 17px; } }

.figures {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}

@media (min-width: 1024px) {
  .figures { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
}

.figures .lead { margin-top: 24px; }

.genre-panel {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 48px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

@media (min-width: 900px) { .genre-panel { grid-template-columns: 1fr auto; gap: 48px; padding: 40px; } }

.genre-panel__title { font-size: 26px; line-height: 1.25; margin-top: 4px; }
.genre-panel__note { margin-top: 12px; font-size: 14px; color: var(--text-2); max-width: 44ch; }
.genre-panel__player { min-width: 0; }

/* ---------- Chiffres ---------- */

.stats { display: grid; gap: 40px; }

@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 0; } }

.stats__cell { display: flex; flex-direction: column; }

@media (min-width: 640px) {
  .stats__cell + .stats__cell { border-left: 1px solid var(--border); padding-left: 40px; }
  .stats__cell:first-child { padding-right: 40px; }
}

.stats__value {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.7rem, 4.9vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.stats__label {
  margin-top: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  line-height: 1.6;
}

.roll {
  position: relative;
  display: inline-block;
  height: 1em;
  clip-path: inset(0 -0.14em);
}

.roll__ghost { visibility: hidden; }

.roll__strip {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0);
  transition: transform 0.9s var(--ease) var(--d);
}

.roll__strip span { display: block; height: 1em; line-height: 1; }
[data-count].is-in .roll__strip { transform: translateY(var(--to)); }

.stat-card {
  margin-top: 36px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* ---------- Sections ---------- */

.section { padding-top: 52px; padding-bottom: 52px; }

@media (min-width: 640px) { .section { padding-top: 72px; padding-bottom: 72px; } }
@media (min-width: 1024px) { .section { padding-top: 92px; padding-bottom: 92px; } }

.section--surface { border-top: 1px solid var(--border); background: var(--surface); }
.section--contrast { background: var(--contrast); overflow: hidden; }

.section__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
}

.section__link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.section__link:hover { color: var(--accent-text); }

.split { display: grid; gap: 48px; }

@media (min-width: 1024px) {
  .split { grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
  .split--wide { grid-template-columns: 1fr 1fr; }
}

.split__col { min-width: 0; }

.ticks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

.ticks li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}

.ticks li > span:first-child {
  flex: none;
  width: 16px;
  height: 1px;
  margin-top: 13px;
  background: var(--accent);
}

/* ---------- Cartes émission ---------- */

.grid-cards { display: grid; gap: 28px; }

@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card { display: flex; flex-direction: column; flex: 1; }

/* Liseré dégradé sur le bord, évidé au centre par le masque. */
.card-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(145deg, #fdf7ef 0%, #e0611c 30%, #8a7a68 52%, #f1e8dc 74%, #a2957f 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.32;
  transition: opacity 0.3s var(--ease);
}

:root[data-theme="light"] .card-wrap::before { opacity: 0.5; }

.card-wrap:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--card-ring);
}

.card-wrap:hover::before { opacity: 0.85; }

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.card-wrap:hover .card__media img { transform: scale(1.07); }

.card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

.card__title {
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.card-wrap:hover .card__title { color: var(--accent-text); }

.card__anim { margin-top: 6px; font-size: 13px; color: var(--text-2); }

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.card__live {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.card__more {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
  transition: color 0.3s var(--ease);
}

.card-wrap:hover .card__more { color: var(--text); }

/* ---------- Carrousel ---------- */

.carousel { padding-top: 32px; }

.carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  padding: 0 24px 8px;
  margin: 0 -24px;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

@media (min-width: 640px) { .carousel__track { margin: 0 -40px; padding: 0 40px 8px; scroll-padding-left: 40px; } }
@media (min-width: 1024px) { .carousel__track { margin: 0; padding: 0 0 8px; scroll-padding-left: 0; gap: 32px; } }

.carousel__cell { flex: none; width: 86%; scroll-snap-align: start; }

@media (min-width: 640px) { .carousel__cell { width: 46%; } }
@media (min-width: 1024px) { .carousel__cell { width: calc((100% - 64px) / 3); } }

.carousel__bar { display: flex; align-items: center; gap: 24px; margin-top: 32px; }

.carousel__rail { position: relative; flex: 1; height: 1px; background: var(--border); }

.carousel__rail span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 12%;
  transition: width 0.3s var(--ease);
}

.carousel__count {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.carousel__arrows { display: flex; gap: 8px; }

/* ---------- Bandeau défilant ---------- */

.marquee { position: relative; margin-top: 40px; overflow: hidden; }
.section--marquee { padding-bottom: 32px; }
@media (min-width: 640px) { .section--marquee { padding-bottom: 44px; } }

.marquee__track { display: flex; width: max-content; padding-left: 24px; }

@media (min-width: 640px) { .marquee__track { padding-left: 40px; } }

.marquee__group { display: flex; flex: none; gap: 24px; padding-right: 24px; }

.marquee__fade { position: absolute; inset: 0 auto 0 0; width: 32px; pointer-events: none; }

@media (min-width: 640px) { .marquee__fade { width: 56px; } }

.marquee__fade--left { background: linear-gradient(to right, var(--surface), transparent); }
.marquee__fade--right { left: auto; right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.marquee__fade--dark.marquee__fade--left { background: linear-gradient(to right, var(--contrast), transparent); }
.marquee__fade--dark.marquee__fade--right { background: linear-gradient(to left, var(--contrast), transparent); }

.voice { width: 240px; flex: none; }

@media (min-width: 640px) { .voice { width: 300px; } }

.voice__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.voice__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.9s var(--ease); }
.voice:hover .voice__media img { transform: scale(1.06); }

.voice figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.voice__name { font-size: 16px; color: var(--text); }
.voice__note { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); white-space: nowrap; }

/* ---------- Visuels (galerie sombre) ---------- */

.reel {
  display: flex;
  gap: 20px;
  margin-top: 56px;
  padding: 0 24px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reel::-webkit-scrollbar { display: none; }

@media (min-width: 640px) { .reel { padding: 0 40px 16px; } }
@media (min-width: 1024px) { .reel { padding-bottom: 24px; } }

.reel__track { display: flex; gap: 20px; }

.shot { flex: none; width: 260px; scroll-snap-align: start; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

@media (min-width: 640px) { .shot { width: 320px; } }
@media (min-width: 1024px) { .shot { width: 400px; } .shot--drop { margin-top: 56px; } }

.reel:hover .shot { opacity: 0.45; }
.reel:hover .shot:hover { opacity: 1; transform: scale(1.03); }

.shot__btn { display: block; text-decoration: none; }

.shot__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.045);
}

.shot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.shot__btn:hover .shot__media img { transform: scale(1.05); }

/* La fleche remplace la loupe : la tuile mene a la famille, elle n'agrandit plus. */
.shot__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(11, 13, 16, 0.55);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.shot__zoom svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }

.shot__btn:hover .shot__zoom { border-color: transparent; background: var(--accent); }
.shot__btn:hover .shot__zoom svg { transform: translateX(2px); }

.shot figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.shot__label { font-size: 16px; color: #fff; transition: color 0.3s var(--ease); }
.shot__note { font-size: 11px; color: rgba(255, 255, 255, 0.6); }

/* ---------- Formats d'écoute ---------- */

.formats {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--border);
}

@media (min-width: 640px) { .formats { grid-template-columns: repeat(2, 1fr); } }

.format { background: var(--surface); padding: 26px; }
.format__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.format__nom { font-size: 18px; color: var(--text); }
.format__note { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--text-2); }

/* ---------- Grille de la semaine ---------- */

.grille {
  display: grid;
  gap: 1px;
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--border);
}

@media (min-width: 640px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille { grid-template-columns: repeat(3, 1fr); } }

.grille li { display: flex; flex-direction: column; gap: 10px; background: var(--surface); padding: 30px 26px; }
.grille__num { font-family: var(--font-display); font-size: 22px; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.grille__h { font-size: 18px; line-height: 1.35; color: var(--text); }
.grille__p { font-size: 14px; line-height: 1.7; color: var(--text-2); }

/* ---------- Avis ---------- */

.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.rating p { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.rating strong { color: #fff; font-variant-numeric: tabular-nums; }

.stars { display: inline-flex; gap: 4px; }
.stars svg { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.2); }
.stars svg.is-on { color: rgba(255, 255, 255, 0.9); }

.review {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: none;
  width: 300px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.045);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

@media (min-width: 640px) { .review { width: 380px; } }

.review:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07); }
.review blockquote { font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, 0.75); }

.review figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.review__name { font-size: 16px; color: #fff; }
.review__date { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }

/* ---------- Piliers & FAQ ---------- */

.pillars { display: flex; flex-direction: column; gap: 40px; }
.pillars li { border-left: 1px solid var(--border); padding-left: 24px; }
.pillars__h { font-size: 20px; color: var(--text); }
.pillars__p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--text-2); }

.faq { display: flex; flex-direction: column; }

.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-text); }

/* Le plus se transforme en moins quand la reponse s'ouvre. */
.faq__plus {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: transform 0.35s var(--ease), opacity 0.25s ease;
}

.faq__plus::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__a { padding: 0 40px 24px 0; }
.faq__a p { font-size: 15px; line-height: 1.75; color: var(--text-2); }

.faq__item[open] .faq__a { animation: faqOuvre 0.35s var(--ease); }

@keyframes faqOuvre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Contact ---------- */

.contact-cards { display: grid; gap: 16px; margin-top: 36px; }

@media (min-width: 640px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  /* L'adresse email est la plus longue : elle prend la ligne entière. */
  .contact-cards > :first-child { grid-column: 1 / -1; }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.contact-card:hover { border-color: var(--card-border); transform: translateY(-3px); }
.contact-card__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3); }
.contact-card__val { font-family: var(--font-display); font-size: 15px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.contact-card__go { margin-top: 8px; font-size: 13px; color: var(--accent-text); }

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

@media (min-width: 640px) { .form { padding: 36px; } }

.form__row { display: grid; gap: 16px; }

@media (min-width: 560px) { .form__row { grid-template-columns: repeat(2, 1fr); } }

.form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.form input,
.form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.3s var(--ease);
}

.form input:focus,
.form textarea:focus { border-color: var(--accent); outline: none; }
.form textarea { resize: vertical; }
.form .form__trap {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.form .btn { align-self: flex-start; margin-top: 4px; }
.form__msg { font-size: 14px; color: var(--text-2); }
.form__msg.is-error { color: var(--accent-text); }

/* ---------- Bandeau final ---------- */

.band { background: var(--contrast); }

.band__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (min-width: 1024px) {
  .band__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-top: 96px; padding-bottom: 96px; }
}

.band__text { max-width: 42rem; }
.band__text .h2 { max-width: none; }
.band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- En-têtes de page ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 124px 0 60px;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 280px;
  background: linear-gradient(to bottom, var(--header-tint), transparent);
  pointer-events: none;
}

.page-head > .wrap { position: relative; }
.page-head--dark { background: var(--contrast); border-bottom: 0; }
.page-head--dark::before { background: linear-gradient(to bottom, rgba(228, 0, 27, 0.16), transparent); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

@media (min-width: 1024px) { .page-head { padding-top: 136px; } }

.promo { margin: 0; }
.promo img { border: 1px solid var(--border); border-radius: var(--radius-card); }
.promo figcaption { margin-top: 16px; font-size: 14px; color: var(--text-3); }

/* ---------- Contenu WordPress ---------- */

.prose { max-width: 70ch; color: var(--text-2); font-size: 15px; line-height: 1.8; }
.prose h2 { font-family: var(--font-display); font-size: 24px; color: var(--text); margin: 40px 0 12px; }
.prose h3 { font-family: var(--font-display); font-size: 19px; color: var(--text); margin: 32px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 20px; margin-bottom: 16px; }
.prose li { margin-bottom: 6px; }

/* ---------- Pied de page ---------- */

.site-footer { border-top: 1px solid var(--border); background: var(--surface); }

.site-footer__grid { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 56px; }

@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 44px; } }

.site-footer__brand img { width: 138px; }
.site-footer__desc { margin-top: 18px; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.site-footer__social { display: flex; gap: 10px; margin-top: 20px; }

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-footer__social a:hover { color: var(--accent-text); border-color: var(--accent); }
.site-footer__social svg { width: 18px; height: 18px; }

.site-footer__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent-text);
  margin-bottom: 16px;
}

.site-footer__link {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  padding: 4px 0;
  transition: color 0.3s var(--ease);
}

.site-footer__link:hover { color: var(--accent-text); }
.site-footer__hours { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.site-footer__hours dt { font-size: 14px; color: var(--text-2); }
.site-footer__bottom { border-top: 1px solid var(--border); }

.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 12px;
  color: var(--text-3);
}

@media (min-width: 768px) { .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; } }
.site-footer__bottom-inner a { color: var(--text-2); }
.site-footer__bottom-inner a:hover { color: var(--accent-text); }

/* ---------- Accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  [data-reveal], [data-intro] { opacity: 1 !important; transform: none !important; }
  .lines__inner { transform: none !important; }
  .card-wrap:hover, .contact-card:hover, .btn:hover { transform: none; }
  .stage__media { position: static; }
  .stage__layer img { transform: scale(1.08); }
  .slot { display: none; }
  .stage__slot-wrap { padding-top: 40px; }
}

@media print {
  .site-header, .grain, .stage__media, .stage__cinema, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal], .lines__inner { opacity: 1 !important; transform: none !important; }
}



/* ---------- Bandeau des genres ---------- */

.genre-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
  white-space: nowrap;
}

.genre-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

@media (min-width: 640px) { .genre-chip { font-size: 22px; padding: 16px 32px; } }

/* ---------- La portee : les lignes se tracent, les notes se posent ---------- */

.staff {
  position: relative;
  margin-top: 36px;
  height: 90px;
}

.staff svg { width: 100%; height: 90px; display: block; overflow: visible; }

.staff__lines line {
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}

.staff.is-in .staff__lines line { transform: scaleX(1); }

.staff__notes { position: absolute; inset: 0; }

.staff__note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 12px;
  margin: -6px 0 0 -8px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(14px) rotate(-18deg) scale(0.4);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
  transition-delay: var(--d, 0s);
}

.staff__note::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 4px;
  width: 1.5px;
  height: 30px;
  background: var(--accent);
}

.staff.is-in .staff__note { transform: translateY(0) rotate(-18deg) scale(1); opacity: 1; }

@media (max-width: 640px) { .staff { height: 70px; margin-top: 32px; } .staff svg { height: 70px; } }

/* Le lettrage du logo est noir : au-dessus du hero sombre, on sert la variante claire. */
.brand__light { display: none; }
.site-header.is-over-media .brand__dark { display: none; }
.site-header.is-over-media .brand__light { display: block; }


/* ---------- Vente : reassurance, best-sellers, etapes, remise ---------- */

/* WooCommerce pose cette classe sur ses libelles caches ; elle venait de la
   feuille des blocs Gutenberg, qui n'est plus chargee. */
.screen-reader-text,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Ligne d'arguments sous les boutons du hero. */
.cinema__note {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}

.section--tight { padding-top: 40px; padding-bottom: 0; }

@media (min-width: 640px) { .section--tight { padding-top: 52px; padding-bottom: 0; } }

/* Barre de reassurance */
.trust {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--border);
}

@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, 1fr); } }

.trust li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--surface);
}

.trust__h {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
}

.trust__h::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: middle;
}

.trust__p { font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* Bouton de commande sur les cartes du catalogue */
.card-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 22px;
}

.card-buy__price {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
}

.card-buy__price small,
.buy-line__price small {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
}

/* Prix + commande sur les pages famille */
.buy-line {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.buy-line__price { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--text); }

/* Les plus demandees */
.hits {
  display: grid;
  gap: 1px;
  margin-top: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--border);
}

@media (min-width: 768px) { .hits { grid-template-columns: repeat(2, 1fr); } }

.hit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg);
  transition: background-color 0.3s var(--ease);
}

.hit:hover { background: var(--surface); }

.hit__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

.hit__titre {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
}

.hit__effectif {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-3);
}

.hit__prix {
  flex: none;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hit__cta {
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hit__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Comment commander */
.steps { display: grid; gap: 22px; }

.steps li {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  border-left: 2px solid var(--border);
}

.steps__num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.steps__h { font-size: 20px; line-height: 1.3; color: var(--text); }
.steps__p { font-size: 15px; line-height: 1.7; color: var(--text-2); }

/* Bandeau remise enseignants */
.offer {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-card);
  background: var(--pill-bg);
}

@media (min-width: 860px) { .offer { grid-template-columns: 1fr auto; gap: 40px; padding: 32px 36px; } }

/* La section du bandeau n'a pas de padding vertical : il lui faut au moins la
   respiration du bas, sinon il colle a la section sombre qui suit. */
.section--offer { padding-bottom: 52px; }

@media (min-width: 640px) { .section--offer { padding-bottom: 72px; } }

.offer__titre { font-family: var(--font-display); font-size: 21px; line-height: 1.25; color: var(--text); }
.offer__p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--text-2); max-width: 62ch; }


/* =========================================================
   Boutique WooCommerce : la grille reprend la carte du theme,
   le reste est reaccorde aux jetons du site.
   ========================================================= */

.shop .section { padding-top: 48px; }

/* Filtres par famille */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.shop-filters__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-2);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.shop-filters__item span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.shop-filters__item:hover { border-color: var(--card-border); color: var(--accent-text); }

.shop-filters__item.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.shop-filters__item.is-on span { color: rgba(255, 255, 255, 0.75); }

/* Barre tri + compteur */
.woocommerce-result-count {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--text-3);
}

.woocommerce-ordering { margin: 0 0 24px; }

.woocommerce-ordering select,
.shop select {
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--text);
}

@media (min-width: 700px) {
  .shop .woocommerce-result-count { display: inline-block; }
  .woocommerce-ordering { float: right; }
}

/* Grille produits */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  clear: both;
}

@media (min-width: 1024px) { ul.products { gap: 32px; } }

/* Sans ce rappel, le clearfix .woocommerce ul.products::before de WooCommerce
   (plus specifique) devient un item de grille et laisse une case vide. */
.shop ul.products::before,
.shop ul.products::after,
ul.products::before,
ul.products::after { content: none; display: none; }

ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  float: none;
  clear: none;
}

ul.products li.product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(145deg, #fdf7ef 0%, #e0611c 30%, #8a7a68 52%, #f1e8dc 74%, #a2957f 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease);
}

ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--card-ring);
}

ul.products li.product:hover::before { opacity: 0.85; }
ul.products li.product:hover .card__media img { transform: scale(1.07); }
ul.products li.product:hover .card__title { color: var(--accent-text); }

/* Le bouton d'ajout au panier de WooCommerce prend l'allure du bouton du theme. */
.card-buy .button,
.card-buy .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-accent);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.card-buy .button:hover,
.card-buy .added_to_cart:hover { background: var(--accent-hover); }
.card-buy .added_to_cart { margin-left: 8px; background: transparent; border-color: var(--border-strong); color: var(--accent-text); }
.card-buy .button.loading { opacity: 0.6; }
.card-buy .price { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.card-buy .price del { margin-right: 6px; opacity: 0.5; font-size: 14px; }

/* Pagination */
.woocommerce-pagination { margin-top: 48px; }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; }
.woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce-pagination a,
.woocommerce-pagination span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text-2);
}

.woocommerce-pagination span.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.woocommerce-pagination a:hover { border-color: var(--accent); color: var(--accent-text); }

/* Fiche produit */
.shop div.product { display: grid; gap: 40px; padding-top: 24px; }

@media (min-width: 900px) {
  .shop div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
}

.shop div.product .woocommerce-product-gallery {
  width: 100%;
  float: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-2);
}

.shop div.product .summary { width: 100%; float: none; margin: 0; }

.shop div.product .product_title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.shop div.product p.price {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text);
}

.shop div.product .woocommerce-product-details__short-description,
.shop div.product .woocommerce-Tabs-panel { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.shop div.product .woocommerce-Tabs-panel p { margin-bottom: 14px; }

.shop .quantity input[type="number"] {
  width: 78px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  color: var(--text);
}

.shop .single_add_to_cart_button,
.shop .checkout-button,
.shop .button.alt,
.shop button.button,
.shop input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-accent);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.shop .single_add_to_cart_button:hover,
.shop .checkout-button:hover,
.shop .button.alt:hover,
.shop button.button:hover,
.shop input.button:hover { background: var(--accent-hover); }

.shop .product_meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
}

.shop .product_meta a { color: var(--accent-text); }

.shop .woocommerce-tabs { grid-column: 1 / -1; margin-top: 8px; }

.shop .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--border);
}

.shop .woocommerce-tabs ul.tabs::before,
.shop .woocommerce-tabs ul.tabs li::before,
.shop .woocommerce-tabs ul.tabs li::after { content: none; }

.shop .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.shop .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 4px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-3);
}

.shop .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--accent); color: var(--text); }

.related-products { grid-column: 1 / -1; margin-top: 48px; }
.related-products .h2 { margin-bottom: 32px; }

/* Panier, commande, compte */
.shop table.shop_table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
}

.shop table.shop_table th,
.shop table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
  text-align: left;
}

.shop table.shop_table thead th { border-top: 0; font-family: var(--font-display); color: var(--text); }
.shop table.shop_table img { width: 64px; border-radius: 8px; }

.shop .cart-collaterals,
.shop .cart_totals { margin-top: 40px; }

.shop form .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.shop form .form-row label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.shop form .input-text,
.shop form select,
.shop form textarea {
  padding: 13px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

.shop .woocommerce-message,
.shop .woocommerce-info,
.shop .woocommerce-error {
  margin-bottom: 28px;
  padding: 16px 20px;
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-card);
  background: var(--pill-bg);
  font-size: 14px;
  color: var(--text);
  list-style: none;
}

.shop .woocommerce-message .button,
.shop .woocommerce-info .button { float: right; }

/* Panier dans l'en-tete */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.cart-link:hover { border-color: var(--accent); color: var(--accent-text); }
.cart-link svg { width: 19px; height: 19px; }

.site-header.is-over-media .cart-link { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.site-header.is-over-media .cart-link:hover { border-color: #fff; }

.cart-link__n {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 19px;
  text-align: center;
  color: var(--on-accent);
}

.cart-link:not(.is-full) .cart-link__n { display: none; }


/* ---------- Reprises apres retrait de woocommerce-layout.css ---------- */

/* WooCommerce cible ses cartes avec .woocommerce ul.products li.product : il faut
   au moins autant de classes pour que la carte du theme reprenne la main. */
body ul.products li.product .card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

body ul.products li.product .card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow: none;
  transition: transform 0.9s var(--ease);
}

body ul.products li.product .card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

body ul.products li.product .card__title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

body ul.products li.product .card-buy .price,
body ul.products li.product .card-buy .price .woocommerce-Price-amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

body ul.products li.product a { text-decoration: none; }

/* Colonnes du panier, de la commande et du compte */
.shop .col2-set { display: grid; gap: 32px; }

@media (min-width: 800px) { .shop .col2-set { grid-template-columns: repeat(2, 1fr); gap: 48px; } }

.shop .col2-set .col-1,
.shop .col2-set .col-2 { width: auto; float: none; }

.shop #customer_login { display: grid; gap: 32px; }

@media (min-width: 800px) { .shop #customer_login { grid-template-columns: repeat(2, 1fr); gap: 48px; } }

.shop .woocommerce-cart-form { margin-bottom: 40px; }

.shop .cart-collaterals { display: grid; gap: 24px; }

@media (min-width: 900px) {
  .shop .cart-collaterals { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; }
  .shop .cart-collaterals .cart_totals { grid-column: 2; width: auto; float: none; margin-top: 0; }
}

.shop .woocommerce-checkout-review-order { margin-top: 32px; }

.shop .quantity { display: inline-flex; align-items: center; }

.shop .woocommerce-form-coupon,
.shop .woocommerce-form-login {
  margin-bottom: 28px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.shop .wc-proceed-to-checkout { margin-top: 20px; }
.shop .wc-proceed-to-checkout .checkout-button { width: 100%; }

.shop ul.woocommerce-error,
.shop ul.woocommerce-error li { margin-left: 0; padding-left: 0; }

.shop .woocommerce-privacy-policy-text,
.shop .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--text-3); }

.shop .payment_methods { list-style: none; padding: 0; margin: 0 0 20px; }
.shop .payment_methods li { padding: 12px 0; border-top: 1px solid var(--border); }
.shop .payment_box { font-size: 13px; color: var(--text-2); }

.shop .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: 10px; }


/* ---------- Boutons WooCommerce : reprendre la main sur .woocommerce a.button.alt ---------- */

body.woocommerce .shop .button,
body.woocommerce .shop a.button,
body.woocommerce .shop button.button,
body.woocommerce .shop input.button,
body.woocommerce .shop a.button.alt,
body.woocommerce .shop button.button.alt,
body.woocommerce .shop input.button.alt,
body.woocommerce-page .shop .button,
body.woocommerce-page .shop a.button,
body.woocommerce-page .shop button.button,
body.woocommerce-page .shop input.button,
body.woocommerce-page .shop a.button.alt,
body.woocommerce-page .shop button.button.alt,
body.woocommerce-page .shop input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-accent);
  text-shadow: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

body.woocommerce .shop .button:hover,
body.woocommerce .shop a.button:hover,
body.woocommerce .shop button.button:hover,
body.woocommerce .shop input.button:hover,
body.woocommerce-page .shop .button:hover,
body.woocommerce-page .shop a.button:hover,
body.woocommerce-page .shop button.button:hover,
body.woocommerce-page .shop input.button:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

/* Boutons secondaires : mettre a jour le panier, appliquer un code promo */
body.woocommerce .shop button[name="update_cart"],
body.woocommerce .shop button[name="apply_coupon"],
body.woocommerce-page .shop button[name="update_cart"],
body.woocommerce-page .shop button[name="apply_coupon"] {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-2);
  font-size: 13px;
  padding: 12px 18px;
}

body.woocommerce .shop button[name="update_cart"]:hover,
body.woocommerce .shop button[name="apply_coupon"]:hover,
body.woocommerce-page .shop button[name="update_cart"]:hover,
body.woocommerce-page .shop button[name="apply_coupon"]:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Le bouton d'ajout dans la grille reste compact */
body.woocommerce .shop .card-buy .button,
body.woocommerce-page .shop .card-buy .button,
.card-buy .button {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
}

/* ---------- Fiche produit ---------- */

/* Sans en-tete de page, le titre passait sous l'en-tete fixe. */
.shop.single-produit { padding-top: 96px; }

@media (min-width: 640px) { .shop.single-produit { padding-top: 116px; } }

.shop div.product .woocommerce-product-gallery__wrapper { margin: 0; }

/* Un seul visuel par produit et des formats tres varies (affiches en portrait,
   photos de scene en paysage) : la boite epouse l'image plutot que l'inverse. */
.shop div.product .woocommerce-product-gallery__image { display: block; }
.shop div.product .woocommerce-product-gallery__image > a { display: block; }

.shop div.product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  background: #fff;
}

/* Sans le diaporama, plus personne ne remet l'opacite a 1 en JS. */
.shop div.product .woocommerce-product-gallery { opacity: 1 !important; }

.shop div.product .woocommerce-product-gallery__trigger {
  z-index: 3;
  top: 14px;
  right: 14px;
}

.shop div.product .summary .woocommerce-product-details__short-description { margin-bottom: 24px; }

.shop div.product form.cart { margin: 24px 0; }
.shop div.product form.cart::after { content: ""; display: block; clear: both; }

/* ---------- Panier et commande ---------- */

.shop .woocommerce { display: block; }

.shop table.shop_table.cart td.product-thumbnail { width: 90px; }
.shop table.shop_table .product-name a { color: var(--text); }
.shop table.shop_table .product-name a:hover { color: var(--accent-text); }
.shop td.actions { padding: 20px 16px; }

.shop td.actions .coupon {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-right: 12px;
}

.shop td.actions .coupon .input-text {
  width: 200px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  font-size: 14px;
}

.shop .cart_totals h2,
.shop .woocommerce-billing-fields h3,
.shop .woocommerce-additional-fields h3,
.shop #order_review_heading {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
}

.shop .cart_totals table.shop_table th { width: 40%; }
.shop .return-to-shop { margin-top: 24px; }


/* ---------- Produits vedettes sur l'accueil ---------- */

/* Le bloc est devenu une section a part entiere : il porte deja son padding. */

.featured .section__head { padding-bottom: 20px; }

.featured__grid { margin-top: 28px; }

.featured ul.products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }

@media (min-width: 1024px) {
  .featured ul.products { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- Panier et commande sur petit ecran ----------
   `woocommerce-smallscreen.css` est retiree avec la feuille de mise en page :
   c'est elle qui empilait les lignes du tableau. Sans remplacement, les cinq
   colonnes du panier debordaient l'ecran. On rejoue le motif : l'entete part,
   chaque cellule devient une ligne libelle / valeur via son `data-title`. */

@media (max-width: 780px) {
  .shop table.shop_table_responsive thead { display: none; }

  .shop table.shop_table_responsive tr { display: block; }

  .shop table.shop_table_responsive tbody tr + tr { border-top: 1px solid var(--border); }

  .shop table.shop_table_responsive td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 0;
    padding: 10px 16px;
    text-align: right;
  }

  .shop table.shop_table_responsive tr td:first-child { padding-top: 18px; }
  .shop table.shop_table_responsive tr td:last-child { padding-bottom: 18px; }

  .shop table.shop_table_responsive td::before {
    content: attr(data-title);
    flex: none;
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-3);
    text-align: left;
  }

  .shop table.shop_table_responsive td.product-remove::before,
  .shop table.shop_table_responsive td.product-thumbnail::before,
  .shop table.shop_table_responsive td.actions::before { content: none; }

  /* Les partitions se vendent a l'unite : WooCommerce rend alors un champ cache
     et la ligne « Quantite » resterait vide. */
  .shop table.shop_table_responsive td.product-quantity:has(input[type="hidden"]) { display: none; }

  .shop table.shop_table_responsive td.product-remove { justify-content: flex-end; }
  .shop table.shop_table_responsive td.product-thumbnail { justify-content: flex-start; }
  .shop table.shop_table_responsive td.product-name { text-align: right; }

  /* La ligne d'actions reprend toute la largeur : code promo puis mise a jour. */
  .shop table.shop_table_responsive td.actions {
    display: block;
    padding: 18px 16px;
    border-top: 1px solid var(--border);
  }

  .shop td.actions .coupon { display: flex; width: 100%; margin: 0 0 12px; }
  .shop td.actions .coupon .input-text { flex: 1; width: auto; min-width: 0; }
  .shop td.actions .button { width: 100%; }

  /* Le recapitulatif de commande n'a que deux colonnes : il tient tel quel,
     mais il lui faut des marges plus serrees. */
  .shop table.shop_table th,
  .shop table.shop_table td { padding: 12px; font-size: 13px; }

  .shop .cart_totals table.shop_table th { width: 45%; }
}

/* Garde-fou : aucun tableau WooCommerce ne doit pousser la page de cote. */
.shop table.shop_table { max-width: 100%; }
.shop .woocommerce { min-width: 0; }


/* =========================================================
   Recherche : loupe dans l'en-tete, panneau qui descend,
   resultats en direct sur le titre, l'interprete ou le genre.
   ========================================================= */

.recherche {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  /* Sans ca le panneau s'etire sur toute la hauteur et reste vide tant qu'on
     n'a rien tape. */
  align-items: flex-start;
  padding: 88px 20px 20px;
}

.recherche[hidden] { display: none; }

@media (min-width: 700px) { .recherche { padding: 104px 24px 24px; } }

.recherche__voile {
  position: absolute;
  inset: 0;
  background: rgba(11, 9, 6, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}

.recherche__panneau {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.recherche.is-on .recherche__voile { opacity: 1; }
.recherche.is-on .recherche__panneau { opacity: 1; transform: none; }

/* Le champ */
.recherche__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.recherche__loupe { flex: none; width: 20px; height: 20px; color: var(--text-3); }

.recherche__form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text);
}

.recherche__form input[type="search"]:focus { outline: none; }
.recherche__form input[type="search"]::placeholder { color: var(--text-3); font-weight: 400; }
.recherche__form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.recherche__fermer {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.recherche__fermer:hover { border-color: var(--accent); color: var(--accent-text); }

/* Les genres du client, en raccourci */
.recherche__genres {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  /* Sur telephone les neuf genres prendraient cinq lignes et repousseraient les
     resultats hors de l'ecran : ils defilent sur une seule ligne. */
  overflow-x: auto;
  scrollbar-width: none;
}

.recherche__genres::-webkit-scrollbar { display: none; }
.recherche__genres > * { flex: none; }

@media (min-width: 760px) { .recherche__genres { flex-wrap: wrap; overflow-x: visible; } }

.recherche__legende {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.recherche__genre {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.recherche__genre span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.recherche__genre:hover { border-color: var(--accent); color: var(--accent-text); }
.recherche__genre:hover span { color: var(--accent-text); }

/* Les resultats */
.recherche__sortie { overflow-y: auto; overscroll-behavior: contain; }

.recherche__etat {
  padding: 26px 18px;
  font-size: 14px;
  color: var(--text-3);
}

.recherche__liste { list-style: none; margin: 0; padding: 0; }

.recherche__item + .recherche__item { border-top: 1px solid var(--border); }

.recherche__lien {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.recherche__lien:hover,
.recherche__lien:focus-visible { background: var(--surface-2); }

.recherche__vignette {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
}

.recherche__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.recherche__titre {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
}

.recherche__meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}

.recherche__prix {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}

/* Le lien reste visible pendant qu'on parcourt la liste. */
.recherche__tout {
  position: sticky;
  bottom: 0;
  display: block;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 13px;
  text-align: center;
  color: var(--accent-text);
}

body.recherche-ouverte { overflow: hidden; }

/* Le formulaire de la page de resultats */
.recherche-page__form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
}

@media (min-width: 620px) { .recherche-page__form { grid-template-columns: auto minmax(0, 1fr) auto; } }

.recherche-page__loupe { width: 20px; height: 20px; color: var(--text-3); }

.recherche-page__form input[type="search"] {
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text);
}

.recherche-page__form input[type="search"]:focus { outline: none; }
.recherche-page__form input[type="search"]::placeholder { color: var(--text-3); }
.recherche-page__form .btn { grid-column: 1 / -1; }

@media (min-width: 620px) { .recherche-page__form .btn { grid-column: auto; } }


/* ---------- Recherche dans la carte du hero ---------- */

.slot__recherche {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 5px 5px 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

@media (min-width: 560px) { .slot__recherche { grid-template-columns: auto minmax(0, 1fr) auto; } }

.slot__recherche:focus-within {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
}

.slot__recherche svg { width: 17px; height: 17px; color: rgba(255, 255, 255, 0.72); }

.slot__recherche input[type="search"] {
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 14px;
  color: #fff;
}

.slot__recherche input[type="search"]:focus { outline: none; }
.slot__recherche input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.62); }
.slot__recherche input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.slot__recherche button {
  grid-column: 1 / -1;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

@media (min-width: 560px) { .slot__recherche button { grid-column: auto; } }

.slot__recherche button:hover { background: var(--accent-hover); }

@media (max-width: 559px) {
  .slot__recherche { margin-top: 12px; gap: 8px; }
  .slot__recherche input[type="search"] { padding: 7px 0; font-size: 13.5px; }
  .slot__recherche button { padding: 8px 16px; font-size: 12.5px; }
}

.related-products__note {
  margin: -18px 0 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}

.related-products + .related-products { margin-top: 56px; }


/* =========================================================
   Les genres musicaux : une mosaique ou le genre le mieux
   fourni tient la grande tuile, les huit autres suivent.
   ========================================================= */

.genres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}

@media (min-width: 700px) { .genres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .genres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.genre {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 118px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.genre:hover {
  transform: translateY(-4px);
  border-color: var(--card-border);
  box-shadow: var(--shadow-lift);
}

/* La tuile du genre le plus fourni : deux colonnes, deux rangees, fond accent. */
.genre--phare {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: space-between;
  padding: 22px;
  border-color: transparent;
  background: var(--accent);
}

@media (min-width: 700px) { .genre--phare { min-height: 250px; } }

.genre__nom {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.genre--phare .genre__nom { font-size: clamp(24px, 3.4vw, 38px); letter-spacing: -0.02em; color: var(--on-accent); }
.genre:hover .genre__nom { color: var(--accent-text); }
.genre--phare:hover .genre__nom { color: var(--on-accent); }

.genre__pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.genre__n {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 699px) { .genre__n { font-size: 10px; letter-spacing: 0.1em; } }

.genre--phare .genre__n { font-size: 12px; color: rgba(255, 255, 255, 0.82); }

.genre__fleche {
  font-size: 15px;
  color: var(--text-3);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.genre:hover .genre__fleche { transform: translateX(4px); color: var(--accent-text); }
.genre--phare .genre__fleche { color: rgba(255, 255, 255, 0.9); }
.genre--phare:hover .genre__fleche { color: #fff; }

/* Le rappel de la portee, la piece signature du site. */
.genre__portee {
  position: absolute;
  right: -34px;
  bottom: 58px;
  width: 56%;
  color: rgba(255, 255, 255, 0.26);
  pointer-events: none;
}

.genre__portee svg { display: block; width: 100%; height: 78px; }

@media (max-width: 699px) {
  .genre--phare { grid-row: span 1; min-height: 132px; }
  .genre__portee { display: none; }
}

/* Le contenu ecrit par le client sur ses pages famille : il porte son
   referencement, il doit respirer comme le reste du site. */
.section--texte .prose { max-width: 78ch; font-size: 16px; }
.section--texte .prose img { height: auto; border-radius: var(--radius-card); }
.section--texte .prose ul,
.section--texte .prose ol { margin: 0 0 18px 20px; }
.section--texte .prose li { margin-bottom: 8px; }
.section--texte .prose figure { margin: 24px 0; }

/* Fil d'Ariane WooCommerce : maillage interne des fiches vers leurs categories. */
.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 12.5px;
  color: var(--text-3);
}

.fil a { color: var(--text-3); transition: color 0.3s var(--ease); }
.fil a:hover { color: var(--accent-text); }
.fil__sep { color: var(--border-strong); }

/* ---------- Ordre des boutons du panier ----------
   Stripe accroche son bouton de paiement express (Apple Pay, Google Pay) en
   priorite 1 sur `woocommerce_proceed_to_checkout`, donc avant le bouton de
   validation qui, lui, est en priorite 20. Le client veut l'inverse. On le
   reordonne en CSS plutot qu'en deplaçant le hook : c'est sans risque sur une
   page de paiement, et ça resiste aux mises a jour de l'extension. */
.shop .wc-proceed-to-checkout { display: flex; flex-direction: column; }
.shop .wc-proceed-to-checkout .checkout-button { order: 1; margin-bottom: 0; }
.shop .wc-proceed-to-checkout #wc-stripe-payment-request-button-separator { order: 2; }
.shop .wc-proceed-to-checkout #wc-stripe-payment-request-wrapper { order: 3; }