/*
 * HDR Stream — PWA Native-Like UX
 * Supprime les comportements "web visible", ajoute safe-area iOS,
 * feedback tactile, boutons accessibles, etc.
 * Chargé en <link> statique — indépendant du build Vite.
 */

/* ════════════════════════════════════════════════════════════════════════════
   1. RESET MOBILE — supprime les artéfacts visuels "web"
════════════════════════════════════════════════════════════════════════════ */

/* Pas de flash bleu/gris au tap (iOS + Android) */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;        /* pas de menu contextuel iOS sur long-press */
}

/* Supprime le zoom double-tap sur les boutons et liens */
a, button, [role="button"], input[type="submit"], input[type="button"],
label[for], select, summary {
    touch-action: manipulation;
}

/* Interdit la sélection de texte sur les éléments UI (nav, boutons, labels) */
nav, button, [role="button"], .sidebar-nav, .hdr-bottomnav,
.pwa-install-banner, header {
    user-select: none;
    -webkit-user-select: none;
}

/* Empêche l'overscroll "bounce" au bord de la page (Android/Chrome) */
html {
    overscroll-behavior: none;
}

/* Viewport scroll behavior */
html, body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Pas de barre de défilement horizontale involontaire */
body {
    overflow-x: hidden;
    max-width: 100vw;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. SAFE AREA — iPhone notch / Dynamic Island / barre de geste Android
════════════════════════════════════════════════════════════════════════════ */

/* La balise viewport doit avoir viewport-fit=cover pour que ces variables
   soient non-nulles. Déjà configuré dans les layouts. */

:root {
    --sat: env(safe-area-inset-top,    0px);
    --sar: env(safe-area-inset-right,  0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left,   0px);
}

/* Header principal : compense le notch en mode standalone */
@media all and (display-mode: standalone) {
    header:first-of-type {
        padding-top: var(--sat);
        height: calc(var(--hdr-topbar-h, 44px) + var(--sat)) !important;
        box-sizing: border-box;
        overflow: visible;
    }

    /* Bottom nav (si présente) : compense la barre de geste */
    .hdr-bottomnav {
        padding-bottom: calc(var(--sab) + 0.25rem);
        height: calc(64px + var(--sab));
    }

    /* Body principal : ne pas masquer sous la bottom nav */
    .main-content {
        padding-bottom: calc(64px + var(--sab) + 1rem);
    }
}

/* Padding latéral sur les pages fullscreen (notch paysage) */
.safe-x {
    padding-left:  max(1rem, var(--sal));
    padding-right: max(1rem, var(--sar));
}


/* ════════════════════════════════════════════════════════════════════════════
   3. FEEDBACK TACTILE — boutons et liens
════════════════════════════════════════════════════════════════════════════ */

button, [role="button"], a.btn, .pwa-tap {
    transition: transform 80ms ease, opacity 80ms ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

button:active, [role="button"]:active, a.btn:active, .pwa-tap:active {
    transform: scale(0.97);
    opacity: 0.85;
}

/* Taille minimum des zones tactiles (WCAG 2.5.5 — 44×44px) — TOUCH uniquement
   Sur desktop (souris), on laisse les tailles définies par le design system.
   Les checkboxes/radios sont exclus : leur zone tactile est gérée via le <label>. */
@media (pointer: coarse) {
    button, [role="button"], a.nav-link, .sidebar-link {
        min-height: 44px;
        min-width:  44px;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   4. FORMULAIRES MOBILES — clavier adapté, pas de zoom iOS
════════════════════════════════════════════════════════════════════════════ */

/* iOS zoome si font-size < 16px sur les inputs — TOUCH uniquement
   (pointer:fine = souris desktop → on laisse les tailles du design system) */
@media (pointer: coarse) {
    input, textarea, select {
        font-size: max(16px, 1rem) !important;
    }
}

/* Supprime l'apparence native pour cohérence cross-browser.
   Exclut checkbox/radio dont l'apparence native est gérée par @tailwindcss/forms. */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    -webkit-appearance: none;
    appearance: none;
}

/* Placeholder plus visible */
::placeholder {
    opacity: 0.55;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. SCROLL PERFORMANT dans les conteneurs
════════════════════════════════════════════════════════════════════════════ */

.scroll-snap-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.scroll-snap-x::-webkit-scrollbar { display: none; }
.scroll-snap-x > * { scroll-snap-align: start; }

.scroll-snap-y {
    overflow-y: auto;
    scroll-snap-type: y proximity;
    -webkit-overflow-scrolling: touch;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. BOTTOM NAVIGATION — mode standalone mobile
   Visible uniquement en PWA installée (display-mode: standalone)
════════════════════════════════════════════════════════════════════════════ */

.hdr-bottomnav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--paper, #fff);
    border-top: 1px solid var(--line, #ebe8f5);
    z-index: 900;
    align-items: center;
    justify-content: space-around;
    padding: 0 0.5rem;
    padding-bottom: var(--sab, 0px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media all and (display-mode: standalone) {
    .hdr-bottomnav {
        display: flex;
    }
}

.hdr-bottomnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 8px 4px;
    color: var(--ink-faint, #8c89a6);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    border-radius: 12px;
    transition: color 0.15s, background 0.15s;
    touch-action: manipulation;
    min-height: 52px;
}

.hdr-bottomnav-item svg {
    width: 22px; height: 22px;
    flex-shrink: 0;
}

.hdr-bottomnav-item.active,
.hdr-bottomnav-item[aria-current="page"] {
    color: var(--hdr-violet, #5957cd);
}

.hdr-bottomnav-item:active {
    transform: scale(0.93);
    background: var(--paper-3, #f4f1fb);
}


/* ════════════════════════════════════════════════════════════════════════════
   7. SPLASH / LOADER SKELETON
════════════════════════════════════════════════════════════════════════════ */

@keyframes hdr-skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skeleton {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--paper-3, #f4f1fb) 25%,
        var(--paper-2, #faf9ff) 50%,
        var(--paper-3, #f4f1fb) 75%
    );
    background-size: 200% 100%;
    animation: hdr-skeleton 1.4s ease infinite;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        #1e1b38 25%, #231f4c 50%, #1e1b38 75%
    );
    background-size: 200% 100%;
    animation: hdr-skeleton 1.4s ease infinite;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. BANNIÈRE D'INSTALLATION PWA
════════════════════════════════════════════════════════════════════════════ */

.pwa-install-banner {
    position: fixed;
    bottom: calc(0px + var(--sab, 0px));
    left: 0; right: 0;
    z-index: 1000;
    background: var(--paper, #fff);
    border-top: 1px solid var(--line, #ebe8f5);
    padding: 1rem 1.25rem calc(1rem + var(--sab, 0px));
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 -4px 24px rgba(15,13,29,.08);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.pwa-install-banner.visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* Ajustement si bottom nav présente */
@media all and (display-mode: standalone) {
    .pwa-install-banner {
        display: none !important;  /* déjà installée */
    }
}

.pwa-install-banner__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(29,58,196,.2);
}

.pwa-install-banner__text {
    flex: 1;
    min-width: 0;
}

.pwa-install-banner__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ink, #0f0d1d);
    margin: 0 0 2px;
}

.pwa-install-banner__sub {
    font-size: 0.75rem;
    color: var(--ink-faint, #8c89a6);
    margin: 0;
    line-height: 1.4;
}

.pwa-install-banner__btn {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #1d3ac4, #5957cd);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
}

.pwa-install-banner__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-faint, #8c89a6);
    padding: 4px;
    display: flex;
    align-items: center;
    touch-action: manipulation;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
}

/* Bannière guide iOS (sheet montante) */
.pwa-ios-guide {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1001;
    background: var(--paper, #fff);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem 1.25rem calc(2rem + var(--sab, 0px));
    box-shadow: 0 -8px 40px rgba(15,13,29,.15);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.pwa-ios-guide.visible {
    transform: translateY(0);
}

.pwa-ios-guide__handle {
    width: 36px; height: 4px;
    background: var(--line, #ebe8f5);
    border-radius: 2px;
    margin: 0 auto 1.25rem;
}

.pwa-ios-guide__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line-soft, #f3f1fb);
    font-size: 0.875rem;
    color: var(--ink-soft, #4a4763);
}

.pwa-ios-guide__step:last-child { border-bottom: none; }

.pwa-ios-guide__step svg {
    width: 24px; height: 24px;
    color: var(--hdr-violet, #5957cd);
    flex-shrink: 0;
}

/* Overlay sombre derrière les sheets */
.pwa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,13,29,.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.pwa-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. TRANSITIONS PAGE — sensation app native
════════════════════════════════════════════════════════════════════════════ */

@media all and (display-mode: standalone) {
    .main-content {
        animation: hdr-page-in 0.22s ease both;
    }
}

@keyframes hdr-page-in {
    from { opacity: 0.6; transform: translateY(6px); }
    to   { opacity: 1;   transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════════════════
   10. DARK MODE — cohérence bannière + bottom nav
════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .pwa-install-banner,
[data-theme="dark"] .pwa-ios-guide {
    background: var(--paper, #0f0d1d);
    border-color: var(--line, #2d2860);
}

[data-theme="dark"] .hdr-bottomnav {
    background: rgba(15, 13, 29, 0.92);
    border-color: var(--line, #2d2860);
}