/* Chemins d'eau / Water Ways — styles
   Palette extraite du design Figma :
   - vert  #1BD57B (fond principal)
   - teal  #004042 (texte / fonds sombres)
   - gris  #D9D9D9 (panneaux clairs)
*/

@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Fragment+Mono:ital@0;1&display=swap');

:root {
  --green: #1BD57B;
  --green-deep: #16B968;
  --teal: #004042;
  --grey: #D9D9D9;
  --white: #ffffff;

  /* Polices exactes du fichier Figma : Faculty Glyphic (titres, bouton Écoutez)
     et Fragment Mono (FR/EN, Informations). */
  --font-display: 'Faculty Glyphic', 'Century Gothic', system-ui, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --radius: 1.25rem;
  --focus-ring: 3px solid var(--teal);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-display);
  color: var(--teal);
  background: var(--green);
  overflow-x: hidden;
}

body.theme-dark {
  color: var(--green);
  background: var(--teal);
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

/* Utility: visually hidden but available to assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-2);
  background: var(--grey);
  color: var(--teal);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  z-index: 100;
  transition: top 0.15s ease;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.skip-link:focus {
  top: var(--space-2);
}

/* Focus visibility everywhere */
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Sur fond sombre (panneaux et pages autonomes), l'anneau teal serait dessiné
   en teal sur teal : contraste 1:1, donc invisible — aucun repère de focus au
   clavier. On passe au vert, qui donne 5,99:1 contre le fond. */
.info-dialog a:focus-visible,
.info-dialog button:focus-visible,
.info-dialog input:focus-visible,
.theme-dark a:focus-visible,
.theme-dark button:focus-visible {
  outline: 3px solid var(--green);
}

/* Le conteneur du panneau reçoit le focus à l'ouverture (voir info-dialog.js) :
   c'est ce qui fait annoncer son titre par les lecteurs d'écran, mais ce n'est
   pas une commande, donc pas d'anneau. Les boutons et liens gardent le leur. */
.info-dialog:focus {
  outline: none;
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--space-3) var(--space-2) 8rem;
  text-align: center;
}

.home-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Language switch — grand cercle englobant FR|EN, divisé par un trait,
   avec un petit cercle qui entoure la langue active, comme dans les esquisses */
.lang-switch {
  position: relative;
  display: flex;
  width: 6.1rem;
  height: 6.1rem;
  border: 2px solid var(--teal);
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  background: var(--grey);
  margin-block: var(--space-2) var(--space-4);
}

.lang-switch::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--teal);
}

.lang-switch a {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--teal);
}

/* Petit cercle autour de la langue active : touche le grand cercle d'un côté
   et le trait vertical de l'autre, comme sur les esquisses. */
.lang-switch a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--teal);
  border-radius: 50%;
  pointer-events: none;
}

.lang-switch a:not([aria-current="page"]):hover::before,
.lang-switch a:not([aria-current="page"]):focus-visible::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--teal);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}

/* Wordmark */
.wordmark {
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.01em;
  font-size: clamp(3.25rem, 16vw, 5.5rem);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

/* Main listen/pause control */
.listen-btn {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2.75rem);
  text-transform: none;
  border: 2px solid var(--teal);
  cursor: pointer;
  border-radius: 1.15rem;
  background: var(--grey);
  color: var(--teal);
  padding: 1.1rem 3rem;
  min-width: 16rem;
  min-height: 3rem;
  transition: background 0.4s ease, color 0.4s ease, transform 0.15s ease;
}
.listen-btn:hover { transform: translateY(-2px); }
.listen-btn:active { transform: translateY(0); }

/* Une fois la lecture entamée, le fond s'assombrit pour servir d'écran
   à la visualisation façon vague/onde d'eau (canvas) dessinée par-dessus.
   Repère neutre (data-started) plutôt qu'aria-pressed : le libellé visible
   Écoutez / Pause dit déjà l'état, et aria-pressed faisait annoncer
   « Pause, enfoncé » aux lecteurs d'écran (WCAG 4.1.2). */
.listen-btn[data-started] {
  background: var(--teal);
  color: var(--grey);
}

@media (prefers-reduced-motion: reduce) {
  .listen-btn { transition: none; }
}

/* Titre de la piste en cours — visible à l'écran (pas seulement annoncé aux
   lecteurs d'écran), pour que tout le monde sache ce qui joue, pas
   seulement "3 / 6". */
.track-title {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  margin: var(--space-2) 0 0;
  text-align: center;
}
.track-title[hidden] { display: none; }
.track-title:not([hidden]) { animation: player-reveal 0.45s ease both; }

/* Lien contextuel vers la transcription de la piste en cours */
.transcript-jump {
  display: inline-block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.transcript-jump[hidden] { display: none; }
.transcript-jump:not([hidden]) { animation: player-reveal 0.45s ease both; }

/* Barre de navigation dans la piste (seek) */
.seek-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 22rem;
  margin-top: var(--space-2);
}
.seek-row[hidden] { display: none; }
.seek-row:not([hidden]) { animation: player-reveal 0.45s ease both; }

.time-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  min-width: 2.6rem;
  text-align: center;
}

.seek-bar {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--teal);
  outline-offset: 4px;
  cursor: pointer;
}
.seek-bar::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--grey);
  border: 2px solid var(--teal);
}
.seek-bar::-moz-range-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--grey);
  border: 2px solid var(--teal);
}
.seek-bar::-moz-range-track {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--teal);
}

/* Navigation entre pistes (précédent / compteur / suivant) */
.track-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.track-nav[hidden] { display: none; }
.track-nav:not([hidden]) { animation: player-reveal 0.45s ease both; animation-delay: 0.08s; }

@keyframes player-reveal {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .seek-row:not([hidden]),
  .track-nav:not([hidden]),
  .track-title:not([hidden]),
  .transcript-jump:not([hidden]) {
    animation: none;
  }
}

.track-counter {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: var(--teal);
  color: var(--green);
  padding: 0.55rem 1.4rem;
  min-width: 4.5rem;
}

.nav-arrow {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: transparent;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav-arrow:hover { background: var(--teal); color: var(--green); }

/* Informations entry link */
.info-link {
  margin-top: var(--space-4);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  border: 2px solid var(--teal);
  border-radius: 0;
  padding: 0.75rem 2rem;
  text-decoration: none;
  background: transparent;
}
.info-link:hover,
.info-link:focus-visible { background: var(--teal); color: var(--green); }

/* Accès aux transcriptions depuis le panneau Informations. Même traitement
   que la liste de liens externes plus bas, pour une cohérence de section.
   Le survol épaissit le soulignement plutôt que de baisser l'opacité : une
   opacité réduite ferait tomber le contraste sous le seuil AA. */
.transcript-entry {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
}
.transcript-entry a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.transcript-entry a:hover {
  text-decoration-thickness: 2px;
}

/* Informations page */
.info-page {
  align-items: stretch;
  text-align: left;
  max-width: 40rem;
  margin-inline: auto;
}

.info-header {
  position: relative;
}

.info-header .wordmark {
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  text-align: center;
  margin-bottom: var(--space-3);
}

/* Le bouton de fermeture est épinglé au coin de l'écran plutôt que posé dans
   l'en-tête : les transcriptions sont longues, et le lien contextuel « Voir la
   transcription » peut ouvrir le panneau directement au milieu du texte. Sans
   ça, il faudrait remonter tout en haut pour fermer. Le fond opaque garantit
   que le texte qui défile dessous reste lisible. */
.close-btn {
  position: fixed;
  top: var(--space-3);
  right: var(--space-2);
  z-index: 10;
  flex: none;
  font-family: inherit;
  background: var(--teal);
  border: 2px solid var(--green);
  color: var(--green);
  border-radius: 999px;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.close-btn:hover,
.close-btn:focus-visible { background: var(--green); color: var(--teal); }

/* Le glyphe × a des métriques verticales asymétriques dans cette police :
   sans ce léger ajustement, il apparaît décalé vers le bas dans le cercle. */
.close-btn span {
  display: inline-block;
  transform: translate(0.02em, -0.12em);
}

.illustration-card {
  margin: var(--space-3) auto var(--space-4);
  border: 2px solid var(--green);
  border-radius: 1.8rem;
  padding: var(--space-3);
  overflow: hidden;
}

.illustration {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 251 / 567;
  transform-origin: bottom center;
  /* État de départ : masquée derrière un front légèrement ondulé (pas une
     ligne droite ni un zigzag marqué), prête à « pousser » du bas vers le
     haut (voir .grow-in). */
  clip-path: polygon(0% 100%, 0.0% 98.7%, 6.7% 99.7%, 13.3% 100%, 20.0% 100%, 26.7% 100%, 33.3% 99.4%, 40.0% 98.3%, 46.7% 97.2%, 53.3% 96.3%, 60.0% 95.6%, 66.7% 95.5%, 73.3% 95.9%, 80.0% 96.7%, 86.7% 97.7%, 93.3% 98.8%, 100.0% 99.8%, 100% 100%);
  transform: scaleY(0.97);
}

/* Révélation façon pousse de plante : un front irrégulier remonte à un
   rythme naturel (accélère puis ralentit), avec un léger étirement vertical
   pour évoquer une tige qui se déplie plutôt qu'un balayage mécanique. */
.illustration.grow-in {
  animation: growUp 1400ms linear forwards;
}

/* Chaque point du front avance à sa propre vitesse (pas de progression
   uniforme) : le mouvement reste visible et irrégulier sur toute la durée,
   plutôt que de se figer après un démarrage rapide. */
@keyframes growUp {
  25% {
    clip-path: polygon(0% 100%, 0.0% 80.0%, 6.7% 81.0%, 13.3% 81.5%, 20.0% 81.2%, 26.7% 80.3%, 33.3% 79.0%, 40.0% 77.4%, 46.7% 76.0%, 53.3% 74.9%, 60.0% 74.5%, 66.7% 74.8%, 73.3% 75.7%, 80.0% 77.1%, 86.7% 78.7%, 93.3% 80.1%, 100.0% 81.1%, 100% 100%);
    transform: scaleY(0.982);
  }
  50% {
    clip-path: polygon(0% 100%, 0.0% 54.7%, 6.7% 55.4%, 13.3% 55.4%, 20.0% 54.7%, 26.7% 53.5%, 33.3% 51.9%, 40.0% 50.4%, 46.7% 49.2%, 53.3% 48.6%, 60.0% 48.6%, 66.7% 49.3%, 73.3% 50.6%, 80.0% 52.1%, 86.7% 53.6%, 93.3% 54.8%, 100.0% 55.4%, 100% 100%);
    transform: scaleY(0.992);
  }
  75% {
    clip-path: polygon(0% 100%, 0.0% 26.8%, 6.7% 27.0%, 13.3% 26.6%, 20.0% 25.7%, 26.7% 24.4%, 33.3% 23.1%, 40.0% 21.9%, 46.7% 21.2%, 53.3% 21.0%, 60.0% 21.4%, 66.7% 22.4%, 73.3% 23.7%, 80.0% 25.0%, 86.7% 26.1%, 93.3% 26.8%, 100.0% 27.0%, 100% 100%);
    transform: scaleY(0.998);
  }
  100% {
    clip-path: polygon(0% 100%, 0.0% 0%, 6.7% 0%, 13.3% 0%, 20.0% 0%, 26.7% 0%, 33.3% 0%, 40.0% 0%, 46.7% 0%, 53.3% 0%, 60.0% 0%, 66.7% 0%, 73.3% 0%, 80.0% 0%, 86.7% 0%, 93.3% 0%, 100.0% 0%, 100% 100%);
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .illustration { clip-path: none; transform: none; }
  .illustration.grow-in { animation: none; }
}

.info-content {
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--grey);
}
.info-content p { margin: 0 0 var(--space-3); }

.placeholder-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--green);
  opacity: 0.9;
  border-left: 3px solid var(--green);
  padding-left: var(--space-2);
}

/* Section headings within Informations (Crédits, Pour plus d'informations) */
.info-heading {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
  margin: var(--space-4) 0 var(--space-2);
}

/* Les titres de transcription servent de cibles d'ancrage : le lien « Voir la
   transcription » y amène directement, et sans ça le titre se cale pile contre
   le bord supérieur. scroll-margin-top décale seulement le point d'arrêt du
   défilement, sans ajouter d'espace à la mise en page. S'applique aussi bien
   au panneau qu'à la page autonome atteinte par un lien direct. */
.info-content h2[id^="transcript-"] {
  scroll-margin-top: var(--space-4);
}

.credits-block {
  font-size: 1rem;
  line-height: 1.5;
}
.credits-block p { margin: 0 0 0.4rem; }

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
}
.link-list a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  /* Les adresses n'ont pas d'espace : sans ceci, à 320 px de large (zoom
     400 %), ontarioparks.ca/park/rideauriver ne peut pas passer à la ligne
     et force un défilement horizontal (WCAG 1.4.10). */
  overflow-wrap: anywhere;
}
.link-list a:hover,
.link-list a:focus-visible { opacity: 0.75; }

/* Repère visuel des liens externes (ouverture dans un nouvel onglet).
   La flèche est décorative (aria-hidden) : l'information est déjà donnée
   aux lecteurs d'écran par le texte masqué « (ouvre dans un nouvel onglet) ». */
.external-icon {
  font-family: var(--font-mono);
  margin-inline-start: 0.3em;
}

.info-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--green);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--green);
  opacity: 0.9;
}
.info-footer p { margin: 0 0 var(--space-2); }
.info-footer a { text-decoration: underline; }

@media (min-width: 40rem) {
  .page { padding-block: var(--space-5); }
}

/* Boîte de dialogue Informations : ouverte par-dessus la page d'accueil sans
   la recharger, pour que la piste en cours continue de jouer pendant la
   consultation. */
.info-dialog {
  padding: 0;
  border: none;
  margin: 0;
  inset: 0;
  /* Unités de viewport plutôt que des pourcentages : un <dialog> en top
     layer n'a pas toujours un bloc englobant à hauteur définie, et
     width/height:100% peuvent alors s'effondrer (observé sur Safari/iOS). */
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: var(--teal);
  color: var(--green);
  overflow-y: auto;
}

.info-dialog[open] {
  display: block;
}

.info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.info-dialog .wordmark,
.info-dialog .info-page {
  color: var(--green);
}

/* Focus clavier sur FR / EN. Le contour générique (outline) est dessiné à
   l'extérieur du lien, donc coupé par l'overflow: hidden du grand cercle :
   il était invisible. Au focus, on remplit plutôt le petit cercle en teal et
   la lettre passe en gris — même contraste que l'état normal, inversé. */
.lang-switch a:focus-visible {
  outline: none;
  color: var(--grey);
}
.lang-switch a:focus-visible::before,
.lang-switch a:not([aria-current="page"]):focus-visible::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: var(--teal);
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

/* Mode contraste élevé de Windows (forced-colors) : le navigateur y supprime
   les couleurs de fond, donc le cercle rempli disparaîtrait. On y rétablit
   un contour, dessiné vers l'intérieur pour ne pas être coupé par le cercle. */
@media (forced-colors: active) {
  .lang-switch a:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: -6px;
  }
}