@font-face {
    font-family: Marianne;
    src: url('font/Marianne-Regular.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Marianne;
    src: url('font/Marianne-Bold.woff') format("woff");
    font-weight: bold;
    font-style: normal;
}
/*
*{
    box-sizing: border-box;
    border: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    font-family: Marianne,arial,sans-serif;
}
*/


:root {
	--bf5000: #ba4b01;
	--bf500: #000091;
	--bf500-plain: #000091;
	--w-bf500: #fff;
	--bf300-plain: #7f7fc8;
	--bf200-bf300: #ececff;
	--bf100-g750: #f5f5ff;
	--t-plain: transparent;
	--t-w: transparent;
	--g800: #000000;
	--g700: #383838;
	--g600: #6a6a6a;
	--g500: #9c9c9c;
	--g400: #cecece;
	--g300: #e7e7e7;
	--g200: #f0f0f0;
	--g100: #f8f8f8;
	--w: #f2f2f9;
	--beige: #f9f8f6;
	--g800-plain: #1e1e1e;
	--g600-g400: #6a6a6a;
	--g400-t: #cecece;
	--g100-g800: #f8f8f8;
	--w-g750: #fff;
	--focus: #2a7ffe;
	--info: #0762c8;
	--success: #008941;
	--error: #e10600;
	--rm300: #f7bfc3;
	--rm500: #e1000f;
	--scroll-shadow: rgba(30, 30, 30, 0.16);
	--overlay: hsla(0, 0%, 61.2%, 0.32);
	--heightfooter: 323px;
	--border: #e7e7e7;
	--title: #1e1e1e;
}
body{
    background-color: var(--w);
}

*{
    margin:0;
    padding:0;
    outline:none;
    border:none;
    box-sizing: border-box;
    font-family: Marianne,arial,sans-serif;

}
.app{
    width: 100%;
    min-height:100vh;
    display: flex;
    flex-direction: column;
}
.app .banner{
    width: 100%;
    padding: 1rem 0.7rem;
    background-color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.app .banner h1{
    font-size: 1.1rem;
    color:black;
    margin-left: 1rem;
}
.text{
    margin-top: 1rem;
    padding: 0.7rem;
    display: flex;
    justify-content: flex-start;
    color: var(--g700);
    fill: var(--g700);
}
.text img{
    fill: var(--g700);
    height: 1.1rem;
}
.text p{
    font-size: 0.9rem;
    margin-left: 0.7rem;
}

.formm{
    width: 100%;
    padding: 0.7rem;
}
.form{
    background-color: white;
    padding: 1rem;
}

.form label{
    font-size: 0.8rem;
}
.form .input{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    position: relative;
}

.form .input input{
    width: 100%;
    background: #f0f0f0;
    padding: 0.7rem 1rem;
    border-radius: 8px 8px 0 0;
    margin-top: 4px;
    border-bottom: 2px solid var(--g700);
    transition: all 250ms ease-in-out;
}
.form input:focus, .form select:focus,.form select:active{
    border-bottom: 2px solid var(--bf500);

}
.form button{
    width: 100%;
    background: var(--bf500);
    padding: 0.7rem 1rem;
    margin-top: 4px;
    color: white;
    font-weight: bold;
}


.form .input select{
    width: 100%;
    background: #f0f0f0;
    padding: 0.7rem 1rem;
    border-radius: 8px 8px 0 0;
    margin-top: 4px;
    /*text-indent:15px; 
    line-height:28px;*/
    border-bottom: 2px solid var(--g700);
}



.form .input-group{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.7rem;
    width:100%;
    
}

table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }

/* Styles pour le bouton */
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}

.highlight{
    background:  var(--bf500);
    color:white;
}
.caca{filter: blur(10px);
    -webkit-filter: blur(10px);}