/* V24.68 — Correctifs mobiles de production Vulpingo */

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
canvas,
audio,
iframe {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

pre,
code {
    overflow-wrap: anywhere;
}

.table-wrapper,
.admin-table-wrapper,
.table-scroll,
.responsive-table,
[class*="table-container"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
    :root {
        --mobile-safe-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    body {
        min-width: 0;
        padding-bottom: var(--mobile-safe-bottom);
    }

    body.admin-body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .container,
    .header-inner,
    .vulpingo-footer-inner,
    .vulpingo-footer-bottom,
    .admin-main,
    main {
        min-width: 0;
    }

    .container {
        width: min(100% - 20px, 1100px);
    }

    .site-header,
    .app-header {
        position: sticky;
        top: 0;
        z-index: 120;
    }

    .header-inner {
        gap: 10px;
        min-height: 64px;
        padding-inline: 12px;
    }

    .brand-lockup {
        min-width: 0;
    }

    .brand-lockup strong {
        font-size: 1rem;
    }

    .brand-lockup small {
        display: none !important;
    }

    .nav-toggle,
    .admin-menu-toggle,
    .development-notice-close,
    button,
    .button,
    [role="button"] {
        min-height: 44px;
    }

    .nav-toggle,
    .admin-menu-toggle {
        min-width: 44px;
    }

    .main-navigation {
        position: fixed !important;
        inset: 70px 10px auto !important;
        width: auto !important;
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .main-navigation a,
    .main-navigation summary,
    .nav-dropdown a {
        min-height: 44px;
        padding: 11px 13px;
    }

    .mobile-tabbar {
        height: calc(68px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-tabbar a {
        min-width: 0;
        min-height: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card,
    .auth-card,
    .account-auth-card,
    .account-auth-intro,
    .dashboard-card,
    .lesson-card,
    .exercise-card,
    .exam-card {
        min-width: 0;
        max-width: 100%;
    }

    .account-auth-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
    }

    .account-auth-intro {
        padding: 20px;
        text-align: center;
    }

    .account-auth-mascot {
        width: min(150px, 46vw);
        margin-inline: auto;
    }

    .account-auth-card,
    .auth-card {
        width: 100%;
        padding: 20px 16px;
    }

    .account-auth-points {
        justify-items: start;
        text-align: left;
    }

    form,
    fieldset,
    label {
        min-width: 0;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        min-height: 48px;
        font-size: 16px !important;
    }

    textarea {
        min-height: 130px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        flex: 0 0 auto;
    }

    .legal-consent {
        align-items: flex-start;
        gap: 10px;
    }

    .google-auth-button {
        min-height: 50px;
    }

    .actions,
    .form-actions,
    .lesson-actions,
    .exercise-actions,
    .exam-actions,
    .toolbar-actions,
    .admin-actions {
        flex-wrap: wrap;
    }

    .actions > *,
    .form-actions > *,
    .lesson-actions > *,
    .exercise-actions > *,
    .exam-actions > * {
        max-width: 100%;
    }

    .lesson-toolbar,
    .lesson-mobile-toolbar,
    .exercise-toolbar {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .lesson-toolbar > *,
    .lesson-mobile-toolbar > *,
    .exercise-toolbar > * {
        flex: 0 0 auto;
    }

    table {
        min-width: 620px;
    }

    .vulpingo-footer {
        padding: 34px 18px calc(24px + env(safe-area-inset-bottom));
    }

    .vulpingo-footer-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px;
    }

    .vulpingo-footer-column > a,
    .vulpingo-project-link {
        width: 100%;
        min-height: 42px;
        align-items: center;
    }

    .vulpingo-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .development-notice-inner {
        padding-right: 34px;
    }

    .development-notice-link {
        margin-left: 0 !important;
    }

    .flash,
    .alert {
        overflow-wrap: anywhere;
    }

    .admin-topbar {
        padding-inline: 10px;
    }

    .admin-page-title,
    .admin-site-link span {
        display: none;
    }

    .admin-main {
        width: 100%;
        padding: 16px 10px 28px;
    }

    .admin-sidebar {
        width: min(88vw, 320px);
        max-width: 320px;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .admin-grid,
    .admin-card-grid,
    .stats-grid,
    .dashboard-stat-grid,
    .dashboard-actions-grid,
    .dashboard-course-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 390px) {
    .container {
        width: min(100% - 14px, 1100px);
    }

    .header-inner {
        padding-inline: 8px;
    }

    .brand-mark,
    .admin-brand-mark {
        width: 38px;
        height: 38px;
    }

    h1 {
        overflow-wrap: anywhere;
    }

    .account-auth-card,
    .auth-card,
    .card {
        border-radius: 16px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .main-navigation {
        max-height: calc(100dvh - 78px);
    }

    .mobile-tabbar {
        height: calc(58px + env(safe-area-inset-bottom));
    }

    body {
        --mobile-safe-bottom: calc(66px + env(safe-area-inset-bottom));
    }
}

/* V24.68.1 — Ajustements visuels observés sur mobile réel */
@media (max-width: 760px) {
    /* Le titre du profil doit conserver les mots entiers. */
    .profile-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 105px !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .profile-hero > div {
        min-width: 0;
    }

    .profile-hero h1 {
        font-size: clamp(1.85rem, 8.5vw, 2.35rem) !important;
        line-height: 1.03 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .profile-hero > img,
    .profile-hero img {
        width: 105px !important;
        height: auto !important;
        max-height: 120px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    /* Le cercle de progression doit toujours rester parfaitement rond. */
    .goal-circle-wrap {
        width: 100%;
        min-width: 0;
    }

    .goal-circle {
        box-sizing: border-box !important;
        width: 122px !important;
        height: 122px !important;
        min-width: 122px !important;
        min-height: 122px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 13px !important;
        gap: 5px !important;
        border-radius: 50% !important;
        flex: 0 0 122px !important;
    }

    .goal-circle strong {
        font-size: 1.72rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .goal-circle small {
        max-width: 78px !important;
        font-size: .61rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }
}

@media (max-width: 390px) {
    .profile-hero {
        grid-template-columns: minmax(0, 1fr) 88px !important;
        gap: 10px !important;
    }

    .profile-hero h1 {
        font-size: clamp(1.72rem, 8.3vw, 2rem) !important;
    }

    .profile-hero > img,
    .profile-hero img {
        width: 88px !important;
        max-height: 105px !important;
    }

    .goal-circle {
        width: 112px !important;
        height: 112px !important;
        min-width: 112px !important;
        min-height: 112px !important;
        flex-basis: 112px !important;
    }
}


/* V24.338 — priorité tactile du menu sur les pages de contenu */
@media (max-width: 980px) {
    .site-header.app-header {
        z-index: 1200 !important;
        overflow: visible !important;
    }

    .site-header.app-header .nav-toggle {
        position: relative;
        z-index: 1202;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .site-header.app-header .main-navigation {
        z-index: 1201 !important;
        pointer-events: auto;
    }
}


/* V24.302 — finition mobile, tactile et accessibilité */
.skip-link {
    position: fixed;
    z-index: 5000;
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    max-width: calc(100vw - 20px);
    padding: 10px 14px;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform .15s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 980px) {
    body.mobile-navigation-open {
        overflow: hidden;
        touch-action: none;
    }

    .site-header.app-header .main-navigation.is-open {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 760px) {
    /* La barre contient cinq destinations depuis l'ajout de Livres. */
    .mobile-tabbar {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-height: calc(68px + env(safe-area-inset-bottom));
        height: auto !important;
        padding-inline: 4px;
    }

    .mobile-tabbar a {
        min-width: 0;
        min-height: 60px;
        padding: 6px 2px;
        line-height: 1.05;
        white-space: normal;
        text-align: center;
        touch-action: manipulation;
    }

    .mobile-tabbar a span {
        line-height: 1;
    }

    .mobile-tabbar a.active {
        font-weight: 950;
    }

    /* Cibles tactiles cohérentes, y compris pour les petits boutons icône. */
    button:not([hidden]),
    .button,
    [role="button"],
    summary,
    .speech-button,
    .reading-nav,
    .lesson-dialogue-audio,
    input[type="checkbox"],
    input[type="radio"] {
        touch-action: manipulation;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }

    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 44px;
    }

    /* Empêche les contenus longs (codes, emails, URLs, réponses) de déborder. */
    .card,
    .auth-card,
    .flash,
    .alert,
    .page-heading,
    .lesson-card,
    .exercise-card,
    .exam-card,
    td,
    th {
        overflow-wrap: anywhere;
    }

    /* Les barres horizontales ne doivent pas pousser toute la page. */
    .table-wrapper,
    .admin-table-wrapper,
    .table-scroll,
    .responsive-table,
    .lesson-toolbar,
    .lesson-mobile-toolbar,
    .exercise-toolbar {
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }

    .lesson-toolbar > *,
    .lesson-mobile-toolbar > *,
    .exercise-toolbar > * {
        scroll-snap-align: start;
    }

    /* Dialogues utilisables avec le clavier virtuel mobile. */
    dialog {
        max-height: calc(100dvh - 16px);
        overscroll-behavior: contain;
    }
}

@media (max-width: 430px) {
    .mobile-tabbar a {
        font-size: .58rem !important;
        letter-spacing: -.01em;
    }

    .mobile-tabbar a span {
        font-size: 1.05rem !important;
    }

    .main-navigation {
        inset-inline: 6px !important;
    }
}

@media (max-width: 350px) {
    .mobile-tabbar a {
        font-size: .54rem !important;
    }

    .mobile-tabbar a span {
        font-size: 1rem !important;
    }
}


/* V24.410 — finition PWA mobile : safe areas, clavier et bannières */
@media (max-width: 760px) {
    .site-header.app-header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .site-header.app-header .main-navigation {
        inset: calc(70px + env(safe-area-inset-top, 0px)) 10px auto !important;
        max-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px));
    }

    .mobile-tabbar {
        transition: transform .18s ease, opacity .18s ease;
        will-change: transform;
    }

    body.mobile-keyboard-open {
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    body.mobile-keyboard-open .mobile-tabbar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    }

    body.mobile-keyboard-open .pwa-banner {
        display: none !important;
    }

    .pwa-banner {
        right: 8px !important;
        bottom: calc(var(--mobile-safe-bottom) + 8px) !important;
        width: calc(100% - 16px) !important;
        max-height: calc(100dvh - var(--mobile-safe-bottom) - env(safe-area-inset-top, 0px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .pwa-banner-actions .button,
    .pwa-banner-actions a.button,
    .update-banner .button {
        min-height: 46px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .site-header.app-header .main-navigation {
        top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-tabbar {
        transition: none !important;
    }
}