/* ─────────────────────────────────────────────────────────────────────────────
   PlayTime — base, fond vivant, coque d'application et composants
   ───────────────────────────────────────────────────────────────────────────── */

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

html, body {
    margin: 0;
    min-height: 100%;
    /* Neutre très sombre : le thème est posé sur .app (le « rebond » iOS ne montre pas une autre teinte) */
    background: #0c0a10;
    /* Aucun débordement horizontal possible, même pendant le chargement : iOS n'ouvre jamais la page
       « dézoomée » ni décalée (menus hors écran). « clip » ne crée pas de zone de défilement. */
    overflow-x: clip;
    max-width: 100%;
    color: var(--ink);
    font-family: var(--font-ui);
    /* Relative au réglage du téléphone (taille du texte d'accessibilité) : 17 px par défaut. */
    font-size: 106.25%;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h1:focus { outline: none; }
.tabular { font-variant-numeric: tabular-nums; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── Fond vivant : photo du thème, lent « Ken Burns », voile coloré, grain ─── */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-base);
    pointer-events: none;
}

.backdrop-photo {
    position: absolute;
    inset: -6%;
    background: var(--bg-image) center / cover no-repeat;
    animation: backdrop-in var(--dur-3) var(--ease-out) both, ken-burns 48s ease-in-out infinite alternate;
}

.backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(var(--scrim), var(--scrim-top)) 0%,
            rgba(var(--scrim), calc(var(--scrim-top) * 0.45)) 32%,
            rgba(var(--scrim), calc(var(--scrim-top) * 0.6)) 60%,
            rgba(var(--scrim), var(--scrim-bottom)) 100%),
        radial-gradient(120% 70% at 50% 0%, transparent 40%, rgba(var(--scrim), 0.35) 100%);
}

@keyframes backdrop-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ken-burns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }

/* ─── Coque : contenu + barre d'onglets ─── */

.app {
    position: relative;
    min-height: 100dvh;
    background: var(--bg-base);
}

.screen {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    padding:
        calc(env(safe-area-inset-top) + var(--space-4))
        calc(env(safe-area-inset-right) + var(--space-4))
        calc(env(safe-area-inset-bottom) + var(--tabbar-h) + var(--space-6))
        calc(env(safe-area-inset-left) + var(--space-4));
}

.screen.no-tabbar { padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-6)); }

.page {
    width: min(100%, 46rem);
    margin: 0 auto;
}

/* Entrée de page : les blocs apparaissent en cascade (--i = rang) */
.reveal {
    animation: rise var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ─── En-tête de page ─── */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-5);
}

.page-title {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-style: var(--display-style);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-transform);
    font-size: var(--text-xl);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass);
    color: var(--ink);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out), background var(--dur-2);
}

.icon-button:active { transform: scale(0.92); }

/* ─── Verre dépoli ─── */

.glass {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
    background: var(--glass);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card { padding: var(--space-5); }
.card + .card, .section + .section { margin-top: var(--space-4); }

.section { margin: var(--space-5) 0; }
.section-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.muted { color: var(--ink-soft); font-size: var(--text-s); }
.faint { color: var(--ink-faint); font-size: var(--text-xs); }

/* Textes posés directement sur la photo (hors verre) : halo sombre pour rester lisibles sur une zone claire */
.section-title, .section > .muted, .section > .faint, .count {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 14px rgba(var(--scrim), 0.9);
}

.glass .section-title, .glass .muted, .glass .faint, .item .muted { text-shadow: none; }

/* ─── Boutons ─── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out), background var(--dur-2), box-shadow var(--dur-2);
}

.btn:hover { background: rgba(255, 255, 255, 0.14); }
.btn:active { transform: scale(0.96); }

.btn.primary {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 10px 30px -12px var(--accent);
}

.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { border-color: rgba(255, 143, 122, 0.45); color: var(--danger); }
.btn.block { width: 100%; }
.btn.small { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-s); }
.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }

/* ─── Formulaires ─── */

.stack { display: grid; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row.between { justify-content: space-between; }

.field { display: grid; gap: var(--space-2); font-size: var(--text-s); }
.field > span { color: var(--ink-soft); font-weight: 500; }

.input,
.field input:not([type=checkbox]):not([type=file]),
.field textarea,
.field select,
input[type=search].input {
    width: 100%;
    min-height: var(--tap);
    padding: 0 var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-m);
    background: rgba(0, 0, 0, 0.28);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;            /* ≥ 16 px : pas de zoom automatique sur iOS */
    transition: border-color var(--dur-2), background var(--dur-2);
}

.field textarea { min-height: 6rem; padding: var(--space-3) var(--space-4); resize: vertical; }
.field select option { color: #111; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible,
.btn:focus-visible, .icon-button:focus-visible, .tabbar a:focus-visible, .choice:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.check { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-s); }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }

/* ─── Messages ─── */

.notice, .error {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-m);
    font-size: var(--text-s);
    animation: rise var(--dur-2) var(--ease-out) both;
}

.notice { background: rgba(143, 240, 181, 0.16); border: 1px solid rgba(143, 240, 181, 0.35); }
.error { background: rgba(255, 143, 122, 0.16); border: 1px solid rgba(255, 143, 122, 0.4); }

/* ─── Listes ─── */

.list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.item {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-m);
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    animation: rise var(--dur-3) var(--ease-out) both;
    animation-delay: calc(min(var(--i, 0), 12) * 35ms);
}

.item-title { font-weight: 650; }
.item audio { width: 100%; height: 40px; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge.accent { background: var(--accent); color: var(--accent-ink); }
.badge.pending { background: rgba(255, 210, 122, 0.22); color: #ffe2a6; }
.badge.added { background: rgba(143, 240, 181, 0.2); color: #c4f7d6; }
.badge.rejected { background: rgba(255, 143, 122, 0.2); color: #ffd0c4; }

/* ─── Onglets segmentés ─── */

.segmented {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-pill);
}

.segmented button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-2), color var(--dur-2);
}

.segmented button[aria-selected=true] { background: var(--accent); color: var(--accent-ink); }

/* ─── Barre d'onglets ─── */

.tabbar {
    position: fixed;
    z-index: 10;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + var(--space-3));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: min(calc(100% - 2 * var(--space-3)), 34rem);
    height: var(--tabbar-h);
    padding: var(--space-2);
    border-radius: var(--radius-l);
}

.tabbar a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border-radius: var(--radius-m);
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.15;
    text-decoration: none;
    transition: color var(--dur-2), background var(--dur-2), transform var(--dur-1) var(--ease-out);
}

.tabbar a:active { transform: scale(0.92); }
.tabbar a.active { color: var(--accent-ink); background: var(--accent); }
.tabbar a.active svg { animation: pop var(--dur-2) var(--ease-spring); }

@keyframes pop { from { transform: scale(0.7); } to { transform: none; } }

/* ─── Choix visuels (thèmes, langues) ─── */

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.choices.compact { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

.choice {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 7.5rem;
    padding: var(--space-3);
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius-m);
    background: var(--glass);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2);
}

.choice:hover { transform: translateY(-2px); }
.choice:active { transform: scale(0.97); }
.choice[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }

.choice-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-3) var(--ease-out);
}

.choice:hover .choice-art { transform: scale(1.06); }
.choice-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.78)); }

.choice-label {
    position: relative;
    font-size: 1.15rem;
    line-height: 1.1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.choice-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-ink);
    animation: pop var(--dur-2) var(--ease-spring);
}

.choice.language { min-height: 4.25rem; align-content: center; background: rgba(255, 255, 255, 0.06); }
.choice.language .choice-label { font-size: 1.05rem; text-shadow: none; }

/* ─── Accessibilité : moins d'animations si demandé ─── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* Navigateurs sans flou d'arrière-plan : verre plus opaque pour garder la lisibilité */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .item, .icon-button { background: var(--glass-strong); }
}

/* Petits écrans (Android 360 px) : marges intérieures réduites pour laisser la place au texte agrandi. */
@media (max-width: 380px) {
    .card { padding: var(--space-4); }
    .screen { padding-left: calc(env(safe-area-inset-left) + var(--space-3)); padding-right: calc(env(safe-area-inset-right) + var(--space-3)); }
    .tabbar a { font-size: 0.76rem; letter-spacing: -0.01em; }
}