/* Page replay — s'appuie exclusivement sur les tokens Kermony (aucune couleur en dur). */
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--violet); }
.cadre { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-5); }

.bandeau { border-bottom: var(--bw-hair) solid var(--rule); }
.bandeau__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { height: 32px; width: auto; display: block; }

.entete { padding: var(--s-8) 0 var(--s-7); max-width: 860px; }
.entete h1 { margin: var(--s-4) 0 var(--s-5); }
.entete .lede { margin-bottom: var(--s-6); }
.meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); border-top: var(--bw-hair) solid var(--rule); padding-top: var(--s-5); }
.meta li { font-size: 14px; }
.meta span { display: block; font-size: 10.5px; letter-spacing: var(--ls-small-caps); text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--s-1); }

.grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); padding-bottom: var(--s-8); }

.formulaire { background: var(--paper-2); padding: var(--s-7); }
.formulaire h2 { margin-bottom: var(--s-3); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); margin: var(--s-6) 0; }
.champs .large { grid-column: 1 / -1; }
.k-field > input { font-size: 16px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.case { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 13.5px; line-height: 1.5; margin-bottom: var(--s-4); cursor: pointer; }
.case input { margin-top: 3px; accent-color: var(--violet); width: 16px; height: 16px; flex: none; }
.message { font-size: 13.5px; color: var(--rouge); margin: var(--s-4) 0; }
#envoyer { margin-top: var(--s-4); }
#envoyer[disabled] { opacity: .5; cursor: wait; }

.lecteur .caption { margin-bottom: var(--s-3); }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.programme { border-top: var(--bw-accent) solid var(--violet); padding-top: var(--s-5); align-self: start; }
.chapitres { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-5); }
.chapitres li { border-bottom: var(--bw-hair) solid var(--rule); }
.chapitres button { all: unset; display: grid; grid-template-columns: 56px 1fr; gap: var(--s-3); width: 100%; padding: 10px 0; font-size: 14px; line-height: 1.4; }
.chapitres .tc { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); font-feature-settings: "tnum" 1; padding-top: 1px; }
.chapitres button:not([disabled]) { cursor: pointer; }
.chapitres button:not([disabled]):hover .titre, .chapitres button:focus-visible .titre { color: var(--violet); }
.chapitres button:focus-visible { outline: 1.5px solid var(--violet); outline-offset: 2px; }
.chapitres .actif .titre { color: var(--violet); }

.rdv { border-top: var(--bw-hair) solid var(--rule); padding: var(--s-7) 0 var(--s-8); max-width: 760px; }
.rdv p:last-child { margin-top: var(--s-3); }

.pied { background: var(--paper-2); padding: var(--s-6) 0 var(--s-7); }
.pied details { margin-bottom: var(--s-5); font-size: 13.5px; }
.pied summary { cursor: pointer; font-weight: 600; margin-bottom: var(--s-3); }
.pied .caption { margin-bottom: var(--s-2); }

@media (max-width: 860px) {
  .grille { grid-template-columns: 1fr; gap: var(--s-7); }
  .entete { padding: var(--s-7) 0 var(--s-6); }
  .entete h1 { font-size: 36px; }
  .formulaire { padding: var(--s-5); }
  .champs { grid-template-columns: 1fr; }
}
.nowrap { white-space: nowrap; }