/* La Terre tourne — épisode 2 du Petit labo d'astronomie.
   Thème sombre « espace » hérité de l'épisode 1, en plus rond et plus joueur (public : 5 ans).
   Zéro dépendance. Compat mobiles anciens : pas d'inset, repli @supports pour aspect-ratio. */

:root {
  --bg: #0b1020;
  --bg2: #0e1530;
  --surface: #121a33;
  --surface-2: #1c2540;
  --border: #26304f;
  --text: #e9edf8;
  --muted: #9aa5c3;
  --sun: #ffcf5c;
  --sun-deep: #ff9f1c;
  --earth: #5aa7ff;
  --night: #16335e;
  --rose: #ff6b9d;
  --teal: #46c2a5;
  --violet: #a98bff;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 72% -8%, #182450 0%, rgba(11, 16, 32, 0) 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(169, 139, 255, 0.10) 0%, rgba(11, 16, 32, 0) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

/* ---------- entête ---------- */

.site-header { max-width: 900px; margin: 0 auto; padding: 38px 20px 22px; text-align: center; }
.kicker {
  margin: 0; color: var(--sun); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.episode {
  display: inline-block; margin-left: 8px; padding: 1px 10px; letter-spacing: .08em;
  border: 1px solid var(--sun-deep); border-radius: 999px; color: var(--sun);
  font-size: .72rem; vertical-align: 1px;
}
.site-header h1 { margin: .22em 0 .3em; font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.1; }
.tagline { margin: 0 auto; max-width: 62ch; color: var(--muted); }

main { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }

.panel {
  background: linear-gradient(180deg, var(--surface), var(--bg2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hint { color: var(--muted); font-weight: 400; font-size: .78em; }
.muted { color: var(--muted); }

/* ---------- grille du simulateur ---------- */

/* comme l'épisode 2 : d'abord l'heure chez nous et là-bas (avec la recherche
   dessous), puis la vue depuis l'espace à droite */
.sim-grid { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 16px; }
@media (max-width: 960px) { .sim-grid { grid-template-columns: 1fr; } }
.home-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* la recherche vit sous les deux cartes-horloges */
.search-panel { padding: 12px 14px 14px; }
.search-title { font-weight: 700; margin: 0 2px 8px; }
.search-panel .search-row { margin: 0; }

/* la frise du temps, sur toute la largeur de la page */
.time-panel { margin-top: 16px; padding: 14px 18px 16px; }
.time-panel .time-control { margin-top: 0; }

/* le jeu : sur grand écran, la Terre en 3D et la carte à plat côte à côte —
   le globe un peu plus étroit (il passe en mode compact : Terre bien pleine),
   la carte plus large et plus haute (16/10) pour équilibrer les hauteurs */
.game-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.game-grid .map-panel { margin-top: 0; }
@media (min-width: 961px) {
  .game-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .game-grid .globe-panel { grid-column: 1; grid-row: 1; }
  .game-grid .map-panel { grid-column: 2; grid-row: 1 / span 2; }
  .game-grid .game-side { grid-column: 1; grid-row: 2; }
  .game-grid .ratio-map { aspect-ratio: 16 / 10; }
  @supports not (aspect-ratio: 1 / 1) {
    .game-grid .ratio-map { height: min(36vw, 430px); }
  }
}
/* les boutons de lieux sont posés sous la Terre, dans le ciel étoilé du
   globe (la place y est, ordinateur comme téléphone) ; le cadre des heures
   vit dans son bloc .game-side — sous le globe sur ordinateur, entre le
   globe et la carte sur mobile. Rien ne mord sur les vues. */
.game-grid .globe-stage > .view-chips {
  position: absolute; left: 50%; bottom: 10px;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  margin: 0; flex-wrap: nowrap;
  /* en absolu, left:50% ne laisse qu'une moitié de largeur au shrink-to-fit :
     max-content garde les deux boutons sur une seule ligne, bien centrés */
  width: -webkit-max-content; width: max-content;
  max-width: calc(100% - 12px);
}
.game-grid .globe-stage > .view-chips .view-chip {
  /* garde-fou pour les très longs noms (« Papouasie… ») : on coupe avec … */
  max-width: 11em; overflow: hidden; text-overflow: ellipsis;
}
.game-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.game-side .globe-frame {
  position: static; z-index: auto; margin: 0; pointer-events: auto;
  background: #0d1531;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 960px) {
  /* sur téléphone, le cadre des heures et les boutons s'intercalent entre le
     globe 3D et la carte à plat — et le tout tient encore sur un écran */
  .game-grid .globe-panel { order: 1; }
  .game-grid .game-side { order: 2; }
  .game-grid .map-panel { order: 3; }
  .map-panel { display: flex; flex-direction: column; }
  .map-panel .canvas-wrap { order: -1; }
  .map-panel .canvas-title { margin: 12px 4px 6px; }
}

.canvas-panel { padding: 12px; }
.canvas-title { font-size: .88rem; color: var(--muted); margin: 2px 4px 10px; }
.canvas-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #070b17; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-map { aspect-ratio: 2 / 1; }
@media (max-width: 700px) { .ratio-map { aspect-ratio: 16 / 10; } }
/* repli pour navigateurs sans aspect-ratio (Safari iOS < 15) : hauteurs fixes */
@supports not (aspect-ratio: 1 / 1) {
  .ratio-square { height: min(92vw, 620px); }
  .ratio-map { height: min(46vw, 520px); }
  @media (max-width: 700px) { .ratio-map { height: min(58vw, 300px); } }
}
.canvas-wrap canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }

/* touch-action: none jusqu'aux conteneurs (le choix de l'épisode 2) : le geste
   posé sur une vue appartient TOUJOURS au glisser ou à la pince — un doigt un
   peu de travers ne part jamais en défilement de page, même depuis le cadre
   arrondi, les boutons de lieux ou le cadre des heures rangés sous le disque.
   Les vues sont plafonnées en hauteur : il reste de la page autour pour
   défiler. */
.canvas-wrap, .globe-stage { touch-action: none; }
#pole-view, #globe3d-view, #map-view { touch-action: none; cursor: grab; }
#pole-view:active, #globe3d-view:active, #map-view:active { cursor: grabbing; }

.hidden { display: none; }

/* la scène du globe : le disque et, par-dessus, le cadre des heures et les
   pastilles de vue (sur mobile, ces deux-là descendent sous le disque) */
.globe-stage { position: relative; }

/* petit rappel « attrape la Terre » superposé au globe */
.drag-hint {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  max-width: calc(100% - 20px); text-align: center;
  background: rgba(7, 11, 23, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: .85rem; color: var(--text);
  pointer-events: none; opacity: 1; transition: opacity .4s;
}
.drag-hint.hide { opacity: 0; }

/* les deux boutons de lieux, posés sous le disque : « chez nous » et la
   destination — le globe vole vers le lieu, la Terre et les horloges ne
   bougent pas */
.view-chips {
  position: absolute; left: 50%; bottom: 10px;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 6; max-width: calc(100% - 12px);
}
.view-chip {
  border-radius: 999px; padding: 7px 13px; font-size: .82rem; font-weight: 700;
  background: rgba(7, 11, 23, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border); color: var(--muted);
  white-space: nowrap;
}
/* le lieu qu'on regarde, impossible à rater : pastille pleine dorée */
.view-chip.active { border-color: var(--sun); color: #241903; background: var(--sun); }
@media (max-width: 480px) {
  .view-chip { font-size: .76rem; padding: 6px 10px; }
}

/* sur mobile, on dégage le disque : le cadre des heures et les pastilles de
   vue quittent l'incrustation et se rangent sous le globe, dans le flux */
@media (max-width: 640px) {
  .globe-stage { display: flex; flex-direction: column; }
  .globe-stage > .globe-frame {
    position: static; z-index: auto; margin: 10px 0 0; pointer-events: auto;
    background: #0d1531;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .globe-stage > .view-chips {
    position: static; -webkit-transform: none; transform: none;
    margin: 10px 0 2px; max-width: 100%; flex-wrap: wrap; justify-content: center;
  }
  .globe-stage > .view-chips .view-chip { font-size: .82rem; padding: 8px 14px; }
  .globe-stage .drag-hint { bottom: 12px; }
}

/* ---------- barre d'heures collante (mobile) ---------- */

/* sur téléphone, les cartes-horloges sortent vite de l'écran : dès qu'elles
   disparaissent, cette fine barre fixée en haut garde « l'heure ici, l'heure
   là-bas » sous les yeux pendant qu'on joue (scénarios, curseur, glissers).
   main.js la montre/cache avec un IntersectionObserver ; sans lui, elle
   reste simplement masquée. */
.sticky-times { display: none; }
@media (max-width: 640px) {
  .sticky-times {
    display: flex; align-items: baseline; justify-content: center;
    flex-wrap: wrap; gap: 2px 16px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    padding: 7px 10px 8px;
    padding-top: calc(7px + env(safe-area-inset-top, 0px));
    font-size: .88rem;
    background: rgba(7, 11, 23, .9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
    opacity: 0; visibility: hidden; pointer-events: none;
    -webkit-transform: translateY(-100%); transform: translateY(-100%);
    transition: opacity .25s, visibility .25s, transform .25s;
  }
  .sticky-times.show { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; }
  .sticky-times .frame-row { padding-left: 6px; }
  .sticky-times .frame-row strong { margin-left: 4px; padding-left: 0; font-size: 1rem; }
  .sticky-times .frame-name { max-width: 8em; }
  .sticky-times .frame-diff { display: none; }
}

/* ---------- le grand curseur du temps ---------- */

.globe-panel .canvas-title { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.spin-btn { margin-left: auto; padding: 5px 12px; font-size: .8rem; border-radius: 999px; }

.time-control { margin-top: 12px; padding: 0 4px 2px; }
.time-readout { font-size: 1.05rem; margin-bottom: 4px; }
.time-readout strong {
  /* rose comme tout ce qui est « France » (cadre, carte, vignette) */
  font-size: 1.55rem; color: var(--rose); font-variant-numeric: tabular-nums;
  margin: 0 2px 0 4px;
}
.period { color: var(--muted); }

/* le curseur raconte lui-même la journée : nuit → aube → jour → crépuscule → nuit */
#time-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block; width: 100%; height: 44px; margin: 2px 0 0;
  background: transparent; cursor: pointer;
}
#time-slider::-webkit-slider-runnable-track {
  height: 16px; border-radius: 9px; border: 1px solid var(--border);
  background: linear-gradient(90deg,
    #0e1a38 0%, #16335e 20%, #f2924c 28.5%, #8ec2f0 38%,
    #cfe7ff 50%, #8ec2f0 62%, #f2924c 78.5%, #16335e 87%, #0e1a38 100%);
}
#time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px; height: 34px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff7d6, var(--sun) 55%, var(--sun-deep));
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 16px rgba(255, 207, 92, .75), 0 2px 6px rgba(0, 0, 0, .5);
}
#time-slider::-moz-range-track {
  height: 16px; border-radius: 9px; border: 1px solid var(--border);
  background: linear-gradient(90deg,
    #0e1a38 0%, #16335e 20%, #f2924c 28.5%, #8ec2f0 38%,
    #cfe7ff 50%, #8ec2f0 62%, #f2924c 78.5%, #16335e 87%, #0e1a38 100%);
}
#time-slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff7d6, var(--sun) 55%, var(--sun-deep));
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 16px rgba(255, 207, 92, .75), 0 2px 6px rgba(0, 0, 0, .5);
}
.slider-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; margin-top: 4px; }

/* ---------- les trois vignettes-maisons ---------- */

.vignettes { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.vignette { padding: 10px 13px 12px; border-top: 3px solid var(--place, var(--border)); }
.vignette-guadeloupe { --place: #46c2a5; }
.vignette-france { --place: #ff6b9d; }
.vignette-bali { --place: #a98bff; }

.vignette-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vignette-name { margin: 0; font-size: 1.18rem; line-height: 1.2; }
.home-chip {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rose); border: 1px solid var(--rose); border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; vertical-align: 3px; white-space: nowrap;
}
.day-badge { flex: none; font-size: .78rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.day-badge.tomorrow { background: #2b1e52; color: #cabcff; border: 1px solid #5f43b3; }
.day-badge.yesterday { background: #0e3a33; color: #7fe0c8; border: 1px solid #2f8f7a; }

.vignette-body { display: flex; gap: 14px; align-items: center; }
.clock-slot { flex: none; width: 72px; height: 72px; }
.clock { width: 100%; height: 100%; display: block; }
.clock-face { fill: #0d1428; stroke: var(--place, var(--border)); stroke-width: 3; }
.clock-tick { stroke: rgba(233, 237, 248, .38); stroke-width: 2; stroke-linecap: round; }
.clock-num { fill: var(--muted); font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; }
.hand { stroke: var(--text); stroke-linecap: round; }
.hand-hour { stroke-width: 5.5; }
.hand-min { stroke-width: 3; stroke: var(--place, var(--text)); }
.clock-center { fill: var(--text); }

.clock-text { min-width: 0; }
.clock-digital { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.clock-period { color: var(--muted); font-size: .92rem; }
.activity { color: var(--muted); font-size: .88rem; margin-top: 5px; }

.sky-wrap { position: relative; margin-top: 9px; height: 86px; border-radius: 10px; overflow: hidden; background: #070b17; }
.sky-wrap canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }

/* ---------- boutons-scénarios + histoire ---------- */

.scenario-panel { margin-top: 16px; padding: 14px 16px 16px; }
.scenario-title {
  font-weight: 700; font-size: 1.05rem; margin: 2px 2px 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
}
.scenario-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .scenario-buttons { grid-template-columns: 1fr 1fr; } }

.scn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 72px; padding: 10px 8px; border-radius: 16px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem; text-align: center; line-height: 1.25;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.scn:hover { filter: brightness(1.2); }
.scn:active { transform: translateY(1px); }
.scn.active { box-shadow: 0 0 0 3px rgba(255, 207, 92, .55); }
.scn-emoji { font-size: 1.6rem; line-height: 1; }
.scn-sub { font-weight: 400; font-size: .76rem; opacity: .8; }
.scn-reveil { background: linear-gradient(180deg, #4a3a0d, #332807); border-color: var(--sun-deep); color: var(--sun); }
.scn-midi { background: linear-gradient(180deg, #1c3a63, #132644); border-color: #3f6db3; color: #bcd9ff; }
.scn-dodo { background: linear-gradient(180deg, #2b1e52, #1c1433); border-color: #5f43b3; color: #cabcff; }
.scn-bali-lever { background: linear-gradient(180deg, #4a1d33, #2d1122); border-color: var(--rose); color: #ffb3cd; }

.story { margin-top: 12px; }
.story-invite { margin: 4px 2px; color: var(--muted); }
.story-line { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0; font-size: 1.03rem; }
.story-chip {
  flex: none; padding: 3px 11px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  white-space: nowrap;
}
.story-chip-guadeloupe { background: rgba(70, 194, 165, .14); color: var(--teal); border: 1px solid rgba(70, 194, 165, .5); }
.story-chip-france { background: rgba(255, 107, 157, .13); color: var(--rose); border: 1px solid rgba(255, 107, 157, .5); }
.story-chip-bali { background: rgba(169, 139, 255, .14); color: var(--violet); border: 1px solid rgba(169, 139, 255, .5); }
.story-text { margin: 2px 0 0; }

/* ---------- carte du monde ---------- */

.map-panel { margin-top: 16px; }
.map-caption { margin: 10px 4px 0; font-size: .96rem; color: #c9d2ea; }
.map-caption strong { color: var(--text); }
.map-caption.muted { font-size: .83rem; color: var(--muted); }

/* ---------- note aux parents (repliée) ---------- */

.parents { margin-top: 22px; }
.parents summary {
  cursor: pointer; padding: 14px 20px; font-weight: 700; color: var(--sun);
  list-style: none;
}
.parents summary::-webkit-details-marker { display: none; }
.parents summary::before { content: '▸ '; }
.parents[open] summary::before { content: '▾ '; }
.parents ul { margin: 0; padding: 0 24px 18px 2.6em; }
.parents li { margin: 8px 0; color: #c9d2ea; font-size: .93rem; }
.parents strong { color: var(--text); }

/* ---------- boutons génériques ---------- */

button {
  font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 14px; cursor: pointer;
  transition: filter .15s, transform .05s;
}
button:hover { filter: brightness(1.25); }
button:active { transform: translateY(1px); }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 2px;
}

/* ---------- pied de page ---------- */

.site-footer {
  max-width: 1180px; margin: 40px auto 0; padding: 22px 20px 34px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: .88rem;
}
.site-footer a { color: var(--sun); }

/* ---------- petits écrans ---------- */

@media (max-width: 480px) {
  .story-intro { padding: 16px 18px; font-size: 1.04rem; }
  .clock-slot { width: 70px; height: 70px; }
  .clock-digital { font-size: 1.55rem; }
  .time-readout strong { font-size: 1.35rem; }
  .scn { min-height: 64px; }
}

/* ---------- accessibilité : mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .drag-hint { transition: none; }
  .scn, button { transition: none; }
  .sticky-times { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- recherche de lieux ---------- */

.search-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 2px 10px; }
.search-box { position: relative; flex: 1 1 240px; min-width: 220px; }
.search-box input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: #0a0f22; border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.search-box input:focus { border-color: #3b4c86; box-shadow: 0 0 0 3px rgba(90, 167, 255, .25); }
.search-box input::placeholder { color: var(--muted); }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  max-height: 280px; overflow-y: auto;
}
.search-results button {
  display: flex; width: 100%; align-items: baseline; gap: 8px; text-align: left;
  background: transparent; border: none; border-radius: 9px; padding: 8px 10px; font-size: .98rem;
}
.search-results button:hover, .search-results button:focus-visible { background: var(--surface-2); }
.search-results .sub { color: var(--muted); font-size: .8rem; margin-left: auto; white-space: nowrap; }
.search-results .none { color: var(--muted); padding: 8px 10px; font-size: .9rem; }
.search-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.search-chips button {
  font-size: .8rem; padding: 4px 11px; border-radius: 999px;
  background: #0a0f22; border: 1px solid var(--border); color: var(--muted);
}
.search-chips button:hover { color: var(--text); border-color: #3b4c86; filter: none; }

/* bouton retirer de la carte invitée */
.card-close {
  flex: none; width: 26px; height: 26px; padding: 0; line-height: 1; font-size: .85rem;
  border-radius: 50%; color: var(--muted);
}
.card-close:hover { color: var(--text); }

/* ---------- cadre des deux heures, posé sur le globe ---------- */

.globe-frame {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(7, 11, 23, .68);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 11px; pointer-events: none;
  font-size: .85rem;
}
.frame-row { display: flex; align-items: baseline; gap: 6px; padding-left: 7px; }
.frame-row strong { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 1rem; padding-left: 10px; }
.frame-row-home { border-left: 3px solid var(--rose); }
.frame-row-sel { border-left: 3px solid var(--sun); }
.frame-row-home strong { color: var(--rose); }
.frame-row-sel strong { color: var(--sun); }
.frame-name { color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-diff { color: var(--muted); font-size: .76rem; text-align: center; border-top: 1px dashed var(--border); padding-top: 4px; }

/* puce du lieu choisi dans l'histoire */
.story-chip-selected { background: rgba(255, 207, 92, .14); color: var(--sun); border: 1px solid rgba(255, 207, 92, .5); }

/* recherche posée dans le panneau carte */
.map-panel .search-row { margin: 0 2px 10px; }
/* les idées de voyage répliquées sous la carte, alignées à droite — sur
   grand écran seulement (sur téléphone, celles du haut suffisent) */
.map-panel .search-chips { margin: 10px 2px 0; justify-content: flex-end; }
@media (max-width: 960px) { .map-panel .search-chips { display: none; } }
.map-panel .canvas-title { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.map-panel .canvas-title span { flex: 1 1 260px; }

/* (sous 640 px, plus aucun cadre n'est incrusté sur une vue : inutile de le
   rapetisser — la règle mobile ci-dessus le grossit au contraire un peu) */

/* ---------- la boîte « pourquoi les fuseaux horaires ? » ---------- */

.explain-panel { margin-top: 16px; padding: 16px 20px 18px; }
.explain-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.explain-head h2 { margin: 0; font-size: 1.15rem; color: var(--sun); }
/* le résumé repliable ne sert que sur mobile : sur ordinateur il est masqué
   et main.js garde la boîte ouverte (le titre reste celui de .explain-head) */
.explain-summary { display: none; }
@media (max-width: 640px) {
  .explain-panel { padding: 4px 16px 6px; }
  .explain-panel[open] { padding-bottom: 16px; }
  .explain-summary { display: block; cursor: pointer; padding: 12px 4px; list-style: none; }
  .explain-summary::-webkit-details-marker { display: none; }
  .explain-summary::before { content: '▸ '; color: var(--sun); font-weight: 700; }
  .explain-panel[open] .explain-summary::before { content: '▾ '; }
  .explain-summary h2 { display: inline; margin: 0; font-size: 1.15rem; color: var(--sun); }
  .explain-summary .hint { display: block; margin: 3px 0 0 1.35em; font-size: .8rem; }
  /* sur mobile, le titre vit dans le résumé : celui de la rangée disparaît */
  .explain-head h2 { display: none; }
}
.listen-btn {
  margin-left: auto; border-radius: 999px; padding: 8px 16px; font-weight: 700;
  background: linear-gradient(180deg, #4a3a0d, #332807); border: 1px solid var(--sun-deep);
  color: var(--sun);
}
.listen-btn[aria-pressed="true"] { background: #243158; border-color: #3b4c86; color: var(--text); }
.voice-pick {
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--muted); background: #131c3f;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 12px; max-width: 230px;
}
.voice-pick:focus { outline: 2px solid var(--sun-deep); }
.voice-hint { margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
.explain-text p { margin: .55em 0; color: #c9d2ea; font-size: 1.02rem; line-height: 1.7; }
.explain-text strong { color: var(--text); }

/* l'en-tête du jeu : trouver l'heure dans les pays qu'on connaît */
.game-head { margin: 22px 4px 12px; }
.game-head h2 {
  margin: 0 0 4px; font-size: 1.15rem; color: var(--sun);
}
.game-head .hint { display: block; font-size: .88rem; }

/* ---------- lisibilité mobile : planchers de taille de texte ----------
   (section volontairement en fin de feuille : à spécificité égale, elle doit
   passer après les tailles de base déclarées plus haut) */

@media (max-width: 640px) {
  /* les tout petits textes remontent vers 12,5 px minimum — les hints des
     titres de canvas passent sur leur propre ligne */
  .canvas-title { font-size: .92rem; }
  .canvas-title .hint { display: block; margin-top: 2px; font-size: .8rem; }
  .slider-scale { font-size: .78rem; }
  .scn-sub { font-size: .8rem; }
  /* sous 640 px, le cadre des heures n'est plus incrusté sur une vue : il a
     la place de se lire confortablement */
  .globe-frame { font-size: .9rem; }
  .frame-row strong { font-size: 1.05rem; }
  /* sauf dans la barre collante du haut, plus compacte */
  .sticky-times { font-size: .88rem; }
  .sticky-times .frame-row strong { font-size: 1rem; }
}