/* F4IOZ — Découverte's history episodes (« Le poste à galène », « Les premiers pas de la TSF »): the sets' words,
   what moves by itself (a pendulum, a spark's flicker, a wave flowing), the controls of the mini-games (the whisker's
   pad, the dial, the coil's taps, the coherer's key and tap, the Morse code, the timeline), light and dark. Only .hs-…
   classes. With « reduced motion », nothing moves on its own. */

/* ------------------------------------------------------------ the sets' words */
.hs-etiq { font: 800 15px system-ui, sans-serif; fill: #2B3A4C; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3.5px; stroke-linejoin: round; }
.hs-etiq.clair { fill: #EAF2FF; stroke: #0B1626; }
.hs-etiq.petit { font-size: 12.5px; font-weight: 700; }
.hs-fleche { stroke: #2B3A4C; stroke-width: 1.3; stroke-dasharray: 3 3; fill: none; }
.hs-annee { font: 800 46px Georgia, 'Times New Roman', serif; fill: #F2D58A; opacity: .85; }
.hs-equation { font: italic 600 12px Georgia, 'Times New Roman', serif; fill: #2A2420; }
.hs-feuille { font: 700 12px ui-monospace, Menlo, Consolas, monospace; fill: #2A2420; letter-spacing: 1px; }
.hs-top { font: 900 16px system-ui, sans-serif; fill: #FFF6C0; letter-spacing: 2px; }
.hs-cadran-mot { font: 800 13px Georgia, serif; fill: #5A3A20; }
.hs-ono { font-style: italic; color: var(--tu-or, #E0A400); font-weight: 700; }

/* ------------------------------------------------------------ what moves by itself */
.hs-a-pendule { animation: hs-balance 1.6s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes hs-balance { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.hs-a-etincelle { animation: hs-crepite .09s steps(2) infinite; }
@keyframes hs-crepite { from { filter: none; } to { filter: brightness(1.6); } }
.hs-a-flux { animation: hs-flux 1.2s linear infinite; }
@keyframes hs-flux { to { stroke-dashoffset: -36; } }
.hs-secoue .sc-svg { animation: hs-secoue .45s ease-in-out; }
@keyframes hs-secoue { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.hs-cible { cursor: crosshair; touch-action: none; }
.hs-cible:focus-visible { outline: 3px solid var(--tu-or, #E0A400); outline-offset: 2px; }

/* ------------------------------------------------------------ the mini-games' controls */
.hs-manche { margin: 0; font-size: 14px; font-weight: 800; color: var(--tu-or, #B07A00); }
.hs-etat { margin: 0; font-size: 15px; font-weight: 700; min-height: 1.4em; }
.hs-pave, .hs-fin { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-fl { min-width: 44px; min-height: 40px; font-size: 16px; }
.hs-calcul { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.5; }
.hs-portee { margin: 0; font-size: 13px; color: var(--text-dim); }
.hs-cadran input { accent-color: #C9A14A; }
.hs-prises { margin: 0; padding: 6px 10px 8px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hs-prises legend { font-size: 12.5px; font-weight: 700; color: var(--text-dim); padding: 0 4px; }
.hs-prise { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; font-weight: 700; }
.hs-manip, .hs-tape { font-size: 17px; }
.hs-tape { border-style: dashed; }
.hs-etiq-bande { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.hs-bande { height: 34px; border-radius: 8px; background: repeating-linear-gradient(90deg, #F6EED8 0 18px, #EFE4C6 18px 19px); border: 1px solid #C8B48E; overflow: hidden; }
.hs-bande svg { display: block; width: 100%; height: 100%; }
.hs-encre { stroke: #1E2A44; stroke-width: 8; stroke-linecap: round; fill: none; }
.hs-code { margin: 0; display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 40px; }
.hs-point { width: 16px; height: 16px; border-radius: 50%; background: var(--tu-or, #E0A400); }
.hs-trait { width: 50px; height: 16px; border-radius: 8px; background: var(--tu-or, #E0A400); }
.hs-decode { margin: 0; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 3px; }
.hs-lettre { font-size: 20px; }
.hs-table { font-size: 13px; }
.hs-table summary { cursor: pointer; color: var(--text-dim); }
.hs-table-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 2px 10px; margin-top: 6px; }
.hs-vf { padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tu-violet, #A98BFF) 14%, var(--panel-2)), var(--panel-2)); border: 1px solid var(--border-strong); }
.hs-vf-compte { margin: 0 0 6px; color: var(--tu-or, #B07A00); font-size: 14px; }
.hs-vf-texte { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }

/* ------------------------------------------------------------ the timeline */
.hs-frise { list-style: none; margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid color-mix(in srgb, var(--tu-or, #E0A400) 60%, transparent); }
.hs-carte { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-strong); }
.hs-carte::before { content: ''; position: absolute; left: -27px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--tu-or, #E0A400); border: 3px solid var(--panel); }
.hs-carte-date { font-weight: 800; color: var(--tu-or, #B07A00); font-size: 13.5px; }
.hs-carte-texte { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.hs-carte-fl { display: flex; gap: 4px; }
.hs-carte-fl .hs-fl { min-width: 40px; min-height: 36px; font-size: 14px; }
.hs-carte.juste { border-color: var(--tu-vert, #2E9E5B); background: color-mix(in srgb, var(--tu-vert, #2E9E5B) 14%, var(--panel-2)); }
.hs-carte.faux { border-color: var(--tu-rouge, #D94040); background: color-mix(in srgb, var(--tu-rouge, #D94040) 12%, var(--panel-2)); }

@media (max-width: 700px) {
  .hs-carte { grid-template-columns: minmax(0, 1fr) auto; }
  .hs-carte-date { grid-column: 1 / -1; }
  .hs-decode { font-size: 18px; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-a-pendule, .hs-a-etincelle, .hs-a-flux, .hs-secoue .sc-svg { animation: none; }
}

/* ------------------------------------------------------------ « Apprendre » as small cards, coming in one by one */
.tu-apprendre .hs-fiche { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--tu-or, #E0A400) 12%, var(--panel-2)), var(--panel-2));
  border: 1px solid var(--border-strong); border-left: 5px solid var(--tu-or, #E0A400); animation: hs-arrive .5s ease-out both; }
.tu-apprendre .hs-fiche:nth-child(3n+2) { border-left-color: var(--tu-ciel, #4FC3FF); background: linear-gradient(135deg, color-mix(in srgb, var(--tu-ciel, #4FC3FF) 12%, var(--panel-2)), var(--panel-2)); }
.tu-apprendre .hs-fiche:nth-child(3n) { border-left-color: var(--tu-rose, #FF6FAE); background: linear-gradient(135deg, color-mix(in srgb, var(--tu-rose, #FF6FAE) 10%, var(--panel-2)), var(--panel-2)); }
.tu-apprendre .hs-fiche h2 { margin-top: 0; }
.tu-apprendre .hs-fiche > :last-child { margin-bottom: 0; }
.tu-apprendre .hs-fiche .jeu-astuce { margin: 0; }
.tu-apprendre .hs-fiche:nth-child(2) { animation-delay: .08s; } .tu-apprendre .hs-fiche:nth-child(3) { animation-delay: .16s; } .tu-apprendre .hs-fiche:nth-child(4) { animation-delay: .24s; }
.tu-apprendre .hs-fiche:nth-child(5) { animation-delay: .32s; } .tu-apprendre .hs-fiche:nth-child(6) { animation-delay: .4s; } .tu-apprendre .hs-fiche:nth-child(n+7) { animation-delay: .48s; }
@keyframes hs-arrive { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tu-apprendre .hs-fiche { animation: none; } }

/* ------------------------------------------------------------ a flash of success */
.hs-flash .sc-cadre::after, .tu-scene.hs-flash::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, rgba(255, 246, 192, .85), rgba(255, 201, 77, .35) 40%, rgba(255, 201, 77, 0) 70%); animation: hs-flash .6s ease-out forwards; }
@keyframes hs-flash { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hs-flash .sc-cadre::after, .tu-scene.hs-flash::after { animation: none; display: none; } }