/* ============================================
   Pokémon - UI mobile globale
   ============================================ */

*{
    box-sizing:border-box;
}

html{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;

    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;

    background:#f6f7fb;
}

body{
    width:100%;
    min-height:100%;
    margin:0 !important;

    /*
     * La status-bar iOS est maintenant "default".
     * Pas de compensation supplémentaire.
     */
    padding-top:0 !important;

    overflow-x:hidden;

    background:#f6f7fb;

    /*
     * Important :
     * on laisse Safari gérer nativement
     * l'antialiasing des polices.
     */
    -webkit-font-smoothing:auto;
}

/*
 * Safari ne doit jamais zoomer automatiquement
 * lorsqu'on touche un formulaire.
 */
input,
select,
textarea{
    font-size:16px !important;
}

/* ============================================
   HAUTEUR DE DÉPART IDENTIQUE SUR TOUTES LES PAGES
   ============================================ */

body > main,
body > .app{
    padding-top:10px !important;
}

/* ============================================
   RETOUR ACCUEIL
   ============================================ */

.back,
.back-link,
a[href="/accueil"].back,
a[href="/accueil"].back-link{
    display:inline-flex !important;
    align-items:center !important;

    min-height:20px !important;

    margin:0 !important;
    padding:0 !important;

    color:#111827 !important;

    text-decoration:none !important;

    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:20px !important;

    /*
     * Aucun effet graphique sur le texte.
     */
    transform:none !important;
    -webkit-transform:none !important;

    filter:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    text-shadow:none !important;

    -webkit-font-smoothing:auto !important;
}

/* Titre placé de façon identique après Retour */

main > .back + h1{
    margin-top:24px !important;
}

/* Scan */

.page-head{
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
}

.page-head .back-link{
    margin:0 !important;
}

.page-head h1{
    margin:24px 0 18px !important;

    font-size:28px !important;
    font-weight:900 !important;
    line-height:1.05 !important;

    letter-spacing:-.6px !important;
}

/* Médias */

img,
video,
canvas{
    max-width:100%;
}

/*
 * Aucun scale/translate global :
 * Safari Retina garde donc le texte sur sa grille native.
 */

@media(max-width:430px){

    body > main,
    body > .app{
        padding-top:10px !important;
    }
}

/* ============================================
   iPhone : espace haut sous encoche / Dynamic Island
   ============================================ */

body > main,
body > .app{
    padding-top:
        calc(
            28px +
            env(safe-area-inset-top)
        ) !important;
}

/* Les liens retour restent nets et sous la zone système */
.back,
.back-link{
    position:relative !important;
    z-index:2 !important;
}


/* ============================================
   BARRE BAS : collée au bord iPhone
   ============================================ */

.bottom-nav,
.bottomnav,
.mobile-nav{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:0 !important;

    transform:translateX(-50%) !important;

    margin:0 !important;

    width:100% !important;
    max-width:520px !important;

    border-radius:0 !important;

    /*
     * Le fond descend jusqu'au bord physique,
     * le contenu reste au-dessus de la barre Home.
     */
    padding-bottom:
        env(safe-area-inset-bottom) !important;
}