/* ===================================
   Styles de base (mobile first - ≤ 480px)
   =================================== */
nav.menu11,
nav.menu-visiteur {
    background: #333;
    padding: 10px;
    border-radius: 8px;
    margin: 10px;
}

nav.menu11 ul,
nav.menu-visiteur ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav.menu11 li,
nav.menu-visiteur li {
    margin: 6px 0;
}

nav.menu11 a,
nav.menu-visiteur a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #fff;
    background: #555;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

nav.menu11 a:hover,
nav.menu-visiteur a:hover {
    background: #777;
    transform: translateY(-2px);
}

/* Style spécifique pour menu visiteur */
nav.menu-visiteur {
    background: #2c3e50;
}

nav.menu-visiteur a {
    background: #34495e;
}

nav.menu-visiteur a:hover {
    background: #1abc9c;
}

/* ===================================
   Tablette portrait (481px - 768px)
   =================================== */
@media (min-width: 481px) and (max-width: 768px) {

    nav.menu11,
    nav.menu-visiteur {
        max-width: 600px;
        margin: 20px auto;
        padding: 15px;
    }

    nav.menu11 a,
    nav.menu-visiteur a {
        padding: 14px 20px;
        font-size: 17px;
    }
}

/* ===================================
   Paysage (landscape) - souvent tablette ou mobile horizontal
   =================================== */
@media (orientation: landscape) and (max-height: 768px) {

    nav.menu11,
    nav.menu-visiteur {
        padding: 8px;
    }

    nav.menu11 ul,
    nav.menu-visiteur ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    nav.menu11 li,
    nav.menu-visiteur li {
        margin: 0;
        flex: 1;
        min-width: 120px;
    }

    nav.menu11 a,
    nav.menu-visiteur a {
        padding: 10px 16px;
        font-size: 15px;
    }
}

/* ===================================
   Tablette paysage / petit desktop (769px - 1023px)
   =================================== */
@media (min-width: 769px) and (max-width: 1023px) {

    nav.menu11,
    nav.menu-visiteur {
        max-width: 800px;
        margin: 25px auto;
        padding: 20px;
        border-radius: 15px;
    }

    nav.menu11 ul,
    nav.menu-visiteur ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    nav.menu11 a,
    nav.menu-visiteur a {
        padding: 15px 20px;
        font-size: 17px;
        border-radius: 12px;
    }

    nav.menu11 a:hover,
    nav.menu-visiteur a:hover {
        transform: scale(1.05);
    }
}

/* ===================================
   Grands écrans ordinateur (≥ 1024px) → STYLE FUN ET ANIMÉ !
   =================================== */
@media (min-width: 1024px) {

    /* Style pour menu connecté */
    nav.menu11 {
        background: linear-gradient(90deg, #ff9a9e, #fad0c4, #ffd1ff, #a18cd1, #fbc2eb, #ff9a9e);
        background-size: 400% 400%;
        animation: gradientShift 12s ease infinite;
        padding: 25px;
        border-radius: 25px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        margin: 40px auto;
        backdrop-filter: blur(12px);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    nav.menu11 ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    nav.menu11 a {
        display: block;
        padding: 18px 28px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
        background: rgba(255, 255, 255, 0.75);
        border-radius: 50px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        position: relative;
        overflow: hidden;
        border: 2px solid transparent;
    }

    nav.menu11 a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
        transition: left 0.7s;
    }

    nav.menu11 a:hover {
        transform: scale(1.1) translateY(-8px);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        color: #e91e63;
        border-color: rgba(233, 30, 99, 0.3);
    }

    nav.menu11 a:hover::before {
        left: 100%;
    }

    nav.menu11 a:active {
        animation: bounce 0.6s ease;
    }

    /* Style pour menu visiteur sur desktop */
    nav.menu-visiteur {
        background: linear-gradient(90deg, #1e3c72, #2a5298, #3b5998, #1e3c72);
        background-size: 300% 300%;
        animation: gradientShift 10s ease infinite;
        padding: 25px;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        margin: 40px auto;
        backdrop-filter: blur(10px);
    }

    nav.menu-visiteur ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    nav.menu-visiteur a {
        background: rgba(255, 255, 255, 0.85);
        color: #1e3c72;
        padding: 16px 24px;
        border-radius: 50px;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    nav.menu-visiteur a:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.08) translateY(-5px);
        color: #e74c3c;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    /* Animations communes */
    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-15px);
        }
    }
}

/* ===================================
   Style pour la publicité Temu
   =================================== */
.publicite-temu {
    text-align: center;
    padding: 15px;
    margin: 20px auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    max-width: 600px;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.publicite-temu p {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.publicite-temu a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.publicite-temu img {
    width: 150px;
    height: 150px;
    margin: 10px;
    border-radius: 10px;
    object-fit: cover;
    border: 3px solid white;
    transition: all 0.3s ease;
}

.publicite-temu a:hover img {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ===================================
   Très grands écrans (≥ 1440px)
   =================================== */
@media (min-width: 1440px) {

    nav.menu11,
    nav.menu-visiteur {
        max-width: 450px;
    }

    .publicite-temu {
        max-width: 800px;
    }
}

/* Effet "flottement" léger */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Effet néon clignotant */
@keyframes neonBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Effet particules (avec pseudo-éléments) */
a::after {
    content: '✦';
    position: absolute;
    animation: sparkle 1.5s infinite;
}