/* ==========================================
MOVIE RACE WARS - CSS du menu réutilisable
========================================== */

/* Oswald pour le texte, sans écraser la police des icônes Font Awesome */
.mrw-header,
#mrwLanguageModal {
font-family: 'Oswald', sans-serif !important;
}

.mrw-header a,
.mrw-header button,
.mrw-header span,
#mrwLanguageModal a,
#mrwLanguageModal button,
#mrwLanguageModal span,
#mrwLanguageModal p,
#mrwLanguageModal h2 {
font-family: 'Oswald', sans-serif !important;
}

/* Les icônes doivent conserver la police Font Awesome /
.mrw-header .fa,
.mrw-header .fas,
.mrw-header .far,
.mrw-header .fab,
.mrw-header [class^="fa-"],
.mrw-header [class=" fa-"],
#mrwLanguageModal .fa,
#mrwLanguageModal .fas,
#mrwLanguageModal .far,
#mrwLanguageModal .fab,
#mrwLanguageModal [class^="fa-"],
#mrwLanguageModal [class*=" fa-"] {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
}

.mrw-header .fa-brands,
#mrwLanguageModal .fa-brands {
font-family: "Font Awesome 6 Brands" !important;
font-weight: 400 !important;
}

:root {
--mrw-bg: #050d1b;
--mrw-red: #ff2738;
--mrw-white: #f6f7fb;
--mrw-muted: #b8c0cd;
--mrw-border: rgba(195, 211, 235, .42);
--mrw-header-height: 62px;
}

.mrw-header,
.mrw-header * {
box-sizing: border-box;
}

.mrw-header {
position: relative;
z-index: 99999;
width: 100%;
min-height: var(--mrw-header-height);
color: var(--mrw-white);
font-family: 'Oswald', sans-serif;
background:
radial-gradient(ellipse at 7% 110%, rgba(255, 90, 42, .16), transparent 26%),
linear-gradient(100deg, rgba(4, 10, 22, .92), rgba(5, 14, 31, .88) 58%, rgba(3, 10, 23, .92));
border-bottom: 1px solid var(--mrw-border);
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
overflow: visible !important; /* Empeche le tronquage du menu mobile */
}

.mrw-header-inner {
position: relative;
width: min(1480px, 100%);
min-height: var(--mrw-header-height);
margin: 0 auto;
padding: 0 5.3%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
overflow: visible !important;
}

.mrw-brand {
display: flex;
flex: 0 0 235px;
align-items: center;
width: 235px;
min-width: 0;
height: 61px;
overflow: hidden;
text-decoration: none;
}

.mrw-brand-logo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center;
}

.mrw-nav {
display: flex;
align-self: stretch;
align-items: stretch;
justify-content: center;
gap: clamp(16px, 2.4vw, 42px);
margin-left: auto;
}

.mrw-nav-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: var(--mrw-header-height);
padding: 0 1px;
color: #edf0f6;
font-size: 15px;
font-weight: 500;
letter-spacing: .35px;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: color .2s ease, text-shadow .2s ease;
}

.mrw-nav-link i {
color: var(--mrw-muted);
font-size: 21px;
transition: color .2s ease, transform .2s ease;
}

.mrw-nav-link:hover,
.mrw-nav-link:hover i,
.mrw-nav-link.is-active {
color: #fff;
text-shadow: 0 0 12px rgba(255, 39, 56, .38);
}

.mrw-nav-link:hover i {
transform: translateY(-1px);
}

.mrw-nav-link.is-active i {
color: var(--mrw-red);
filter: drop-shadow(0 0 5px rgba(255, 39, 56, .65));
}

.mrw-nav-link.is-active::after {
position: absolute;
right: -12px;
bottom: 0;
left: -12px;
height: 3px;
content: "";
background: var(--mrw-red);
box-shadow: 0 0 11px rgba(255, 39, 56, .65);
}

.mrw-language {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
margin-left: clamp(10px, 2vw, 30px);
}

.mrw-language-link {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 30px;
padding: 4px;
border: 1px solid rgba(183, 198, 221, .32);
border-radius: 6px;
background: rgba(6, 14, 29, .72);
opacity: .68;
text-decoration: none;
transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.mrw-language-link svg {
display: block;
width: 25px;
height: 18px;
border-radius: 2px;
overflow: hidden;
}

.mrw-language-link:hover,
.mrw-language-link.is-active {
opacity: 1;
border-color: var(--mrw-red);
box-shadow: 0 0 10px rgba(255, 39, 56, .2);
}

.mrw-language-link:hover {
transform: translateY(-1px);
}

.mrw-language-link:focus-visible,
.mrw-mobile-toggle:focus-visible {
outline: 2px solid var(--mrw-red);
outline-offset: 3px;
}

.mrw-mobile-toggle {
display: none;
width: 40px;
height: 40px;
flex: 0 0 40px;
align-items: center;
justify-content: center;
border: 1px solid rgba(183, 198, 221, .35);
border-radius: 7px;
background: rgba(255, 255, 255, .03);
color: #fff;
font-size: 20px;
cursor: pointer;
position: relative;
z-index: 100002;
pointer-events: auto;
}

.mrw-mobile-toggle:hover {
border-color: var(--mrw-red);
color: var(--mrw-red);
}

/* ==========================================
BREAKPOINTS RESPONSIVE
========================================== */

@media (max-width: 1100px) {
.mrw-header-inner {
padding-right: 3%;
padding-left: 3%;
gap: 18px;
}

.mrw-brand {
    flex-basis: 205px;
    width: 205px;
}

.mrw-nav {
    gap: clamp(12px, 1.7vw, 22px);
}

.mrw-nav-link {
    gap: 8px;
    font-size: 13px;
}

.mrw-nav-link i {
    font-size: 18px;
}

.mrw-language {
    margin-left: 4px;
}


}

@media (max-width: 820px) {
:root {
--mrw-header-height: 64px;
}

.mrw-header-inner {
    padding: 0 18px;
    gap: 12px;
}

.mrw-brand {
    flex: 0 1 205px;
    height: 58px;
}

.mrw-mobile-toggle {
    display: inline-flex;
    margin-left: auto;
}

.mrw-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 18px 14px;
    border-bottom: 1px solid rgba(195, 211, 235, .25);
    background: rgba(4, 11, 24, .98);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .35);
    z-index: 100001;
}

.mrw-nav.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mrw-nav-link {
    justify-content: flex-start;
    min-height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(195, 211, 235, .09);
    font-size: 15px;
}

.mrw-nav-link i {
    width: 25px;
    font-size: 19px;
}

.mrw-nav-link.is-active::after {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 0;
    width: 3px;
    height: auto;
}

.mrw-language {
    gap: 5px;
    margin-left: 0;
}

.mrw-language-link {
    width: 30px;
    height: 28px;
    padding: 3px;
}

.mrw-language-link svg {
    width: 23px;
    height: 16px;
}


}

@media (max-width: 420px) {
.mrw-header-inner {
padding: 0 12px;
gap: 8px;
}

.mrw-brand {
    flex-basis: 155px;
}

.mrw-mobile-toggle {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.mrw-language {
    gap: 3px;
}

.mrw-language-link {
    width: 25px;
    height: 25px;
    padding: 2px;
}

.mrw-language-link svg {
    width: 20px;
    height: 14px;
}


}

@media (prefers-reduced-motion: reduce) {
.mrw-header *,
.mrw-header *::before,
.mrw-header *::after {
transition-duration: .01ms !important;
}
}

/* ==========================================
MODALE PARAMÈTRES / LANGUES
========================================== */

body.mrw-modal-open {
overflow: hidden;
}

#mrwLanguageModal,
#mrwLanguageModal[hidden],
#mrwLanguageModal:not(.is-open) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

#mrwLanguageModal.is-open:not([hidden]) {
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
overflow-y: auto !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
box-sizing: border-box !important;
transition: opacity .22s ease, visibility .22s ease;
}

.mrw-modal-backdrop {
position: absolute;
inset: 0;
z-index: 0;
background: rgba(0, 4, 12, .82);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}

.mrw-modal-panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 440px;
padding: 34px 30px 25px;
border: 1px solid rgba(195, 211, 235, .36);
border-top: 3px solid var(--mrw-red);
border-radius: 12px;
color: var(--mrw-white);
text-align: center;
background:
radial-gradient(ellipse at 50% 0, rgba(255, 39, 56, .13), transparent 48%),
linear-gradient(145deg, #101b2d, #050b16 75%);
box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 0 0 28px rgba(255, 39, 56, .08);
transform: translateY(12px) scale(.98);
transition: transform .22s ease;
}

.mrw-modal.is-open .mrw-modal-panel {
transform: translateY(0) scale(1);
}

.mrw-modal-close {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(195, 211, 235, .25);
border-radius: 7px;
color: #e8edf7;
background: rgba(255, 255, 255, .04);
font-size: 20px;
cursor: pointer;
}

.mrw-modal-close:hover {
border-color: var(--mrw-red);
color: var(--mrw-red);
}

.mrw-modal-heading-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-bottom: 12px;
border: 1px solid rgba(255, 39, 56, .45);
border-radius: 50%;
color: var(--mrw-red);
background: rgba(255, 39, 56, .08);
font-size: 24px;
box-shadow: 0 0 24px rgba(255, 39, 56, .09);
}

.mrw-modal-kicker {
margin: 0 0 5px;
color: #aeb9ca;
font-size: 11px;
letter-spacing: 2.5px;
}

.mrw-modal-title {
margin: 0;
color: #fff;
font-size: clamp(25px, 5vw, 31px);
letter-spacing: 1px;
text-transform: uppercase;
}

.mrw-modal-description {
margin: 9px 0 23px;
color: #bac4d4;
font-size: 14px;
}

.mrw-modal-languages {
display: flex;
flex-direction: column;
gap: 10px;
}

.mrw-modal-language {
display: flex;
align-items: center;
gap: 14px;
min-height: 58px;
padding: 12px 15px;
border: 1px solid rgba(195, 211, 235, .18);
border-radius: 8px;
color: #edf0f6;
text-align: left;
text-decoration: none;
background: rgba(255, 255, 255, .025);
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.mrw-modal-language svg {
display: block;
flex: 0 0 30px;
width: 30px;
height: 20px;
border-radius: 2px;
overflow: hidden;
}

.mrw-modal-language span {
flex: 1;
font-size: 15px;
font-weight: 500;
}

.mrw-modal-language > i {
color: var(--mrw-red);
}

.mrw-modal-language:hover,
.mrw-modal-language.is-active {
border-color: rgba(255, 39, 56, .8);
background: rgba(255, 39, 56, .09);
}

.mrw-modal-language:hover {
transform: translateX(2px);
}

.mrw-modal-footnote {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 21px 0 0;
color: #8491a5;
font-size: 11px;
letter-spacing: .4px;
}

.mrw-modal-footnote i {
color: var(--mrw-red);
}

@media (max-width: 600px) {
#mrwLanguageModal.is-open:not([hidden]) {
padding: 12px !important;
align-items: center !important;
overflow-y: auto !important;
}

.mrw-modal-panel {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 30px 18px 20px;
    border-radius: 10px;
}

.mrw-modal-heading-icon {
    width: 46px;
    height: 46px;
    font-size: 21px;
    margin-bottom: 9px;
}

.mrw-modal-description {
    margin-bottom: 18px;
}

.mrw-modal-language {
    min-height: 52px;
    padding: 10px 12px;
}

.mrw-modal-footnote {
    margin-top: 16px;
}


}

@media (prefers-reduced-motion: reduce) {
.mrw-modal,
.mrw-modal-panel,
.mrw-modal-language {
transition: none;
}
}

/* ==========================================
RÉGLAGE DE LA TOUCHE DE DÉMARRAGE
========================================== */

.mrw-key-settings {
margin-top: 22px;
padding: 17px;
border: 1px solid rgba(195, 211, 235, .22);
border-radius: 9px;
background: rgba(255, 255, 255, .035);
color: #f6f7fb;
font-family: 'Oswald', sans-serif;
}

.mrw-key-settings-heading {
display: flex;
align-items: flex-start;
gap: 12px;
text-align: left;
}

.mrw-key-settings-heading > i {
flex: 0 0 auto;
margin-top: 3px;
color: #ff2738;
font-size: 21px;
}

.mrw-key-settings-heading h3 {
margin: 0;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}

.mrw-key-settings-heading p {
margin: 4px 0 0;
color: #b8c0cd;
font-family: 'Oswald', sans-serif;
font-size: 13px;
line-height: 1.4;
}

.mrw-key-settings-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 15px;
}

.mrw-key-settings-controls kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 88px;
min-height: 42px;
padding: 7px 13px;
border: 1px solid rgba(255, 39, 56, .7);
border-bottom-width: 3px;
border-radius: 7px;
background: #080e1b;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 15px;
letter-spacing: .06em;
box-shadow: 0 0 16px rgba(255, 39, 56, .12);
}

.mrw-change-key {
min-height: 42px;
padding: 9px 14px;
border: 1px solid #ff2738;
border-radius: 7px;
background: linear-gradient(120deg, #ff2738, #a9001b);
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 14px;
cursor: pointer;
transition: filter .2s, box-shadow .2s;
}

.mrw-change-key:hover,
.mrw-change-key.is-listening {
filter: brightness(1.15);
box-shadow: 0 0 18px rgba(255, 39, 56, .3);
}

.mrw-key-hint {
margin: 10px 0 0;
color: #9ba8bc;
font-family: 'Oswald', sans-serif;
font-size: 12px;
text-align: left;
}

@media (max-width: 480px) {
.mrw-key-settings {
padding: 14px;
margin-top: 17px;
}
.mrw-key-settings-controls {
align-items: stretch;
flex-direction: column;
}
.mrw-key-settings-controls kbd,
.mrw-change-key {
width: 100%;
}
}