/* ============================================================
   EXTRATIME — Composants
   Un seul vocabulaire : bandeau, boutons, liens, compositions de
   couverture, cartes éditoriales, formulaires, lecteur, états.
   ============================================================ */

/* ---------------- Bandeau de prévisualisation ---------------- */

.preview-bar {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  display: flex;
  align-items: center;
  gap: var(--et-3);
  flex-wrap: wrap;
  padding: 7px var(--et-gutter);
  background: var(--et-accent);
  color: var(--et-accent-ink);
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.preview-bar .dot {
  width: 5px; height: 5px;
  background: var(--et-accent-ink);
  border-radius: 50%;
  flex: none;
}
.preview-bar a { text-decoration: underline; text-underline-offset: 3px; }
.preview-bar .spacer { margin-left: auto; }
@media (max-width: 640px) {
  .preview-bar .optional { display: none; }
  .preview-bar .spacer { margin-left: 0; }
}

/* ---------------- Marque ---------------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -0.055em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .plus { color: var(--et-accent); font-size: 1.15em; line-height: 0; }
/* Placeholder assumé : remplacer .wordmark par <img> dès le logo officiel fourni. */
/* Logo image (réglages du CMS) : hauteur alignée sur le mot-symbole, jamais déformé. */
.wordmark-logo { align-items: center; }
.wordmark-logo img { display: block; height: clamp(22px, 2.6vw, 30px); width: auto; max-width: min(180px, 40vw); object-fit: contain; }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--et-ink) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--et-ink-line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--et-5);
  height: 72px;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 26px);
  margin-inline: auto;
}
.desktop-nav a {
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--et-on-ink-soft);
  padding: var(--et-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--et-fast) var(--et-ease), border-color var(--et-fast) var(--et-ease);
  white-space: nowrap;
}
.desktop-nav a:hover { color: var(--et-on-ink); }
.desktop-nav a[aria-current="page"] {
  color: var(--et-on-ink);
  border-bottom-color: var(--et-accent);
}
.nav-actions { display: flex; align-items: center; gap: var(--et-2); margin-left: auto; }
.desktop-nav + .nav-actions { margin-left: 0; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--et-ink-line);
  cursor: pointer;
}
.menu-toggle:hover { border-color: var(--et-accent); }

/* Menu mobile : plein écran, piège de focus géré en JS. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  padding: var(--et-5) var(--et-gutter) var(--et-8);
  background: var(--et-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav .mobile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--et-4); }
.mobile-nav .mobile-links { margin-top: var(--et-7); display: grid; gap: 2px; }
.mobile-nav .mobile-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--et-4);
  padding: var(--et-4) 0;
  border-bottom: 1px solid var(--et-ink-line);
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(26px, 8vw, 40px);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.mobile-nav .mobile-links a[aria-current="page"] { color: var(--et-accent); }
.mobile-nav .mobile-links .idx { font: 400 var(--et-label)/1 var(--et-font-mono); letter-spacing: 0.16em; color: var(--et-on-ink-soft); }
.mobile-nav .mobile-foot { margin-top: auto; padding-top: var(--et-7); display: grid; gap: var(--et-4); }

@media (max-width: 1040px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-actions { margin-left: auto; }
}

/* ---------------- Boutons et liens ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--et-2);
  min-height: 44px;
  padding: var(--et-3) var(--et-5);
  font-family: var(--et-font-mono);
  font-size: var(--et-label-lg);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--et-fast) var(--et-ease), color var(--et-fast) var(--et-ease),
              border-color var(--et-fast) var(--et-ease), transform var(--et-fast) var(--et-ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-accent { background: var(--et-accent); color: var(--et-accent-ink); }
.btn-accent:hover { background: color-mix(in srgb, var(--et-accent) 82%, #fff); }

.btn-ghost { border-color: currentColor; color: inherit; opacity: 0.92; }
.btn-ghost:hover { background: currentColor; color: var(--surface, var(--et-ink)); opacity: 1; }

.btn-solid { background: var(--on-surface, var(--et-on-ink)); color: var(--surface, var(--et-ink)); }
.btn-solid:hover { background: var(--et-accent); color: var(--et-accent-ink); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: inherit; }

.btn-sm { min-height: 38px; padding: var(--et-2) var(--et-4); font-size: var(--et-label); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--et-2);
  min-height: 36px;
  font-family: var(--et-font-mono);
  font-size: var(--et-label-lg);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: border-color var(--et-fast) var(--et-ease), color var(--et-fast) var(--et-ease);
  white-space: nowrap;
}
.text-link svg { width: 14px; height: 14px; transition: transform var(--et-fast) var(--et-ease); }
.text-link:hover { color: var(--et-accent); border-bottom-color: var(--et-accent); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------------- En-tête de section ---------------- */

.section-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--et-5);
  margin-bottom: clamp(26px, 3.5vw, 48px);
}
.section-top .eyebrow { margin-bottom: var(--et-4); }
@media (max-width: 720px) {
  .section-top { display: block; }
  .section-top .text-link { margin-top: var(--et-4); }
}

/* ---------------- Compositions de couverture ----------------
   Aucune photographie officielle n'a été fournie. Ces champs
   typographiques tiennent la place exacte du futur visuel et
   sont explicitement légendés comme tels. */

.cover {
  position: relative;
  /* La typographie des couvertures se règle sur la largeur de la
     couverture elle-même (cqi), jamais sur celle du viewport : une
     même carte est correcte en 1 colonne comme en 4. */
  container-type: inline-size;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 1.8vw, 26px);
  background: var(--cover-bg, #131311);
  color: var(--cover-fg, var(--et-paper));
  isolation: isolate;
}
/* Trame sérigraphique : donne de la matière sans image externe. */
.cover::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cover-fg, #fff) 7%, transparent) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--cover-tint, var(--et-accent)) 26%, transparent) 0%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.cover::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--cover-bg, #000) 78%, transparent) 100%);
}
.cover .cover-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--et-3);
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.86;
}
.cover .cover-index {
  position: absolute;
  right: -0.06em;
  top: 0.1em;
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(88px, 52cqi, 300px);
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--cover-fg, #fff) 30%, transparent);
  pointer-events: none;
  user-select: none;
}
.cover .cover-words {
  position: relative;
  font-family: var(--et-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.055em;
  line-height: 0.88;
  font-size: clamp(17px, 8.5cqi, 54px);
  margin-block: auto var(--et-3);
  max-width: 92%;
  text-wrap: balance;
}
.cover .cover-caption {
  position: relative;
  font-family: var(--et-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  max-width: 34ch;
}

/* ---- Couverture photographique ----
   L'image est en noir et blanc avec un léger voile d'encre : les
   compositions gardent une seule matière quelle que soit la source.
   La pastille « SAMPLE IMAGE » reste visible : jamais de photo présentée
   comme celle d'un invité réel. */
.cover-img {
  position: absolute; inset: 0;
  z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform var(--et-slow) var(--et-ease);
}
.cover.has-img { --cover-fg: var(--et-paper); color: var(--et-paper); padding-bottom: calc(clamp(14px, 1.8vw, 26px) + 28px); }
.cover.has-img::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 3px),
    radial-gradient(110% 80% at 80% 0%, color-mix(in srgb, var(--cover-tint, var(--et-accent)) 18%, transparent) 0%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.cover.has-img::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.28) 0%, rgba(10,10,10,0.04) 38%, rgba(10,10,10,0.9) 100%);
}
.cover.has-img .cover-index { -webkit-text-stroke-color: rgba(245,244,239,0.22); }
.cover.has-img .cover-words { text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
a:hover > .cover .cover-img, a:focus-visible > .cover .cover-img { transform: scale(1.035); }
.cover-chip {
  position: absolute;
  left: clamp(14px, 1.8vw, 26px);
  bottom: clamp(12px, 1.6vw, 20px);
  z-index: 2;
  padding: 4px 7px;
  border: 1px solid rgba(245,244,239,0.32);
  background: rgba(10,10,10,0.35);
  color: rgba(245,244,239,0.82);
  font-family: var(--et-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}

/* Variantes : quatre climats distincts, pas quatre fois la même carte. */
.cover.v-performance { --cover-bg: #0E0F0C; --cover-tint: var(--et-accent); }
.cover.v-identity    { --cover-bg: var(--et-paper); --cover-fg: var(--et-ink); --cover-tint: #8FB0FF; }
.cover.v-culture     { --cover-bg: #13110F; --cover-tint: #E9A23B; }
.cover.v-next        { --cover-bg: #0B0F12; --cover-tint: #6ED2D8; }

.cover-16x10 { aspect-ratio: 16 / 10; }
.cover-16x9  { aspect-ratio: 16 / 9; }
.cover-4x3   { aspect-ratio: 4 / 3; }
.cover-9x16  { aspect-ratio: 9 / 16; }

/* Pastille lecture posée sur une couverture */
.cover-play {
  position: absolute;
  right: clamp(12px, 1.6vw, 20px);
  bottom: clamp(12px, 1.6vw, 20px);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--et-accent);
  color: var(--et-accent-ink);
  transition: transform var(--et-fast) var(--et-ease);
}
.cover-play svg { width: 16px; height: 16px; }
a:hover > .cover .cover-play, a:focus-visible > .cover .cover-play { transform: scale(1.08); }

/* ---------------- Cartes éditoriales ---------------- */

.card-meta {
  display: flex; align-items: center; gap: var(--et-2);
  flex-wrap: wrap;
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
}
.card-meta .sep { opacity: 0.4; }

/* Épisode : la couverture reste dominante, le texte respire dessous. */
/* Colonne unique minmax(0, 1fr) : un mot très long ne peut pas élargir la carte au-delà de sa cellule. */
.episode-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--et-4); align-content: start; }
.episode-card .cover { transition: transform var(--et-slow) var(--et-ease); }
.episode-card a:hover .cover { transform: scale(1.012); }
.episode-card h3 { font-size: var(--et-d4); }
.episode-card p { color: var(--on-surface-soft, var(--et-on-ink-soft)); font-size: var(--et-t3); max-width: 46ch; }
.episode-card .card-actions { display: flex; gap: var(--et-4); flex-wrap: wrap; margin-top: var(--et-1); }

/* Invité : portrait carré + monogramme, jamais une photo inventée. */
.guest-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--et-4); align-content: start; }
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--et-ink-raise);
  border: 1px solid var(--et-ink-line);
  overflow: hidden;
}
.surface-paper .portrait { background: var(--et-paper-dim); border-color: var(--et-paper-line); }
.portrait .initials {
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: color-mix(in srgb, currentColor 22%, transparent);
}
.portrait.has-img { border: 0; display: block; }
.portrait.has-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) contrast(1.05);
  transition: transform var(--et-slow) var(--et-ease);
}
.portrait.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.55) 100%); pointer-events: none; }
a:hover .portrait.has-img img { transform: scale(1.03); }
.portrait .pending {
  position: absolute; left: var(--et-3); bottom: var(--et-3); right: var(--et-3);
  font-family: var(--et-font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.6;
}

/* Clip : format vertical, pensé pour le pouce. */
.clip-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--et-3); align-content: start; }
/* Les clips sont verticaux et souvent en 2 colonnes sur mobile :
   leur typo doit descendre plus bas que celle des épisodes. */
.clip-card .cover-words { font-size: clamp(13px, 11cqi, 32px); }
.clip-card .cover-index { font-size: clamp(64px, 38cqi, 170px); }
/* La légende ne doit jamais passer sous la pastille de lecture. */
.clip-card .cover-caption { max-width: 60%; }
.story-card .cover-words { font-size: clamp(16px, 7.5cqi, 42px); }
/* Story : ratio paysage, chapô lisible. La couverture porte le titre. */
.story-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--et-3); align-content: start; }
.story-card p { color: var(--on-surface-soft, var(--et-on-ink-soft)); font-size: var(--et-t3); }
.story-card .text-link { margin-top: var(--et-2); justify-self: start; }

/* Grilles d'archive */
.grid-3 { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: clamp(14px, 1.8vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sur tablette, 4 clips verticaux deviennent des bandes trop étroites. */
@media (max-width: 1040px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Ticker ---------------- */

.ticker {
  border-block: 1px solid var(--surface-line, var(--et-ink-line));
  overflow: hidden;
  padding-block: var(--et-3);
}
.ticker .track {
  display: flex;
  gap: var(--et-6);
  width: max-content;
  animation: ticker 38s linear infinite;
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
}
.ticker .track span { display: inline-flex; align-items: center; gap: var(--et-6); white-space: nowrap; }
.ticker .track b { color: var(--et-accent); font-weight: 400; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker .track { animation: none; width: 100%; overflow-x: auto; }
}

/* ---------------- Filtres et barre d'outils ---------------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-4);
  flex-wrap: wrap;
  padding-block: var(--et-4);
  border-block: 1px solid var(--surface-line, var(--et-ink-line));
}
.filters { display: flex; gap: var(--et-2); flex-wrap: wrap; }
.filter {
  min-height: 36px;
  padding: var(--et-2) var(--et-4);
  border: 1px solid var(--surface-line, var(--et-ink-line));
  border-radius: var(--et-radius-pill);
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
  cursor: pointer;
  transition: all var(--et-fast) var(--et-ease);
}
.filter:hover { color: var(--on-surface, var(--et-on-ink)); border-color: currentColor; }
.filter[aria-pressed="true"] {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-ink);
}
.searchbox { position: relative; flex: 1 1 260px; max-width: 360px; }
.searchbox input {
  width: 100%;
  min-height: 42px;
  padding: var(--et-2) 40px var(--et-2) var(--et-4);
  background: transparent;
  border: 1px solid var(--surface-line, var(--et-ink-line));
  color: inherit;
  font-family: var(--et-font-mono);
  font-size: var(--et-label-lg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.searchbox input::placeholder { color: var(--on-surface-soft, var(--et-on-ink-soft)); }
.searchbox svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.6; pointer-events: none; }

.result-count { font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-soft, var(--et-on-ink-soft)); }

/* ---------------- États ---------------- */

.empty {
  border: 1px dashed var(--surface-line, var(--et-ink-line));
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
  display: grid;
  gap: var(--et-4);
  justify-items: center;
}
.empty h3 { font-family: var(--et-font-display); font-weight: 800; font-size: var(--et-d4); text-transform: uppercase; letter-spacing: -0.04em; }
.empty p { color: var(--on-surface-soft, var(--et-on-ink-soft)); font-size: var(--et-t3); max-width: 48ch; }

.notice {
  display: flex;
  gap: var(--et-3);
  padding: var(--et-4);
  border-left: 2px solid var(--et-accent);
  background: color-mix(in srgb, var(--et-accent) 7%, transparent);
  font-size: var(--et-t3);
  color: var(--on-surface-soft, var(--et-on-ink-soft));
}
.notice strong { color: var(--on-surface, var(--et-on-ink)); font-weight: 600; }

.tag {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 var(--et-3);
  border: 1px solid var(--surface-line, var(--et-ink-line));
  border-radius: var(--et-radius-pill);
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
}

/* ---------------- Lecteur ---------------- */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  overflow: hidden;
  background: var(--et-ink-raise);
  border: 1px solid var(--et-ink-line);
}
.player.vertical { aspect-ratio: 9 / 16; max-width: 420px; }
/* Le poster tient la place exacte de l'image officielle ; la mention
   d'indisponibilité s'ancre en bas sans écraser la composition. */
.player-poster { position: absolute; inset: 0; }
.player-poster .cover { position: absolute; inset: 0; aspect-ratio: auto; }
.player-poster .cover .cover-words { margin-block: var(--et-4) auto; }
.player-poster .cover .cover-caption { display: none; }
.player-poster .cover.has-img .cover-words { font-size: clamp(22px, 7cqi, 64px); }
.player-poster .cover.has-img::after { background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.1) 45%, rgba(10,10,10,0.75) 100%); }
.player-poster .disc {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: color-mix(in srgb, var(--et-ink) 62%, transparent);
  color: var(--et-on-ink);
}
.player-state {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  justify-items: start;
  gap: var(--et-2);
  padding: var(--et-6) var(--et-5) var(--et-5);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--et-ink) 94%, transparent) 46%);
}

/* Sous 760px il n'y a pas assez de hauteur pour superposer : le poster
   et l'état se succèdent au lieu de se chevaucher. */
@media (max-width: 760px) {
  .player, .player.vertical { aspect-ratio: auto; display: block; max-width: none; }
  .player-poster { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .player.vertical .player-poster { aspect-ratio: 4 / 5; }
  .player-state {
    align-self: auto;
    padding: var(--et-5);
    background: var(--et-ink-raise);
    border-top: 1px solid var(--et-ink-line);
  }
}
/* Vidéo officielle intégrée (CMS) : l'iframe garde toujours son ratio, y compris sur mobile. */
.player.player-embed { aspect-ratio: 16 / 9; display: block; background: var(--et-ink); }
/* Clip vertical intégré (Shorts) : ratio 9:16 conservé à toutes les largeurs. */
.player.player-embed.vertical { aspect-ratio: 9 / 16; max-width: 420px; }
.player .player-note {
  border-top: 1px solid var(--et-ink-line);
  padding-top: var(--et-3);
  color: var(--et-accent);
}
.player .player-note:focus-visible { outline-offset: 6px; }
.player .disc {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--et-ink-line);
  color: var(--et-on-ink-soft);
}
.player .disc svg { width: 20px; height: 20px; }
.player-state strong { font-family: var(--et-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--et-t1); color: var(--et-on-ink); }
.player-state p { font-size: var(--et-t3); color: var(--et-on-ink-soft); max-width: 44ch; }

.timestamps { display: grid; gap: 0; }
.timestamps li { display: flex; gap: var(--et-4); align-items: baseline; padding-block: var(--et-3); border-bottom: 1px solid var(--surface-line, var(--et-ink-line)); }
.timestamps .t { font-family: var(--et-font-mono); font-size: var(--et-label-lg); letter-spacing: 0.1em; color: var(--et-accent); flex: none; }
.timestamps .l { font-size: var(--et-t3); }

/* ---------------- Formulaires ---------------- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--et-5); }
.form-field { display: grid; gap: var(--et-2); }
.form-field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-field { grid-column: 1 / -1; } }

.form-field label {
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--et-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--surface-line, var(--et-ink-line));
  color: inherit;
  font-family: inherit;
  font-size: var(--et-t2);
  transition: border-color var(--et-fast) var(--et-ease);
}
.form-field textarea { min-height: 128px; resize: vertical; }
.form-field select { appearance: none; padding-right: var(--et-6); cursor: pointer; }
.form-field .select-wrap { position: relative; }
.form-field .select-wrap svg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; opacity: 0.6; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-bottom-color: currentColor; }
.form-field :focus-visible { outline-offset: 2px; }

.form-field .error {
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-danger, var(--et-danger-on-ink));
  min-height: 14px;
}
.form-field[data-invalid="true"] input,
.form-field[data-invalid="true"] select,
.form-field[data-invalid="true"] textarea { border-bottom-color: var(--on-surface-danger, var(--et-danger-on-ink)); }

/* Le consentement est une phrase à lire, pas une étiquette de champ :
   il échappe au traitement mono/majuscules des labels. */
.form-field .form-consent,
.form-consent {
  display: flex;
  gap: var(--et-3);
  align-items: flex-start;
  font-family: var(--et-font-text);
  font-size: var(--et-t3);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
  cursor: pointer;
}
.form-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--et-accent); }

/* Résultat de soumission : jamais « envoyé » sans service connecté. */
.form-result { display: none; }
.form-result[data-state="shown"] { display: block; }

/* Pot de miel anti-spam : hors flux et hors tabulation. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- Newsletter ---------------- */

.newsletter-form { display: flex; gap: var(--et-2); flex-wrap: wrap; }
.newsletter-form .field { flex: 1 1 220px; }
.newsletter-form input {
  width: 100%;
  min-height: 46px;
  padding: var(--et-3);
  background: transparent;
  border: 1px solid var(--surface-line, var(--et-ink-line));
  color: inherit;
  font-family: inherit;
  font-size: var(--et-t2);
}

/* ---------------- Dialogue ---------------- */

.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--et-4);
  background: rgba(0, 0, 0, 0.72);
}
.dialog[data-open="true"] { display: flex; }
.dialog-panel {
  width: min(540px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--et-paper);
  color: var(--et-ink);
  display: grid;
  gap: var(--et-4);
}
.dialog-panel h2 { font-family: var(--et-font-display); font-weight: 800; font-size: var(--et-d4); text-transform: uppercase; letter-spacing: -0.04em; }
.dialog-panel p { font-size: var(--et-t3); color: var(--et-on-paper-soft); }

/* ---------------- Footer ---------------- */

.site-footer { border-top: 1px solid var(--et-ink-line); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--et-6);
  padding-block: clamp(40px, 5vw, 72px);
}
.footer-col h4 {
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--et-on-ink-soft);
  margin-bottom: var(--et-4);
  font-weight: 400;
}
.footer-col ul { display: grid; gap: var(--et-2); }
.footer-col a { font-size: var(--et-t3); color: var(--et-on-ink-soft); transition: color var(--et-fast) var(--et-ease); overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--et-on-ink); }
.footer-col .disabled { font-size: var(--et-t3); color: #6B695F; cursor: not-allowed; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--et-4);
  flex-wrap: wrap;
  padding-block: var(--et-5);
  border-top: 1px solid var(--et-ink-line);
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--et-on-ink-soft);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-col.brand-col { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--et-6); } }