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

html, body {
margin: 0;padding: 0;border: 0;width:100%;
font-size: 100%;
font: inherit;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
vertical-align: baseline;
scroll-behavior: smooth;
color:#1a1a1a;
color:var(--txt_art_color);
background:LavenderBlush;
/*opacity: 0;*/
background: var(--bg);
transition: opacity .75s;
transition: background-color 1s;
}

.container{
/*GRID LAYOUT*/
display: grid;
width: 100%;
grid-template-columns:27% 58% 15%;
grid-template-rows: 4% 1fr 0%;
min-height: 100vh;
font: inherit;
background: var(--bg);
border: 0px black solid;
}

header, footer,nav,main,aside {background:var(--bg);}

header, footer{
background: Bisque;
background:var(--bg_tb);
}

header, footer{
vertical-align: middle;
z-index: 100;
}

header {
grid-row: 1;
position: fixed;
top: 0;left: 0;
width: 100%;height:6%;
background-color: var(--bg);
border-bottom:1px dotted var(--border_v);
overflow-x: hidden;overflow-y: hidden;
z-index: 10;
/* SUB GRID */
display:grid;
place-items: center;
/*grid-template-columns: 12% 2% 1.5% 58% 1% 5% 16%;*/
grid-template-columns: [HDR1] 1.5% [HDR2] 7% [HDR3] 7% [HDR4] 2% [HDR5] 1% [HDR6] 1% [HDR7] 55% [HDR8] 1% [HDR9] 1% [HDR10] 2% [HDR11] 1% [HDR12] 5% [HDR13] 4% [HDR14] 4% [HDR15] 4% [HDR16] 1% [HDR17] 1% [HDR18] 0.5% [HDR19] 0.5% [HDR20] 0.5%;
grid-template-rows: 1fr;
border-bottom:1px dotted var(--border_v);
vertical-align: middle;
overflow-y: hidden;
}

/*
HDR1 = spacer
HDR2 = info2g
HDR3 = titre milieu msg
HDR4 = icone home
HDR5 = chevron dr
HDR6 = spacer
HDR7 = titre1 titre2 titre3...
HDR8 = spacer - HDR9 = spacer
HDR10 = theme-switch
HDR11 = spacer - HDR12 = divers
HDR13 = spacer - HDR14 = divers
HDR15 = spacer - HDR16 = divers
HDR17 = divers - HDR18 = divers
HDR19 = divers - HDR20 = divers
*/

/* *********HEADER ZZZ ************* */

nav, main, aside{grid-row: 2;}

nav {
position: fixed;
top: 0;left: 0;  bottom: 0;
margin-top: 0%;
padding-top: 4%;
padding-bottom: 10%;
width: 27%;height:100%;
z-index: 4;
overflow-y: auto;
border: 0px blue solid;
border-right: 0px crimson solid;
border-radius: 0px;
border: 0px blue solid;
}

nav, aside ul{
display: block;
}

main {
grid-row: 2;
grid-column: 2;
z-index: 8;
margin-top: 0%;
padding-top: 7%;
padding-bottom: 10%;
padding-left: 1%;
background-color: var(--bg);
border: 0px solid red;
}

aside {
grid-row: 2;
grid-column: 3;
z-index: 1;
margin-top: 0%;
padding-top: 40%;
padding-left: 2%;
padding-right: 5%;
background-color: var(--bg);
border: 0px solid lime;
}

footer {
position: fixed;
bottom: 0;left: 0;
padding-top: 0.5%;
padding-bottom: 0%;
width: 100%;height:4%;
background-color: var(--bg);
border-top:1px dotted var(--border_v);
/* subGRID */
display:grid;
grid-template-columns: 27% 35% 20% 16%;
grid-template-rows: 1fr;
background-color: var(--bg);
}


/* *********HEADER************* */

header .HDR1{
grid-column: 1 / 2;
width: 100%;
border:0px solid red;
visibility: hidden;
}

header .HDR2{
grid-column: 2 / 3;
width: 100%;
border:0px solid lime;
}

header .HDR3{
grid-column: 3 / 4;
width: 100%;
border:0px solid indigo;
padding-left: 10%;
visibility: hidden;
}

header .HDR4{
grid-column: 4 / 5;
width: 100%;
text-align: right;
border:0px solid navy;
}

header .HDR5{
grid-column: 5 / 6;
width: 100%;
text-align: right;
border:0px solid darkgoldenrod;
}

header .HDR6{
grid-column: 6 / 7;
width: 100%;
border:0px solid indigo;
}

header .HDR7{/*titre1titre2...*/
grid-column: 7 / 8;
width: 100%;
border:0px solid red;
overflow-x: auto;
overflow-y: hidden;
}

header .HDR8{
grid-column: 8 / 9;
width: 100%;
border:0px solid blue;
}

/*THEME SW LEFT BORDER*/
header .HDR9{/*theme sw left border*/
grid-column: 9 / 10;
width: 100%;height:100%;
border-right:1px dotted var(--border_v);
}

header .HDR10{/*THEME-SWITCH*/
grid-column: 10 / 11;
width: 100%;height:40%;
text-align: right;
padding-left: 10%;
border:0px solid lime;
}

.darkmsw{visibility: visible;margin-left: -2%;z-index: 15;}
.theme-switch {
position: relative;
width: 20px; height: 10px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
}
.theme-switch::before {
content: '';
position: absolute;
top: 1px;left: 1px;width: 8px;height: 8px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
}

header .HDR11{/*theme sw right border*/
grid-column: 11 / 12;
width: 100%;height:100%;
border-left:1px dotted var(--border_v);
}

/*div*/

header .HDR12{
grid-column: 12 / 13;
width: 100%;
border:3px solid indigo;
visibility: hidden;
}

header .HDR13{
grid-column: 13 / 14;
width: 100%;
border:3px solid lime;
visibility: hidden;
}

header .HDR14{
grid-column: 14 / 15;
width: 100%;
border:3px solid brown;
visibility: hidden;
}

header .HDR15{
grid-column: 15 / 16;
width: 100%;
border:3px solid green;
visibility: hidden;
}

header .HDR16{
grid-column: 16 / 17;
width: 100%;
border:3px solid green;
visibility: hidden;
}

header .HDR17{
grid-column: 17 / 18;
width: 100%;
border:3px solid green;
visibility: hidden;
}

header .HDR18{
grid-column: 18 / 19;
width: 100%;
border:3px solid green;
visibility: hidden;
}

header .HDR19{
grid-column: 19 / 20;
width: 100%;
border:3px solid green;
visibility: hidden;
}

/* *********HEADER ZZZ ************* */