/* ============================================================
   COMMON - Layout global BMPM
   Header fixé en haut, footer en bas, body en colonne.
   Police Marianne (charte État) sur tout le site.
   À charger sur toutes les pages avec header/footer.
   ============================================================ */

/* Police Marianne - officielle communication État français */
@font-face {
    font-family: 'Marianne';
    src: url('/fonts/Marianne/Marianne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('/fonts/Marianne/Marianne-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('/fonts/Marianne/Marianne-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('/fonts/Marianne/Marianne-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('/fonts/Marianne/Marianne-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

html {
    height: 100%;
    font-family: 'Marianne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: 'Marianne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* Header (injecté par header.js) : toujours en haut, ne rétrécit pas */
body > header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* Zone principale : prend l'espace restant, scroll si besoin */
body > main {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Footer (injecté par footer.js) : toujours en bas, au-dessus des barres d'onglets / nav */
footer#app-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

/* Mobile : viewport et footer */
@media (max-width: 768px) {
    /* Une seule ligne : barre titre + hamburger ; le header s’agrandit quand le menu est ouvert */
    body > header {
        min-height: 3rem;
    }
    body > header .header-top-row {
        min-height: 3rem;
    }
    body > header .header-inner {
        min-height: 3rem;
    }
    /* Hauteur visible réelle (sans barre d’adresse), évite que le footer soit coupé */
    html {
        height: 100%;
        height: -webkit-fill-available;
        min-height: 100dvh;
    }
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: 100dvh;
        height: 100dvh;
        height: -webkit-fill-available;
    }
    /* Footer : dégagement minimal (Safari, etc.) */
    footer#app-footer {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
    }
    /* Chrome iOS uniquement : barre d’onglets très haute, il faut remonter le contenu du footer */
    html.chrome-ios footer#app-footer {
        padding-bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
    }

    /* Footer en bas du scroll (pas d’affichage permanent) — sauf page-scan et Carte d’accès */
    body:not(.page-scan):not(.page-carte-acces) {
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
    }
    body:not(.page-scan):not(.page-carte-acces) > main {
        min-height: calc(100dvh - 3rem);
    }
    body:not(.page-scan):not(.page-carte-acces) > div.h-screen {
        height: auto !important;
        min-height: calc(100dvh - 3rem);
        overflow: visible;
        flex: none;
    }
}

/* Si le contenu est dans un wrapper div (ex: planning.html) */
body > div.h-screen {
    flex: 1;
    min-height: 0;
    height: auto; /* évite que h-screen (100vh) dépasse et cache le footer */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body > div.h-screen > #loading,
body > div.h-screen > #mainContainer {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

body > div.h-screen > footer {
    flex-shrink: 0;
}