@charset "utf-8";

/* ===============================================================
   denis-morel.com — page d'entrée (index.php)
   Toute la surface de #home est cliquable (onclick sur #home).
   =============================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

/* ---------------------------------------------------------------
   Police "Fira Sans Hair" auto-hébergée.
   Licence SIL Open Font License 1.1 : usage libre, y compris
   commercial, sans démarche ni frais.
   Déposer FiraSans-Hair.woff2 / .woff dans /site/fonts/.
   Un seul poids est déclaré : demander "bold" force le navigateur
   à simuler un gras à partir de ce tracé.
   --------------------------------------------------------------- */
@font-face {
    font-family: "Fira Sans Hair";
    src: url("/site/fonts/FiraSans-Hair.woff2") format("woff2"),
         url("/site/fonts/FiraSans-Hair.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    /* block : pas d'affichage en police de repli puis de saut ;
       combiné au preload de index.php, la typo arrive tout de suite */
}

html,
body {
    height: 100%;
    background-color: #202020;
    -webkit-text-size-adjust: 100%;
}

/* --- Surface cliquable plein écran --- */
#home {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* dvh : s'ajuste à la zone réellement visible (barre d'adresse iOS) */
    overflow: hidden;
    cursor: pointer;
    /* Photo de fond : remplacer le nom de fichier par le tien.
       Prévoir une image large (2000 px environ) et optimisée. */
    background-image: url("/site/images/accueil.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #202020;
    /* couleur de repli pendant le chargement */
}

/* Voile léger : la couleur des titres s'adapte déjà à la photo.
   Si on change l'opacité, reporter la valeur dans VOILE (index.php). */
#home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

#home:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* --- Titres --- */
#title-top,
#title-bottom {
    position: absolute;
    font-family: "Fira Sans Hair", sans-serif;
    font-weight: bold;
    /* faux bold simulé : un seul poids est chargé */
    font-variant-caps: small-caps;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
    /* le clic traverse vers #home */
    z-index: 1;
    /* au-dessus du voile */
}

#title-top {
    top: 5%;
    left: 5%;
    font-size: clamp(22px, 6vw, 80px);
    text-align: left;
}

#title-bottom {
    bottom: 8%;
    right: 5%;
    font-size: clamp(14px, 3.8vw, 51px);
    text-align: right;
}

/* Titre posé sur une zone claire de la photo : passe en noir
   (classe ajoutée automatiquement par le script de index.php) */
#title-top.sur-clair,
#title-bottom.sur-clair {
    color: #000000;
}

/* --- Choix de la langue --- */
#lang {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    z-index: 2;
    /* au-dessus de la surface cliquable */
}

#lang a {
    display: block;
    /* zone de clic confortable au doigt sans agrandir le drapeau */
    padding: 6px;
    margin: -6px;
    cursor: pointer;
}

#lang img {
    display: block;
    width: 20px;
    height: 20px;
}

/* --- Petits écrans en portrait (iPhone vertical) --- */
@media (max-width: 600px) and (orientation: portrait) {

    #title-top {
        top: 8%;
        left: 5%;
        font-size: clamp(20px, 9vw, 40px);
    }

    #title-bottom {
        bottom: calc(10% + env(safe-area-inset-bottom));
        right: 5%;
        font-size: clamp(12px, 5vw, 24px);
    }

}

/* --- Téléphones en paysage : hauteur d'écran réduite --- */
@media (orientation: landscape) and (max-height: 500px) {

    #title-top {
        top: 8%;
        left: 4%;
        font-size: clamp(18px, 6vw, 36px);
    }

    #title-bottom {
        bottom: calc(18% + env(safe-area-inset-bottom));
        right: 4%;
        font-size: clamp(12px, 3.8vw, 22px);
    }

}