:root {--background:#ffffff;--principale:#164780;--secondaire:#ff9100;--texte:#003e79;}/* Variables */
:root {
    --grey:#ccc;
    --radius:20px;
    --transition:all .25s ease-in-out;
}

body {background:var(--background);color:var(--texte);font-family:'Stolzl';}

::-webkit-scrollbar {width:5px;}
::-webkit-scrollbar-track {background:var(--background);}
::-webkit-scrollbar-thumb {background-color:var(--principale);border:0;}
::placeholder {font-size:.8rem;}

a.logout {position:absolute;right:5px;top:5px;color:var(--principale);border-radius:var(--radius);background:#fff;width:30px;height:30px;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;transition:var(--transition);}
a.logout:hover {width:130px;}
a.logout:hover + a.renew {right:140px;}
a.logout:hover::before {content:attr(title);font-size:.7rem;padding-right:5px;}
a.renew {position:absolute;right:40px;top:5px;color:var(--principale);border-radius:var(--radius);background:#fff;width:30px;height:30px;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;transition:var(--transition);}
a.renew:hover {width:130px;}
a.renew:hover::before {content:attr(title);font-size:.7rem;padding-right:5px;white-space:nowrap;}
main {padding:0;height:100vh;overflow:hidden;}
main.blur {filter:blur(10px);}

.grid-padding-x > .cell.bg-right {padding:0;display:flex;align-items:center;justify-content:flex-end;position:relative;}
.bg-right img {height:100vh;width:auto;object-fit:cover;position:absolute;z-index:-1;}
.bg-right .recommandation {background:var(--principale);padding:3rem 1rem;border-top-left-radius:var(--radius);color:#fff;text-transform:uppercase;font-size:.8rem;width:40%;}
.bg-right .recommandation h2 {color:#fff;font-weight:bold;font-size:1rem;margin-bottom:0;}
.bg-right .recommandation p {margin:0;}
.bg-right .recommandation button {background:#fff;color:var(--principale);padding:.5rem 1rem;margin:.5rem auto;border:0;width:fit-content;text-transform:uppercase;cursor:pointer;display:block;border-radius:var(--radius);}
.bg-right .recommandation button:disabled {cursor:not-allowed;opacity:.5;}
.bg-right .recommandation > div {display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;padding:1rem 0;}
.bg-right .recommandation > div::before {content:'';font-family:"Font Awesome 6 Free";font-weight:900;flex:1 0 50px;width:50px;height:50px;max-width:50px;max-height:50px;border-radius:50%;border:1px solid #fff;margin-right:1rem;display:flex;text-align:center;align-items:center;justify-content:center;}
.bg-right .recommandation > div.complete::before {content:'\f00c';}
.bg-right .recommandation > div span {flex:1 0 calc(100% - 50px - 1rem);}
.bg-right .recommandation .inactive {opacity:.5;}

.top-info {background:var(--principale);border-top-right-radius:var(--radius);border-bottom-left-radius:var(--radius);color:#fff;text-transform:uppercase;}
.top-info .large-5 {display:flex;align-items:flex-end;justify-content:center;text-align:right;flex-direction:column;}
.top-info .large-2 + .large-5 {align-items:flex-start;text-align:left;}
.top-info .large-2 + .large-5 p {margin:0;}
.top-info h1 {color:var(--secondaire);font-size:1.4rem;margin:0;}
.logo-client {max-width:200px;width:100%;}

.grid-container {max-width:100%;}
.grid-container.top-info {max-width:100%;position:absolute;width:calc(100% - 4rem);top:2rem;left:2rem;height:calc(20vh - 2rem);display:flex;align-items:center;justify-content:center;z-index:1;}
.grid-container.top-info p {margin:0;}
.grid-container.top-info > .grid-x {width:100%;}
.grid-container.top-info .cell:first-child {align-items:center;justify-content:center;display:flex;}

h1, h2, h3, h4, h5, h6, label {color:var(--principale, #999);font-family:'Stolzl';text-transform:uppercase;}
h1, .h1 {font-size:2.4rem;text-transform:uppercase;}
h2, .h2 {font-size:1.7rem;}
p {line-height:1.2;}

.grid-padding-x > .cell.contenu {margin-top:20vh;height:80vh;overflow:auto;padding:0;scroll-snap-type:y mandatory;}
.grid-x > .large-7 {padding-right:0;}

fieldset {display:flex;padding:1rem;background:rgba(255, 255, 255, 0.05);margin-bottom:1rem;border-radius:var(--radius);height:100%;align-content:center;flex-direction:column;align-items:center;justify-content:center;scroll-snap-align:center;}
fieldset label {width:50%;padding:0 0.5rem;}
fieldset[name="coordonnees"] label {max-width:50%;}
fieldset h2 {color:var(--grey);font-size:1.2rem;}
fieldset h2, #calculPuissanceMachine h2 {text-align:center;width:100%;}
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea, select {background:none;color:var(--texte, #999);border-color:var(--principale, #999);border-radius:var(--radius);padding:0 20px;}
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus, select:focus {border-color:var(--texte, #999);background:none;}
input:disabled, input[readonly], textarea:disabled, textarea[readonly] {background:none;color:var(--texte, #999);border-color:var(--principale, #999);}
body:not(.login) [type='submit'], body:not(.login) [type='button'] {background:var(--principale, #999);color:var(--texte, #fff);border-color:var(--principale, #999);border-radius:var(--radius);padding:0.5rem 1rem;margin:0.5rem auto;border:0;width:50%;text-transform:uppercase;cursor:pointer;display:block;}

button[role="next"] {background:var(--principale);color:#fff;border-color:var(--principale);border-radius:var(--radius);padding:0.5rem 1rem;margin:0.5rem auto;border:0;width:50%;text-transform:uppercase;cursor:pointer;display:block;position:relative;transition:var(--transition);}
button[role="next"]::after {content:'\f054';font-family:"Font Awesome 6 Free";font-weight:900;border-radius:50%;border:1px solid #fff;width:15px;line-height:15px;font-size:.6rem;display:block;position:absolute;right:.5rem;top:calc(.5rem - 1px);}
button[role="next"]:hover {background:var(--texte);}
[data-etape="4"] button[role="next"] {display:none;}

.infos-bassin {display:flex;flex-wrap:wrap;padding:0;margin-bottom:1rem;width:75%;}
.infos-bassin > span {flex:1 0 100%;}
.dimensions-piscine {flex:1 0 calc(100%/3);display:flex;padding:0 0.5rem;}
.dimensions-piscine i {background:var(--principale, #999);padding:0 15px;display:flex;align-items:center;justify-content:center;border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);color:var(--background);text-transform:none;font-style:normal;}
.dimensions-piscine input, .dimensions-piscine select {margin-bottom:0;border-top-left-radius:0;border-bottom-left-radius:0;}

.superficie {display:flex;flex-wrap:wrap;padding:0;margin-bottom:1rem;}
[for="volume"], [for="surface"] {max-width:50%;text-align:center;}
[name="volume"], [name="surface"] {pointer-events:none;margin-bottom:0;border:0;box-shadow:none;text-align:center;}
object {width:45px;height:30px;display:block;}

.superficie + .switches .switch {width:100%;}

label span {display:flex;align-items:center;justify-content:center;flex-direction:row;padding-bottom:5px;}
fieldset .switches + label {width:75%;}
.range {display:flex;position:relative;margin-bottom:2rem;}
.range > div {flex:1 0 20%;position:relative;}
.range > div:hover {color:var(--texte);}
.range input[type="radio"] {appearance:none;width:100%;height:35px;margin:0;border-top:5px solid transparent;cursor:pointer;}
.range input[type="radio"] + i {position:absolute;bottom:0;left:0;width:100%;text-align:center;z-index:-1;}
.range div.cursor {position:absolute;top:0;left:0;width:0;height:5px;background:var(--principale);z-index:1;transition:var(--transition);border-radius:5px;}

.resultat {display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--principale, #eee);padding:2rem;border-radius:var(--radius);margin:1rem auto 2rem auto;width:fit-content!important;}
.resultat > div {display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;}

.infos-produit {display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-around;}
.infos-produit > div {display:flex;flex-direction:column;}

table {border-radius:var(--radius);margin-bottom:5rem;}
thead, tbody, tfoot {background:none;border:0;}
td {border:1px solid var(--background, #fff);}
td:not(:first-child) {text-align:center;}
tbody tr:nth-child(even) {color:var(--principale);}
tbody tr:hover, tbody tr:nth-child(even):hover {background:var(--principale, #eee);color:#fff;}
tbody tr:hover a, tbody tr:nth-child(even):hover a {color:#fff;}

.comparatif-conso::before {margin-bottom:3rem;width:50%;height:1px;left:25%;position:relative;content:'';display:block;background:var(--principale);}
.comparatif-conso table {margin-bottom:2rem;}
.comparatif-conso table + p {text-align:center;}
.comparatif-conso table:last-of-type {margin-bottom:3rem;color:#bbb;}
.comparatif-conso table:last-of-type td {padding:0 1rem;line-height:1.2;background:none;}
.comparatif-conso table:last-of-type tbody tr:nth-child(even) {background:none;color:#bbb;}
.comparatif-conso table:last-of-type tbody tr:hover, .comparatif-conso table:last-of-type tbody tr:nth-child(even):hover {background:none;color:var(--texte, #999);}

/* Switches buttons */
.switches {display:flex;flex-wrap:wrap;padding:0;margin-bottom:1rem;justify-content:center;}
.switch {margin-bottom:0;height:auto;width:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem 0;}
.switch span {color:var(--principale, #999);font-family:'Stolzl';font-size:.875rem;font-weight:normal;line-height:1.8;text-transform:uppercase;align-items:center;justify-content:center;display:flex;}
.switch input[type="checkbox"] {appearance:none;width:100%;height:100%;position:absolute;left:0;top:0;margin:0;cursor:pointer;border-radius:var(--radius);}
.switch label {pointer-events:none;width:80px;height:39px;background:var(--grey);display:block;border-radius:var(--radius);position:relative;z-index:0;margin:0 auto;}
.switch label:after {content:'';position:absolute;top:2px;left:2px;width:35px;height:35px;background:#fff;border-radius:50%;transition:.3s;}
.switch input:checked + label {background:var(--principale);}
.switch input:checked + label:after {left:calc(100% - 2px);transform:translateX(-100%);}
.switch label:active:after {width:80px;}

fieldset[data-etape="3"] .switches {width:90%;flex-wrap:nowrap;}

button[role="submit"] {background:var(--principale);color:#fff;padding:.5rem 1rem;margin:1rem auto .5rem auto;border:0;width:fit-content;text-transform:uppercase;cursor:pointer;display:block;border-radius:var(--radius);}
button[role="submit"]:disabled {cursor:not-allowed;opacity:.5;}

#resultats::before {position:fixed;width:100vw;height:100vh;overflow:hidden;top:0;left:0;background:rgba(255, 255, 255, 0.8);z-index:-1;content:'';}
#resultats {position:fixed;width:80vw;height:80vh;overflow:auto;top:10vh;left:10vw;background:#fff;padding:5rem 3rem;z-index:10;}
#resultats .container {width:100%;}
#resultats .bt-popup {display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;width:100%;}
#resultats .bt-popup a {color:var(--texte);padding:0 1rem;font-size:2rem;}
#resultats .bt-popup a:hover {color:var(--principale);}

.waiting {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--principale);z-index:1;}
.waiting svg {display:block;width:150px;height:150px;}
.waiting svg .gear-one {transform-origin:33.505px 67.195px 0;}
.waiting svg .gear-one, .waiting svg .gear-two {animation:spin-right-round 4s infinite linear forwards;fill:#fff;}
.waiting svg .gear-two {transform-origin:69.35px 29.93px 0;animation-direction:reverse}

.warning {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--principale);z-index:1;color:#fff;}
.warning > i {font-size:5rem;margin-bottom:1rem;}
.warning p {text-align:center;color:#fff;}
.warning a {color:#fff;font-size:2rem;}

[name="kwh_electricite"], [name="kwh_fioul"], [name="kwh_gaz"] {text-align:center;}

@keyframes spin-right-round{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

@media screen and (max-width:1200px) {
    .bg-right .recommandation > div span {font-size:.7rem;}
    .bg-right .recommandation > div::before {max-width:35px;max-height:35px;}
}
@media screen and (max-width:1024px) {
    .grid-container.top-info {width:60%;}
    .bg-right .recommandation {padding:1rem;font-size:.7rem;width:60%;}
    .bg-right .recommandation > div {flex-direction:column;padding:0 0 .5rem 0;}
    .bg-right .recommandation > div::before {margin:0 0 5px 0;flex:1 0 40px;width:40px;height:40px;}
    .bg-right .recommandation > div span {text-align:center;}
    fieldset label {width:75%;}
    fieldset[name="coordonnees"] label {max-width:75%;}
    fieldset .switches + label {width:90%;}
    .switch label {zoom:.8;}
}
@media screen and (max-width:768px) {
    .grid-container.top-info {width:calc(100% - 4rem);}
    .grid-padding-x > .cell.bg-right {align-items:flex-end;padding:0 2rem 0 0;}
    .grid-padding-x > .cell.contenu {height:calc(80vh - 2rem);}
    .top-info {border-radius:0;border-top-left-radius:var(--radius);}
    .bg-right .recommandation {width:100%;height:calc(80vh - 2rem);border-radius:0;border-bottom-right-radius:var(--radius);align-items:center;justify-content:center;display:flex;flex-direction:column;}
    .infos-bassin {flex-direction:column;flex-wrap:nowrap;}
    .infos-bassin > span {flex:initial;}
    .dimensions-piscine {flex:initial;margin-bottom:.5rem;}
    .dimensions-piscine i {width:40px;}
    .switch {flex-direction:row;width:100%;}
    .switch span, label span.exposition {width:50%;justify-content:flex-end;}
    fieldset .switches + label {width:100%;}
    .range {margin-top:1rem;}
    label .range i {font-size:.8rem;}
    .bg-right img {display:none;}
    fieldset h2 {font-size:1rem;}
}
@media screen and (max-width:640px) {
    .grid-container.top-info {height:20vh;width:calc(100% - 2rem);left:1rem;}
    .grid-padding-x > .cell.contenu {height:80vh;}
    fieldset[name="coordonnees"] label {max-width:100%;}
    .top-info .large-5 {text-align:center;display:block;}
    .top-info .large-5 p {margin-bottom:0;font-size:.8rem;}
    .top-info .large-10 {text-align:center;align-items:center;}
    .logo-client {max-width:120px;margin:10px 0;}
    .top-info h1 {display:none;}
    .switch span, label span.exposition {width:70%;justify-content:flex-end;}
    fieldset label, .infos-bassin {width:90%;}
    .range input[type="radio"] + i {font-size:.6rem;}
    .grid-padding-x > .cell.bg-right {display:none;}
    .grid-x > .large-7 {padding:0;}
    a.logout:hover::before, a.renew:hover::before {display:none;}
    a.logout:hover + a.renew {right:5px;}
    fieldset[data-etape="3"] .switches {flex-wrap:wrap;}
}

@media print and (color) {
    * {-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    nav, section:not(#calculPuissanceMachine), tr.fiche-technique, #resultats .bt-popup, main.blur {display:none;}
    a[href]::after {content:none!important;}
    body {background:none;font-size:12pt;}
    #resultats {position:relative;width:100%;height:auto;overflow:initial;top:0;left:0;background:#fff;padding:1cm;}
    #resultats .bt-popup + h2 {break-before:always}
    #resultats .infos-produit {break-after:always;}
    div.resultat, div.resultat table {display:block;page-break-before:always;}
    table td {line-height:1.2;font-size:10pt;padding:1mm 0;}
    tbody tr {position:relative;}
    tbody tr:nth-child(even) {color:#999!important;}
}