/*
|--------------------------------------------------------------------------
| Layout O
|--------------------------------------------------------------------------
|
| Organisation par profondeur visuelle.
|
| z=0    : contenu principal
| z=50   : dialog
| z=100  : front
| z=1000 : over
|
*/


/*
|--------------------------------------------------------------------------
| Variables de thème
|--------------------------------------------------------------------------
*/

:root {

    /* Fond du viewport */
    --viewport-bg: #444;

    /* Fond principal du layout */
    --layout-bg: #fff;

    /* Zones du back */
    --topbar-bg: #d8e8ff;
    --input-bg:  #ffe8c7;
    --work-bg:   #f8f8f8;

    /* Dialog */
    --dialog-bg: #fff3cd;
    --dialog-border: 2px solid #d4a017;

    /* Écran de démarrage */
    --over-bg: #0f172a;

    /* Zones du front */
    --context-bg: #f0f0f0;
    --direct-bg:  #dcdcdc;

    /* Marge intérieure de la zone de travail */
    --work-padding-y: clamp(8px, 1vh, 16px);
    --work-padding-x: clamp(8px, 2vw, 24px);

    /* topSlot et bottomSlot */ 
    --slots-bg:#f0f0f0;
}


/*
|--------------------------------------------------------------------------
| Réinitialisation
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;
    padding: 0;

}


/*
|--------------------------------------------------------------------------
| Viewport
|--------------------------------------------------------------------------
|
| Pas de scroll global.
|
*/

body {

    background: var(--viewport-bg);

    overflow: hidden;

    display: flex;
    justify-content: center;

}


/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
|
| Conteneur racine.
|
*/

#layout {

    /*
    | Compatibilité anciens navigateurs.
    */
    height: 100vh;

    /*
    | Navigateurs modernes.
    */
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--layout-bg);

    overflow: hidden;

    position: relative;

}


/*
|--------------------------------------------------------------------------
| Portrait
|--------------------------------------------------------------------------
*/

@media (orientation: portrait) {

    #layout {

        width: 100vw;

    }

}


/*
|--------------------------------------------------------------------------
| Paysage
|--------------------------------------------------------------------------
|
| largeur / hauteur 
|
*/

@media (orientation: landscape) {

    #layout {

        width: calc(100dvh * 4 / 7);

    }

}

#title {
    flex-shrink: 0;
    overflow: hidden;
    background : var(--slots-bg);

    display: flex;
    align-items: center;
    padding-left: 4vw;
    height: 5vh;
   
    
    box-sizing: border-box;
}

#bottomSlot {
    flex-shrink: 0;
    overflow: hidden;
    background : var(--slots-bg);
    
    height: 2vh;  
                      
}                      

/*
|--------------------------------------------------------------------------
| z=0
|--------------------------------------------------------------------------
|
| Couche principale.
|
*/

#back {

    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    min-height: 0;
    position: relative;

}


/*
|--------------------------------------------------------------------------
| Zones à hauteur intrinsèque
|--------------------------------------------------------------------------
*/

#topBar,
#input,
#front,
#contextButtons,
#directButtons {

    flex-shrink: 0;

}


/*
|--------------------------------------------------------------------------
| TopBar
|--------------------------------------------------------------------------
|
| Contenu aligné à gauche.
|
*/

#topBar {

    background: var(--topbar-bg);

    display: flex;
    justify-content: flex-start;
    align-items: center;

}


/*
|--------------------------------------------------------------------------
| Input
|--------------------------------------------------------------------------
|
| Ombre légère vers le bas.
|
*/

#input {

    background: var(--input-bg);

    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    position: relative;

    z-index: 1;

}


/*
|--------------------------------------------------------------------------
| Work
|--------------------------------------------------------------------------
|
| Zone principale.
|
| Unique zone extensible.
| Unique zone scrollable.
|
*/

#work {

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--work-bg);

    padding:
        var(--work-padding-y)
        var(--work-padding-x);

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    /*
    | Firefox.
    */
    scrollbar-width: none;

}


/*
|--------------------------------------------------------------------------
| Scrollbars de work
|--------------------------------------------------------------------------
|
| Scroll conservé.
| Scrollbar masquée.
|
*/

#work::-webkit-scrollbar {

    display: none;

}


/*
|--------------------------------------------------------------------------
| z=50
|--------------------------------------------------------------------------
|
| Overlay local à back.
|
| Largeur 90 %
| Hauteur 90 %
| Centré
| Scrollable
|
*/

#dialog {

    position: absolute;
 	 transform: translate(5%, 0%);

    top: 10vh;
    bottom: 5vh;
    
    width: 90%;
    
    z-index: 50;

    background: var(--dialog-bg);

    border: var(--dialog-border); 
    border-radius: 12px;
    box-shadow:
        0 12px 24px rgba(0,0,0,.20),
        0 24px 64px rgba(0,0,0,.30);

    overflow-y: auto;
    overflow-x: hidden;

    /*
    | Firefox.
    */
    scrollbar-width: none;

}


/*
|--------------------------------------------------------------------------
| Scrollbars de dialog
|--------------------------------------------------------------------------
|
| Scroll conservé.
| Scrollbar masquée.
|
*/

#dialog::-webkit-scrollbar {

    display: none;

}


/*
|--------------------------------------------------------------------------
| z=100
|--------------------------------------------------------------------------
|
| Dock inférieur.
|
*/

#front {

    background: transparent;

    box-shadow: 0 -2px 10px rgba(0,0,0,.15);

    position: relative;

    z-index: 100;

}


/*
|--------------------------------------------------------------------------
| Context Buttons
|--------------------------------------------------------------------------
|
| Contenu centré.
|
*/

#contextButtons {

    background: var(--context-bg);

    display: flex;
    justify-content: center;
    align-items: center;

}


/*
|--------------------------------------------------------------------------
| Direct Buttons
|--------------------------------------------------------------------------
|
| Contenu centré.
|
*/

#directButtons {

    background: var(--direct-bg);

    display: flex;
    justify-content: center;
    align-items: center;

}


/*
|--------------------------------------------------------------------------
| z=1000
|--------------------------------------------------------------------------
|
| Couche système.
|
| Visible au démarrage.
|
*/

#over {

    position: absolute;

    inset: 0;

    z-index: 1000;

    background: var(--over-bg);

}	

/*
|--------------------------------------------------------------------------
| État désactivé
|--------------------------------------------------------------------------
*/

.loDisabled {

    opacity: .35;

    pointer-events: none;

}