/* Téléphone d'abord : zones sûres (encoches), barre d'onglets, feuille « Plus », recherche plein écran,
   dialogues en feuille, ergonomie tactile, sessions en plein écran, application installée.
   Chargée en dernier. Au-dessus de 640 px, seules les zones sûres s'appliquent (nulles sur un ordinateur). */

/* ---------- Zones sûres (encoche, barre d'accueil) : à toutes les tailles ---------- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  /* L'en-tête englobe la zone de la barre d'état : tous les éléments collants (top: var(--header-h)) suivent */
  --header-h: calc(60px + var(--sat));
  --tabbar-size: 64px;          /* hauteur des onglets (hors zone sûre) */
  --tabbar-h: 0px;              /* place réservée en bas de page (0 quand la barre est masquée) */
}
.topbar { padding-top: var(--sat); }
body { min-height: 100vh; min-height: 100dvh; }
.shell { min-height: calc(100dvh - var(--header-h)); }
.sidebar { height: calc(100dvh - var(--header-h)); }

/* Téléphone en paysage, tablette : contenu et menu hors des encoches latérales */
@media (max-width: 1023px) {
  .topbar { padding-left: max(var(--space-4), var(--sal)); padding-right: max(var(--space-4), var(--sar)); }
  .sidebar { width: calc(var(--sidebar-w-compact) + var(--sal)); padding-left: max(var(--space-2), var(--sal)); }
  .main { padding-right: max(var(--space-5), var(--sar)); }
}

/* Éléments ajoutés par js/core/mobile.js : absents au-dessus de 640 px */
.tabbar, .topbar__search-btn, .search-close, .search-hints, .sheet-head, .swipe-hint { display: none; }

/* ======================================================================== Téléphone */
@media (max-width: 639px) {
  :root { --header-h: calc(56px + var(--sat)); --tabbar-h: var(--tabbar-size); }
  html {
    -webkit-tap-highlight-color: transparent;
    scroll-padding-bottom: calc(var(--tabbar-h) + var(--sab) + 12px);
  }
  /* Le bas de page (contenu, pied de page) n'est jamais caché par la barre d'onglets */
  body { padding-bottom: calc(var(--tabbar-h) + var(--sab)); }
  body.is-immersive, body.is-public { --tabbar-h: 0px; }

  /* ---------- En-tête compact ---------- */
  .topbar {
    gap: var(--space-2);
    padding-left: max(var(--space-3), var(--sal)); padding-right: max(var(--space-2), var(--sar));
  }
  .brand { gap: 8px; min-width: 0; flex: 1 1 auto; }
  .brand__logo svg { width: 32px; height: 32px; }
  .brand__text { display: flex; min-width: 0; }
  .brand__text strong { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__text small { display: none; }
  .topbar__actions { gap: 2px; }
  .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
  .topbar__search-btn { display: inline-grid; }
  .streak-chip { position: relative; height: 34px; padding: 0 10px; margin: 0 2px; }
  .streak-chip::after { content: ""; position: absolute; inset: -5px -2px; }      /* zone tactile de 44 px */
  .account-chip { position: relative; }
  .account-chip::after { content: ""; position: absolute; inset: -4px; }
  @media (max-width: 359px) { .brand__text { display: none; } }

  /* ---------- Recherche plein écran ---------- */
  .topbar__search { display: none; }
  .search-open { overflow: hidden; }
  /* backdrop-filter ferait de l'en-tête le repère du panneau fixe : il est retiré pendant la recherche */
  .search-open .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .search-open .topbar__search {
    position: fixed; inset: 0; z-index: 80;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    align-content: start; gap: var(--space-3) var(--space-2);
    max-width: none; margin: 0;
    padding: calc(var(--sat) + 8px) max(var(--space-3), var(--sar)) 0 max(var(--space-2), var(--sal));
    background: var(--bg);
    overscroll-behavior: contain;
    animation: m-fade-up .22s var(--ease);
  }
  .search-open .search-close { display: inline-grid; align-self: center; }
  .search-open .topbar__search .field--search input { min-height: 48px; border-radius: 14px; background: var(--surface); border-color: var(--border-strong); }
  .search-open .search-results {
    position: static; grid-column: 1 / -1; align-self: stretch;
    max-height: none; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 calc(-1 * max(var(--space-3), var(--sar))) 0 calc(-1 * max(var(--space-2), var(--sal)));
    padding: 0 max(var(--space-3), var(--sar)) calc(var(--sab) + var(--space-5)) max(var(--space-3), var(--sal));
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .search-open .search-results li + li { border-top: 1px solid var(--border); }
  .search-open .search-results a { min-height: 56px; justify-content: center; padding: 10px 6px; border-radius: 10px; }
  .search-open .sr-title { font-size: var(--fs-md); }
  .search-open .sr-all a { border-top: 0; margin-top: 0; min-height: 52px; }
  .search-open .search-hints { display: block; grid-column: 1 / -1; padding: 0 var(--space-1); }
  .search-open .search-results:not([hidden]) ~ .search-hints { display: none; }
  .search-hints__title { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .search-hints .chip { min-height: 40px; padding: 0 14px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
  .search-hints .chip:active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

  /* ---------- Barre d'onglets ---------- */
  .tabbar {
    display: block; position: fixed; z-index: 58; left: 0; right: 0; bottom: 0;
    padding: 0 var(--sar) var(--sab) var(--sal);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(16, 24, 40, .06);
    transition: transform .28s var(--ease), visibility 0s;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .tabbar__list { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: var(--tabbar-size); padding: 0 4px; }
  .tabbar__list > li { display: flex; min-width: 0; }
  .tab {
    position: relative; flex: 1; min-width: 0; min-height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px 4px; margin: 0; border: 0; border-radius: 16px; background: none;
    color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 650; line-height: 1.15; letter-spacing: .01em;
    text-decoration: none; cursor: pointer;
  }
  .tab:hover { color: var(--text); }
  .tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 6 onglets (5 rubriques + Plus) : pastille et texte resserrés sur les petits écrans */
  @media (max-width: 379px) { .tab { font-size: 10.5px; letter-spacing: 0; } .tab__icon, .tab--more > .icon { width: min(48px, 100%); } }
  .tab__icon, .tab--more > .icon {
    position: relative; display: grid; place-items: center;
    width: 56px; height: 30px; border-radius: 999px;
    transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
  }
  .tab__icon .icon, .tab--more > .icon { width: 22px; height: 22px; }
  .tab--more > .icon { box-sizing: content-box; width: 22px; height: 22px; padding: 4px 17px; }
  .tab--more::after { content: "Plus"; }
  .tab--more[aria-expanded="true"]::after { content: "Fermer"; }
  .tab[aria-current="page"], .tab--more.is-section, .tab--more[aria-expanded="true"] { color: var(--primary); font-weight: 750; }
  .tab[aria-current="page"] .tab__icon, .tab--more.is-section > .icon, .tab--more[aria-expanded="true"] > .icon { background: var(--primary-soft); }
  .tab:active .tab__icon, .tab--more:active > .icon { transform: scale(.9); }
  .tab:focus-visible { outline-offset: -3px; border-radius: 16px; }
  .tab__badge {
    position: absolute; top: -3px; left: calc(50% + 5px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--danger); color: var(--on-danger);
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .tab__badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 1px; left: calc(50% + 9px); background: var(--warning); }

  /* Session (QCM, examen, flashcards), saisie au clavier, pages publiques : la barre s'efface */
  .is-immersive .tabbar, .kb-open .tabbar, .is-public .tabbar {
    transform: translateY(calc(100% + 2px)); visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .is-public .topbar__search-btn { display: none; }

  /* Notifications et indicateur réseau au-dessus de la barre d'onglets */
  .toasts { bottom: calc(var(--tabbar-h) + var(--sab) + 12px); width: calc(100vw - 24px - var(--sal) - var(--sar)); }
  .net-status { bottom: calc(var(--tabbar-h) + var(--sab) + 8px); left: max(8px, var(--sal)); }

  /* ---------- Feuille « Plus » : le menu complet glisse depuis le bas ---------- */
  .sidebar {
    position: fixed; z-index: 60; top: auto; left: 0; right: 0;
    bottom: calc(var(--tabbar-size) + var(--sab));
    width: auto; height: auto;
    max-height: calc(100dvh - var(--header-h) - var(--tabbar-size) - var(--sab) + 8px);
    padding: 0 max(var(--space-4), var(--sar)) var(--space-4) max(var(--space-4), var(--sal));
    border-right: 0; border-top: 1px solid var(--border); border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 48px rgba(5, 12, 24, .22);
    overscroll-behavior: contain;
    transform: translateY(calc(100% + var(--tabbar-size) + var(--sab) + 16px));
    visibility: hidden;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s;
  }
  .nav-open .sidebar {
    transform: translateY(var(--sheet-drag, 0px)); visibility: visible;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
  }
  .sheet-dragging .sidebar { transition: none; }
  .nav-backdrop { inset: 0; z-index: 55; background: rgba(5, 12, 24, .5); }
  .is-public .tabbar__more { display: none; }

  .sheet-head {
    position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
    margin: 0 calc(-1 * max(var(--space-4), var(--sar))) var(--space-2) calc(-1 * max(var(--space-4), var(--sal)));
    padding: 8px max(var(--space-2), var(--sar)) 4px max(var(--space-4), var(--sal));
    background: var(--surface); border-radius: 24px 24px 0 0;
    touch-action: none; cursor: grab;
  }
  .sheet-grip { width: 40px; height: 5px; border-radius: 999px; background: var(--border-strong); }
  .sheet-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; margin-top: 2px; }
  .sheet-title { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.01em; }

  .sidebar .nav__group + .nav__group { margin-top: var(--space-4); }
  .sidebar .nav__label { padding: 0 4px; margin-bottom: 8px; }
  .sidebar .nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sidebar .nav__link {
    gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: 14px;
    background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); font-weight: 650; line-height: 1.25;
    transition: background .15s var(--ease), transform .12s var(--ease);
  }
  .sidebar .nav__link .icon { width: 22px; height: 22px; color: var(--primary); }
  .sidebar .nav__text { min-width: 0; overflow-wrap: anywhere; }
  .sidebar .nav__link.is-active { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
  .sidebar .nav__link:active { transform: scale(.97); background: var(--surface-3); }
  @media (max-width: 379px) { .sidebar .nav__link { gap: 8px; padding-inline: 8px; font-size: 13px; } }
  .sidebar .nav__footer { margin-top: var(--space-4); }

  /* ---------- Dialogues : feuille depuis le bas ---------- */
  .dialog {
    width: 100%; max-width: 100%; margin: auto 0 0;
    max-height: calc(100dvh - var(--sat) - 24px);
    border-radius: 24px 24px 0 0;
    padding-bottom: var(--sab);
    overscroll-behavior: contain;
  }
  .dialog[open] { animation: m-sheet-up .3s cubic-bezier(.2, .8, .2, 1); }
  .dialog__body { position: relative; padding: calc(var(--space-5) + 6px) max(var(--space-5), var(--sar)) var(--space-4) max(var(--space-5), var(--sal)); }
  .dialog__body::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 999px; background: var(--border-strong);
  }
  .dialog__actions { flex-direction: column-reverse; gap: var(--space-2); }
  .dialog__actions .btn { width: 100%; min-height: 50px; }

  /* ---------- Ergonomie tactile ---------- */
  /* 16 px au moins : iOS ne zoome pas sur le champ */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1rem); }
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .btn--lg { min-height: 52px; }
  .segmented button { min-height: 40px; }
  .btn:active, .choice:active, .theme:active, .q-choice:active, .pager__link:active, .chip:active, .segmented button:active {
    transform: scale(.98);
  }
  .pager__link { min-height: 56px; }
  .main { padding-left: max(var(--space-4), var(--sal)); padding-right: max(var(--space-4), var(--sar)); }

  /* ---------- Session : barre de progression compacte en haut, action principale collée en bas ---------- */
  .is-immersive .qbar {
    position: sticky; top: var(--header-h); z-index: 15;
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
    padding: 10px var(--space-4) 8px; gap: 4px var(--space-3);
  }
  .is-immersive .qbar__title { font-size: var(--fs-sm); line-height: 1.3; }
  .is-immersive .qbar__count { font-size: var(--fs-xs); }
  .is-immersive .qbar__score, .is-immersive .qbar__timer { padding: 4px 10px; font-size: var(--fs-sm); }
  .is-immersive .qbar__timer { min-width: 0; }
  .m-actionbar,
  .is-immersive .question:not(.is-answered) > .question__actions,
  .is-immersive .qnext:not(:empty) {
    position: sticky; bottom: 0; z-index: 12;
    padding: 10px var(--space-4) calc(10px + var(--sab));
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .is-immersive .question:not(.is-answered) > .question__actions { margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); border-radius: 0 0 var(--radius) var(--radius); }
  .is-immersive .qnext:not(:empty) { margin: var(--space-3) calc(-1 * var(--space-4)) 0; }
  .is-immersive .question__actions .btn, .is-immersive .qnext .btn { width: 100%; min-height: 52px; }
  .is-immersive .qnext { min-height: 0; }
  /* Réponse validée : « Question suivante » (collé en bas) remplace le bouton Valider devenu inactif */
  .is-immersive .question > .question__actions:has(> [data-validate]:disabled) { display: none; }
  .is-immersive .q-choice { min-height: 52px; }

  /* ---------- Terminal : touches absentes du clavier du téléphone ---------- */
  .term__input { font-size: 16px; }
  .kb-open .term__screen { height: clamp(150px, calc(var(--vvh, 70vh) - var(--header-h) - 170px), 300px); }
  .term__hint { display: none; }
}

/* Touches du terminal (Tab, ?, historique, Ctrl+Z…) : écrans tactiles uniquement */
.term__keys { display: none; }
@media (hover: none) and (pointer: coarse) {
  .term__keys {
    display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none;
    background: #131D30; border-top: 1px solid #1E2A40;
  }
  .term__keys::-webkit-scrollbar { display: none; }
  .term__key {
    flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 6px; border-radius: 10px;
    border: 1px solid #31445F; background: #0B1220; color: #D9E3F0;
    font-family: var(--font-mono); font-size: 14px; font-weight: 650;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
  }
  .term__key:active { background: #1D2B42; border-color: #6CCBF3; }
  .term__key:focus-visible { outline: 3px solid #6CCBF3; outline-offset: 1px; }
}

/* Indicateur du geste « leçon précédente / suivante » */
@media (max-width: 639px) {
  .swipe-hint {
    position: fixed; z-index: 57; top: 50%;
    display: flex; align-items: center; gap: 8px;
    max-width: 62vw; padding: 10px 16px; border-radius: 999px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
    opacity: 0; pointer-events: none;
    --p: 0;
    transition: opacity .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  }
  .swipe-hint span { overflow: hidden; text-overflow: ellipsis; }
  .swipe-hint.is-on { display: flex; opacity: calc(.35 + var(--p) * .65); }
  .swipe-hint--prev { left: max(10px, var(--sal)); transform: translate(calc(-110% + var(--p) * 110%), -50%); }
  .swipe-hint--next { right: max(10px, var(--sar)); transform: translate(calc(110% - var(--p) * 110%), -50%); }
  .swipe-hint.is-ready { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
  .swipe-hint .icon { width: 18px; height: 18px; flex: none; }
}

/* ---------- Animations ---------- */
@keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes m-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dialog[open], .search-open .topbar__search { animation: none; }
  .sidebar, .nav-open .sidebar, .tabbar { transition-duration: .01ms; }
}
:root[data-motion="reduced"] .dialog[open], :root[data-motion="off"] .dialog[open],
:root[data-motion="reduced"] .search-open .topbar__search, :root[data-motion="off"] .search-open .topbar__search { animation: none; }
:root[data-motion="reduced"] .sidebar, :root[data-motion="off"] .sidebar,
:root[data-motion="reduced"] .tabbar, :root[data-motion="off"] .tabbar,
:root[data-motion="reduced"] .swipe-hint, :root[data-motion="off"] .swipe-hint { transition-duration: .01ms; }
:root[data-motion="off"] .tab__icon, :root[data-motion="off"] .tab--more > .icon { transition: none; }

/* ---------- Application installée (écran d'accueil) ---------- */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  .topbar, .sidebar, .btn, .icon-btn, .nav__link, .segmented, .qbar, .fc-rate, .fc__tap, .choice, .theme, .chip, .pager, .lesson-toolbar, .crumbs, .streak-chip {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
}
.is-standalone, .is-standalone body { overscroll-behavior-y: none; }
.is-standalone :is(.topbar, .sidebar, .btn, .icon-btn, .nav__link, .segmented, .qbar, .fc-rate, .fc__tap, .choice, .theme, .chip, .pager, .lesson-toolbar, .crumbs, .streak-chip) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

@media print {
  .tabbar, .swipe-hint, .term__keys { display: none !important; }
  body { padding-bottom: 0 !important; }
}