/* Container takes full viewport height */
.mgs-swiper-wrapper { width:100%; height:100vh; position:relative; }
.my-glass-swiper { width:100%; height:100%; }

.swiper-slide.mgs-slide { position:relative; display:flex; align-items:center; justify-content:center; }
.mgs-slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(1.02) saturate(1.05); transform:scale(1.02); }

/* Désactive les limites de hauteur imposées par les thèmes */
.mgs-swiper-wrapper,
.my-glass-swiper,
.mgs-slide,
.swiper-slide {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
}

/* Enlève les marges/paddings éventuels autour du shortcode */
.entry-content .mgs-swiper-wrapper,
.container .mgs-swiper-wrapper,
.site-content .mgs-swiper-wrapper,
.wp-block .mgs-swiper-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

.mgs-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 30px rgba(2,6,23,0.45);
    transition: transform 0.3s, box-shadow 0.3s;
}
.mgs-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 40px rgba(2,6,23,0.55);
}

.mgs-title1 {
    font-size: clamp(36px, 6vw, 72px); /* très gros et responsive */
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(40px);
    animation: mgs-title-fade-up 1s cubic-bezier(.2,.9,.2,1) forwards 0.3s;
    text-shadow: 0 4px 12px rgba(0,0,0,0.5); /* pour bien ressortir sur les images */
}


.mgs-title {
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 6vw, 72px);
    color: #ffffff;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(40px);
    animation: mgs-title-fade-up 1s cubic-bezier(.2,.9,.2,1) forwards 0.3s;
    text-shadow: 0 4px 12px rgba(0,0,0,0.5);
    
    width: 100%;        /* occupe 70% du conteneur */
    max-width: 100%;    /* sécurité pour écrans larges */
    display: block;
    line-height: 1.2;
}





/* Animation du titre */
@keyframes mgs-title-fade-up {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.mgs-overlay {
    font-family: 'Rubik', sans-serif;
}

.mgs-title {
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
}

.mgs-text {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}

.mgs-btn {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
}
/* Navigation buttons */





/* Boutons navigation plus petits */
.mgs-nav-prev, .mgs-nav-next {
    width: 32px;           /* largeur du bouton */
    height: 32px;          /* hauteur du bouton */
    border-radius: 50%;    /* cercle parfait */
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;              /* centré verticalement */
    transform: translateY(-50%);
    z-index: 5;
}

/* Position gauche/droite */
.mgs-nav-prev { left: 12px; }
.mgs-nav-next { right: 12px; }

/* Flèches à l’intérieur */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 12px!important;       /* taille réduite de la flèche */
    color: #ffffff;
}





/* Hover effect */
.mgs-nav-prev:hover, .mgs-nav-next:hover {
    background: rgba(255,255,255,0.35);
}





/* overlay glass panel */
.mgs-overlay1 {
    position:relative;
    z-index:10;
    width:clamp(280px, 45%, 720px);
    padding: clamp(18px, 2.5vw, 30px);
    border-radius:20px;
    backdrop-filter: blur(14px) saturate(120%);
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 40px rgba(2,6,23,0.45);
    color:#fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.mgs-overlay {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    backdrop-filter: blur(14px) saturate(120%);
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    padding: clamp(18px, 2.5vw, 30px);
    box-shadow: 0 12px 60px rgba(2,6,23,0.5);
    color: #fff;
    text-shadow: 0 6px 18px rgba(0,0,0,0.5);

    width: 70%;          /* <-- largeur limitée à 70% du slide */
    max-width: 70%;      /* sécurité pour grands écrans */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* gauche du slide */
    z-index: 2;
}




.mgs-overlay h2 { margin:0 0 8px; font-size:clamp(20px, 2.8vw, 36px); }
.mgs-overlay p { margin:0; font-size:clamp(14px, 1.6vw, 18px); opacity:0.95; }

/* navigation custom */
.mgs-nav-prev, .mgs-nav-next { color:#fff; width:44px!important; height:44px!important; border-radius:999px; background: rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.mgs-nav-prev:hover, .mgs-nav-next:hover { background: rgba(0,0,0,0.35); }

/* pagination dots */
.mgs-pagination { bottom: 20px !important; }

/* Pagination bullets */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.6); /* couleur par défaut */
    opacity: 0.7;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    background-color: #ffffff; /* bullet active en blanc */
    opacity: 1;
    transform: scale(1.2); /* légèrement plus grand pour le bullet actif */
}


/* ensure overlay sits above background */
.mgs-slide-bg + .mgs-overlay { pointer-events:auto; }

/* responsive tweaks */
@media (max-width: 720px) {
    .mgs-overlay { width:88%; padding:16px; border-radius:14px; }
}