* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family:"PIC";
    font-style:normal;
    font-weight:400;
    font-display:block;
    src: url(/css/webfonts/pic.eot);
    src: url(/css/webfonts/pic.eot?#iefix) format("embedded-opentype"),
        url(/css/webfonts/pic.woff2) format("woff2"),
        url(/css/webfonts/pic.woff) format("woff"),
        url(/css/webfonts/pic.ttf) format("truetype")
}

html {
    --mes-achats-sfr-pcolor: #e2001a;
    --mes-achats-red-pcolor: #00e094;
}

body {
	max-width: 720px;
	margin: 0 auto;
    font-weight: initial;
}

h1 {
    font-size: 40px;
    line-height: 60px;
}

h2 {
    font-size: 32px;
    line-height: 48px;
}

body.profile-df {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

body > div {
    display: flex;
}

body div.container {
    width: 100%;
}

body div.container > section.login {
    text-align: center;
}

/* HTML: <div class="loader"></div> */
.loader {
    margin: 0 auto;
    width: 32px;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}
}

button.btn > .loader {
    width: 24px;
}

.navbar-brand {
    background-repeat: no-repeat;
    background-size: contain;
}

.tpl-sfr .navbar-brand {
    width: 45px;
    height: 44px;
    background-image: url(/img/sfr.svg);
}

.tpl-red .navbar-brand {
    width: 80px;
    height: 38px;
    background-image: url(/img/red.svg);
}

.tpl-sfr .loader {
    background: var(--mes-achats-sfr-pcolor);
}

.tpl-red .loader {
    background: var(--mes-achats-red-pcolor);
}

.tpl-sfr button.btn-primary > .loader,
.tpl-red button.btn-primary > .loader {
    background: #FFF;
}

.fa, .fas {
    color: #000;
}

.divider {
    margin-block: var(--space-base);
}

.sidebar {
    height: 100%;
    border-right: 1px solid var(--tertiary);
    border-radius: 8px;
    display: none;
}

.sidebar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 48px;
}

.sidebar ul > li {
    height: 48px;
    padding: 4px;
    overflow: hidden;
}

.sidebar ul > li > a {
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.sidebar ul > li > a.transactions {
    background-image: url(/img/transactions-icon.png);
}

.sidebar ul > li > a.subscriptions {
    background-image: url(/img/subscriptions-icon.png);
}

.sidebar ul > li > a.dashboard {
    background-image: url(/img/settings-icon.png);
}

.tpl-sfr .sidebar ul > li > a.active {
    filter: invert(12%) sepia(94%) saturate(6263%) hue-rotate(347deg) brightness(85%) contrast(111%);
}

.tpl-red .sidebar ul > li > a.active {
    filter: invert(65%) sepia(99%) saturate(1130%) hue-rotate(106deg) brightness(92%) contrast(101%);
}

section {
    font-weight: 400;
}

.tpl-sfr .switch input:checked+.slider {
    background-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red .switch input:checked+.slider {
    background-color: var(--mes-achats-red-pcolor);
}

div.profile-dfc {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    content: "";
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #0003;
    backdrop-filter: blur(2px);
    z-index: 1;
    display: none;
}

div.profile-df {
    position: fixed;
    width: 360px;
    height: 100vh;
    right: 0;
    background-color: #FFFFFF;
    padding: 0 16px;
}

div.profile-dfc.displayed {
    display: block;
}

div.profile-df > div {
    width: 100%;
}

div.profile-df > div {
    margin-top: 18px;
}

div.profile-df > div:nth-of-type(2) {
    margin-top: 44px;
}

div.profile-df > div:nth-of-type(1) > span {
    font-size: 36px;
    font-family: 'PIC';
    color: #181818;
    display: block;
}

div.profile-df > div:nth-of-type(2) > span {
    font-family: 'PIC';
    font-size: 36px;
    line-height: 36px;
    font-weight: initial;
    vertical-align: middle;
}

div.profile-df > div:nth-of-type(2) > div {
    display: inline-block;
    vertical-align: middle;
    width: 280px;
}

div.profile-df > div:nth-of-type(2) > div > span {
    display: block;
}

div.profile-df > div > button {
    width: 100%;
}

.navbar-menu-end div.profile-m {
    display: none;
}

.navbar > span.icon {
    display: none;
}

div.conso {
    display: flex;
}

div.conso > div {
    background-color: #f2f2f2;
    width: 100px;
    height: 16px;
    display: inline-block;
    border-radius: 8px;
    flex: 1;
    margin: 3px;
}

div.conso > div > span {
    margin-right: 12px;
}

div.conso > div > span {
    padding-left: 4px;
    vertical-align: top;
    font-size: 14px;
    line-height: 16px;
}

div.conso > div > div {
    height: 16px;
    border-radius: 8px;
    min-width: 16px;
    color: #FFF;
    font-size: 14px;
    line-height: 16px;
    text-align: right;
    padding-right: 4px;
}

.tpl-sfr div.conso > div > div {
    background-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red div.conso > div > div {
    background-color: var(--mes-achats-red-pcolor);
}

div.profile-df div.conso {
    display: block;
}

div.profile-df div.conso > span {
    display: block;
}

div.profile-df div.conso > div {
    display: block;
    width: 100%;
}

.navbar-menu-end div.profile-d > span {
    font-family: 'PIC';
    font-size: 36px;
}

.tpl-sfr .navbar-menu-start a.active {
    border-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red .navbar-menu-start a.active {
    border-color: var(--mes-achats-red-pcolor);
}

.navbar-menu-start ul {
    margin: 0;
    padding: var(--space-base);
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background-color: transparent;
	border: 0;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 0px;
}

.tpl-sfr input[type=range]::-webkit-slider-runnable-track {
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
    background: linear-gradient(to right, var(--mes-achats-sfr-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
    border: 0px solid var(--mes-achats-sfr-pcolor);
	background-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-webkit-slider-runnable-track {
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
    background: linear-gradient(to right, var(--mes-achats-red-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
    border: 0px solid var(--mes-achats-red-pcolor);
	background-color: var(--mes-achats-red-pcolor);
}

input[type=range]::-webkit-slider-thumb {
    height: 28px;
    width: 28px;
    border-radius: 15px;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -11px;
}

.tpl-sfr input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
    border: 1px solid var(--mes-achats-sfr-pcolor);
    background: var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
    border: 1px solid var(--mes-achats-red-pcolor);
    background: var(--mes-achats-red-pcolor);
}

input[type=range].not-allowed::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #D2D2D2, 0px 0px 0px #D2D2D2;
    border: 1px solid #D2D2D2;
	background: #D2D2D2;
}

.tpl-sfr input[type=range]:focus::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--mes-achats-sfr-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
	background-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]:focus::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--mes-achats-red-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
	background-color: var(--mes-achats-red-pcolor);
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 0px;
}

.tpl-sfr input[type=range]::-moz-range-track {
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
    background: linear-gradient(to right, var(--mes-achats-sfr-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
    border: 0px solid var(--mes-achats-sfr-pcolor);
	background-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-moz-range-track {
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
    background: linear-gradient(to right, var(--mes-achats-red-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
    border: 0px solid var(--mes-achats-red-pcolor);
	background-color: var(--mes-achats-red-pcolor);
}

input[type=range]::-moz-range-thumb {
    height: 28px;
    width: 28px;
    border-radius: 15px;
    cursor: pointer;
	z-index: 1;
}

.tpl-sfr input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
    border: 1px solid var(--mes-achats-sfr-pcolor);
    background: var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
    border: 1px solid var(--mes-achats-red-pcolor);
    background: var(--mes-achats-red-pcolor);
}

input[type=range].not-allowed::-moz-range-thumb {
	box-shadow: 0px 0px 0px #D2D2D2, 0px 0px 0px #D2D2D2;
    border: 1px solid #D2D2D2;
	background: #D2D2D2;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    border-radius: 0px;
}

.tpl-sfr input[type=range]::-ms-fill-lower {
    background: linear-gradient(to right, var(--mes-achats-sfr-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
	background-color: var(--mes-achats-sfr-pcolor);
    border: 0px solid var(--mes-achats-sfr-pcolor);
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-ms-fill-lower {
    background: linear-gradient(to right, var(--mes-achats-red-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
	background-color: var(--mes-achats-red-pcolor);
    border: 0px solid var(--mes-achats-red-pcolor);
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
}

input[type=range]::-ms-fill-upper {
    border-radius: 0px;
}

.tpl-sfr input[type=range]::-ms-fill-upper {
    background: linear-gradient(to right, var(--mes-achats-sfr-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
	background-color: var(--mes-achats-sfr-pcolor);
    border: 0px solid var(--mes-achats-sfr-pcolor); 
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-ms-fill-upper {
    background: linear-gradient(to right, var(--mes-achats-red-pcolor) calc(var(--range-percentage) * 1%), #D2D2D2 calc(var(--range-percentage) * 1%));
	background-color: var(--mes-achats-red-pcolor);
    border: 0px solid var(--mes-achats-red-pcolor); 
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
}

input[type=range]::-ms-thumb {
    height: 28px;
    width: 28px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 0;
    box-sizing: border-box;
	z-index: 1;
}

.tpl-sfr input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px var(--mes-achats-sfr-pcolor), 0px 0px 0px var(--mes-achats-sfr-pcolor);
    border: 1px solid var(--mes-achats-sfr-pcolor);
    background: var(--mes-achats-sfr-pcolor);
}

.tpl-red input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px var(--mes-achats-red-pcolor), 0px 0px 0px var(--mes-achats-red-pcolor);
    border: 1px solid var(--mes-achats-red-pcolor);
    background: var(--mes-achats-red-pcolor);
}

input[type=range].not-allowed::-ms-thumb {
	box-shadow: 0px 0px 0px #D2D2D2, 0px 0px 0px #D2D2D2;
    border: 1px solid #D2D2D2;
	background: #D2D2D2;
}

input[type=range]::-ms-tooltip {
    display: none;
}

input[type=range]:focus::-ms-fill-lower {
    background: var(--mes-achats-red-pcolor);
}

input[type=range]:focus::-ms-fill-upper {
    background: var(--mes-achats-red-pcolor);
}

div.input-range-container {
	margin: 32px 64px 48px 64px;
}

div.input-range-container > div {
	position: relative;
}

div.input-range-container input[type=range] + div {
	width: 100%;
}

div.input-range-container input[type=range] + div > div {
	position: absolute;
	width: 50px;
	text-align: center;
	top: 12px;
}

div.input-range-container input[type=range] + div > div:nth-child(1) {
	left: -10px;
}

div.input-range-container input[type=range] + div > div:nth-child(2) {
	top: -60px;
	margin-left: -9.7px;
}

div.input-range-container input[type=range] + div > div:nth-child(3) {
	right: -10px;
}

label {
    display: inline-block;
    vertical-align: middle;
}

label.switch {
	margin: 8px;
	vertical-align: middle;
}

label>div:first-child::after, .input-label::after {
    display: none;
}

table {
    width: 100%;
}

.footer-brand, .navbar-brand {
    margin-inline-start: var(--space-sm);
}

button[type=button].btn {
    display: block;
    margin: 0 auto;
}

.tpl-sfr button.btn-primary {
    color: #FFF;
    background-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red button.btn-primary {
    color: #FFF;
    background-color: var(--mes-achats-red-pcolor);
}

.tpl-red table th {
    background-color: var(--mes-achats-red-pcolor);
}

table th, table td {
    cursor: pointer;
}

table tbody tr:nth-child(odd) {
    background-color: #F2F2F2;
}

section.transactions td.transaction,
section.subscriptions td.subscription {
    text-align: left;
    position: relative;
}

section.transactions td.transaction > div:nth-of-type(1)::after,
section.subscriptions td.subscription > div:nth-of-type(1)::after {
    content: 'I';
    font-size: 32px;
    font-family: 'PIC';
    position: absolute;
    top: var(--space-m);
    right: var(--space-sm);
}

.tpl-sfr .transactions td.transaction > div:nth-of-type(1)::after,
.tpl-sfr .subscriptions td.subscription > div:nth-of-type(1)::after {
    color: var(--mes-achats-sfr-pcolor);
}

.tpl-red .transactions td.transaction > div:nth-of-type(1)::after,
.tpl-red .subscriptions td.subscription > div:nth-of-type(1)::after {
    color: var(--mes-achats-red-pcolor);
}

section.transactions td.transaction > div:nth-of-type(1) > span:nth-of-type(1),
section.subscriptions td.subscription > div:nth-of-type(1) > span:nth-of-type(1) {
    font-weight: bold;
    display: inline-block;
}

section.transactions td.transaction > div:nth-of-type(1) > span:nth-of-type(2),
section.subscriptions td.subscription > div:nth-of-type(1) > span:nth-of-type(2) {
    font-weight: bold;
    float: right;
    margin-right: 64px;
}

section.transactions td.transaction > div:nth-of-type(1) > span:nth-of-type(3),
section.subscriptions td.subscription > div:nth-of-type(1) > span:nth-of-type(3) {
    font-weight: normal;
    display: block;
}

section.transactions td.transaction > div:nth-of-type(2) > span,
section.subscriptions td.subscription > div:nth-of-type(2) > span {
    display: block;
}

section.transactions td.transaction > div:nth-of-type(2) > button::before,
.contact-options > div > button::before {
    font-family: 'PIC';
    font-size: 1.25rem;
    margin-right: var(--space-base);
    vertical-align: inherit;
    display: inline-block;
}

section.transactions td.transaction > div:nth-of-type(2) > button.email::before,
.contact-options > div > button.email::before {
    content: "E";
}

section.transactions td.transaction > div:nth-of-type(2) > button.web::before,
.contact-options > div > button.web::before {
    content: "m";
    transform: rotate(180deg);
}

section.transactions td.transaction > div:nth-of-type(2) > button.tel::before,
.contact-options > div > button.tel::before {
    content: "Y";
}

section.transactions td.transaction > div:nth-of-type(2) > button.unknown::before,
.contact-options > div > button.unknown::before {
    content: "I";
}

section.transactions td.transaction > div:nth-of-type(2),
section.subscriptions td.subscription > div:nth-of-type(2) {
    margin-top: var(--space-base);
}

section.transactions td.transaction > div:nth-of-type(2) > button,
section.subscriptions td.subscription > div:nth-of-type(2) > button,
section.transactions td.transaction > div:nth-of-type(2) > div.contact-form {
    margin-top: var(--space-base);
    width: 100%;
}

section.transactions td.transaction > div:nth-of-type(2) > div.contact-form {
    display: none;
}

section.transactions td.transaction > div:nth-of-type(2) > div.contact-form > div {
    display: flex;
}

.radio-options {
    display: flex;
    gap: 0 var(--space-xl);
}

.radio-options input[type=radio] {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.radio-options input[type=radio] + label {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-decoration: unset;
    color: var(--text);
    height: auto;
    text-align: center;
    padding: 16px;
    margin: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--text);
    cursor: pointer;
}

.radio-options input[type=radio]:checked + label {
    color: var(--mes-achats-sfr-pcolor);
    border-color: var(--mes-achats-sfr-pcolor);
    border-width: 2px;
}

.tpl-sfr .radio-options input[type=radio]:checked + label {
    color: var(--mes-achats-sfr-pcolor);
    border-color: var(--mes-achats-sfr-pcolor);
}

.tpl-red .radio-options input[type=radio]:checked + label {
    color: var(--mes-achats-red-pcolor);
    border-color: var(--mes-achats-red-pcolor);
}

.contact-options > div {
    display: none;
    gap: 0 var(--space-xl);
    margin-top: var(--space-xl);
}

.contact-options > div.active {
    display: flex;
}

.contact-options > div.email.active {
    display: block;
}

.contact-options > select,
.contact-options > button {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-decoration: unset;
    margin: 0;
    width: 100%;
    cursor: pointer;
}

.contact-options > div.contact-option.email > textarea {
    display: block;
    width: 100%;
    margin-bottom: var(--space-xl);
}

.contact-options > div.contact-option.email > button {
    width: 100%;
}

.contact-options > div.contact-option.tel > button,
.contact-options > div.contact-option.web > button{
    flex: auto;
}

.contact-options span.wording {
    text-align: center;
}

.tpl-sfr .contact-options span.wording {
    color: var(--mes-achats-sfr-pcolor);
}

.tpl-red .contact-options span.wording {
    color: var(--mes-achats-red-pcolor);
}

div.filters {
    margin-bottom: var(--space-xl);
    margin-top: calc(-1* var(--space-xl));
}

div.filters > select,
div.filters > button {
    vertical-align: middle;
    height: fit-content;
    width: fit-content;
}

dialog .modal-content > p > span,
dialog .modal-content > div.duo > div > span {
    display: block;
    font-weight: 700;
}

dialog .modal-content > div.duo > div:nth-of-type(1) {
    display: inline-block;
    width: 40%;
}

dialog .modal-content > div.duo > div:nth-of-type(2) {
    display: inline-block;
    width: 60%;
}

dialog .modal-content > p:last-of-type {
    margin: 0;
}

dialog .modal-content > div.buttons {
    display: flex;
    gap: 0 8px;
    margin-top: var(--space-3xl);
}

.purchase-rights-ui > div {
    margin: 12px 0;
}