/* INFO : app/styles/root.css
   Styles globaux racine (accessibilité, focus, reduced-motion, skip link, view transitions).
   Préfixe stormi- pour les classes dédiées. */

/* --- Base html/body --- */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #e0e0e0;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-top: env(safe-area-inset-top, 0);
}

/* --- Tactile : réactivité immédiate, pas de délai 300ms --- */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}
body {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
}
/* Zones interactives : cibles tactiles minimales (~44px) et feedback --- */
button,
[role="button"],
a.stormi-touch-target,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    touch-action: manipulation;
    min-height: 44px;
    min-width: 44px;
}
@media (pointer: fine) {
    button,
    [role="button"],
    a.stormi-touch-target,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 0;
        min-width: 0;
    }
}

/* --- Accessibilité : focus visible (navigation clavier) --- */
:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
    outline: none;
}

button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 0 !important;
    border-color: #3b82f6 !important;
}

a:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

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

/* --- Skip link (accessibilité) --- */
.stormi-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #3b82f6;
    color: white;
    padding: 8px 16px;
    z-index: 100000;
    transition: top 0.2s;
}

.stormi-skip-link:focus {
    top: 0;
}

/* --- View Transitions API --- */
@supports (view-transition-name: none) {
    ::view-transition-old(root) {
        animation: stormi-vt-fade-out 0.08s ease-out forwards;
    }
    ::view-transition-new(root) {
        animation: stormi-vt-fade-in 0.2s ease-out 0.06s forwards;
    }
    ::view-transition-old(main-content) {
        animation: stormi-vt-fade-out 0.08s ease-out forwards;
    }
    ::view-transition-new(main-content) {
        animation: stormi-vt-fade-in 0.2s ease-out 0.06s forwards;
    }
    @keyframes stormi-vt-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    @keyframes stormi-vt-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(main-content),
    ::view-transition-new(main-content) {
        animation: none !important;
    }
}

.stormi-view-transition-main {
    view-transition-name: main-content;
}