/* Importation de la police DESIGNER.otf */
@font-face {
    font-family: 'DesignerFont';
    src: url('DESIGNER.otf') format('opentype');
}

/* RESET */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Background image responsive */
body {
    background: url('dark.png') no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
    color: white;
    text-align: center; /* centrer le contenu */
}

/* Titres du haut */
.title-wrapper {
    margin-top: 10vh;
    line-height: 1;
}

.abyss {
    font-family: 'DesignerFont', sans-serif;
    font-size: 12vw;
    margin: 0;
}

.computer {
    font-size: 10vw;
    margin: 0;
}

.author {
    font-size: 4vw;
    margin-top: 1vh;
}

/* Bloc de texte au-dessus de l'image */
.info-block {
    max-width: 800px;
    margin: 5vh auto 3vh auto;
    text-align: justify;          /* texte justifié */
    padding: 0 20px;
}

/* Titre rouge souligné */
.urgent {
    color: red;
    font-weight: bold;
    text-decoration: underline;
    font-size: 6vw;
    text-align: center;           /* centré malgré le justify */
}

/* Texte normal */
.normal-text {
    font-size: 4vw;
    margin-top: 2vh;
}

/* Image map */
.map-wrapper {
    text-align: center;
    margin-top: 3vh;
}

.map-image {
    max-width: 90%;
    height: auto;
    border-radius: 10px;
}

/* Desktop ajustements */
@media (min-width: 800px) {

    .abyss { font-size: 6rem; }
    .computer { font-size: 4rem; }
    .author { font-size: 1.5rem; }

    .urgent { font-size: 2.5rem; }
    .normal-text { font-size: 1.3rem; }
}


.map-link-wrapper {
    max-width: 800px;   /* largeur max */
    margin: 3vh auto;   /* centré avec marges verticales */
    border-radius: 10px;
    overflow: hidden;   /* pour arrondir les coins de l'iframe */
}

.map-link-wrapper iframe {
    width: 100%;
    height: 400px;
}

@media (min-width: 800px) {
    .map-link-wrapper iframe {
        height: 500px;
    }
}

.directions-links {
    text-align: center;
    margin-top: 3vh;
}

.btn-direction {
    display: inline-block;
    background-color: #ff3333; /* rouge vif */
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    margin: 10px;
    border-radius: 8px;
    transition: 0.3s;
    font-size: 4vw;
}

.btn-direction:hover {
    background-color: #cc0000;
}

/* Desktop */
@media (min-width: 800px) {
    .btn-direction {
        font-size: 1.2rem;
        padding: 12px 25px;
    }
}