/* ==============================
   FOND D'ÉCRAN FIXE
============================== */
body {
    margin: 0;
    padding: 0;
    background: #0d0f14;
    font-family: 'Poppins', sans-serif;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/fantasy.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}

/* Logo cliquable avec glow animé */
header a {
    display: block;
}

@font-face {
    font-family: 'hobbitonbrushhand';
    src: url('../fonts/hobbitonbrushhand.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RingbearerMedium';
    src: url('../fonts/RingbearerMedium-51mgZ.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.logo-img {
    margin-top: 30px;
    width: 220px;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0,234,255,0.5));
    transition: transform 0.3s ease, filter 0.4s ease;
    animation: glowPulse 2.5s ease-in-out infinite alternate;
}

/* Animation douce du glow */
@keyframes glowPulse {
    from {
        filter: drop-shadow(0 0 8px rgba(0,234,255,0.3));
    }
    to {
        filter: drop-shadow(0 0 18px rgba(0,234,255,0.75));
    }
}

/* Petit zoom au survol */
.logo-img:hover {
    transform: scale(1.04);
}



/* --- Profile photo --- */
.profile-photo{margin-top:20px;width:180px;

border-radius:10px;

border:2px solid #00eaff;

box-shadow:0 0 15px rgba(0,234,255,0.3);}

/*--- Texte d'introduction --- */
.intro-text {
    max-width: 720px;
    margin: 25px auto 50px auto;
    padding: 25px 30px;
    background: rgba(22, 26, 34, 0.60); /* sombre transparent */
    border-radius: 14px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e6e6e6;
    box-shadow: 0 0 25px rgba(0,234,255,0.25);
    filter: drop-shadow(0 0 10px rgba(0,234,255,0.3));
    transition: transform 0.3s ease, box-shadow 0.4s ease;
    font-family: 'RingbearerMedium', sans-serif;
}

.intro-text:hover {
    box-shadow: 0 0 35px rgba(0,234,255,0.5);
}


/* --- Card menu --- */
.menu {
    margin: 40px 0 100px;  /* un peu plus d’espace autour */
    display: flex;
    gap: 80px;             /* écart un peu plus grand entre les boutons */
    flex-wrap: wrap;
    justify-content: center;
}

/* Taille globale du bouton */
.card {
    background: #161a22;
    border: 1px solid #1f242e;
    width: 360px;        /* largeur augmentée */
    min-height: 300px;   /* hauteur légèrement augmentée */
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: #ffe600;
    transition: transform 0.25s, box-shadow 0.25s;
}

.card img {
    width: 100%;
    height: 240px;       /* image plus grande */
    object-fit: cover;
}

.card span {
    display: block;
    padding: 16px;       /* texte plus confortable */
    font-size: 1.1rem;
    background: #11151c;
    font-family: 'RingbearerMedium', sans-serif;
}

.card:hover {
    transform: scale(1.08);   /* hover un peu plus visible */
    box-shadow: 0 0 30px rgba(0,234,255,0.65);
    border-color: #00eaff;
}


/* === PANNEAU UTILISATEUR EN HAUT À DROITE === */
.user-panel{
    position:fixed;

    top:20px;

    right:20px;

    display:flex;

    gap:16px;

    align-items:center;

    z-index:1000;

}

#consoleBtnTop{
    padding:12px 24px;

    background:rgba(34,197,94,0.15);

    color:#22c55e;

    border:2px solid #22c55e;

    border-radius:12px;

    font-weight:600;

    text-decoration:none;

    box-shadow:0 0 20px rgba(34,197,94,0.4);

    transition:all .3s;

}

#consoleBtnTop:hover{
    background:rgba(34,197,94,0.3);

    box-shadow:0 0 35px rgba(34,197,94,0.7);

    transform:translateY(-2px);

}

#userBtn{
    padding:12px 24px;

    background:rgba(0,234,255,0.15);

    color:#00eaff;

    border:2px solid #00eaff;

    border-radius:12px;

    font-family:"Poppins",sans-serif;

    font-weight:600;

    font-size:1rem;

    cursor:pointer;

    backdrop-filter:blur(10px);

    box-shadow:0 0 20px rgba(0,234,255,0.4);

    transition:all .3s;

}

#userBtn:hover{

    background:rgba(0,234,255,0.3);

    box-shadow:0 0 35px rgba(0,234,255,0.7);

    transform:translateY(-2px);

}

#userInfo{

    position:absolute;

    top:70px;

    right:0;

    min-width:280px;

    background:#161a22;

    border:2px solid #00eaff;

    border-radius:14px;

    padding:18px 20px;

    box-shadow:0 0 50px rgba(0,234,255,0.5);

    display:none;

}

#userInfo.show{display:block;

}

#userInfo::before{

    content:'';

    position:absolute;

    top:-12px;

    right:32px;

    border:12px solid transparent;

    border-bottom-color:#00eaff;

}

.user-email{color:#00eaff;

font-weight:bold;

font-size:1.1rem;

margin:8px 0;}

.admin-status{color:#22c55e;

font-size:0.95rem;

margin:6px 0;}

.logout-link{display:block;

margin-top:18px;

color:#ff6b6b;

text-align:center;

text-decoration:underline;

font-size:0.98rem;

}

.logout-link:hover{color:#ff8787;}

@keyframes fadeIn{from{opacity:0;

transform:translateY(-10px);}

to{opacity:1;

transform:none;

}}

/* --- Modal d'authentification amélioré --- */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal.active { display: flex; }

.modal-content {
    background: rgba(22,26,34,0.85);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    color: #e6e6e6;
    width: 90%;
    max-width: 400px;
    padding: 40px 30px;
    box-shadow: 0 0 35px rgba(0,234,255,0.4);
    border: 2px solid #00eaff;
    animation: fadeIn 0.4s ease;
}

.modal-content h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.7rem;
    color: #00eaff;
    text-shadow: 0 0 10px rgba(0,234,255,0.5);
}

.modal-content input {
    width: 100%;
    padding: 14px 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #00eaff;
    background: rgba(0,0,0,0.3);
    color: #e6e6e6;
    font-size: 1rem;
    transition: all 0.3s;
}

.modal-content input:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0,234,255,0.5);
    background: rgba(0,0,0,0.5);
}

.modal-content button {
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    background: #00eaff;
    color: #0d0f14;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(0,234,255,0.5);
}

.modal-content button:hover {
    background: #00ffff;
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(0,234,255,0.7);
}

.modal-content .message {
    text-align: center;
    margin-top: 12px;
    font-weight: 600;
    color: #ff6b6b;
}

.switch-form {
    text-align: center;
    color: #00eaff;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 18px;
    font-weight: 500;
    transition: color 0.3s;
}

.switch-form:hover { color: #00ffff; }

/* Animation douce */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

/* ======================================================
   RESPONSIVE – Garde l’aspect 1440p même sur petits écrans
   À coller à la toute fin de style.css
====================================================== */

@media (max-width: 1920px) {
    .logo-img { width: 190px; margin-top: 25px; }
    .profile-photo { width: 160px; }
    .intro-text { max-width: 650px; padding: 22px 28px; font-size: 1rem; margin: 20px auto 45px; }
    .menu { gap: 70px; margin: 35px 0 90px; }
    .card { width: 320px; min-height: 270px; }
    .card img { height: 210px; }
    .card span { padding: 15px; font-size: 1.05rem; }
    .user-panel { top: 18px; right: 18px; gap: 14px; }
    #consoleBtnTop, #userBtn { padding: 11px 22px; font-size: 0.98rem; }
    #userInfo { min-width: 260px; top: 65px; }
    .modal-content { max-width: 370px; padding: 35px 28px; }
}

@media (max-width: 1366px) {
    .logo-img { width: 170px; margin-top: 20px; }
    .profile-photo { width: 140px; }
    .intro-text { max-width: 580px; font-size: 0.98rem; }
    .menu { gap: 50px; }
    .card { width: 300px; min-height: 250px; }
    .card img { height: 190px; }
    .user-panel { top: 12px; right: 12px; gap: 12px; }
    #consoleBtnTop, #userBtn { padding: 10px 18px; font-size: 0.92rem; }
}

@media (max-width: 1280px) {
    .logo-img { width: 160px; }
    .profile-photo { width: 130px; }
    .intro-text { max-width: 520px; padding: 18px 22px; font-size: 0.95rem; }
    .menu { gap: 40px; margin: 25px 0 70px; }
    .card { width: 280px; }
    .card img { height: 180px; }
}

@media (max-width: 1024px) {
    .logo-img { width: 150px; margin-top: 15px; }
    .profile-photo { width: 120px; }
    .intro-text { max-width: 90%; font-size: 0.93rem; padding: 16px 20px; }
    .menu { gap: 35px; flex-direction: column; align-items: center; }
    .card { width: 320px; max-width: 90%; }
    .card img { height: auto; aspect-ratio: 1 / 0.75; }
    .user-panel { top: 8px; right: 8px; gap: 10px; flex-wrap: wrap; justify-content: center; }
    #consoleBtnTop, #userBtn { padding: 8px 15px; font-size: 0.88rem; }
    #userInfo { min-width: 220px; top: 55px; right: 8px; }
    .modal-content { max-width: 340px; padding: 30px 20px; }
}

@media (max-width: 768px) {
    .logo-img { width: 140px; }
    .profile-photo { width: 110px; }
    .intro-text { font-size: 0.9rem; padding: 14px 18px; }
    .card { width: 300px; }
    #consoleBtnTop, #userBtn { padding: 7px 13px; font-size: 0.85rem; }
}

@media (max-width: 540px) {
    .logo-img { width: 130px; margin-top: 12px; }
    .profile-photo { width: 100px; }
    .intro-text { font-size: 0.88rem; padding: 12px 16px; margin: 10px auto 30px; }
    .menu { gap: 25px; margin: 15px 0 50px; }
    .card { width: 280px; }
    .card span { font-size: 0.95rem; }
    .user-panel { top: 5px; right: 5px; gap: 8px; }
    #consoleBtnTop, #userBtn { padding: 6px 12px; font-size: 0.82rem; }
    #userInfo { min-width: 200px; font-size: 0.9rem; }
    .modal-content { width: 95%; max-width: 320px; padding: 25px 15px; }
    .modal-content h2 { font-size: 1.5rem; }
}