/* Socle lisibilite. Le decor reste un fond. Le copy est du HTML.
   Tokens lus, jamais renommes : --veil --fg --fg-mute --bg --accent --accent-fg
   --fs-md --fs-sm --lh-body --lh-loose --header-h */

html {
  font-size: 100%;
  overflow-wrap: break-word;
}

html body {
  font-size: max(16px, var(--fs-md, 1rem));
  overflow-wrap: break-word;
  word-wrap: break-word;
}

html .t-body {
  font-size: max(16px, var(--fs-md, 1rem));
  line-height: max(1.5, var(--lh-body, 1.5));
  color: var(--fg);
  max-width: 66ch;
}

/* Plancher meta 14 px. typo.css pose 12 px : on remonte, on ne descend pas. */
html .t-meta,
html .t-caption,
html small,
html figcaption {
  font-size: max(14px, var(--fs-sm, 0.875rem));
}

html button,
html .btn {
  font-size: max(14px, var(--fs-sm, 0.875rem));
}

.t-body,
.t-caption,
.sur-decor,
p,
li {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.t-headline,
.t-display,
.t-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

/* Couleur solide. CSS ne calcule pas la luminance WCAG :
   mesurer via SocleContraste, tokens couleurs.css.
   Si un enfant baisse --fg-mute sous 4,5, JS le signale. */
.t-mute {
  color: var(--fg-mute);
}

.t-faint {
  color: var(--fg-mute);
}

/* Overlay HTML au-dessus du canvas / de la photo.
   Voile --veil, mesure 60-70 ch, jamais un gris 40 % sur photo. */
.sur-decor {
  position: relative;
  z-index: 2;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--fg);
  background-color: var(--veil);
  max-width: 66ch;
  padding: 1.1rem 1.25rem;
}

.sur-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veil);
  pointer-events: none;
  z-index: 0;
}

.sur-decor > * {
  position: relative;
  z-index: 1;
}

/* Interdit : blanc a 40 % sur photo. On force des solides.
   Sauf .btn : --fg sur a.btn tue le verbe (specificite 0,1,1 > .btn). */
.sur-decor :is(h1, h2, h3, h4, p, a, li, button, label, small, figcaption):not(.btn, .btn--accent, .btn--ghost) {
  color: var(--fg);
}
.sur-decor a.btn:not(.btn--ghost),
.sur-decor .btn:not(.btn--ghost),
.sur-decor .btn--accent {
  color: var(--accent-fg);
}
.sur-decor a.btn.btn--ghost,
.sur-decor button.btn.btn--ghost,
.sur-decor .btn--ghost {
  color: var(--accent);
}

.sur-decor .t-mute {
  color: var(--fg-mute);
}

.sur-decor .t-body {
  color: var(--fg);
}

/* Logo fixe qui mange la 1re ligne (Lusion mobile). */
[data-beat]:not([data-flush]) > .sur-decor {
  padding-top: max(1.1rem, var(--header-h, 56px));
}

/* Titres / corps sur scene hors voile : halo papier, pas un gris 40 %. */
[data-scene] :is(.t-headline, .t-display, .t-body, [data-contrast]):not(.sur-decor, .sur-decor *),
[data-beat] :is(.t-headline, .t-display, .t-body, [data-contrast]):not(.sur-decor, .sur-decor *) {
  text-shadow: 0 1px 1px var(--veil), 0 0 16px var(--veil);
}

/* Canvas sous le copy. Position (fixed / sticky) = scene3d.
   Zones 3D cliquables : [data-canvas-hit]. */
canvas {
  pointer-events: none;
  z-index: 0;
}

canvas[data-canvas-hit] {
  pointer-events: auto;
}

[data-scene],
[data-beat] > canvas {
  z-index: 0;
}

[data-contrast] {
  position: relative;
  z-index: 2;
}

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

::-moz-selection {
  background-color: var(--accent);
  color: var(--accent-fg);
}

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

:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-contrast: more) {
  :root,
  html[data-theme="clair"],
  html[data-theme="sombre"] {
    --fg-mute: var(--fg);
    --fg-faint: var(--fg);
    --veil: var(--bg);
  }

  .sur-decor {
    background-color: var(--bg);
    color: var(--fg);
  }

  .sur-decor::before {
    background: var(--bg);
  }

  .t-mute,
  .t-faint,
  .t-caption,
  .t-meta,
  .sur-decor .t-mute {
    color: var(--fg);
  }

  html .t-body {
    font-size: max(18px, var(--fs-md, 1.125rem));
    line-height: max(1.6, var(--lh-loose, 1.6));
  }

  a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  [data-scene] :is(.t-headline, .t-display, .t-body, [data-contrast]),
  [data-beat] :is(.t-headline, .t-display, .t-body, [data-contrast]) {
    text-shadow: none;
  }

  ::selection,
  ::-moz-selection {
    background-color: Highlight;
    color: HighlightText;
  }

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

@media (forced-colors: active) {
  .sur-decor {
    background-color: Canvas;
    color: CanvasText;
  }

  .sur-decor::before {
    background: Canvas;
  }

  .t-body,
  .t-mute,
  .t-faint,
  .sur-decor :is(h1, h2, h3, h4, p, a, li, button, label):not(.btn, .btn--accent, .btn--ghost) {
    color: CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}