/* Palette lifted from only-one's globals.css so this page reads as part of the
   same site: near-black ground, off-white text, the pale green-grey accent.
   Red appears in exactly one place -- the on-air dot -- because it is a signal,
   not a brand colour. */
:root {
  color-scheme: dark;
  --ground: #0b0b0c;
  --surface: #18181a;
  --line: #2a2a2d;
  --ink: #f2f2f2;
  --ink-soft: #9a9a9e;
  --accent: #9bb4b2;
  --accent-faint: #e0f2f1;
  --onair: #d8434b;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: clamp(1.25rem, 4vw, 2.5rem) 1.25rem 2.5rem;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.masthead {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

h1 {
  margin: 0;
  /* Chantal est un script au feutre : ni majuscules forcées, ni interlettrage
     élargi — les deux servaient à donner de la présence à Montserrat et
     défigureraient une écriture manuscrite. La taille compense. */
  font-family: 'chantal', var(--font);
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
}

.tagline {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  text-wrap: balance;
}

.masthead p { margin: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--onair);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .badge .dot { animation: none; }
}

.stage {
  /* Le cadre suit les proportions du flux (voir followAspectRatio), et sa
     largeur est bornée par la hauteur disponible : un carré aussi large que la
     page dépasserait l'écran et obligerait à défiler pour se voir. */
  --ratio: 1.7778;
  transition: width 0.25s ease;
  width: min(100%, 1100px, calc(72vh * var(--ratio)));
  aspect-ratio: var(--ratio);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: cover;
}

/* The idle loop sits behind the overlay, dimmed: it should read as ambience,
   not as the thing you came to watch. */
#idle {
  position: absolute;
  inset: 0;
  filter: brightness(0.4);
}

#idle[hidden], .badge[hidden], .overlay[hidden], video[hidden], button[hidden] { display: none; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.error { color: #f0a3a3; max-width: 40ch; }

/* The service tiles.
   The picture is the square -- one shape that crops any social card without
   favouring a landscape or a portrait source -- and the text lies over it.
   min(45%, 14rem) rather than a breakpoint: two per row on a phone, four on a
   desktop, decided by the width actually available instead of by a guess at
   what device is holding it. */
.links {
  width: min(100%, 1100px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 14rem), 1fr));
  gap: 1.1rem;
}

.links a {
  position: relative;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.links a:hover, .links a:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.links .media { position: absolute; inset: 0; }

.links .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.links a:hover .media img { transform: scale(1.04); }

/* Sits at the foot of the square, over a gradient dark enough to stay readable
   on any image. Visible by default -- see the hover rule below for why. */
.links .body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.75rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.55) 55%, transparent);
  color: #fff;
  transition: opacity 0.25s ease;
}

.links .label { font-weight: 600; letter-spacing: 0.02em; }
.links .note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }

/* Hidden until pointed at -- but ONLY where pointing is a thing. A touch screen
   has no hover, so the same rule there would hide the titles for good, with no
   gesture that brings them back. The default above is the readable one and this
   is the opt-in, so a device we failed to anticipate shows the text rather than
   swallowing it. Keyboard focus reveals it too: a tile reached by Tab has to
   say what it is. */
@media (hover: hover) and (pointer: fine) {
  .links .body { opacity: 0; }
  .links a:hover .body, .links a:focus-visible .body { opacity: 1; }
}

/* Letters breathe on their own clocks -- duration, delay and depth are drawn
   per letter in app.js, so a word never pulses as a block. Their opacity
   multiplies with the panel's, so the reveal above rides on top of it rather
   than fighting it. */
.links .word { display: inline-block; }

.links .letter {
  display: inline-block;
  animation: letter-breathe var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes letter-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: var(--dim, 0.3); }
}

/* Motion is decoration here; the text must be readable without it. */
@media (prefers-reduced-motion: reduce) {
  .links .letter { animation: none; }
}

/* The "how does this work" box.
   A native <dialog>: the browser owns the backdrop, Escape, focus capture and
   handing focus back. Sized to the text rather than the screen, so it reads as
   an aside on a phone instead of taking the page hostage. */
.follow {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

button.quiet {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}

button.quiet:hover, button.quiet:focus-visible { color: var(--accent-faint); }
button.quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#guide {
  width: min(100% - 2rem, 34rem);
  max-height: min(90vh, 44rem);
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
}

#guide::backdrop { background: rgba(0, 0, 0, 0.72); }

#guide h2 {
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#guide ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#guide li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
}

#guide li strong { font-weight: 600; font-size: 0.95rem; }
#guide li span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

#guide-closing {
  margin: 1.3rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.guide-actions {
  margin: 1.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

#guide-subscribe {
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#guide-subscribe:hover, #guide-subscribe:focus-visible { background: var(--accent); color: var(--ground); }
#guide-subscribe:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


#subscribe {
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#subscribe:hover, #subscribe:focus-visible { background: var(--accent); color: var(--ground); }
#subscribe:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Everything centred in a column: two legal links, then the copyright under
   them. The status readout that used to sit on the right is gone -- it told a
   visitor "hors direct", which is an internal state wearing the clothes of
   information. It lives on <body data-state> now. */
footer {
  width: min(100%, 1100px);
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; }
.legal a { color: var(--ink-soft); text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: var(--accent); text-decoration: underline; }

.copyright {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* What the player is actually doing. Kept quiet -- it matters when something
   is wrong, and should not compete with the rest when everything is fine. */
.status {
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-soft);
  opacity: 0.5;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}