:root{

    --font-size:16px;



    --main-color: #d6b883;      /* couleur vive de mise en avant */
    --success-color: #5dbf4b;
    --danger-color: #f00;

    /* HEADER */
    --header-height:75px;
    --header-background:#fff;
    --header-text-color:#000;
    --header-text-size:12px; /* todo !!!!*/

    /* BUTTON */
    --button-background:#57934f;
    --button-border:1px solid green;
    --button-border-radius:8px;
    --button-hover-background: #28741e;
    --button-neutral-background: #989898;
    --button-text-color: #fff;

    --shadow:0px 0px 15px #777;


    --section-background:#000000;
    --section-background-2:#acacac77;
    --section-text-color:#ffffff;

    --article-background:#5bff58;
    --article-hover-background:#d35252;
    
    --content-background:#000000;
    --content-text-color:#ffffff;
    --content-border:#ffffff;

    --input-text-color : black;
    --input-border : 1px solid #dadadb;
    --input-background:#f2f2f2;
    --input-disabled-background:#e7e7e7;


}





@font-face {
    font-family: 'header';
    src: url(/1_kernel/medias/fonts/BrunoAceSC-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'body';
    src: url(/1_kernel/medias/fonts/Poppins-Regular.ttf) format('truetype');
}




body{
    display:grid;
    grid-template-areas: 
        "header"
        "main"
        "footer";
    grid-template-rows: var(--header-height) 1fr var(--header-height);
    background:var(--section-background);
    height:100vh;
    margin:0;
    font-family: body;
    font-size:var(--font-size);
    color:var(--content-text-color)
}


a{
    color:var(--content-text-color);
}
h1 a, h2 a, h3 a, h4 a{
    text-decoration: none;
    white-space: nowrap;
}

button,
.button
{
    border:var(--button-border);
    border-radius:var(--button-border-radius);
    background: var(--button-background);
    color: var(--button-text-color);
    padding: 10px 30px;
    font-size: 1.2em;
    text-decoration: none;
}   

button:hover,
.button:hover
{
    background:var(--button-hover-background);
}

svg{
    fill:var(--section-text-color);
}

main{
    grid-area: main;
}
/* bodysvg
main > svg:first-child{
    fill: none;
    stroke:rgb(255, 255, 255);
    stroke-width:0.3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    width:600px;
    z-index: 1;
}
*/


/* ---------------------------------- Common / header -------------------------- */
header{


    grid-area: header;
    position: fixed;
    z-index: 1;

    width: 100%;
    height:var(--header-height);
    box-shadow: var(--shadow);
}
header a{
    display:inline-block;
    vertical-align:middle;
    color:var(--header-text-color);
    text-decoration: none;
    outline: none;
    line-height: 0;
}
header nav{
    display:grid;
    grid-template-columns: 400px auto;
    background: var(--header-background);
    box-shadow:var(--shadow);
    min-height:var(--header-height);
}

header nav .title a{
    font-family: header;
    font-size:2em;
    line-height: 0;
}

header nav img#logo{
    height:calc(var(--header-height) - 10px);
    margin:5px;
}

header nav ul{  
    margin: 0;
    padding:0;
}
header nav ul li{
    display:inline-block;
    padding: 0 0 0 2vw;
}
header nav ul li a{
    line-height:var(--header-height);
    font-size:1.2em;
}


header nav div#menu-icon{ /* le toggle */
    display:none;
}
header nav div#menu-icon svg{
    fill:var(--header-text-color);
    width:calc(var(--header-height) / 2);
}

.template{
    display:none;
}



/* ================= section  =================== */
section{
    display: grid;
    position:relative;
    background:var(--section-background);
    color: var(--section-text-color);
    overflow: hidden;
}
section > .anchor{
    position:absolute;
    margin-top:calc(-1 * var(--header-height));
    height:0;
    width:0;
}
section > .media{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
        
}
section > .media img{
    position:absolute;
    opacity:0;
    transition: opacity 3s;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
section > .media img.loaded{
    opacity:1;
}
section > .media svg{
    height:100%;
    fill:var(--section-background-2);
}

section > .content{
    position:relative;
    align-self: center;
    justify-self: center;
    margin: 40px auto;
    padding:20px;
    max-width:800px;
    background:var(--content-background);
    color:var(--content-text-color);
}
section > .content h2{
    text-align: center;
    margin:40px 0;
    
}
section > .content p{
    text-align: left;
    line-height: 2em;  
}

section > .large-content {
    position: relative;
    margin:auto;
    width: 90%;
}

/* ================= articles =================== */
section article{
    overflow:hidden;
    position:relative;

    background: var(--section-background-2);
    color:var(--content-text-color);


    box-shadow: none;
    transition: box-shadow 1s;
}

section article > h3,
section article > p,
section article > img{
    position:relative;
}
section article > p{
    line-height: 1.7em;  
    margin:20px;
    text-align: left;
}
section article ul{
    margin: 0 20px 20px 20px;
}

section article > ul{
    display: inline-block;
    padding: 0px;
    
    text-align: left;
}

section article.over{
    box-shadow:var(--shadow);
}

section article > img{   
    filter:saturate(0);
    transition: filter 2s;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
    cursor: pointer;
}
section article.visible > img{
    filter:saturate(1);
}


section article > .bg > img{
    position:absolute;
    left:0;
    width:100%;
    height:100%;
}



/* un seul article */
section > .article{

    width:800px;
    max-width:1200px;
    height:325px;
    margin:-50px auto 40px auto;
    overflow:hidden;
}
section > .article > article{
    height:100%;
    padding:0;
    overflow: hidden;
}
section > .article > article > img{
    float:left;
    margin:0 40px 0 0;
    width:250px; /* [imageWidth] */
    height: 100%;
    object-fit: fill;
}
section > .article > article > h3{
    padding-top:20px;
}
section > .article > article > p{
    padding: 0;
    margin: 0 40px 0 250px;/* [imageWidth] */


}
section > .article > article > h3{
    text-align:left;
}

/* plusieurs articles */
section > .articles{
    position: relative;
    margin:0 auto 40px auto;
    text-align: center;
    width: 70%;
}
section > .articles > article{
    display:inline-block;
    margin:10px;
    vertical-align: top;
    min-height:230px;
    width: calc(33% - 40px);
    min-width: 400px;
}



section > .articles > article > img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
section > .articles > article > h3,
section > .articles > article > h4
{
    text-align:center;
    margin:20px;
}





footer{
    grid-area: footer;
    background: var(--header-background);
    color:var(--header-text-color);
    font-size: 0.8em;
    height:var(--header-height);
}
footer a{
    color:var(--header-text-color);
}
footer p{
    text-align:center;
    margin:20px auto;
}





/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */
/*                                                                                                     */
/*                                          kernel                                                */
/*                                                                                                     */
/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */




/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */
/*                                                                                                     */
/*                                          kernel-list                                                */
/*                                                                                                     */
/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */

.kernel-list-container{
    background:var(--content-background);

}
table.kernel-list{
    border-collapse:collapse;
    text-align: left;
}
table.kernel-list .header .field{
    font-weight: bold;
}

table.kernel-list tr.kernel-list-item:nth-child(2n+1){
    background-color: var(--section-background);
}
table.kernel-list tr.kernel-list-item:nth-child(2n){
    background-color: var(--section-background-2);
}

table.kernel-list tr.kernel-list-item:hover{
    background-color: var(--main-color);
}


table.kernel-list tr.kernel-list-item.selected,
table.kernel-list tr.kernel-list-item.selected:nth-child(2n){
    background: #ffb84170;
}
table.kernel-list .field{
    overflow: hidden;
    vertical-align: middle;
    padding:15px;
    line-height:1em;
    max-width:30vw;
}
table.kernel-list .field img{
    max-width:100px;
    max-height:80px;
}

/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */
/*                                                                                                     */
/*                                          object-view-item                                         */
/*                                                                                                     */
/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */
.object-view-item {
    display:inline-block;
    margin:0 10px 0 0;
}

/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */
/*                                                                                                     */
/*                                          kernel-object-form                                         */
/*                                                                                                     */
/* °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º */
.kernel-object-form{
    background:var(--content-background);

}
.kernel-object-form form fieldset {
    display:block;
    border:none;
    padding:0;
    margin:0 0 30px 0;
}
.kernel-object-form form fieldset legend{
    font-weight: bold;
}
.kernel-object-form form fieldset input,
.kernel-object-form form fieldset select,
.kernel-object-form form fieldset textarea {
    background:var(--input-background);
    color:var(--input-text-color);
    padding:10px;
    border: var(--kernel-input-border);
}

.kernel-object-form form fieldset input[disabled],
.kernel-object-form form fieldset select[disabled],
.kernel-object-form form fieldset textarea[disabled] {
    background:var(--input-disabled-background);
    border: none;
}
.kernel-object-form form fieldset textarea {
    width: calc(100% - 20px);
    height: 20vh;
}
.kernel-object-form form fieldset input[type="text"] {
    min-width: 30%;
}

.kernel-object-form form fieldset.image img {
    display:block;
    margin:10px;
    width: 10vw;
}

.kernel-admin-tables{
    text-align: center;
}
.kernel-admin-tables ul li{
    display:inline-block;
    margin:10px;
}

.server.ok{
    color:green;
}

.server.error{
    color:red;
}
/* --------------------------------------- */
#login-container{
    position:absolute;
    right:21%;
    bottom:21%;
}
#login-container .error{
    text-align:center;
    background:var(--danger-color);
}
#login-container input{
    display:block;
    font-size: 1.2em;
    padding:10px;
    margin: 0 0 20px 0;
    width: 400px;
}
#login-container button{
    float:right;
    margin-left:10px;
}
#login-container button[type=button]{
    background-color: var(--button-neutral-background);        

}


/* ----------------- monCompte ----------------- */
#monCompte h2{
    font-size: 1.8em;
    line-height: 1.8em;
}

/* ----------------- chat ----------------- */

.chat-container { width:650px; background:var(--section-background-2); border-radius:10px; box-shadow:var(--shadow); padding:15px; margin:40px auto 40px auto ; }
.chat-container > .messages { border:1px solid #ccc; padding:10px; height:380px; overflow-y:auto; border-radius:5px; background:var(--content-background); }
.chat-container > .messages > .message { margin:5px 0; padding:8px 10px; border-radius:10px; width:fit-content; word-wrap:break-word; }
.chat-container > .messages > .message.agent { background:#e0f0ff; color:#0077cc; text-align:left; }
.chat-container > .messages > .message.client { background:#d4ffd4; color:#007700; text-align:right; margin-left:auto; }
.chat-container > .input-container { display:flex; margin-top:10px; }
.chat-container > .input-container > .client-answer { flex:1; padding:8px; border-radius:5px; border:1px solid #ccc; }
.chat-container > .input-container > button { padding:8px 12px; margin-left:5px; border:var(--button-border); border-radius:5px; background:var(--button-background); color:var(--button-text-color); cursor:pointer; }
.chat-container > .input-container > .send-btn:disabled { background:#ccc; cursor:not-allowed; }
.button-options { margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
.button-options button { padding:5px 10px; border:var(--button-border); border-radius:5px; cursor:pointer; background:var(--button-background); color:var(--button-text-color); }
.button-options button:hover { background:var(--button-hover-background); }