/*DEBUT main -----------------------------------------------------*/
main {
    background: url('../image/dynaxis_acc_1.jpg') no-repeat center center/cover;
    height: calc(100vh - 105px);
    padding-bottom: 0;
}
main::before {
    background: inherit;
    filter: blur(8px);
    position: absolute;
    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -100px;
}
/*FIN main*/


/*DEBUT logo acceuil -----------------------------------------------------*/
#logo_acceuil {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
#logo_acceuil img {
    width: 37%;
    height: auto;
}
/*FIN logo acceuil*/


/*DEBUT titre -----------------------------------------------------*/
#titre {
    left: 50%;
    transform: translate(-50%);
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#titre h1 {
    font-size: 25pt;
    color: #fff;
    text-align: center;
    z-index: 1;
}
#mini-barres {
    position: relative;
    width: 70%;
    height: 3px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5) 10%,
        rgba(220,0,0,0.7) 50%,
        rgba(255,255,255,0.5) 90%,
        rgba(255,255,255,0) 100%
    );
    opacity: 0.85;
    border: none;
    z-index: 1000;
}
/*FIN titre*/

/* DEBUT responsive -----------------------------------------------------*/
/* iPad — portrait */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #titre {
        width: 100%
    }
    #logo_acceuil img {
        width: 60%;
    }
    #titre h1 {
        font-size: 30pt;
    }
}
/* iPad — landscape */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    #titre {
        width: 100%
    }
    #logo_acceuil img {
        width: 60%;
    }
    #titre h1 {
        font-size: 20pt;
    }
}
/* Téléphone — portrait */
@media screen and (max-width: 768px) {
    #titre {
        width: 100%
    }
    #logo_acceuil img {
        width: 60%;
    }
    #titre h1 {
        font-size: 20pt;
    }
}
/* Téléphone — landscape */
@media screen and (max-height: 767px) {
    #titre {
        width: 80%
    }
    #logo_acceuil img {
        width: 35%;
    }
    #titre h1 {
        font-size: 15pt;
    }
}
/* FIN responsive */