/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Deploy test #2: harmless touch to validate CI/CD sync. */
:root {
    --app-bg: #000000;
    --app-bg-elevated: #1c1c1e;
    --app-bg-soft: rgba(255,255,255,0.05);
    --app-bg-softer: rgba(255,255,255,0.03);
    --app-border: rgba(255,255,255,0.1);
    --app-border-soft: rgba(255,255,255,0.08);
    --app-text: #ffffff;
    --app-text-muted: #b0b0b0;
    --app-text-dim: #8a8a8a;
    --app-text-dark: #111111;
}
html[data-theme="light"] {
    color-scheme: light;
    /* Aligné au chargement avec THEME_MAP.light (bg / bgCard) — le JS rafraîchit via `applyTheme`. */
    --app-bg: #ffffff;
    --app-bg-elevated: #f6f7f9;
    --app-bg-soft: rgba(0,0,0,0.04);
    --app-bg-softer: rgba(0,0,0,0.025);
    --app-border: rgba(0,0,0,0.14);
    --app-border-soft: rgba(0,0,0,0.1);
    --app-text: #111111;
    --app-text-muted: #5f6673;
    --app-text-dim: #7a818f;
    --app-text-dark: #111111;
}
/* Même fond que body : quand body est en position fixed (drag scroll lock), évite une bande claire en haut en thème light. */
html {
    background: var(--app-bg);
    background-color: var(--app-bg);
    height: 100%;
    overflow: hidden;
    color-scheme: dark light;
}
html[data-theme="light"] {
    color-scheme: light;
}
html[data-theme="dark"] {
    color-scheme: dark;
}
body { 
    margin: 0; 
    height: 100%;
    -webkit-font-smoothing: antialiased; 
    background: var(--app-bg); 
    background-color: var(--app-bg);
    font-family: 'Barlow', sans-serif; 
    color: var(--app-text-muted);
    overflow: hidden;
    overscroll-behavior: none;
}

/* Une seule zone de défilement verticale (via #root > App > main) : évite double scroll,
   barre latérale qui bouge encore quand le contenu visible est en butée, et sensation de pages superposées. */
#root {
    height: 100%;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--app-bg);
    background-color: var(--app-bg);
}

/* Barre titre globale (Paramètres, sous-flux profil…) : occupe toute la largeur du conteneur flex. */
.app-global-header {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    html {
        scrollbar-gutter: stable;
    }
}

html[data-theme="light"] .social-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.12);
    color: var(--app-text-dark);
}

html[data-theme="light"] .app-global-bottom-nav .nav-item:not(.active-tab) {
    color: rgba(0, 0, 0, 0.42);
}
button, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }

/* Profil hardening : uniquement sous #root — ne pas toucher aux portails sur body (TrainingBottomSheet,
   barre d’onglets) : transition: none sur la feuille cassait l’arrivée en bas du volet (graphique profil). */
body[data-active-view="profile"] #root,
body[data-active-view="profile"] #root *,
body[data-active-view="profile"] #root *::before,
body[data-active-view="profile"] #root *::after {
    animation: none !important;
    transition: none !important;
}

body[data-active-view="profile"] button:active,
body[data-active-view="profile"] .arrow-btn:active,
body[data-active-view="profile"] .numpad-btn:active {
    transform: none !important;
}

/* --- Barre d’onglets (bas) : rendue via createPortal(document.body) pour un vrai fixed au viewport (évite écarts iOS / #root). --- */
/* Safe-area bas : voir `APP_BOTTOM_NAV_SCROLL_PADDING` dans `ui-components.jsx`. */
.app-global-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* Pas de padding-bas sur le <nav> : hauteur inchangée ; couleur safe-area = `::after`. */
    padding-bottom: 0;
    box-sizing: border-box;
    pointer-events: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    background: #000000;
    background-color: #000000;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Bandeau sous l’indicateur d’accueil (mêmes couleurs que le menu). */
.app-global-bottom-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: env(safe-area-inset-bottom, 0px);
    background-color: #000000;
    pointer-events: none;
    z-index: 0;
}

html[data-theme="light"] .app-global-bottom-nav {
    background: #ffffff;
    background-color: #ffffff;
    border-top-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .app-global-bottom-nav::after {
    background-color: #ffffff;
}

.app-global-bottom-nav .app-bottom-nav-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Bannière « séance en cours » : pilule vitrée inchangée */
.app-session-banner-pill {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .app-session-banner-pill {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

.app-global-bottom-nav .nav-item {
    color: rgba(255, 255, 255, 0.42);
    background: transparent !important;
    transition: color 0.2s ease;
}

.app-global-bottom-nav .nav-item .nav-item-label {
    color: inherit;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Icônes inactives : couleur opaque + opacity sur le <svg> (pas rgba sur le trait) pour éviter
   les intersections « plus blanches » où les traits Lucide se superposent. */
.app-global-bottom-nav .nav-item svg {
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-width 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.app-global-bottom-nav .nav-item:not(.active-tab) svg {
    color: #ffffff;
    opacity: 0.42;
    stroke-width: 1.65;
}

html[data-theme="light"] .app-global-bottom-nav .nav-item:not(.active-tab) svg {
    color: #000000;
    opacity: 0.42;
}

.app-global-bottom-nav .active-tab svg {
    color: #ffffff;
    opacity: 1;
    stroke-width: 1.95;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.22));
}

html[data-theme="light"] .app-global-bottom-nav .active-tab svg {
    color: #000000;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.12));
}

.app-global-bottom-nav .active-tab {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.app-global-bottom-nav .active-tab .nav-item-label {
    color: #ffffff !important;
}

/* Thème clair : actif en noir pour rester lisible sur pilule claire */
html[data-theme="light"] .app-global-bottom-nav .active-tab,
html[data-theme="light"] .app-global-bottom-nav .active-tab .nav-item-label {
    color: #000000 !important;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--app-bg); }
::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 10px; }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* --- ANIMATIONS --- */
@keyframes pulse { 0% { opacity: 1; text-shadow: 0 0 15px rgba(231,76,60,0.6); } 50% { opacity: 0.7; text-shadow: 0 0 5px rgba(231,76,60,0.2); } 100% { opacity: 1; text-shadow: 0 0 15px rgba(231,76,60,0.6); } }
@keyframes pulseBlue { 0% { opacity: 1; text-shadow: 0 0 15px rgba(52,152,219,0.6); } 50% { opacity: 0.7; text-shadow: 0 0 5px rgba(52,152,219,0.2); } 100% { opacity: 1; text-shadow: 0 0 15px rgba(52,152,219,0.6); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideLeft { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Slide sans overshoot (pas de léger recul après l’arrivée). */
@keyframes authSlideInFromRight {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0.82;
        filter: brightness(0.96);
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        filter: brightness(1);
    }
}
@keyframes authSlideInFromLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 0.82;
        filter: brightness(0.96);
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        filter: brightness(1);
    }
}

/* --- CLASSES UTILITAIRES --- */
.timer-active-red { color: #e74c3c !important; animation: pulse 1s infinite; }
.timer-active-blue { color: #3498db !important; animation: pulseBlue 1s infinite; }
.bottom-sheet {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.story-slide { animation: slideLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.loader { border: 4px solid var(--app-border); border-top: 4px solid #ffffff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; }

/* --- COMPOSANTS SPECIFIQUES --- */
.numpad-btn { transition: 0.1s; background: var(--app-bg-soft); border: 1px solid var(--app-border-soft); border-radius: 12px; padding: 12px; font-size: 24px; font-weight: bold; color: var(--app-text); cursor: pointer; }
.numpad-btn:active { background: #ffffff; color: var(--app-text-dark); border-color: #ffffff; transform: scale(0.92); }

.arrow-btn { background: transparent; border: none; color: var(--app-text-dim); cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.arrow-btn:active { color: #ffffff; transform: scale(1.2); }

.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-bg-soft); color: var(--app-text); cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.2s; }

/* --- Page connexion (style type appli fitness : boutons clairs empilés) --- */
.auth-screen {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: var(--app-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    /* Contenu plus bas qu’au centre : safe area + marge + léger pourcentage de la hauteur */
    padding-top: max(28px, calc(env(safe-area-inset-top) + min(12vh, 96px)));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}
/* Inscription (accueil + créer un compte) : tout le bloc plus bas, logo + BUYLD serrés au contenu sous-jacent. */
.auth-screen--signup {
    padding-top: max(80px, calc(env(safe-area-inset-top) + min(38vh, 300px)));
}
/* Connexion e-mail : pas de grand padding haut ; bandeau titre pleine largeur (padding latéral retiré). */
.auth-screen--login-email {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.auth-screen--signup .auth-body {
    padding-top: 0;
}
.auth-screen--signup .auth-hero--signup {
    padding: 4px 0 2px;
}
.auth-hero-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.auth-screen--signup .auth-hero-logo {
    display: block;
    flex-shrink: 0;
    margin: 0;
}
.auth-hero {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
    padding: 8px 0 20px;
    text-align: center;
    /* Même fond que `.auth-screen` : un dégradé seul créait une zone plus claire et un trait net sous le padding haut (effet « bordure » au-dessus du logo). */
    background: var(--app-bg);
    background-color: var(--app-bg);
}
.auth-hero-logo {
    border: 0;
    vertical-align: middle;
}
.auth-body {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 12px 0 0;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.auth-body--slide-left {
    will-change: transform, opacity;
    animation: authSlideInFromRight 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-body--slide-right {
    will-change: transform, opacity;
    animation: authSlideInFromLeft 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Priorité auth: certaines règles globales (mode profil) coupent les animations avec `!important`. */
body[data-active-view="profile"] .auth-body.auth-body--slide-left {
    animation: authSlideInFromRight 0.62s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body[data-active-view="profile"] .auth-body.auth-body--slide-right {
    animation: authSlideInFromLeft 0.62s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Auth : accueil inscription OU écran e-mail (sans carrousel / slide). */
.auth-welcome-dual {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: 0;
}
/* Accueil : boutons Google / e-mail un peu moins larges, centrés. */
.auth-welcome-dual .auth-provider-stack {
    max-width: 340px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Accueil « S’inscrire » : marge sous logo + BUYLD avant les boutons (ex. Google). */
.auth-screen--signup .auth-welcome-dual {
    margin-top: max(28px, min(6vh, 52px));
}
/* Formulaire « Créer un compte » : espace entre bandeau logo + BUYLD et carte. */
.auth-signup-email-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding-top: max(36px, min(8vh, 72px));
    box-sizing: border-box;
}
.auth-email-panel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.auth-screen--login-email .auth-body {
    max-width: none;
    width: 100%;
    padding: 0;
}
.auth-email-panel--login {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Écran « Se connecter » par e-mail (fond noir, titre + retour, champs soulignés, CTA gris, sociaux foncés) */
.auth-login-email {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 20px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Barre titre : pleine largeur + bande grise jusqu’en haut (safe area), comme `standaloneFlowHeaderOuter`. */
.auth-login-email__header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    align-content: center;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
    background: var(--app-bg-elevated, #1c1c1e);
    background-color: var(--app-bg-elevated, #1c1c1e);
    margin: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 12px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    min-height: calc(44px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.075));
    transform: translateZ(0);
}
html[data-theme="light"] .auth-login-email__header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
.auth-login-email__header-back {
    margin: 0 !important;
    justify-self: start;
}
.auth-login-email__header-title {
    margin: 0;
    text-align: center;
    grid-column: 2;
    min-width: 0;
}
.auth-login-email__header-spacer {
    grid-column: 3;
    width: 48px;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}
.auth-login-email__main {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 24px;
}
.auth-field-line {
    margin-bottom: 22px;
}
.auth-field-line__label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 6px;
    text-align: left;
}
.auth-field-line__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    padding: 10px 0 12px;
    color: #ffffff;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}
.auth-field-line__input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}
.auth-field-line__input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.52);
}
.auth-login-email__forgot {
    text-align: right;
    margin-top: 2px;
}
.auth-login-primary {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 16px 20px;
    border: none;
    border-radius: 14px;
    background: #5c5c60;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.auth-login-primary:active:not(:disabled) {
    transform: scale(0.98);
    opacity: 0.9;
}
.auth-login-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.auth-login-email .auth-ou-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
}
.auth-login-email .auth-ou-row__line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.auth-login-email .auth-ou-row__text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
}
.auth-screen .auth-provider-btn.auth-provider-btn--dark {
    background: #3a3a3c;
    color: #ffffff;
}
.auth-screen .auth-provider-btn.auth-provider-btn--dark .auth-provider-btn__label {
    color: #ffffff;
}
html[data-theme="light"] .auth-screen .auth-provider-btn.auth-provider-btn--dark {
    background: #3a3a3c;
    color: #ffffff;
}

/* Colonne obligatoire : sans flex sur le conteneur, les <button> restent en inline-block et se mettent côte à côte. */
.auth-screen .auth-provider-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.auth-screen .auth-provider-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    background: #e8e8ea;
    color: #0a0a0a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    text-align: left;
    line-height: 1.25;
}
.auth-screen .auth-provider-btn:active:not(:disabled) {
    transform: scale(0.98);
    opacity: 0.92;
}
.auth-screen .auth-provider-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.auth-screen .auth-provider-btn__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-screen .auth-provider-btn__label {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 600;
}
html[data-theme="light"] .auth-screen .auth-provider-btn {
    background: #f0f0f3;
    color: #111;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.auth-back-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 8px -6px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
}
.auth-back-btn:active {
    opacity: 0.75;
}

/* --- SPLASH SCREEN --- */
#splash-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--app-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity 0.4s ease-out;
}
#splash-screen img {
    height: 90px;
    display: block;
}

/* --- GRILLE MATERIEL --- */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
.equip-item { background: var(--app-bg-softer); border: 1px solid var(--app-border-soft); border-radius: 8px; padding: 15px 10px; text-align: center; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.equip-item.selected { background: rgba(255,255,255,0.15); border-color: #ffffff; }
.equip-item.disabled { opacity: 0.5; cursor: not-allowed; }
.equip-item span { font-size: 12px; font-weight: bold; color: var(--app-text); }
.cat-btn {
    flex: 1; padding: 15px 0; font-size: 24px; text-align: center; border-radius: 12px;
    background: var(--app-bg-soft); border: 1px solid var(--app-border-soft); transition: 0.2s; cursor: pointer;
}
.cat-btn.active { background: rgba(255,255,255,0.15); border-color: #ffffff; }

.stat-bar-container { height: 120px; width: 25px; background: var(--app-bg-soft); border-radius: 6px; position: relative; display: flex; align-items: flex-end; overflow: hidden;}
.stat-bar-fill { width: 100%; border-radius: 6px; transition: height 0.5s ease, background 0.5s ease; }

/* Feuille Programme (portail body) — plein écran ; --training-overlay-h complète le dvh si la mesure JS est trop basse (iOS / exercices). */
.training-sheet-root {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
    touch-action: none;
    overscroll-behavior: none;
    height: max(100dvh, var(--training-overlay-h, 0px));
    min-height: -webkit-fill-available;
    min-height: max(100vh, 100dvh, var(--training-overlay-h, 0px));
}
.training-sheet-backdrop,
.training-sheet-panel-wrap {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    height: max(100dvh, var(--training-overlay-h, 0px));
    min-height: -webkit-fill-available;
    min-height: max(100vh, 100dvh, var(--training-overlay-h, 0px));
}

/* Ouverture séance depuis le bandeau : dévoilement du haut vers le bas */
@keyframes appWorkoutFoldReveal {
    from {
        opacity: 0.94;
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.app-workout-fold-enter {
    animation: appWorkoutFoldReveal 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .app-workout-fold-enter {
        animation: none !important;
        clip-path: none !important;
        opacity: 1 !important;
    }
}

/* Saisie commentaire communauté : évite que la barre d’onglets passe sous le clavier */
html[data-community-composer-open] .app-global-bottom-nav {
    visibility: hidden;
    pointer-events: none;
}

@keyframes communityCommentEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Nouveau commentaire : monte depuis le bas, visible juste au-dessus de la zone de saisie */
.community-comment-enter {
    animation: communityCommentEnter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    scroll-margin-bottom: 14px;
    transform-origin: 50% 100%;
}

/* Zone de saisie : clavier iOS — pas de enterKeyHint send (évite barre « Envoyer » système en doublon).
   Les attributs data-* réduisent les barres d’extensions mots de passe. */
.community-comment-composer-input {
    -webkit-appearance: none;
    appearance: none;
}

@media (prefers-reduced-motion: reduce) {
    .community-comment-enter {
        animation: none;
    }
}