/* Naheumess · compte, voix, installation et expérience téléphone */

.sync-dot { width: 34px; justify-content: center; padding: .3rem 0; text-decoration: none; position: relative; }
.sync-dot::after { content: ''; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--bg); }
.sync-dot.ok::after { background: var(--good); }
.sync-dot.sync::after { background: var(--gold); animation: breathe 1s infinite; }
.sync-dot.err::after { background: var(--bad); }
.login-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 .2rem; }
.btn.login { background: var(--surface-solid); }
.btn.login svg { width: 20px; height: 20px; }
.acc-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.acc-row > div { display: grid; flex: 1; min-width: 160px; }
.acc-ava { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: 1.2rem; color: #1b1205; background: linear-gradient(135deg, var(--gold), var(--ember)); }
.chip.sync-ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.chip.sync-error { color: var(--bad); }
.voice-lang { display: grid; gap: .5rem; }
.voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.voice { position: relative; display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s; }
.voice input { position: absolute; opacity: 0; pointer-events: none; }
.voice.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
.voice:has(input:focus-visible) { outline: 3px solid var(--gold); }
.v-ava { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 900; background: var(--surface-solid); color: var(--arcane); }
.v-txt { display: grid; flex: 1; line-height: 1.25; }
.v-txt small { color: var(--muted); font-size: .8rem; }
.range output { font-family: var(--f-mono); font-size: .85rem; color: var(--muted); min-width: 4ch; }

/* Bouton flottant et pastilles : téléphone seulement */
.fab, .board-dots { display: none; }

/* Carte à glisser */
.flash.swipeable { touch-action: pan-y; transition: transform .25s cubic-bezier(.2, .8, .2, 1); cursor: grab; }
.flash[data-swipe='right'] { box-shadow: 0 0 0 3px var(--good), 0 0 40px -8px var(--good); }
.flash[data-swipe='left'] { box-shadow: 0 0 0 3px var(--bad), 0 0 40px -8px var(--bad); }
.flash-front { cursor: pointer; }

/* Mode fluide : pas de flou (coûteux sur téléphone), moins d'effets */
.lite .glass, .lite .rail, .lite #overlay, .lite .nav { backdrop-filter: none !important; }
.lite .glass { background: var(--surface-solid); }
.lite .glass::after, .lite .aurora { display: none; }
.lite .tile:hover, .lite .floor-node a[href]:hover { transform: none; }

@media (display-mode: standalone) {
  .rail { padding-top: max(1.4rem, env(safe-area-inset-top)); }
}

@media (max-width: 900px) {
  .rail { padding-top: max(.6rem, env(safe-area-inset-top)); z-index: 15; }
  .nav { background: color-mix(in srgb, var(--bg) 97%, transparent) !important; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .5); }
  .nav a { min-height: 54px; justify-content: center; border-radius: 14px; }
  .nav a span { font-size: 1.35rem; }
  .nav a[aria-current='page'] { background: color-mix(in srgb, var(--gold) 16%, transparent); }
  .nav a[aria-current='page']::before { display: none; }

  /* Exercices en plein écran : rail caché, barre d'action à portée de pouce */
  .in-play .rail { display: none; }
  .in-play main { padding-top: max(.6rem, env(safe-area-inset-top)); }
  .play-top { position: sticky; top: 0; z-index: 6; padding: .5rem 0; background: linear-gradient(var(--bg) 70%, transparent); }
  .step { padding: 1.1rem 1rem 0; }
  #fb > .actions, #fb > .grades {
    position: sticky; bottom: 0; z-index: 5; margin: .4rem -1rem 0; padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, var(--surface-solid) 28%);
  }
  .feedback .actions {
    position: sticky; bottom: 0; z-index: 5; margin: .4rem -1.2rem -1.1rem; padding: .9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom));
    border-radius: 0 0 18px 18px; background: linear-gradient(transparent, var(--surface-solid) 30%);
  }
  .btn { min-height: 48px; }
  .btn.big { min-height: 56px; }
  .grade { min-height: 64px; }
  .key { min-width: 52px; min-height: 48px; font-size: 1.2rem; }
  .btn-play { width: 72px; height: 72px; }
  .mic { width: 100%; justify-content: center; padding: 1.1rem; font-size: 1.15rem; border-radius: 20px; }
  textarea { font-size: 1.15rem; }
  .flash { min-height: 230px; }
  .target { font-size: 1.7rem; }

  /* Fenêtres en feuille du bas */
  #overlay { align-items: end; padding: 0; }
  .ov-card { border-radius: 26px 26px 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); transform: translateY(40px); max-height: 92dvh; overflow: auto; }
  .ov-card::before { content: ''; width: 44px; height: 5px; border-radius: 9px; background: var(--border-hi); }
  .ov-card .btn.primary { width: 100%; }
}

@media (max-width: 600px) {
  .hero { grid-template-columns: 1fr auto; gap: .6rem 1rem; padding: 1.1rem; }
  .hero-text { display: contents; }
  .hero .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .hero .display { grid-column: 1; grid-row: 2; align-self: center; font-size: 1.7rem; }
  .quest-orb { grid-column: 2; grid-row: 2; width: 92px; justify-self: end; }
  .hero .lead { grid-row: 3; }
  .hero-actions { grid-row: 4; }
  .quest-orb b { font-size: 1.7rem; }
  .quest-orb span { font-size: .6rem; }
  .hero .lead { grid-column: 1 / -1; font-size: 1rem; margin: 0; }
  .hero-actions { grid-column: 1 / -1; margin-top: .4rem; }
  .hero-actions .btn.big { width: 100%; }

  /* Les deux langues en carrousel */
  .boards { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0 1rem .2rem; scrollbar-width: none; }
  .boards::-webkit-scrollbar { display: none; }
  .boards > .board { flex: 0 0 calc(100% - 1.6rem); scroll-snap-align: center; }
  .board-dots { display: flex; justify-content: center; gap: .4rem; margin-top: -.4rem; }
  .board-dots span { width: 7px; height: 7px; border-radius: 9px; background: var(--border-hi); transition: width .3s, background .3s; }
  .board-dots span.on { width: 22px; background: var(--gold); }

  .fab {
    display: flex; position: fixed; z-index: 19; left: 1rem; right: 1rem; bottom: calc(84px + env(safe-area-inset-bottom));
    align-items: center; justify-content: center; gap: .5rem; min-height: 54px; border-radius: 18px; text-decoration: none; font-weight: 800;
    color: #1b1205; background: linear-gradient(110deg, #ffd978, var(--gold) 40%, #ff9b54); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7);
    transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1.2), opacity .25s; pointer-events: none;
  }
  .fab.show { transform: none; opacity: 1; pointer-events: auto; }
  [data-theme='parchemin'] .fab { color: #fff; background: linear-gradient(110deg, #d69e2e, var(--gold) 50%, #c2410c); }

  .dice-card, .streak-card { justify-items: center; }
  .d20 { width: 84px; font-size: 1.9rem; }
  .voices { grid-template-columns: 1fr; }
  .page-head .display { font-size: 1.8rem; }
  .play-intro, .summary { padding: 1.4rem 1.1rem; }
  .sum-stats div { min-width: 92px; padding: .7rem .8rem; }
  #toasts { top: calc(env(safe-area-inset-top) + .6rem); bottom: auto; left: .8rem; right: .8rem; max-width: none; }
  .in-play #toasts { top: calc(env(safe-area-inset-top) + 3.4rem); }
}

/* Exercice sur téléphone : la zone de réponse reste en bas, sous le pouce */
@media (max-width: 900px) {
  .in-play .play { min-height: calc(100dvh - 1.2rem); display: flex; flex-direction: column; gap: .6rem; }
  .in-play .step { flex: 1; display: flex; flex-direction: column; gap: 1rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .in-play #fb { margin-top: auto; }
}

/* Pastille de mise à jour (applis installées) */
.update-wrap { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .4rem; animation: rise .4s; }
.update-x { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-solid, #1a1426); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.update-pill { padding: .7rem 1.2rem; border: 0; border-radius: 99px; font-weight: 800; cursor: pointer; color: #1b1205; background: linear-gradient(110deg, #ffd978, var(--gold) 40%, #ff9b54); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); animation: rise .4s; }
@media (min-width: 901px) { .update-wrap { bottom: 1.2rem; } }
.in-play .update-wrap { display: none; }