:root{
/*Indigo*/
--indigo-500: #19216C;
--indigo-400: #2D3A8C;
--indigo-300: #35469C;
--indigo-200: #4055A8;
--indigo-100: #4C63B6;
--indigo-light-500: #647ACB;
--indigo-light-400: #7B93DB;
--indigo-light-300: #98AEEB;
--indigo-light-200: #BED0F7;
--indigo-light-100: #E0E8F9;
/*Neutrals Cool Grey*/
--cool-grey-500: #1F2933;
--cool-grey-400: #323F4B;
--cool-grey-300: #3E4C59;
--cool-grey-200: #52606D;
--cool-grey-100: #616E7C;
--cool-grey-light-500: #7B8794;
--cool-grey-light-400: #9AA5B1;
--cool-grey-light-300: #CBD2D9;
--cool-grey-light-200: #E4E7EB;
--cool-grey-light-100: #F5F7FA;
/*Light Blue (Vivid)*/
--blue-500: #035388;
--blue-400: #0B69A3;
--blue-300: #127FBF;
--blue-200: #1992D4;
--blue-100: #2BB0ED;
--blue-light-500: #40C3F7;
--blue-light-400: #5ED0FA;
--blue-light-300: #81DEFD;
--blue-light-200: #B3ECFF;
--blue-light-100: #E3F8FF;
/*REd*/
--red-500: #610316;
--red-400: #8A041A;
--red-300: #AB091E;
--red-200: #CF1124;
--red-100: #E12D39;
--red-light-500: #EF4E4E;
--red-light-400: #F86A6A;
--red-light-300: #FF9B9B;
--red-light-200: #FFBDBD;
--red-light-100: #FFE3E3;
/*Yellow (Vivid)*/
--yellow-500: #8D2B0B;
--yellow-400: #B44D12;
--yellow-300: #CB6E17;
--yellow-200: #DE911D;
--yellow-100: #F0B429;
--yellow-light500: #F7C948;
--yellow-light400: #FADB5F;
--yellow-light300: #FCE588;
--yellow-light200: #FFF3C4;
--yellow-light100: #FFFBEA;
/*Green (Vivid)*/
--green-500: #014D40;
--green-400: #0C6B58;
--green-300: #147D64;
--green-200: #199473;
--green-100: #27AB83;
--green-light-500: #3EBD93;
--green-light-400: #65D6AD;
--green-light-300: #8EEDC7;
--green-light-200: #C6F7E2;
--green-light-100: #EFFCF6;
}
html{
  font-family: Roboto, sans-serif;
}
body {
    color: var(--cool-grey-500);
    overscroll-behavior-y: contain;
}
main {
    margin-left: 2px;
    margin-right: 2px;
}
/*nav.indented {*/
/*    position: absolute;*/
/*    width: 3.5em;*/
/*    border: 2px solid var(--indigo-light-100);*/
/*    padding: 4px;*/
/*    border-radius: 21px;*/
/*}*/
/*nav.indented a{*/
/*    display: flex;*/
/*}*/
nav{
    position: absolute;
}
.menu a.pseudo.button {
    white-space: nowrap;
    box-shadow: inset 0 0 0 99em rgba(17,17,17,.1);
}

nav .burger{
    top: 60%;
}
.burger img {
    width: 3em;
    padding: 2px;
    display: block;
}
.menu-indentation {
    margin-left: 4em;
}
.home-header{
    text-align: center;
}
.home-header h1{
    margin: -12px;
    font-family: "Ubuntu Light", sans-serif;
    font-size: 3em;
    color: var(--indigo-300);
    text-transform: uppercase;
}
.home-header h1+div{
  height: 25vh;
}
.home-header h1+div img{
    max-height: 100%;
    width: auto;
}
.button.button-big,
.button.home-new-audit,
.button.home-import-audit {
    padding: .3em 1em;
    font-size: 1.5em;
}
.button.home-new-audit,
.button.home-import-audit {
    display: flex;
    align-items: center;
}
.button.home-new-audit {
    background: var(--green-light-400);
}
.button.home-import-audit {
    background: var(--yellow-light300);
}
nav:has(.show:checked) {
    right: 0;
}
.show:checked + label img {
    width: 0;
}
.list-header{
justify-content: space-around;
}

.list-title {
    padding-top: 0;
    color: var(--cool-grey-200);
}
.list-filter{
    gap: 2em;
}
.list-filter--checkbox {
    flex-direction: column;
    justify-content: center;
}
.list-filter--submit{
    flex-direction: column;
    justify-content: center;
}
.list-filter--submit input{
    height: 2em;
    width: 5em;
    background: var(--green-light-400);
}
.validate-entry,
.start-entry {
    font-size: 1.5em; padding: .5em;
}
.start-entry {
    background: var(--indigo-light-500);
}
.start-entry a {
    color: white;
}

nav > p {margin-left: 1.5em; }
.hidden{display: none !important;}
fieldset{
  border-color: var(--cool-grey-light-100);
  margin: 0;
  margin-left: -2px;
}
label, label>span{display: block;}
label:not(:has(span)){
    line-height: 40px;
}
.flex {
    display: flex;
}
.fieldset-container-2col {
    display: flex;
    gap: 1em;
}
.col-container {
    flex: 1;
}
label.inline{display: inline;}
textarea {
  width: 100%;
  min-height: 5em;
}
fieldset fieldset {border: none; padding: 0;}
/*
input[inputmode="numeric"] {
outline: 2px dashed #e8405d;
}
*/
.action-buttons{
  flex-direction: row-reverse;
justify-content: space-between;
}
.actions-location {
    display: flex;
    flex-direction: row-reverse;
    letter-spacing: -.31em;
    text-rendering: optimizespeed;
}
.action-buttons button {
    padding: .1em .9em;
    line-height: 1.6;
    letter-spacing: normal;
    background: var(--indigo-light-200);
    border-radius: 0;
    border-right: 1px solid rgba(0,0,0,.2);
}
.action-buttons button:first-child {
    border-bottom-right-radius: .2em;
    border-top-right-radius: .2em;
}
.action-buttons button:last-child {
    border-bottom-left-radius: 0.2em;
    border-top-left-radius: 0.2em;
}
.error{
  color: var(--red-300);
  border: 1px solid var(--red-300);
}
.label.warning{
     background: var(--yellow-light300);
    font-size: .75em;
    color: var(--yellow-500);
    border: 1px solid var(--yellow-100);
}
.invalid{
  outline: 1px solid red;
}
[data-usage-choice],
.additionnal-field {
  display: flex;
}
[data-usage-choice]>fieldset{
  width: 100%;
}
.usage-entry{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
[data-usage-meta]{
  grid-column: 3;
}
.additionnal-field {
  grid-column: 4;
}
wc-entry-additionnal {
  display: flex;
}
wc-puissance-standard {
    display: block;
}
wc-puissance-standard>button {
    line-height: 2.5;
    padding: 0 1.25rem;
    background: var(--blue-light-300);
    color: var(--indigo-500);
}
.entry-meta {
  margin-top: .5em;
  margin-bottom: .75em;
  padding-top: .5em;
  gap: .5em;
}
.meta-point {
  padding: 4px;
  border: 1px solid;
  border-radius: 4px;
}
.meta-point.vert{
  border-color: var(--green-200);
}
.meta-point.rouge{
  border-color: var(--red-200);
}
.meta-point.vert > span{
  color: var(--green-400);
}
.meta-point.rouge > span{
  color: var(--red-200);
}
.meta-point input{
  width: 16em;
}
input[readonly] {
    background: var(--cool-grey-light-100);
    border: none;
    color: var(--cool-grey-light-400);
}
dl {
  display: grid;
  margin-right: 1em;
}
dd {
  grid-column: 2;
  margin-left: .5em;
}
dd.typo-client {
    background: var(--cool-grey-light-200);
    padding: .15em .25em;
    border-radius: .25em;
    color: var(--indigo-500);
    text-transform: capitalize;
}
[data-nom-piece]{
  grid-column: 6;
  grid-row: 1;
  display: flex;
  flex-direction: column;
    justify-content: center;
}
[data-location] {
  display: grid;
}
.location-values {
  grid-column: 2 / 6;
  margin-top: 1em;
  display: flex;
  justify-content: center;
}
.location-values button{
  background: transparent;
  border-color: transparent;
}
.badge {
    background: var(--indigo-light-200);
    padding: .5em 1em;
    border-radius: 1em;
    color: var(--indigo-500);
}
button *,
.pointer-event-none{
  pointer-events: none;
}
[data-usage-choice] legend,
[data-usage-choice] label{
  width: max-content;
}
[data-cond-autre]:not(:checked) ~ div,
#decretTertiaire:not(:checked) ~ div,
#auditEnergetique:not(:checked) ~ div,
#auditRealise:not(:checked) ~ div {
  display: none;
}
[data-add-batiment]{
  flex-wrap: wrap;
  max-width: 55em;
}
wc-entry-photo {
  display: flex;
  margin-right: 1em;
  margin-left: 1em;
}
.dropimage{position:relative;display:block;padding:0;padding-bottom:56.25%;overflow:hidden;cursor:pointer;border:0;margin:.3em 0;border-radius:.2em;background-color:#ddd;background-size:cover;background-position:center center;}
.dropimage input{left:0;width:100%;height:100%;border:0;margin:0;padding:0;opacity:0;cursor:pointer;position:absolute}.tabs{position:relative;overflow:hidden}
.dropimage.photo {
  width: 100%;
  margin-top: 1.35em;
  padding-bottom: 0;
  background-image: none;
  background-color: var(--cool-grey-light-300);
  color: #333;
}
.dropimage.photo .svg-icon {
  width: 100px;
  height: 65px;
}
#photos-display {
    max-height: 100px;
}
#photos-display img {
    height: 100px;
}
table {
    font-size: 85%;
    border-collapse: collapse;
}
th{
  color: inherit;
  background-color: var(--indigo-light-100);
}
/*tr{
  white-space: break-spaces;
}*/
tr:nth-child(odd) {
    background: var(--cool-grey-light-200);
}
th.number, td.number {
    text-align: right;
    /*width: 7em;*/
}
td{
  /*width: 12em;*/
  padding: inherit;
}
.compute-error{
    white-space: nowrap;
}
use {
    fill: var(--indigo-light-500);
}
tr.highlited{
    outline: 3px solid var(--yellow-light400);
}
i.pt-vert {
    font-style: normal;
    color: var(--green-400);
    background: var(--green-light-200);
    padding: 2px;
}
i.pt-rouge {
    font-style: normal;
    color: var(--red-100);
}
.entry-actions button{
    width: 50%;
    height: 2.25em;
  background: var(--indigo-light-200);
}
#entry-actions-menu {
    background: var(--cool-grey-light-100);
    width: 9em;
    flex-direction: column;
    align-items: stretch;
    padding: 0.25em 0.5em;
    border-radius: 3px;
    box-shadow: -1px 1px 1px var(--cool-grey-light-300);
    --mouse-x: 0;
    --mouse-y: 0;
    display: none;
    position: fixed;
    margin: 0;
    left: 0;
    top: 0;
    /* The following line is responsible for all the magic */
    transform: translateX(min(var(--mouse-x), calc(100vw - 100%))) translateY(min(var(--mouse-y), calc(100vh - 100%)));
}
[data-page="home"] #entry-actions-menu{
    width: auto;
}
#entry-actions-menu * {
    line-height: 40px;
    text-align: center;
    width: 100%;
}
.btn-delete-entry {
    color:white;
    background: var(--indigo-light-500);
}
.btn-compute{
    background: var(--green-light-400);
}
.dropimage, button, .button, [type=submit], .label, [data-tooltip]:after{
    background: var(--blue-light-500);
}
.result {
    border-radius: 2px;
    padding: 4px;
}
.result.success{
    border: 1px solid var(--green-light-500);
    background: var(--green-light-200);
    color: var(--green-400);
}
.result.error{
border: 1px solid var(--red-100);
    background: var(--red-light-200);
    color: var(--red-400);}

[data-typo-offre] {
    margin-bottom: 1em;
}
.batiment-name {
    background: var(--cool-grey-light-200);
    color: var(--indigo-500);
    padding: .1em .5em;
    width: max-content;
}
/* Login
*/
.login-container {
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
}
.login-container .home-header {
    margin-bottom: 4em;
}
.login-container .home-header h1 {
    font-size: 2em;
}
.login-container .home-header h1+div {
    height: 18vh;
}
/*
Import Audit
 */
input[name=auditImport]{
    width: 22em;
    max-width: 100%;
    padding: 0.35em;
    background: #fff;
    border-radius: 0.35em;
    border: 1px solid var(--cool-grey-light-300);
}
input[name=auditImport]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: var(--indigo-light-400);
  padding: 10px 20px;
  border-radius: .35em;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}
input[name=auditImport]::file-selector-button:hover {
  background: var(--indigo-500);
}