/* 1001Web Maintenance & Launch Pages - page visiteur.
 * Valeurs des reglages : proprietes --mg-* definies dans le CSS en ligne
 * genere par class-frontend.php (wp_add_inline_style). */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.maintenance-container {
    background: var(--mg-container-bg);
    padding: var(--mg-container-padding);
    border-radius: var(--mg-container-radius);
    max-width: var(--mg-container-max-width);
    width: 100%;
    position: relative;
    z-index: 1;
    box-shadow: var(--mg-container-shadow);
    text-align: center;
}

.maintenance-logo {
    margin-bottom: 30px;
}

.maintenance-logo img {
    max-width: var(--mg-logo-size);
    height: auto;
}

.maintenance-title {
    color: var(--mg-title-color);
    font-family: var(--mg-title-font);
    font-size: var(--mg-title-size);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.maintenance-subtitle {
    color: var(--mg-title-color);
    font-family: var(--mg-title-font);
    font-size: var(--mg-subtitle-size);
    font-weight: 600;
    opacity: 0.92;
    margin-top: -8px;
    margin-bottom: 28px;
    line-height: 1.3;
}

.maintenance-message {
    color: var(--mg-message-color);
    font-family: var(--mg-message-font);
    font-size: var(--mg-message-size);
    line-height: 1.6;
    margin-bottom: 40px;
}

.maintenance-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 40px 0;
}

.maintenance-btn {
    display: inline-block;
    padding: 16px 35px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    min-width: 180px;
}

.maintenance-btn-admin {
    background: var(--mg-button-bg);
    color: var(--mg-button-text);
    border-color: var(--mg-button-border);
}

.maintenance-btn-admin:hover {
    background: var(--mg-button-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--mg-button-rgb), 0.4);
}

.maintenance-btn-visitor {
    background: transparent;
    color: var(--mg-visitor-color);
    border-color: var(--mg-visitor-color);
}

.maintenance-btn-visitor:hover {
    background: var(--mg-button-bg);
    color: var(--mg-button-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--mg-button-rgb), 0.4);
}

/* v2.9.177 — le bouton d'avis prend la couleur du style. */
.maintenance-btn-notify {
    background: var(--mg-button-bg);
    color: var(--mg-button-text);
    border-color: transparent;
}

.maintenance-btn-notify:hover {
    background: var(--mg-button-bg);
    filter: brightness(0.92);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--mg-button-rgb), 0.4);
}

/* Modal notification email */
.mg-notify-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.mg-notify-content {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.mg-notify-content h3 {
    margin: 0 0 10px;
    color: #333;
    font-size: 22px;
}

.mg-notify-content p {
    margin: 0 0 20px;
    color: #666;
    font-size: 14px;
}

.mg-notify-form {
    display: flex;
    gap: 10px;
}

.mg-notify-form input[type="email"] {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.mg-notify-form input[type="email"]:focus {
    outline: none;
    border-color: var(--mg-button-bg);
}

.mg-notify-form button {
    padding: 12px 20px;
    background: var(--mg-button-bg);
    color: var(--mg-button-text);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.mg-notify-form button:hover {
    transform: scale(1.05);
}

.mg-notify-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    background: none;
    border: none;
    padding: 4px;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.mg-notify-close:hover {
    color: #333;
}

.mg-notify-success {
    color: #27ae60;
    font-weight: 600;
    padding: 15px;
    background: #e8f8f0;
    border-radius: 8px;
}

.mg-notify-error {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 10px;
}

/* ========================================
   COUNTDOWN
   ======================================== */
.mg-countdown-wrapper {
    margin: 30px 0;
    text-align: center;
}

.mg-countdown-title {
    font-size: 16px;
    color: var(--mg-message-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mg-countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Style Boxes (par défaut) */
.mg-countdown.mg-countdown-boxes .mg-countdown-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 20px 15px;
    border-radius: 12px;
    min-width: 70px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mg-countdown.mg-countdown-boxes .mg-countdown-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--mg-title-color);
    line-height: 1;
}

.mg-countdown.mg-countdown-boxes .mg-countdown-label {
    font-size: 11px;
    color: var(--mg-message-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* Style Minimal */
.mg-countdown.mg-countdown-minimal .mg-countdown-item {
    padding: 10px 15px;
}

.mg-countdown.mg-countdown-minimal .mg-countdown-value {
    font-size: 48px;
    font-weight: 300;
    color: var(--mg-title-color);
    line-height: 1;
}

.mg-countdown.mg-countdown-minimal .mg-countdown-label {
    font-size: 12px;
    color: var(--mg-message-color);
    text-transform: lowercase;
    margin-top: 5px;
}

.mg-countdown.mg-countdown-minimal .mg-countdown-separator {
    font-size: 48px;
    font-weight: 300;
    color: var(--mg-title-color);
    opacity: 0.5;
    padding: 0 5px;
}

/* Style Circles */
.mg-countdown.mg-countdown-circles .mg-countdown-item {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid var(--mg-button-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mg-countdown.mg-countdown-circles .mg-countdown-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--mg-title-color);
    line-height: 1;
}

.mg-countdown.mg-countdown-circles .mg-countdown-label {
    font-size: 9px;
    color: var(--mg-message-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

/* Countdown terminé */
.mg-countdown-ended {
    font-size: 20px;
    color: var(--mg-title-color);
    padding: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

/* Responsive countdown */
@media (max-width: 480px) {
    .mg-countdown.mg-countdown-boxes .mg-countdown-item {
        min-width: 60px;
        padding: 15px 10px;
    }
    .mg-countdown.mg-countdown-boxes .mg-countdown-value {
        font-size: 28px;
    }
    .mg-countdown.mg-countdown-minimal .mg-countdown-value,
    .mg-countdown.mg-countdown-minimal .mg-countdown-separator {
        font-size: 32px;
    }
    .mg-countdown.mg-countdown-circles .mg-countdown-item {
        width: 65px;
        height: 65px;
    }
    .mg-countdown.mg-countdown-circles .mg-countdown-value {
        font-size: 22px;
    }
    /* v2.9.174 — une seule ligne sur mobile (à 390 px, « sec »
       passait seul sur une 2e ligne avec un « : » orphelin). */
    .mg-countdown {
        flex-wrap: nowrap;
        gap: 6px;
    }
    .mg-countdown .mg-countdown-item {
        flex: 1 1 0;
        min-width: 0;
    }
    .mg-countdown.mg-countdown-boxes .mg-countdown-item {
        min-width: 0;
        padding: 12px 4px;
    }
    .mg-countdown.mg-countdown-boxes .mg-countdown-value {
        font-size: 24px;
    }
    .mg-countdown.mg-countdown-boxes .mg-countdown-label,
    .mg-countdown.mg-countdown-circles .mg-countdown-label {
        letter-spacing: 0;
    }
    .mg-countdown.mg-countdown-minimal .mg-countdown-item {
        padding: 6px 2px;
    }
    .mg-countdown.mg-countdown-minimal .mg-countdown-value {
        font-size: 26px;
    }
    .mg-countdown.mg-countdown-minimal .mg-countdown-separator {
        flex: 0 0 auto;
        font-size: 22px;
        padding: 0;
        align-self: flex-start;
        margin-top: 6px;
    }
    .mg-countdown.mg-countdown-boxes .mg-countdown-separator,
    .mg-countdown.mg-countdown-circles .mg-countdown-separator {
        display: none;
    }
    .mg-countdown.mg-countdown-circles .mg-countdown-item {
        flex: 0 0 auto;
        width: 58px;
        height: 58px;
    }
    .mg-countdown.mg-countdown-circles .mg-countdown-value {
        font-size: 18px;
    }
}




/* Modal */
.mg-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s;
}

.mg-modal-content {
    background-color: #ffffff;
    /* v2.9.174 — scrolls on a short screen (phone in landscape). */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 10% auto;
    padding: 40px;
    border-radius: 15px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s;
}

@media (max-height: 520px) {
    .mg-modal-content {
        margin: 16px auto;
        padding: 24px;
    }
}

.mg-modal-header {
    margin-bottom: 25px;
}

.mg-modal-header h3 {
    color: #333;
    font-size: 24px;
    margin-bottom: 10px;
}

.mg-modal-header p {
    color: #666;
    font-size: 14px;
}

.mg-modal-close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    margin-top: -10px;
    background: none;
    border: none;
    padding: 4px;
    -webkit-appearance: none;
    appearance: none;
}

.mg-modal-close:hover {
    color: #333;
}

.mg-modal-body {
    margin-bottom: 20px;
}

.mg-form-group {
    margin-bottom: 20px;
}

.mg-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    text-align: left;
}

.mg-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mg-form-group input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.mg-form-group input:focus {
    outline: none;
    border-color: var(--mg-button-bg);
}

/* Cacher l'icône par défaut du navigateur */
.mg-form-group input::-ms-reveal,
.mg-form-group input::-ms-clear,
.mg-form-group input::-webkit-credentials-auto-fill-button {
    display: none;
}

.mg-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #999;
    font-size: 18px;
    line-height: 1;
    transition: color 0.3s;
}

.mg-toggle-password:hover {
    color: #333;
}

.mg-toggle-password svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mg-modal-footer {
    text-align: center;
}

.mg-modal-submit {
    background: var(--mg-button-bg);
    /* v2.9.174 — black or white depending on the button color (white
       on white made « Enter » invisible with the Horizon theme). */
    color: var(--mg-button-text);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    border: none;
    padding: 14px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}

.mg-modal-submit:hover {
    background: var(--mg-button-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--mg-button-rgb), 0.4);
}

.mg-error-message {
    color: #e74c3c;
    background: #fadbd8;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: none;
    font-size: 14px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* =============================
   ANIMATIONS
   ============================= */

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations d'entree : CSS dynamique (reglages), voir class-frontend.php. */

@media (max-width: 600px) {
    .maintenance-container {
        padding: 30px 20px;
        margin: 10px;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }

    .maintenance-title {
        font-size: var(--mg-title-size-sm);
    }

    .maintenance-message {
        font-size: var(--mg-message-size-sm);
        margin-bottom: 25px;
    }

    .maintenance-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .maintenance-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 14px;
    }

    .mg-modal-content {
        margin: 20% auto;
        padding: 30px 20px;
        overflow: hidden;
    }

    .mg-modal-content .cf-turnstile {
        transform: scale(0.85);
        transform-origin: left top;
    }

    .mg-sidebar {
        display: none;
    }

    .maintenance-logo img {
        max-width: var(--mg-logo-size-sm);
    }

}

@media (max-width: 400px) {
    .maintenance-wrapper {
        padding: 15px;
    }

    .maintenance-container {
        padding: 25px 15px;
        margin: 5px;
        width: calc(100% - 10px);
        border-radius: var(--mg-container-radius-sm);
    }

    .maintenance-title {
        font-size: var(--mg-title-size-xs);
    }

    .maintenance-btn {
        padding: 12px 15px;
        font-size: 13px;
    }
}

/* Panneau latéral DISCRET avec slide */
.mg-sidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px;
    padding-top: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1002;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.mg-sidebar-left {
    left: 0;
    transform: translateY(-50%) translateX(-100%);
    border-radius: 0 12px 12px 0;
}

.mg-sidebar-left.mg-sidebar-open {
    transform: translateY(-50%) translateX(0);
}

.mg-sidebar-right {
    right: 0;
    transform: translateY(-50%) translateX(100%);
    border-radius: 12px 0 0 12px;
}

.mg-sidebar-right.mg-sidebar-open {
    transform: translateY(-50%) translateX(0);
}

/* Onglet déclencheur - DISPARAIT quand ouvert */
.mg-sidebar-trigger {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 80px;
    background: linear-gradient(135deg, var(--mg-sidebar-tab), var(--mg-sidebar-tab-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 1;
    visibility: visible;
    /* Reset button element styles */
    border: none;
    padding: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.mg-sidebar-trigger:hover {
    width: 38px;
}

/* CACHER le tab quand le sidebar est ouvert */
.mg-sidebar-trigger.mg-trigger-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mg-sidebar-trigger-left {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.mg-sidebar-trigger-right {
    right: 0;
    border-radius: 8px 0 0 8px;
}

.mg-sidebar-trigger svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.mg-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mg-sidebar-section + .mg-sidebar-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mg-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Effet grossissement prononcé au hover */
.mg-sidebar-icon:hover {
    transform: scale(1.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Bouton fermer le sidebar */
.mg-sidebar-close {
    position: absolute;
    top: 5px;
    width: 24px;
    height: 24px;
    background: #e74c3c;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    line-height: 1;
}

.mg-sidebar-left .mg-sidebar-close {
    right: 5px;
}

.mg-sidebar-right .mg-sidebar-close {
    left: 5px;
}

.mg-sidebar-close:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.mg-icon-facebook { background: #1877f2; }
.mg-icon-twitter { background: #000000; }
.mg-icon-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.mg-icon-linkedin { background: #0077b5; }
.mg-icon-youtube { background: #ff0000; }
.mg-icon-tiktok { background: #000000; }
.mg-icon-email { background: #667eea; }
.mg-icon-phone { background: #25d366; }
.mg-icon-whatsapp { background: #25d366; }

/* ========================================
   LOTTIE ANIMATIONS
   ======================================== */
/* Decalage pilote par variables CSS (voir $lottie_shift). Sur petit
   ecran il est reduit de moitie : 300px pousseraient l'animation hors
   du cadre sur un telephone. */
.mg-lottie-container dotlottie-player {
    transform: translate(var(--mgenius-ox, 0px), var(--mgenius-oy, 0px));
}
@media (max-width: 768px) {
    .mg-lottie-container dotlottie-player {
        transform: translate(
            calc(var(--mgenius-ox, 0px) * 0.5),
            calc(var(--mgenius-oy, 0px) * 0.5)
        );
    }
}

.mg-lottie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    /* Le conteneur ne peut plus depasser la largeur utile. */
    max-width: 100%;
}

/* La taille demandee dans les reglages est appliquee en
   pixels sur la balise <dotlottie-player> (voir render_lottie_player).
   Sans plafond, une valeur de 400 ou 600 s'appliquait telle quelle sur
   un telephone, poussant le titre et le bouton hors de l'ecran.
   Ces deux plafonds gardent la taille souhaitee comme cible tout en la
   bornant a l'espace reellement disponible. */
.mg-lottie-container dotlottie-player {
    max-width: 90vw;
    /* Plafond de hauteur volontairement large sur grand
       ecran. Une valeur de 40vh valait ~430px sur un
       ecran de 1080px : toute taille superieure etait ramenee la, et
       deplacer le curseur entre 430 et 800 ne changeait plus rien.
       Le plafond doit rattraper un debordement, pas brider un choix.
       Les paliers ci-dessous prennent le relais quand l'espace manque
       reellement. */
    max-height: 75vh;
}

.mg-lottie-container.mg-lottie-above-title {
    margin-bottom: 15px;
}

.mg-lottie-container.mg-lottie-below-title {
    margin-top: 10px;
    margin-bottom: 20px;
}

.mg-lottie-container.mg-lottie-above-message {
    margin-bottom: 15px;
}

.mg-lottie-container.mg-lottie-below-buttons {
    margin-top: 30px;
}

.mg-lottie-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}

.mg-lottie-background > div {
    width: 100%;
    height: 100%;
}

/* Responsive Lottie
   transform:scale() retire : il reduisait l'animation
   visuellement mais l'element conservait sa hauteur de layout d'origine,
   donc le vide au-dessus du titre restait entier. Le plafond en vh
   ci-dessus reduit la boite pour de vrai, et sur toutes les largeurs
   au lieu du seul palier 480px. */
/* Tablettes et fenetres etroites : c'est la plage ou le debordement a
   ete observe (722px de large, animation de 530px). */
@media (max-width: 1024px) {
    .mg-lottie-container dotlottie-player {
        max-height: 45vh;
    }
}

/* Ecrans bas (portables en fenetre reduite) : la largeur ne dit rien
   de la hauteur disponible. */
@media (max-height: 800px) {
    .mg-lottie-container dotlottie-player {
        max-height: 50vh;
    }
}

@media (max-width: 480px) {
    .mg-lottie-container {
        margin: 10px auto;
    }
    .mg-lottie-container dotlottie-player {
        max-height: 30vh;
    }
}

/* ========================================
   VIDEO BACKGROUND
   ======================================== */
.mg-video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.mg-video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 177.77vh; /* 16:9 ratio */
    min-height: 56.25vw;
    transform: translate(-50%, -50%);
    border: none;
}

.mg-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* ========================================
   PARALLAX EFFECT
   ======================================== */
/* v2.9.174 — horizontal only: with « overflow: hidden » a short
   screen (phone in landscape) could not scroll to the buttons. */
.mg-parallax-enabled {
    overflow-x: hidden;
    overflow-y: auto;
}

.mg-parallax-enabled .maintenance-container {
    transition: transform 0.1s ease-out;
}

/* ========================================
   SCREEN READER ONLY (a11y)
   ======================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ========================================
   SKIP LINK (a11y WCAG 2.1 §2.4.1)
   ======================================== */
.mg-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 99999;
    padding: 12px 24px;
    background: #000;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.1s;
}
.mg-skip-link:focus {
    top: 0;
}

/* ========================================
   FOCUS VISIBLE (a11y WCAG 2.1 §2.4.7)
   ======================================== */
*:focus {
    outline: none;
}
*:focus-visible {
    outline: 3px solid #F97316;
    outline-offset: 3px;
    border-radius: 3px;
}
.maintenance-btn:focus-visible,
.mg-modal-submit:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ========================================
   PREFERS-REDUCED-MOTION (a11y WCAG 2.1 §2.3.3)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .mg-parallax-enabled .maintenance-container {
        transition: none !important;
        transform: none !important;
    }
    .maintenance-logo,
    .maintenance-title,
    .maintenance-subtitle,
    .maintenance-message,
    .maintenance-btn {
        animation: none !important;
    }
}