* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #F2F2F2;
font-family: 'Lato', sans-serif;
color: #141414;
}
.evelyne-login-container { display:block; width:auto; height:auto; padding:0; margin:0; } .evelyne-welcome {
display: inline-block;
font-family: 'Sora', sans-serif;
font-weight: 700; font-size: 28px;
margin: 0 0 1.5rem 0;
position: relative;
}
.evelyne-welcome-text {
display: inline-block;
clip-path: inset(0 100% 0 0);
animation: reveal 2s steps(30, end) forwards;
}
.evelyne-dot {
display: inline-block;
color: #F85A20;
position: relative;
opacity: 0;
animation: dot-appear 0s linear 2s forwards;
}
.evelyne-dot::after {
content: "|";
position: absolute; left: 100%; top: 0;
color: #141414;
opacity: 0;
animation: caret-appear 0s linear 2s forwards, blink-caret .75s step-end 2s infinite;
}
@keyframes reveal       { to { clip-path: inset(0 0 0 0); } }
@keyframes dot-appear   { to { opacity: 1; } }
@keyframes caret-appear { to { opacity: 1; } }
@keyframes blink-caret  { from, to { opacity: 0; } 50% { opacity: 1; } } .evelyne-input {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid rgba(20,20,20,0.25);
border-radius: 0.5rem;
background: transparent;
color: #141414;
font-size: 1rem;
margin: 0 0 1rem 0;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.evelyne-input::placeholder { color: rgba(20,20,20,0.5); }
.evelyne-input:focus {
outline: none; border-color: #F85A20; box-shadow: 0 0 0 3px rgba(248,90,32,0.12);
}
.evelyne-button {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.95rem 1.25rem;
background: #141414; color: #fff;
font-size: 1rem; font-weight: 700; border: none; border-radius: 2rem;
cursor: pointer; transition: background .2s, transform .1s;
}
.evelyne-button:hover { background:#F85A20 !important; }
.evelyne-button:active { transform: scale(.98); }
.evelyne-login-error, .evelyne-login-success { font-size:.9rem; margin:0 0 1rem 0; }
.evelyne-login-error { color:#ff5c5c; }
.evelyne-login-success { color:#2fbf71; }
.evelyne-register { margin:1rem 0 0 0; font-size:.9rem; color:#141414; }
.evelyne-register-link, .evelyne-assist { color:#F85A20; font-weight:700; text-decoration:none; margin-left:.25rem; }
.evelyne-register-link:hover, .evelyne-assist:hover { text-decoration:underline; }#content {
flex-direction: column; align-items: center;
justify-content: center;
padding: 1rem;
margin: 0 auto;
max-width: 960px; width: 100%; box-sizing: border-box;
}
#budget {
color: #F85A20; font-weight: bold;
}
.orange {
color: #F85A20;
font-weight: bold;
}  
.flex {
display:flex;
flex-direction: column;
}
body {
font-family: 'Sora', sans-serif;
margin:0;
}
input::placeholder {
opacity: 0.5;
}
h1 {
text-align: center;
}
.selection {
width: 100%;
}
.title {
background: rgb(5,52,76);
background: -moz-linear-gradient(128deg, rgba(5,52,76,1) 0%, rgba(237,79,86,1) 100%);
background: -webkit-linear-gradient(128deg, rgba(5,52,76,1) 0%, rgba(237,79,86,1) 100%);
background: linear-gradient(128deg, rgba(5,52,76,1) 0%, rgba(237,79,86,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#05344c",endColorstr="#ed4f56",GradientType=1);
padding:30px;
color:#fff;
}
select, input[type="number"] {
display: block;
font-size: 16px;
margin: 30px auto;
min-width:70%;
}
select {
padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #edf0f2;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
}
table {
margin: 20px auto;
border-collapse: collapse;
background-color: #ECEFF1;
}
th, td {
border: 1px solid black;
padding: 20px;
text-align: center;
}
.checkbox {
display: flex;
}
.checkbox-flex {
display: flex;
margin: 0 auto;
}
.checkbox-flex input {
margin:0 10px;
width: auto;
}
#buttons > button {
background-color: #F85A20;
margin: 30px auto;
}
button {
display: block;
margin: 20px 0;
width: 200px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#buttons > button:hover {
background-color: #F85A20;
transition: .2s;
}
.export_button {
background-color: #FF3F68;
}
.export_button:hover {
background-color: #FF3F68;
transition: .2s;
}
select, input, button {
font-family: 'Sora', sans-serif;
padding:20px;
background-color: #ECEFF1;
} @media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead {
display: none;
}
tr {
margin-bottom: 1rem;
border: 1px solid #ccc;
background: #fff;
padding: 1rem;
}
td {
position: relative;
padding-left: 50%;
border: none;
border-bottom: 1px solid #eee;
text-align: left;
}
td::before {
content: attr(data-label);
position: absolute;
top: 0.75rem;
left: 1rem;
width: 45%;
font-weight: bold;
white-space: nowrap;
color: #333;
}
}
#tableaux-simples {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
max-width: 90%;
margin: 0 auto;
}
.tableau-mini {
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
overflow: hidden;
}
.tableau-mini table {
width: 100%;
border-collapse: collapse;
}
.tableau-mini th, .tableau-mini td {
padding: 1rem;
text-align: center;
font-size: 1.1rem;
}
.tableau-mini th {
background-color: #f9f9f9;
font-weight: bold;
color: #333;
}