
@font-face {
font-family: 'Canaro';
src: local('Canaro Book'), local('Canaro-Book'),
    url('fonts/Canaro-Book.woff2') format('woff2'),
    url('fonts/Canaro-Book.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Canaro';
src: local('Canaro Bold'), local('Canaro-Bold'),
    url('fonts/Canaro-Bold.woff2') format('woff2'),
    url('fonts/Canaro-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
:root {--bg-color:#6a6b4b;--txt-color:#fff;--bg-button:#797a5d;}
:focus {outline:none;}
body {background:var(--bg-color);color:var(--txt-color);font-family:'Canaro';}
form[name="simulateur"] {position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;max-width:440px;margin:0 auto;overflow:hidden;}
form[name="simulateur"] .notification {background:var(--bg-button);position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;margin:0 auto;width:100%;height:100%;z-index:999;top:0;left:0;pointer-events:none;opacity:0;padding:0 30px;max-width:calc(100% - 60px);transition:all .25s ease-in-out;}
form[name="simulateur"] .notification.active {opacity:1;pointer-events:all;}
form[name="simulateur"] .notification a.button {background:var(--bg-color);color:var(--bg-button);max-width:440px;text-decoration:none;}
form[name="simulateur"] .notification a.button:hover {color:var(--txt-color);}
form[name="simulateur"] .notification h2 {cursor:default;}
form[name="simulateur"] .notification p {font-size:1.3em;max-width:440px;text-align:center;margin-top:0;}
form[name="simulateur"] h2 {font-weight:normal;text-align:center;cursor:pointer;font-size: 1.3rem;}
form[name="simulateur"] h2::before {content:'';background:url('logo-leeo-pizza.svg') no-repeat center center;background-size:contain;display:block;width:100px;height:100px;margin:0 auto 15px auto;}
form[name="simulateur"] label {background:var(--bg-button);width:auto;position:relative;margin:5px auto -10px 0;padding:5px 20px;border-radius:20px;z-index:1;pointer-events:none; font-size: 13px;}
form[name="simulateur"] section {width:100vw;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:440px;margin:0;    flex:1 0 100%;}
form[name="simulateur"] select option {background:var(--bg-color);}
form[name="simulateur"] .offreRestauration {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
form[name="simulateur"] .offreRestauration.disabled {display:none;}
form[name="simulateur"] .offreRestauration [type="radio"] {display:none;}
form[name="simulateur"] .offreRestauration input[type="radio"] + label {pointer-events:all;padding:0 14px;line-height:35px;height:35px;border-radius:20px;margin:0 3px;cursor:pointer;}
form[name="simulateur"] .offreRestauration input[type="radio"]:checked + label {background:var(--txt-color);color:var(--bg-button);}
form[name="simulateur"] .offreRestauration .offre_restauration_oui {display:none;}
form[name="simulateur"] .offreRestauration .offre_restauration_oui.active {display:flex;flex-direction:column;flex:1 0 100%;}
.taux_occupation, .taux_captage {position:relative;width:100%;}
[name="taux_occupation"] + span, [name="taux_captage"] + span {position:absolute;top:5px;right:0;line-height:2em;height:calc(100% - 12px);display:flex;align-items:center;justify-content:center;margin:0;width:50px;background:var(--bg-button);border-radius:0 2em 2em 0;border:1px solid var(--txt-color);border-left:0;}
[name="taux_occupation"] + span::after, [name="taux_captage"] + span::after {content:'%';font-size:1.4em;}
[name="taux_occupation"].disabled + span, [name="taux_captage"].disabled + span {display:none;}
.disabled {display:none;}
form[name="simulateur"] a.retour{display: flex;align-items: center;justify-content: flex-start;width: 100%;margin-bottom: 10px;cursor: pointer;}
form[name="simulateur"] a.retour svg{width: 30px;display: block;transform:rotate(180deg);}
form[name="simulateur"] a.retour i{font-style: normal;margin-left: 5px;font-size: 18px;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
/* Firefox */
input[type="number"] {-moz-appearance:textfield;}
input, select, textarea, a.button {background:none;border:1px solid var(--txt-color);color:var(--txt-color);line-height:2;height:auto;appearance:none;-webkit-appearance:none;border-radius:2em;padding:7px 20px 5px 20px;width:100%;box-sizing:border-box;margin:5px 0;font-family:'Canaro';font-size:16px;}
input.error, select.error, textarea.error, input.error::placeholder, select.error::placeholder, textarea.error::placeholder {border-color:#fb7544;color:#fb7544;}
form[name="simulateur"] label.consentement {padding:0 20px;display:flex;align-items:center;background:none;justify-content:center;margin:10px 0;pointer-events:all;}
input[type="checkbox"] {width:20px;height:20px;padding:0;margin-right:10px;}
input[type="checkbox"]:checked {background:#4e4f22;}
input[type="checkbox"]:checked {background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==");background-position: center;}
input[type="submit"][disabled] {pointer-events:none;opacity:.7;cursor:not-allowed;}

select {background:url('bg-select.svg') no-repeat center right;}
input[type="submit"], a.button {background:var(--bg-button);border:0;cursor:pointer;transition: background-color .3S ease;text-transform: uppercase;font-weight:700;}
input[type="submit"]:hover, a.button:hover {background-color: #4e4f22;}
a.button {text-align:center;}
::placeholder {color:var(--txt-color);}
p.result {font-size:1.2rem;line-height:1;margin:.5em 0;text-align:center;display: flex;flex-direction: column;align-items: center;}
p.result span {display:block;font-size:1.1rem;font-weight:bold;display: inline-block;margin: 20px 0 10px 0;text-transform: uppercase;}
p.result i{font-style: normal;    width: 100%;    padding-bottom: 15px;    border-bottom: 1px solid rgba(255, 255, 255, 0.55);}
p.result em { font-style: normal;font-weight: 500;background: #7a7a5d;padding: .35rem .25rem .15rem .25rem;border-radius: .5rem;}
p.result span.negative ~ span {display:none;}
#benefices {text-align:center;}
