.hero-image-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover plus design pour les liens du header */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.3s;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #f04e30; /* Couleur accent Marvel */
    transition: width 0.3s;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

.navbar-nav .nav-link:hover {
    color: #f04e30;
}


/* Liens du header - hover design Marvel */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.3s;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #f04e30; /* Couleur accent */
    transition: width 0.3s;
}


#wakeLockBtn.active {
    background-color: #198754;
    border-color: #198754;
}

.note-text {
    resize: none;              /* pas de redimensionnement manuel */
    overflow-y: hidden;        /* caché par défaut */
    line-height: 1.5;
    max-height: calc(1.5em * 8); /* 8 lignes max */
}


/* ==========================
   Mode sombre / clair
========================== */

body {
    background-color: #f8f9fa; /* clair par défaut */
    color: #212529; /* texte par défaut */
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    background-color: #121212 !important; /* sombre */
    color: #f1f1f1 !important;
}


.navbar-nav .nav-link:hover::after {
    width: 100%;
}

.navbar-nav .nav-link:hover {
    color: #f04e30;
}

/* Mode sombre */
body.dark-mode {
    background-color: #121212;
    color: #f1f1f1;
}

body.dark-mode .navbar {
    background-color: #1b1b1b !important;
}

body.dark-mode .nav-link {
    color: #f1f1f1 !important;
}

body.dark-mode .nav-link:hover {
    color: #f04e30 !important;
}

body.dark-mode .btn-outline-light {
    border-color: #f1f1f1;
    color: #f1f1f1;
}

body.dark-mode .btn-outline-light:hover {
    background-color: #f04e30;
    border-color: #f04e30;
    color: #fff;
}

/* Mode sombre pour inputs et textarea */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #1b1b1b !important; /* fond sombre */
    color: #f1f1f1 !important;           /* texte clair */
    border-color: #555 !important;        /* bordure plus visible */
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #aaa !important;               /* placeholder clair */
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: #2b2b2b !important; /* un peu plus clair pour focus */
    border-color: #f04e30 !important;     /* accent Marvel */
    color: #fff !important;
    outline: none;
}

/* Mode clair/sombre pour carte "pouvoirs" */
.bg-card {
    background-color: #fff; /* clair par défaut */
    color: #212529;
}

body.dark-mode .bg-card {
    background-color: #1b1b1b;
    color: #f1f1f1;
    border-color: #555;
}




/* ==========================
   DESKTOP
========================== */
@media (min-width: 768px) {

    
    .hero-image {
    max-height: 280px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    }
}

/* ==========================
   MOBILE (tous modes)
========================== */
@media (max-width: 767.98px) {


    .hero-image {
        max-height: 200px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
}