html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: #FDF6E4;
    font-family: "Manrope", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1; /* Agrandissement du main pour que le footer reste en bas */
}

img {
    width: 100%;
    display: block;
}

/************************************/
/*              HEADER              */
/************************************/

header {
    background-color: #BA1827;
    opacity: 0.95;
    backdrop-filter: blur(10px);
    color: #fff;
    margin: 16px;
    border: 2px solid #000;
    box-shadow:
        0px 4px 36px -1px rgba(0, 0, 0, 0.1);
}

.header-haut {
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #000;
}

.logo {
    width: 80px;
}

.bloc-titre {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titre {
    font-family: "Monoton", sans-serif;
    font-size: 2rem;
    color: #F2D06E;
}

.image-header {
    width: 96px;
}

nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

nav>a {
    color: #FDF6E4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.2s ease;
}

nav a:not(:last-child) {
    border-right: 2px solid #000;
}

nav a:hover {
    background-color: #FE4F00;
}

.page-active {
    color: #F2D06E;
    font-weight: bold;
}

/************************************/
/*              BOUTONS             */
/************************************/

a {
    text-decoration: none;
    color: #000;
}

.bouton {
    padding: 10px 32px;
    border: 1px solid #000;
    box-shadow: -2px 2px 0px rgba(0,0,0,1);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    background-color: transparent;
    transition: 0.2s ease;
}

.bouton:hover {
    cursor: pointer;
    background-color: #F2D06E;
    box-shadow: -4px 4px 0px rgba(0,0,0,1);
}

.bouton-bleu {
    background-color: #29B3B6;
    padding: 10px 32px;
    border: 1px solid #000;
    box-shadow: -2px 2px 0px rgba(0,0,0,1);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    transition: 0.2s ease;
}

.bouton-bleu:hover {
    cursor: pointer;
    background-color: #3CDEE2;
    box-shadow: -4px 4px 0px rgba(0,0,0,1);
}

.bouton-retour {
    display: flex;
    justify-content: center;
    margin-top: 5vh;
}

/************************************/
/*       CARTES FILMS & REALS       */
/************************************/

.carte-film, .carte-realisateur {
    width: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 36px -1px rgba(0, 0, 0, 0.1);
    transition: 0.2s ease;
    background-color: #fff;
}

.carte-film:hover, .carte-realisateur:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.lien-carte {
    text-decoration: none;
    color: #000;
}

.zone-affiche, .zone-photo-real {
    width: 100%;
    overflow: hidden;
    background-color: #eee;
}

.zone-affiche {
    aspect-ratio: 2 / 3;
}

.zone-photo-real {
    aspect-ratio: 1 / 1;
}

.zone-affiche > img, .zone-photo-real > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/************************************/
/*            FORMULAIRES           */
/************************************/

input[type=checkbox] {
    display: none;
}

.tag-genre {
    border: 1.5px solid #000;
    padding: 4px 16px;
    margin: 8px;
}

.tag-genre:has(input:checked) {
    background-color: #597C80;
    color: #fff;
 }

input[type=number], input[type=text] {
    border-radius: none;
    border: none;
    border-bottom: 1.5px solid #000;
    padding: 4px 8px;
}

select {
    border-radius: none;
    border: 1.5px solid #000;
    padding: 8px;
    margin: 8px 0;
    font: inherit;
}

label {
    margin-bottom: 16px;
}

/************************************/
/*           BACK TO TOP            */
/************************************/

.back-to-top {
    position: fixed;
    bottom: 10vh;
    width: 65px;
    height: 85px; 
    right: -20px;
    background-color: #29B3B6;
    border: 2px solid #000;
    box-shadow: -2px 2px 0px rgba(0,0,0,1);   
    display: flex;
    align-items: center;
    padding-left: 13px; 
    color: #000;
    z-index: 100;
    transition: 0.2s ease;
}

.back-to-top:hover {
    transform: translateX(-15px); 
    background-color: #F2D06E;
    box-shadow: -4px 4px 0px rgba(0,0,0,1); 
}

/************************************/
/*               FOOTER             */
/************************************/

footer {
    background-color: #000;
    color: #bdbdbd;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vh;
}

.titre-footer {
    font-family: "Monoton", sans-serif;
    font-size: 2.5rem;
    color: #bdbdbd;
    margin-bottom: 24px;
}

.logos-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.logos-footer>div>img {
    max-height: 48px;
}

.copyright {
    font-size: 0.8rem;
}