@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}.plyr__caption{background:rgba(0,0,0,.8);background:var(--plyr-captions-background,rgba(0,0,0,.8));border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:transparent;border:0;border-radius:3px;border-radius:var(--plyr-control-radius,3px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .3s ease}.plyr__control svg{fill:currentColor;display:block;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:hsla(0,0%,100%,.9);background:var(--plyr-menu-background,hsla(0,0%,100%,.9));border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--plyr-menu-shadow,0 1px 2px rgba(0,0,0,.15));color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid transparent;border-top:var(--plyr-menu-arrow-size,4px) solid hsla(0,0%,100%,.9);border-width:var(--plyr-menu-arrow-size,4px);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid transparent;border:var(--plyr-menu-item-arrow-size,4px) solid transparent;content:"";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--forward.plyr__tab-focus:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:rgba(0,0,0,.1);content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b3ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:rgba(35,40,47,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:calc(-7px - -2);margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:transparent;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b3ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:transparent;background-image:linear-gradient(90deg,currentColor 0,transparent 0);background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc(var(--plyr-range-thumb-height, 13px)/2*-1 - var(--plyr-range-track-height, 5px)/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:transparent;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:transparent;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:transparent;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:"\2044";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:hsla(0,0%,100%,.9);background:var(--plyr-tooltip-background,hsla(0,0%,100%,.9));border-radius:3px;border-radius:var(--plyr-tooltip-radius,3px);bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid transparent;border-left:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-right:4px solid transparent;border-right:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-top:4px solid hsla(0,0%,100%,.9);border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,hsla(0,0%,100%,.9));bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip,.plyr__controls>.plyr__control:first-child .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress__buffer,.plyr__progress input[type=range]{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px));left:0}.plyr__progress__buffer{-webkit-appearance:none;background:transparent;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc(var(--plyr-range-track-height, 5px)/2*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:transparent}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(35,40,47,.6) 25%,transparent 0,transparent 50%,rgba(35,40,47,.6) 0,rgba(35,40,47,.6) 75%,transparent 0,transparent);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 25%,transparent 25%,transparent 50%,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 50%,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:hsla(0,0%,100%,.25);background-color:var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25))}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6))}.plyr__volume{align-items:center;display:flex;max-width:110px;min-width:80px;position:relative;width:20%}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);position:relative;z-index:2}.plyr--is-ios .plyr__volume{min-width:0;width:auto}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b3ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1))}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1))}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1))}.plyr--audio .plyr__progress__buffer{color:rgba(193,200,209,.6);color:var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6))}.plyr--video{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.75));background:var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b3ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b3ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.25);background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:hsla(0,0%,100%,.25);background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:hsla(0,0%,100%,.25);background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px hsla(0,0%,100%,.5);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5))}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px hsla(0,0%,100%,.5);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5))}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px hsla(0,0%,100%,.5);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5))}.plyr--video .plyr__progress__buffer{color:hsla(0,0%,100%,.25);color:var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25))}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;bottom:0;display:block;height:100%;left:0;margin:0;position:fixed;right:0;top:0;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin:-var(--plyr-range-track-height,5px)/2 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr__preview-thumb{background-color:hsla(0,0%,100%,.9);background-color:var(--plyr-tooltip-background,hsla(0,0%,100%,.9));border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;padding:var(--plyr-tooltip-radius,3px);pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid transparent;border-left:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-right:4px solid transparent;border-right:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-top:4px solid hsla(0,0%,100%,.9);border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,hsla(0,0%,100%,.9));bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:2px;border-radius:calc(var(--plyr-tooltip-radius, 3px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img{height:100%;left:0;max-height:none;max-width:none;position:absolute;top:0;width:100%}.plyr__preview-thumb__time-container{bottom:6px;left:0;position:absolute;right:0;white-space:nowrap;z-index:3}.plyr__preview-thumb__time-container span{background-color:rgba(0,0,0,.55);border-radius:2px;border-radius:calc(var(--plyr-tooltip-radius, 3px) - 1px);color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px));padding:3px 6px}.plyr__preview-scrubbing{bottom:0;filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

select::-ms-expand {
  display: none;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable] {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #080a2e;
}

::-webkit-scrollbar-thumb {
  background: #141a48;
}

html {
  width: 100vw;
}
@media (max-width: 499px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 500px) and (max-width: 699px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  html {
    font-size: 1.8vw;
  }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  html {
    font-size: 1.3vw;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  html {
    font-size: 1.1vw;
  }
}
@media (min-width: 1400px) and (max-width: 1599px) {
  html {
    font-size: 1vw;
  }
}
@media (min-width: 1600px) and (max-width: 1799px) {
  html {
    font-size: 0.9vw;
  }
}
@media (min-width: 1800px) and (max-width: 1999px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 2000px) and (max-width: 2399px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 2400px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: "sofia-pro";
  background: #080a2e;
  color: #fff;
  overflow-x: hidden;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  scroll-behavior: smooth;
}

.js-modal-element {
  cursor: pointer;
}

.container {
  width: 84vw;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1000px) {
  .container {
    width: 100%;
    padding: 0 4rem;
  }
}

@media (min-width: 1000px) {
  .grid {
    display: grid;
    grid-template-columns: 8rem calc(100vw - 8rem);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .grid.active {
    grid-template-columns: 100vw;
  }
  .grid.active .nav {
    display: none;
  }
  .grid.active .btn-img {
    transform: rotate(180deg);
  }
}

p {
  line-height: 1.4;
}

h1,
h2 {
  line-height: 1.2;
}

h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

.btn {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  padding: 1rem 2rem;
}
.btn-disabled {
  background: #97a1bb !important;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.btn-engie {
  border: 1px solid #efefef !important;
  border-radius: 10px !important;
}
.btn-error {
  background: #cb4646;
  border: 1px solid #cb4646;
  cursor: pointer;
}
@media (min-width: 1000px) {
  .btn-error {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .btn-error:hover {
    transform: scale(0.9);
  }
}
.btn-primary {
  background: #78cb46;
  border: 1px solid #78cb46;
  box-shadow: 0 0 20px rgba(120, 203, 70, 0.4);
}
@media (min-width: 1000px) {
  .btn-primary {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .btn-primary:hover {
    transform: scale(0.9);
  }
}
.btn-secondary {
  background: #080a2e;
  border: 1px solid #fff;
}
@media (min-width: 1000px) {
  .btn-secondary {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .btn-secondary:hover {
    transform: scale(0.9);
  }
}
.btn-tertiary {
  background: #fff;
  color: #141a48;
  font-weight: 700;
}
.btn img {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.2rem 1rem 0 0;
}
.btn img.engie-logo {
  width: 3.5rem;
  height: 1.5rem;
}

.disabled_btn {
  background-color: #8d98ad;
  border-radius: 5px;
  padding: 0.5rem 1.5rem;
  width: -moz-fit-content;
  width: fit-content;
}
.disabled_btn p {
  color: #fff !important;
  margin-top: 0 !important;
}

.centered_btn {
  display: flex !important;
  justify-content: center !important;
}
.centered_btn button {
  padding: 1rem 3rem;
}

.btn_primary {
  background: #78cb46;
  color: #fff;
}

.tag {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  background: #141a48;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .tag:hover {
    transform: scale(0.9);
  }
}
.tag.active {
  background: #78cb46;
}

.modal {
  align-items: center;
  background: rgba(8, 10, 46, 0.9);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  visibility: hidden;
  width: 100vw;
  z-index: 10;
}
.modal.scroll {
  align-items: flex-start;
  overflow-y: auto;
  padding: 2rem 0;
}
.modal.active {
  opacity: 1;
  visibility: visible;
}
.modal .bloc {
  background: #141a48;
  border-radius: 10px;
  max-width: 20rem;
  padding: 3rem;
  position: relative;
  white-space: initial;
  width: 84%;
}
@media (min-width: 1200px) {
  .modal .bloc {
    max-width: 46rem;
    padding: 4rem 8rem;
  }
}
.modal .bloc-bilan {
  padding: 0;
}
@media (min-width: 1000px) {
  .modal .bloc-bilan {
    left: 6rem;
    max-width: 22.5rem;
    top: 3.5rem;
  }
}
@media (min-width: 1200px) {
  .modal .bloc-bilan {
    max-width: 40rem;
  }
}
@media (min-width: 1400px) {
  .modal .bloc-bilan {
    max-width: 50rem;
  }
}
.modal .bloc-bilan a {
  bottom: 1rem;
  left: 1.5rem;
  margin-top: 0;
  position: absolute;
  right: 1.5rem;
}
.modal .bloc_description {
  align-items: center;
  display: flex;
  height: 100%;
  /* Adjust as needed, this ensures the image is vertically centered */
  justify-content: center;
}
.modal .bloc_description img {
  max-height: 100%;
  max-width: 100%;
}
.modal .bloc_description .web_view {
  display: none;
}
@media (min-width: 1200px) {
  .modal .bloc_description .web_view {
    display: block;
  }
}
@media (min-width: 1200px) {
  .modal .bloc_description .mobile_view {
    display: none;
  }
}
.modal .bloc_loading {
  text-align: center;
}
.modal .bloc_loading_icon {
  height: 5rem;
  margin: 1rem;
  width: 5rem;
}
.modal .bloc .close {
  align-items: center;
  background: #080a2e;
  border-radius: 0 10px 0 10px;
  cursor: pointer;
  display: flex;
  height: 3rem;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
}
@media (min-width: 1000px) {
  .modal .bloc .close {
    height: 3.5rem;
    width: 3.5rem;
  }
}
.modal .bloc .close:hover img {
  transform: scale(0.85) rotate(90deg);
}
.modal .bloc .close img {
  width: 1rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.modal .bloc .close-bilan {
  background: #78cb46;
}
.modal .bloc h2 {
  font-weight: 700;
  font-size: 1.6rem;
}
@media (min-width: 1000px) {
  .modal .bloc h2 {
    font-size: 2.4rem;
  }
}
.modal .bloc p {
  font-size: 0.9rem;
  color: #97a1bb;
  margin-top: 0.5rem;
}
.modal .bloc form {
  margin-top: 2rem;
}
.modal .bloc form div:not(:last-of-type) {
  margin-bottom: 1rem;
}
.modal .bloc input[type=submit] {
  width: 100%;
  margin-top: 2rem;
}
.modal-buttons {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.modal-buttons a {
  cursor: pointer;
}
.modal.modal-help h2,
.modal.modal-help p {
  text-align: center;
}
@media (min-width: 1000px) {
  .modal.modal-help h2 {
    font-size: 2rem;
  }
}
@media (min-width: 1000px) {
  .modal.modal-help p {
    max-width: 24rem;
    margin: 1rem auto 0;
  }
}

#modal-register-locale {
  display: none;
}

#modal-exit .bloc {
  background-color: #fff;
  padding: 3rem;
}
#modal-exit .bloc .modal_container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#modal-exit .bloc .modal_container h1 {
  color: #07092e;
  font-size: 1.5rem;
}
#modal-exit .bloc .modal_container p {
  color: #43435e;
  font-size: 1.1rem;
}
#modal-exit .bloc .modal_container .btn_list {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 499px) {
  #modal-exit .bloc .modal_container .btn_list {
    flex-direction: column;
  }
}
#modal-exit .bloc .modal_container .btn_list .btn {
  padding: 0.5rem 3rem;
  border-radius: 5px;
}
#modal-exit .bloc .modal_container .btn_list .btn_close {
  border: 1px solid #07092e;
  color: #43435e;
}
#modal-exit .bloc .modal_container .btn_list .btn_red {
  background-color: #c9666a;
  color: #fff;
  width: 100%;
}

label {
  display: block;
  font-size: 0.9rem;
}

.input {
  width: 100%;
  background: #fff;
  font-size: 0.9rem;
  padding: 1.25rem 2rem;
  line-height: 1;
  border: 1px solid #fff;
  border-radius: 10px;
  color: #141a48;
  margin-top: 0.75rem;
}
.input::-moz-placeholder {
  color: #97a1bb;
}
.input:-ms-input-placeholder {
  color: #97a1bb;
}
.input::placeholder {
  color: #97a1bb;
}
.input:focus {
  border: 1px solid #78cb46;
}

select.input {
  cursor: pointer;
}

.password {
  position: relative;
}
.password img {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 2.2rem;
  right: 2rem;
  cursor: pointer;
}

.check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.check label {
  position: relative;
}
.check label span {
  display: block;
  float: left;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.check input:checked + span {
  background: #fff;
}
.check input:checked + span + img {
  opacity: 1;
}
.check img {
  opacity: 0;
  width: 10px;
  position: absolute;
  top: 7px;
  left: 5px;
}
.check .hidden {
  display: none;
}

.file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.file + label {
  margin-top: 0.75rem;
  width: 100%;
  padding: 1.25rem;
  font-size: 0.9rem;
  color: #fff;
  border-radius: 10px;
  background: #080a2e;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

.badge {
  width: 100vw;
  height: 100vh;
  background: #080a2e;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
  visibility: hidden;
}
.badge.active {
  opacity: 1;
  visibility: visible;
}
.badge.active img {
  animation: scale 0.5s forwards;
}
.badge.remove {
  opacity: 0;
  visibility: hidden;
}
.badge-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.badge-close img {
  width: 0.75rem;
}
.badge-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.badge-content img {
  width: 12rem;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(0);
}
.badge-content p {
  text-align: center;
  line-height: 1.2;
}
.badge-content p:first-of-type {
  font-size: 2rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}
.badge-content p:last-of-type {
  color: #97a1bb;
}
.badge canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
.nav {
  background: #141a48;
  padding: 2rem 0;
}
@media (min-width: 1000px) {
  .nav {
    width: 8rem;
    height: 100vh;
    padding: 0;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
  }
}
.nav.active .menu {
  opacity: 1;
  visibility: visible;
}
.nav.active .nav_icon span {
  transform: rotate(45deg) translateX(1px);
}
.nav.active .nav_icon span::before {
  opacity: 0;
  visibility: hidden;
}
.nav.active .nav_icon span::after {
  transform: rotate(-90deg) translateX(2px);
}
.nav_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1000px) {
  .nav_container {
    width: auto;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.nav_logo {
  position: relative;
  z-index: 4;
}
.nav_logo svg {
  width: 1.5rem;
  height: 3.5rem;
}
@media (min-width: 1000px) {
  .nav_logo {
    width: 8rem;
    padding: 2.5rem 0 3rem 0;
    background: #28306a;
    display: flex;
    justify-content: center;
    border-radius: 0 0 100px 100px;
  }
}
.nav_right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1000px) {
  .nav_right {
    display: none;
  }
}
.nav_icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #080a2e;
  position: relative;
  z-index: 4;
}
.nav_icon span {
  width: 1.5rem;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nav_icon span::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  transform: translateY(-6px);
}
.nav_icon span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  transform: translateY(4px);
}
.nav_sidebar {
  display: none;
}
@media (min-width: 1000px) {
  .nav_sidebar {
    display: block;
    position: fixed;
    bottom: 3rem;
    left: 2rem;
    z-index: 10;
  }
}

.notif {
  background: #080a2e;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .notif:hover {
    transform: scale(0.9);
  }
}
.notif img {
  max-width: 1.5rem;
  max-height: 1.5rem;
}
.notif_bloc {
  width: 100%;
  max-width: 16rem;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 1.5rem;
  background: #fff;
  position: absolute;
  top: 7rem;
  right: 9vw;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 4;
}
@media (min-width: 1000px) {
  .notif_bloc {
    top: 4.5rem;
    right: 0.2rem;
  }
}
.notif_bloc.active {
  opacity: 1;
  visibility: visible;
}
.notif_bloc > img {
  width: 1rem;
  position: absolute;
  top: -0.6rem;
  right: 5rem;
}
@media (min-width: 1000px) {
  .notif_bloc > img {
    right: 7.5rem;
  }
}
.notif_bloc > p {
  font-size: 0.8rem;
  color: #97a1bb;
  text-decoration: underline;
  margin-bottom: 0.5rem;
}
.notif_bloc div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.notif_bloc div p {
  font-weight: 700;
  color: #141a48;
}
.notif_bloc div span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid #78cb46;
}
.notif_bloc div span img {
  width: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.notif_bloc div span img.active {
  opacity: 1;
  visibility: visible;
}

.search {
  width: 100%;
  border-radius: 10px;
  padding: 0 1.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search input {
  width: 80%;
  height: 100%;
}
.search input::-moz-placeholder {
  color: #97a1bb;
}
.search input:-ms-input-placeholder {
  color: #97a1bb;
}
.search input::placeholder {
  color: #97a1bb;
}
.search img,
.search svg {
  width: 1rem;
  cursor: pointer;
}
.search-white {
  background: #fff;
  border: 1px solid #efefef;
}
.search-white input {
  color: #141a48;
}
.search-dark {
  background: #080a2e;
}
.search-dark input {
  color: #fff;
}
.search-dark svg path {
  fill: #a0a0b8;
}
.search-blue {
  background: #141a48;
}
.search-blue input {
  color: #fff;
}
.search-blue svg path {
  fill: #a0a0b8;
}

.menu {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  background: #141a48;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 3;
}
@media (min-width: 1000px) {
  .menu {
    opacity: 1;
    visibility: visible;
    position: initial;
    width: auto;
    height: auto;
    overflow-y: unset;
    background: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4rem;
  }
}
.menu_container {
  padding: 8rem 8vw;
}
@media (min-width: 1000px) {
  .menu_container {
    padding: 0;
  }
}
@media (min-width: 1000px) {
  .menu .search {
    display: none;
  }
}
.menu_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 1000px) {
  .menu_list {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
}
.menu_list li {
  width: 100%;
  height: 100%;
}
@media (min-width: 1000px) {
  .menu_list li:first-of-type span img {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.menu_list li:nth-of-type(3) span,
.menu_list li:nth-of-type(3) img,
.menu_list li:nth-of-type(3) a {
  position: relative;
  z-index: 10001;
}
@media (min-width: 1000px) {
  .menu_list li {
    position: relative;
  }
  .menu_list li:hover p {
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s cubic-bezier(0.7, 0, 0.3, 1);
  }
}
.menu_list li.active span {
  background: #78cb46;
  box-shadow: 0 0 20px rgba(120, 203, 70, 0.4);
}
@media (min-width: 1000px) {
  .menu_list li:hover span {
    transform: scale(0.85);
  }
}
.menu_list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 1000px) {
  .menu_list li p {
    position: absolute;
    top: 9%;
    left: 4rem;
    background: #fff;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: #141a48;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
  }
}
.menu_list li span {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  background: #080a2e;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu_list li span img {
  max-width: 1.5rem;
  max-height: 1.5rem;
}
@media (min-width: 1000px) {
  .menu_list li span {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
  }
}

.btn-circle {
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
  width: 4rem;
  height: 4rem;
}
.btn-circle:hover .progress {
  transform: scale3d(1.2, 1.2, 1);
}
.btn-circle:hover .progress__path {
  stroke-dashoffset: 0;
}
.btn-circle .progress {
  background: #080a2e;
  border-radius: 50%;
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: calc(50% - 1.5rem);
  left: calc(50% - 1.5rem);
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.btn-circle .progress__circle, .btn-circle .progress__path {
  fill: none;
  stroke: #080a2e;
  stroke-width: 2px;
}
.btn-circle .progress__path {
  stroke: #fff;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.btn-circle .btn-img {
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn-circle img {
  width: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header {
  display: none;
}
@media (min-width: 1000px) {
  .header {
    display: block;
    position: relative;
    z-index: 10;
  }
  .header_container {
    width: 40vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    position: absolute;
    top: 4rem;
    right: 4rem;
  }
  .header_container .search {
    max-width: 22rem;
  }
}

.header .profile,
.nav_right .profile {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080a2e;
  border: 1px solid #141a48;
  padding-right: 1rem;
  border-radius: 10px;
  cursor: pointer;
}
@media (min-width: 1000px) {
  .header .profile:hover,
.nav_right .profile:hover {
    transform: scale(0.9);
  }
}
.header .profile img,
.nav_right .profile img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  cursor: pointer;
}
.header .profile svg,
.nav_right .profile svg {
  width: 1rem;
}
.header .profile_bloc,
.nav_right .profile_bloc {
  width: 100%;
  max-width: 12rem;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 1.5rem;
  background: #fff;
  position: absolute;
  top: 4.5rem;
  right: 0.2rem;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
}
.header .profile_bloc.active,
.nav_right .profile_bloc.active {
  opacity: 1;
  visibility: visible;
}
.header .profile_bloc img,
.nav_right .profile_bloc img {
  width: 1rem;
  position: absolute;
  top: -0.6rem;
  right: 2rem;
}
.header .profile_bloc li,
.nav_right .profile_bloc li {
  color: #141a48;
  font-size: 0.9rem;
}
.header .profile_bloc li:not(:last-of-type),
.nav_right .profile_bloc li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.header .profile_bloc li:last-of-type,
.nav_right .profile_bloc li:last-of-type {
  color: #cb4646;
}

.nav_right .profile_bloc img {
  right: 5.8rem;
}

.capsules {
  z-index: 3;
  padding-bottom: 4rem;
}
@media (min-width: 1000px) {
  .capsules {
    padding-bottom: 6rem;
  }
}
.capsules .container {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  .capsules .container {
    flex-direction: row;
    align-items: center;
  }
}
.capsules .container .games_arrow {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 700px) {
  .capsules .container .games_arrow {
    margin-top: unset;
  }
}
.capsules .container .games_arrow img {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.capsules h2 {
  z-index: 3;
  font-size: 2rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .capsules h2 {
    font-size: 2.1rem;
  }
}
.capsules ul.capsules_grid {
  width: 100%;
  display: grid;
  gap: 2rem;
}
@media (min-width: 700px) {
  .capsules ul.capsules_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .capsules ul.capsules_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1400px) {
  .capsules ul.capsules_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.capsules ul.capsules_slider {
  display: flex;
  gap: 1rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
@media (min-width: 700px) {
  .capsules ul.capsules_slider {
    gap: 2rem;
  }
}
@media (min-width: 1000px) {
  .capsules ul.capsules_slider {
    padding: 0 4rem;
  }
}
.capsules ul.capsules_slider.scale {
  transform: scale(0.95);
}
.capsules ul.capsules_slider.grab {
  cursor: grab;
}
.capsules ul.capsules_slider li {
  min-width: 84vw;
  max-width: 84vw;
}
@media (min-width: 500px) {
  .capsules ul.capsules_slider li {
    min-width: 22rem;
    max-width: 22rem;
  }
}
@media (min-width: 700px) {
  .capsules ul.capsules_slider li {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
@media (min-width: 1200px) {
  .capsules ul.capsules_slider li {
    min-width: calc(100% / 3 - 1.35rem);
    max-width: calc(100% / 3 - 1.35rem);
  }
}
@media (min-width: 1400px) {
  .capsules ul.capsules_slider li {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
  }
}
.capsules li {
  z-index: 3;
  width: 100%;
  aspect-ratio: 20/18;
  border-radius: 10px;
  display: inline-flex;
}
@media (min-width: 500px) {
  .capsules li {
    aspect-ratio: 16/12;
  }
}
.capsules li.capsule {
  z-index: 2;
  padding: 1.5rem 1.5rem 2rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
}
.capsules li.capsule a.cat {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}
.capsules li.capsule .yo {
  margin-top: 0;
}
.capsules li.capsule > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  justify-content: end;
}
.capsules li.capsule > div div {
  align-items: center;
  background: #78cb46;
  border-radius: 50%;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}
@media (min-width: 1000px) {
  .capsules li.capsule > div div {
    width: 3rem;
    height: 3rem;
  }
}
.capsules li.capsule > div div a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capsules li.capsule > div div img {
  height: 1rem;
  width: 1rem;
}
.capsules li.capsule > div div:first-of-type {
  background: #78cb46;
}
.capsules li.capsule > div div:first-of-type img {
  width: 0.8rem;
  height: 0.8rem;
  transform: translate(1px, 1px);
}
@media (min-width: 1000px) {
  .capsules li.capsule > div div:first-of-type img {
    width: 0.9rem;
    height: 0.9rem;
  }
}
.capsules li.capsule > div div:last-of-type {
  background: #080a2e;
}
.capsules li.capsule > div div:last-of-type img {
  width: 1rem;
  height: 1rem;
  transform: translate(0.5px, 0);
}
@media (min-width: 1000px) {
  .capsules li.capsule > div div:last-of-type img {
    width: 4.1rem;
    height: 1.1rem;
  }
}
.capsules li.capsule > div .replay {
  border-radius: 0;
  border-radius: 10px;
  width: auto;
  height: auto;
}
.capsules li.capsule > div .replay a {
  width: auto;
  height: auto;
  padding: 0.8rem;
}
.capsules li.capsule > div .replay a:first-of-type {
  background: #78cb46;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.capsules li.capsule > div .replay a:first-of-type img {
  margin-right: 0.5rem;
}
.capsules li.capsule > div .replay a:first-of-type img.icon_eye {
  width: 1rem;
  height: 1rem;
}
.capsules li.capsule > div:first-child {
  justify-content: start;
}
.capsules li.capsule p {
  color: #78cb46;
  font-weight: 700;
}
.capsules li.capsule h3 {
  font-size: 1.4rem;
  font-weight: 700;
  white-space: initial;
}
@media (min-width: 700px) {
  .capsules li.capsule h3 {
    font-size: 1.2rem;
  }
}
.capsules li.capsule > span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
}
.capsules li.capsule > span span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: 0 0 0 10px;
  background: #78cb46;
}
.capsules li.category {
  align-items: center;
  background: transparent linear-gradient(239deg, #373F79 0%, #193636 100%) 0% 0% no-repeat padding-box;
  font-size: 1.4rem;
  height: 10.5rem;
  justify-content: center;
  padding: unset;
  text-align: center;
  width: 17.5rem;
}
.capsules li.category > a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1000px) {
  .capsules li.category {
    font-size: 1.6rem;
  }
}

.cat {
  z-index: 3;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
  display: inline-block;
}
.cat-0 {
  background: #7b6238;
  border: 1px solid #9e7e48;
}
.cat-1, .cat-8 {
  background: #144e53;
  border: 1px solid #1e757c;
}
.cat-2, .cat-9 {
  background: #531423;
  border: 1px solid #7c1e34;
}

.timeline {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: #fff;
  position: relative;
}
.timeline.timeline-dark {
  background: #141a48;
}
.timeline.timeline-dark .timeline-points span {
  background: #fff;
  border: 4px solid #141a48;
}
.timeline.timeline-1 .timeline-progress {
  width: 100%;
}
.timeline.timeline-2 .timeline-progress {
  width: 39%;
}
.timeline.timeline-3 .timeline-progress {
  width: 0;
}
.timeline .timeline-progress {
  display: block;
  width: 50%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  background: #78cb46;
  border-radius: 10px;
  transition: width 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.timeline .timeline-points {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  transform: translateY(-6px);
}
.timeline .timeline-points span {
  width: 16px;
  height: 16px;
  background: #080a2e;
  border: 4px solid #fff;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.timeline .timeline-points span.active {
  border-color: #78cb46;
  background: #fff;
}

.lang-choice {
  position: relative;
}
.lang-choice.active ul {
  opacity: 1;
  visibility: visible;
}
.lang-choice p {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-transform: uppercase;
  background: #2f325e;
  border: 1px solid #44498b;
  color: #fff;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .lang-choice p:hover {
    transform: scale(0.9);
  }
}
.lang-choice ul {
  width: 3.5rem;
  position: absolute;
  top: 4.5rem;
  left: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
}
.lang-choice ul > img {
  width: 1rem;
  position: absolute;
  top: -0.6rem;
  left: 1.25rem;
}
.lang-choice ul li {
  height: 3.5rem;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: #141a48;
}
.lang-choice ul li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}

.category_title {
  padding: 4.5rem 0 4rem;
}
.category_title h1 {
  font-size: 2rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .category_title h1 {
    font-size: 2.4rem;
  }
}

.story .category_title {
  padding: 0 0 2rem;
}
@media (min-width: 1000px) {
  .story .category_title {
    padding-bottom: 6rem;
  }
}
.story .category_title p {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .story .category_title p {
    font-size: 2.4rem;
    text-align: left;
  }
}

.progress {
  padding-bottom: 4rem;
  width: 84vw;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .progress {
    width: 100%;
    padding: 0 4rem 6rem;
    margin: unset;
  }
}
@media (min-width: 1200px) {
  .progress {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 0 6rem;
  }
}
.progress h2 {
  font-size: 2rem;
  font-weight: 700;
  border-bottom: 1px solid #97a1bb;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 1000px) {
  .progress h2 {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }
}
.progress .replay {
  border-radius: 0;
  border-radius: 10px;
  width: auto;
  height: auto;
}
.progress .replay a {
  width: auto;
  height: auto;
  padding: 0.8rem;
}
.progress .replay a:first-of-type {
  background: #78cb46;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.progress .replay a:first-of-type img {
  margin-right: 0.5rem;
}
.progress_modules {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .progress_modules {
    gap: 3rem;
  }
}
.progress_module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}
@media (min-width: 1000px) {
  .progress_module {
    grid-template-columns: 7rem 14rem 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}
.progress_module_img {
  grid-column: 1/3;
  grid-row: 1;
  position: relative;
}
@media (min-width: 500px) {
  .progress_module_img {
    grid-column: 1/2;
    grid-row: 1/4;
    margin-right: 0.5rem;
  }
}
@media (min-width: 1000px) {
  .progress_module_img {
    grid-row: 1/4;
    grid-column: 2/3;
    align-self: center;
    margin: unset;
  }
}
.progress_module_img > img {
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
@media (min-width: 500px) {
  .progress_module_img > img {
    aspect-ratio: 16/10;
  }
}
.progress_module_img > img.ended {
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.progress_module_img a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #78cb46;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.progress_module_img a img {
  width: 0.8rem;
  height: 0.8rem;
  transform: translateX(1px);
}
.progress_module_img span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
}
.progress_module_img span span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: 0 0 0 10px;
  background: #78cb46;
}
.progress_module_cat {
  grid-column: 1/3;
  grid-row: 2;
  margin: 1rem 0 0.5rem;
}
@media (min-width: 500px) {
  .progress_module_cat {
    align-self: flex-end;
    grid-column: 2/3;
    grid-row: 1/2;
    margin-top: unset;
    margin-left: 0.5rem;
  }
}
@media (min-width: 1000px) {
  .progress_module_cat {
    grid-row: 1/2;
    grid-column: 3/4;
    margin-left: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.progress_module_cat span {
  display: none;
}
@media (min-width: 1000px) {
  .progress_module_cat span {
    display: block;
    font-size: 0.9rem;
  }
}
.progress_module_number {
  grid-column: 1/3;
  grid-row: 3;
}
@media (min-width: 500px) {
  .progress_module_number {
    align-self: center;
    grid-column: 2/3;
    grid-row: 2/3;
    margin-left: 0.75rem;
  }
}
@media (min-width: 1000px) {
  .progress_module_number {
    grid-row: 2/3;
    grid-column: 1/2;
  }
}
.progress_module_number p {
  font-size: 0.9rem;
}
.progress_module_title {
  grid-column: 1/3;
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
@media (min-width: 500px) {
  .progress_module_title {
    align-self: flex-start;
    grid-column: 2/3;
    grid-row: 3/4;
    margin-left: 0.75rem;
  }
}
@media (min-width: 1000px) {
  .progress_module_title {
    grid-row: 2/3;
    grid-column: 3/4;
    justify-content: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-left: 2rem;
  }
}
.progress_module_title h3 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  width: calc(100% - (4.5rem));
}
.progress_module_title div {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #141a48;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress_module_title div a {
  width: 12px;
  height: 12px;
  display: block;
}
.progress_module_title div img {
  width: 100%;
  height: 100%;
  display: block;
}
.progress_module_desc {
  grid-column: 1/3;
  grid-row: 5;
}
@media (min-width: 500px) {
  .progress_module_desc {
    margin-top: 1rem;
    grid-row: 4/5;
  }
}
@media (min-width: 1000px) {
  .progress_module_desc {
    grid-row: 3/4;
    grid-column: 3/4;
    margin-left: 2rem;
    margin-top: 0.5rem;
    align-self: flex-start;
  }
}
.progress_module_desc p {
  font-size: 0.9rem;
  line-height: 1.3;
}
.progress_module_footprint {
  width: 100%;
}
@media (min-width: 1000px) {
  .progress_module_footprint {
    display: grid;
    grid-template-columns: 7rem 1fr;
  }
}
.progress_module_footprint .progress_module_number {
  margin-top: 1rem;
}
@media (min-width: 1000px) {
  .progress_module_footprint .progress_module_number {
    grid-column: 1/2;
    grid-row: 1;
  }
}
.progress_module_footprint .progress_module_carbon {
  position: relative;
}
@media (min-width: 1000px) {
  .progress_module_footprint .progress_module_carbon {
    grid-column: 2/3;
    grid-row: 1;
  }
}
.progress_module_footprint .progress_module_carbon .bg-image {
  width: 100%;
  aspect-ratio: 16/5;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1000px) {
  .progress_module_footprint .progress_module_carbon .bg-image {
    aspect-ratio: 6/1;
    height: 100%;
  }
}
.progress_module_footprint .progress_module_carbon .leaf {
  width: 55px;
  height: 55px;
}
.progress_module_footprint .progress_module_carbon .text {
  font-weight: bold;
}
.progress_module_footprint .progress_module_carbon .bilan-info {
  display: flex;
  font-size: 1.25rem;
  gap: 0.5rem;
  left: 2rem;
  position: absolute;
  top: 1.5rem;
  align-items: center;
}
@media (min-width: 500px) {
  .progress_module_footprint .progress_module_carbon .bilan-info {
    gap: 1rem;
    left: 3.5rem;
    top: 3rem;
  }
}
@media (min-width: 700px) {
  .progress_module_footprint .progress_module_carbon .bilan-info {
    left: 10rem;
    top: 6rem;
  }
}
@media (min-width: 1000px) {
  .progress_module_footprint .progress_module_carbon .bilan-info {
    font-size: 1.85rem;
    left: 15.5rem;
    top: 3rem;
  }
}
.progress_module_footprint .progress_module_competition_number h3 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  width: calc(100% - (1rem));
}
.progress_module_footprint .progress_module_competition {
  position: relative;
}
@media (min-width: 1000px) {
  .progress_module_footprint .progress_module_competition {
    grid-column: 2/3;
    grid-row: 1;
  }
}
.progress_module_footprint .progress_module_competition img {
  width: 100%;
  aspect-ratio: 16/5;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1000px) {
  .progress_module_footprint .progress_module_competition img {
    aspect-ratio: 5/1;
    height: 100%;
  }
}
.progress_module_footprint .progress_module_competition_thumbnail {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.progress_module_footprint .progress_module_competition_thumbnail_content {
  position: absolute;
  position: absolute;
  left: 35%;
  top: 0;
  width: 50%;
  display: flex;
  height: 100%;
}
@media (min-width: 700px) {
  .progress_module_footprint .progress_module_competition_thumbnail_content {
    flex-direction: row-reverse;
  }
}
.progress_module_footprint .progress_module_competition_thumbnail_content img {
  all: unset;
}
.progress_module_footprint .progress_module_competition_thumbnail_content_text {
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin: 1rem 0 2rem 0;
}
.progress_module_footprint .progress_module_competition_thumbnail_content_text h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  width: calc(100% - (1rem));
}
@media (min-width: 500px) {
  .progress_module_footprint .progress_module_competition_thumbnail_content_text h3 {
    font-size: 1.4rem;
  }
}
.progress_module_footprint .progress_module_competition_thumbnail_content_arrow {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  width: 6rem;
}
.progress_bottom {
  margin-top: 4rem;
  font-weight: 700;
  border-top: 1px solid #97a1bb;
  padding-top: 2rem;
  font-size: 1.1rem;
}
@media (min-width: 1000px) {
  .progress_bottom {
    margin-top: 6rem;
  }
}
.progress_bottom a {
  color: #97a1bb;
  font-weight: 400;
  text-decoration: underline;
}

@media (max-width: 699px) {
  .from_small_screen {
    display: none;
  }
}

.to_small_screen {
  display: flex;
}
@media (min-width: 700px) {
  .to_small_screen {
    display: none;
  }
}

.tooltip {
  display: inline-block;
  position: relative;
}

.tooltip .tooltiptext {
  background-color: #080a2e;
  border-radius: 6px;
  color: white;
  display: inline-block;
  padding: 5px;
  text-align: center;
  visibility: hidden;
  width: 180px;
  bottom: 100%;
  left: 50%;
  margin-left: -90px;
  /* Use half of the width (150/2 = 75), to center the tooltip */
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  border-color: black transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: " ";
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.country-modal {
  align-items: center;
  background: rgba(8, 10, 46, 0.1);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  visibility: hidden;
  width: 100vw;
  z-index: 3;
}
@media (min-width: 1000px) {
  .country-modal {
    left: 7.5rem;
  }
}
.country-modal.active {
  opacity: 1;
  visibility: visible;
}
.country-modal .modal-container {
  align-items: center;
  background: rgba(8, 10, 46, 0.85);
  border-radius: 10px;
  border: 1px solid #97a1bb;
  display: grid;
  gap: 1rem;
  grid-template-areas: "fox" "info";
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  justify-content: space-between;
  padding: 1rem;
  position: relative;
  white-space: initial;
  width: 75%;
}
@media (min-width: 1000px) {
  .country-modal .modal-container {
    grid-template-areas: "info fox";
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto;
    height: 50%;
    width: 50%;
  }
}
.country-modal .modal-container .modal-info {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-area: info;
}
@media (min-width: 1000px) {
  .country-modal .modal-container .modal-info {
    gap: 2rem;
  }
}
@media (min-width: 1200px) {
  .country-modal .modal-container .modal-info {
    gap: 5rem;
  }
}
.country-modal .modal-container .modal-info_question {
  grid-area: question;
}
.country-modal .modal-container .modal-info_question h2 {
  font-size: 2rem;
  font-weight: bold;
}
.country-modal .modal-container .modal-info_country {
  grid-area: country;
}
.country-modal .modal-container .modal-info_action {
  grid-area: action;
}
.country-modal .modal-container .fox {
  align-items: end;
  display: flex;
  flex-direction: column;
  justify-items: center;
}
.country-modal .modal-container .fox_image {
  height: 5rem;
  width: 5rem;
}
@media (min-width: 1000px) {
  .country-modal .modal-container .fox_image {
    height: 12.5rem;
    width: 12.5rem;
  }
}
.country-modal .modal-container .fox_message {
  background: #fff;
  border-radius: 5px;
  color: #201c1c;
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  padding: 1rem;
}
.country-modal .modal-container .fox_message_close-icon {
  align-self: flex-end;
}
.country-modal .modal-container .fox_message_close-icon img {
  height: 15px;
  width: 15px;
}
.country-modal .modal-container .fox_message svg {
  display: block;
  height: 2.5rem;
  position: absolute;
  right: 3rem;
  top: 7.5rem;
  transform: rotate(180deg);
}
@media (min-width: 500px) {
  .country-modal .modal-container .fox_message svg {
    top: 6.45rem;
  }
}
@media (min-width: 700px) {
  .country-modal .modal-container .fox_message svg {
    top: 5rem;
  }
}
.country-modal .modal-container .fox_message_1 {
  margin-bottom: 1rem;
}
@media (min-width: 1000px) {
  .country-modal .modal-container .fox_message {
    background: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    right: 3%;
    top: 0;
  }
  .country-modal .modal-container .fox_message_close-icon {
    display: none;
  }
  .country-modal .modal-container .fox_message div {
    background: #fff;
    border-radius: 5px;
    color: #141a48;
    line-height: 1.45;
    max-height: 6rem;
    max-width: 19rem;
    min-height: 6rem;
    min-width: 19rem;
    padding: 1rem;
  }
  .country-modal .modal-container .fox_message div svg {
    top: 6rem;
  }
  .country-modal .modal-container .fox_message_1 {
    min-height: 5rem;
    max-height: 5rem;
  }
  .country-modal .modal-container .fox_message_1 svg {
    top: 5rem;
  }
}

.story {
  padding: 4rem 0;
  position: relative;
}
.story * {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .story {
    padding: 8rem 0 4rem;
  }
}
@media (min-width: 1200px) {
  .story {
    padding: 10rem 0 3rem;
  }
}
.story div.story_desc {
  width: 100%;
  max-width: 24rem;
  line-height: 1.4;
}
@media (min-width: 1000px) {
  .story div.story_desc {
    color: #97a1bb;
  }
}
.story a {
  margin-top: 1rem;
}
.story p.story_topline {
  color: #78cb46;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
@media (min-width: 500px) {
  .story p.story_topline {
    flex-direction: row;
    align-items: center;
  }
}
.story p.story_topline span {
  color: #141a48;
  font-weight: 400;
  background: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
  display: inline-block;
}
.story p.story_desc {
  color: #97a1bb;
  width: 100%;
  max-width: 24rem;
}
.story p.story_duration {
  color: #97a1bb;
  margin-top: 0.5rem;
}
.story p.story_info {
  color: #97a1bb;
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .story p.story_info {
    width: 100%;
    max-width: 60rem;
    margin: 4rem auto 0;
    text-align: left;
  }
}
.story h1 {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  margin: 0.5rem 0 1.5rem;
}
@media (min-width: 1000px) {
  .story h1 {
    font-size: 5rem;
    transform: translateX(-5px);
  }
}
.story_btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 500px) {
  .story_btns {
    flex-direction: row;
  }
}
.story-center {
  position: relative;
}
.story-center::after {
  display: none;
}
.story-center * {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .story-center {
    padding-top: 4rem;
    text-align: center;
  }
  .story-center p.story_topline {
    justify-content: center;
  }
  .story-center p.story_desc {
    margin: 0 auto;
  }
  .story-center div.story_desc {
    margin: 0 auto;
  }
  .story-center .story_btns {
    justify-content: center;
  }
}
.story .unlockModuleError {
  animation: unlockModuleError 0s 3s forwards;
  background: #cb4646;
  border-radius: 4px;
  margin: 1rem 0.5rem;
  padding: 0.5rem;
}
@keyframes unlockModuleError {
  to {
    visibility: hidden;
  }
}

.route {
  padding: 4rem 0;
  position: relative;
}
.route::before {
  content: "";
  display: block;
  width: 100%;
  height: 75vh;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.35;
  background: bottom left/cover no-repeat url(/images/story.jpg?6ac192b93094292993b1db93601bf2a4);
}
@media (min-width: 1000px) {
  .route {
    padding: 10rem 5vw 2rem;
  }
}
@media (min-width: 1400px) {
  .route {
    padding: 12rem 5vw 6rem;
  }
}
.route_container {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .route_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
  }
}
.route_img {
  position: relative;
  width: 100%;
  height: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .route_img {
    max-width: 22rem;
    height: 30rem;
  }
  .route_img:hover {
    background-size: 110% 110%;
  }
  .route_img:hover a {
    transform: scale(0.9);
  }
}
@media (min-width: 1400px) {
  .route_img {
    max-width: 25rem;
    height: 34rem;
  }
}
.route_img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: #78cb46;
  box-shadow: 0 0 20px rgba(120, 203, 70, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .route_img a {
    width: 6rem;
    height: 6rem;
  }
}
.route_img a img {
  width: 1rem;
  transform: translateX(2px);
}
@media (min-width: 1000px) {
  .route_img a img {
    width: 1.75rem;
  }
}
.route_content {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .route_content {
    margin-top: 0;
    max-width: 26rem;
  }
}
.route_content h1 {
  font-size: 4rem;
  font-weight: 700;
}
.route_content .btn {
  margin-top: 2rem;
}
.route_content .btn span {
  margin-left: 3rem;
  font-size: 0.9rem;
}
.route_content_duration {
  color: #97a1bb;
}
.route_content_description {
  line-height: 1.6;
  margin: 2rem 0 2rem;
}
.route_content_module {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.route_content_module span {
  width: 4rem;
  height: 4rem;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route_content_module span img {
  width: 2rem;
  height: 2rem;
}
.route_content_module div p:last-of-type {
  color: #97a1bb;
  font-size: 0.9rem;
  margin-top: 0.1rem;
}
.route_content_scroll {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.route_content_scroll div {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #97a1bb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route_content_scroll div svg {
  width: 1.25rem;
  height: 1.25rem;
  animation: scroll 1.5s linear infinite;
}
.route_content_scroll p {
  font-size: 0.9rem;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.25rem);
  }
  65% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.plan {
  padding: 4rem 0;
}
@media (min-width: 1000px) {
  .plan {
    padding: 6rem 0;
  }
}
@media (min-width: 1600px) {
  .plan_container {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 2fr;
    gap: 4rem;
    align-items: stretch;
  }
}
@media (min-width: 1000px) {
  .plan-bloc {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .plan-bloc:hover {
    transform: scale(1.03);
  }
}
.plan-bloc-item {
  padding: 2.5rem;
  background: #141a48;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1000px) {
  .plan-bloc-item {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    align-items: center;
    padding: 4rem 4rem 6rem 4rem;
    max-width: 60rem;
    margin: 0 auto;
  }
}
@media (min-width: 1600px) {
  .plan-bloc-item {
    display: flex;
    gap: 0;
    padding: 3rem;
  }
}
.plan-bloc-item:not(:last-of-type) {
  margin-bottom: 4rem;
}
@media (min-width: 1600px) {
  .plan-bloc-item:not(:last-of-type) {
    margin-bottom: 0;
  }
}
.plan-bloc-item:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 4px;
  height: 4rem;
  background: #141a48;
  position: absolute;
  z-index: 0;
  bottom: -4rem;
  left: calc(50% - 2px);
}
@media (min-width: 1600px) {
  .plan-bloc-item:not(:last-of-type)::after {
    display: block;
    width: 3.9rem;
    height: 4px;
    bottom: calc(50% - 2px);
    left: auto;
    right: -4rem;
  }
}
.plan-bloc-item:last-of-type::after {
  content: "";
  display: block;
  width: 4px;
  height: 4rem;
  background: #141a48;
  position: absolute;
  z-index: 0;
  top: -4rem;
  left: calc(50% - 2px);
}
@media (min-width: 1600px) {
  .plan-bloc-item:last-of-type::after {
    display: block;
    width: 3.9rem;
    height: 4px;
    top: calc(50% - 2px);
    left: -4rem;
  }
}
.plan-bloc-item.plan-bloc-current {
  background: #fff;
}
.plan-bloc-item.plan-bloc-current h2,
.plan-bloc-item.plan-bloc-current .plan-duration,
.plan-bloc-item.plan-bloc-current .plan-icons div {
  color: #141a48;
}
.plan-bloc-item.plan-bloc-done {
  border: 2px solid #78cb46;
}
.plan-bloc-item.plan-bloc-done .plan-img {
  background: #78cb46;
  border-color: #78cb46;
}
.plan-img {
  position: absolute;
  top: -2rem;
  right: -1rem;
  width: 7rem;
  height: 7rem;
  border: 1px solid #fff;
  background: #141a48;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.plan-img img {
  width: 20px;
  margin-bottom: 0.25rem;
}
.plan-img p {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.plan-img span {
  font-size: 0.8rem;
}
.plan-subtitle {
  color: #78cb46;
}
.plan h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0.5rem 0 2rem;
}
.plan .timeline {
  margin: 1rem 0 2rem;
}
.plan-description {
  font-size: 0.9rem;
  color: #97a1bb;
  margin: 1rem 0 2rem;
}
.plan-icons {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .plan-icons {
    margin-top: 0;
  }
}
@media (min-width: 1600px) {
  .plan-icons {
    margin-top: 2rem;
  }
}
.plan-icons div {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.plan-icons div:not(:last-of-type) {
  margin-bottom: 1rem;
}
.plan-icons div span {
  width: 3.5rem;
  height: 3.5rem;
  background: #78cb46;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-icons div span img {
  width: 1.25rem;
  height: 1.25rem;
}
.plan-icons div p {
  width: calc(100% - 5rem);
}
.plan .btn {
  margin: 2.5rem auto 0;
  align-self: flex-start;
}
@media (min-width: 1000px) {
  .plan .btn {
    margin-top: 0;
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}
@media (min-width: 1600px) {
  .plan .btn {
    position: initial;
    transform: none;
    margin: 2.5rem auto 0;
  }
}
.plan-bloc-hexagon {
  position: relative;
  width: 260px;
  height: 150px;
  background: #141a48;
  margin: 8rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1000px) {
  .plan-bloc-hexagon {
    align-self: center;
  }
}
@media (min-width: 1600px) {
  .plan-bloc-hexagon {
    margin: 0 auto;
    width: 220px;
    height: 140px;
  }
}
.plan-bloc-hexagon h2 {
  margin: 0.5rem 0 0;
  max-width: 10rem;
  text-align: center;
}
.plan-bloc-hexagon::before, .plan-bloc-hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 130px solid transparent;
  border-right: 130px solid transparent;
}
@media (min-width: 1600px) {
  .plan-bloc-hexagon::before, .plan-bloc-hexagon::after {
    border-left: 110px solid transparent;
    border-right: 110px solid transparent;
  }
}
.plan-bloc-hexagon::before {
  bottom: 100%;
  border-bottom: 4rem solid #141a48;
}
.plan-bloc-hexagon::after {
  top: 100%;
  width: 0;
  border-top: 4rem solid #141a48;
}

.histoire {
  padding: 4rem 0;
  position: relative;
}
.histoire::before {
  content: "";
  display: block;
  width: 100%;
  height: 75vh;
  position: absolute;
  top: 0;
  right: 0;
  background: bottom left/cover no-repeat url(/images/story.jpg?6ac192b93094292993b1db93601bf2a4);
}
@media (min-width: 1000px) {
  .histoire {
    padding: 12rem 5vw 6rem;
  }
}
.histoire_container {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .histoire_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
  }
}
.histoire_img {
  position: relative;
  width: 100%;
  height: 22rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(/images/histoire.jpg?d51a7846a604eb99d770408fc4f5caf2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .histoire_img {
    max-width: 22rem;
    height: 30rem;
  }
  .histoire_img:hover {
    background-size: 110% 110%;
  }
  .histoire_img:hover .histoire_img_play {
    transform: scale(0.9);
  }
}
@media (min-width: 1400px) {
  .histoire_img {
    max-width: 28rem;
    height: 38rem;
  }
}
.histoire_img .histoire_img_play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: #78cb46;
  box-shadow: 0 0 20px rgba(120, 203, 70, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .histoire_img .histoire_img_play {
    width: 6rem;
    height: 6rem;
  }
}
.histoire_img .histoire_img_play img {
  width: 1rem;
  transform: translateX(2px);
}
@media (min-width: 1000px) {
  .histoire_img .histoire_img_play img {
    width: 1.75rem;
  }
}
.histoire_img div {
  background: #fff;
  color: #141a48;
  display: inline-flex;
  padding: 1rem 2rem;
  border-radius: 10px;
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.histoire_img div p {
  margin-right: 1rem;
}
.histoire_img div img {
  margin-left: 0.5rem;
}
.histoire_content {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .histoire_content {
    margin-top: 0;
    max-width: 24rem;
  }
}
.histoire_content h1 {
  font-size: 4rem;
  font-weight: 700;
}
.histoire_content_btns {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}
.histoire_content_btns span {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  margin-left: 1rem;
}
.histoire_content_btns span img {
  width: 1rem;
}
.histoire_content .timeline {
  margin-bottom: 2rem;
}
.histoire_content p:not(:last-of-type) {
  margin-bottom: 1.5rem;
}
.histoire_content .gray {
  color: #97a1bb;
}

.start {
  background: bottom left/cover no-repeat;
  padding: 4rem 0;
  position: relative;
}
.start::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 46, 0.5);
}
.start * {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .start {
    height: 100vh;
    min-height: 35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.start p:first-of-type {
  color: #fff;
}
@media (min-width: 1000px) {
  .start p:first-of-type {
    font-size: 1.2rem;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
  }
}
.start p:last-of-type {
  color: #97a1bb;
  margin-top: 0.5rem;
}
@media (min-width: 1000px) {
  .start p:last-of-type {
    margin-top: 1rem;
  }
}
.start h1 {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
  margin: 0.5rem 0 1.5rem;
}
@media (min-width: 1000px) {
  .start h1 {
    font-size: 5rem;
    margin: 1rem 0 2rem;
  }
}
.start .btn {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .start .btn {
    margin-top: 3rem;
  }
}

.quiz {
  position: relative;
}
@media (min-width: 1000px) {
  .quiz-items {
    height: 100vh;
    min-height: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.quiz-items a:not(.btn) {
  text-decoration: underline;
}
.quiz-item {
  opacity: 0;
  visibility: hidden;
}
.quiz .plyr__control.plyr__control--overlaid {
  position: absolute;
}
.quiz .plyr {
  --plyr-color-main: #78cb46;
}
.quiz .quiz-video {
  width: 100%;
  max-width: 40rem;
}
.quiz .plyr__video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.quiz .plyr__video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.quiz-nav {
  width: 84vw;
  margin: 0 auto;
  padding-top: 2rem;
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1000px) {
  .quiz-nav {
    width: 100vw;
    position: initial;
    z-index: unset;
    padding: 0;
  }
}
@media (min-width: 1000px) {
  .quiz-nav-logo {
    position: absolute;
    top: 3rem;
    left: 3rem;
    z-index: 100;
  }
}
.quiz-nav-logo svg {
  width: 1.5rem;
  height: 3.5rem;
}
.quiz-nav-back {
  width: 8rem;
  gap: 1rem;
  background: #141a48;
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .quiz-nav-back {
    position: absolute;
    top: 3rem;
    right: 3rem;
    z-index: 100;
  }
}
.quiz-nav-back img {
  width: 1rem;
}

.quiz-countdown {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  font-weight: 700;
  color: #141a48;
  padding-top: 2rem;
}
@media (min-width: 1000px) {
  .quiz-countdown {
    font-size: 20rem;
    padding-top: 0;
  }
}
.quiz-countdown p {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quiz-countdown p.active {
  transform: scale(0);
  opacity: 0;
}

.quiz-header .quiz-info p,
.quiz-header .quiz-info img,
.quiz-header .quiz-info svg {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.3);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}
.quiz-header {
  display: none;
  opacity: 0;
  visibility: hidden;
  padding-top: 4rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .quiz-header {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    z-index: 1;
    display: block;
    padding-top: 0;
    height: 4rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .quiz-header.active {
    opacity: 1;
    visibility: visible;
  }
  .quiz-header.active p,
.quiz-header.active img,
.quiz-header.active svg {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}
@media (min-width: 1000px) {
  .quiz-header-container {
    display: grid;
    grid-template-columns: 1fr 26rem 9rem;
    gap: 2rem;
  }
}
@media (min-width: 1000px) {
  .quiz-timeline {
    width: 100%;
    max-width: 50rem;
  }
}
.quiz-timeline p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
@media (min-width: 1000px) {
  .quiz-timeline p {
    font-size: 1rem;
  }
}
.quiz-timeline p span {
  color: #97a1bb;
}
.quiz-infos {
  width: 100%;
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .quiz-infos {
    gap: 2rem;
    margin-top: 0;
  }
}
.quiz-info {
  width: 100%;
  background: #fff;
  height: 3.5rem;
  padding: 0.6rem;
  border-radius: 10px;
  color: #141a48;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  border: 2px solid #78cb46;
}
@media (min-width: 1000px) {
  .quiz-info {
    padding: 1rem;
    flex-direction: row;
  }
}
.quiz-info p {
  font-size: 0.9rem;
}
.quiz-info img,
.quiz-info svg {
  height: 18px;
}
@media (min-width: 1000px) {
  .quiz-info img,
.quiz-info svg {
    height: 22px;
  }
}
.quiz-actions {
  display: none;
}
@media (min-width: 1000px) {
  .quiz-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .quiz-actions-item {
    width: 3.5rem;
    height: 3.5rem;
    background: #fff;
    border: 2px solid #78cb46;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
  }
  .quiz-actions-item:hover {
    transform: scale(0.9);
  }
  .quiz-actions-item img {
    width: 1.25rem;
    height: 1.25rem;
  }
  .quiz-actions-pause img {
    width: 1rem;
    height: 1rem;
  }
}
.quiz-pause {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(8, 10, 46, 0.9);
  z-index: 10;
  display: flex;
  gap: 2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quiz-pause.active {
  opacity: 1;
  visibility: visible;
}
.quiz-pause h2 {
  font-size: 2rem;
  font-weight: 700;
}
.quiz-pause div {
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quiz-pause div:hover {
  transform: scale(0.9);
}
.quiz-pause div span {
  width: 6rem;
  height: 6rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #78cb46;
}
.quiz-pause div span img {
  width: 1.5rem;
  height: 1.5rem;
}
.quiz-pause div p {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}

.timer {
  transform-box: fill-box;
}
.timer1 {
  transform-origin: 16.5% 84%;
  animation: rotate 20s linear infinite running;
}
.timer2 {
  transform-origin: 84% 16.5%;
  animation: rotate 50s linear infinite running;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.quiz-response {
  position: absolute;
  top: 6rem;
  left: 0;
  background: #080a2e;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 2rem 8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .quiz-response {
    position: absolute;
    width: 100vw;
    height: 100vh;
    min-height: 50rem;
    top: 0;
    left: 0;
    justify-content: center;
  }
  .quiz-response .quiz-infos {
    margin-top: 2rem;
  }
  .quiz-response.active .quiz-result,
.quiz-response.active .quiz-infos .quiz-timer {
    opacity: 1;
    transform: scale(1);
  }
}
.quiz-response.active {
  opacity: 1;
  visibility: visible;
}
.quiz-response.active .eye-left {
  animation: wink 4s cubic-bezier(0.165, 0.84, 0.44, 1) 2s infinite;
}
.quiz-response.active .eye2 {
  transform: rotate3d(1, 1, 1, 5deg) scale(0.8);
}
.quiz-response.active .eye2-left::before {
  transform: rotate(35deg);
}
.quiz-response.active .eye2-right::before {
  transform: rotate(-35deg);
}
.quiz-response.active.good-screen .quiz-result {
  animation: bounce 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quiz-response.active.error-screen {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
.quiz-response button {
  position: relative;
  margin-top: 2rem;
}
.quiz-response .fox {
  position: relative;
}
.quiz-response .eye {
  width: 6px;
  height: 14px;
  border-radius: 2px;
  background: #111111;
  position: absolute;
  transform: rotate3d(1, 1, 1, -15deg);
}
.quiz-response .eye-left {
  top: 36%;
  left: 59%;
}
.quiz-response .eye-right {
  top: 34%;
  left: 65%;
}
.quiz-response .eye2 {
  width: 7px;
  height: 11px;
  border-radius: 2px;
  background: #111111;
  position: absolute;
  transform: rotate3d(1, 1, 1, 5deg);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}
.quiz-response .eye2::before {
  content: "";
  display: block;
  width: 12px;
  height: 4px;
  background: #111;
  border-radius: 2px;
  position: absolute;
  top: -10px;
  left: -2px;
  transform: rotate(0);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}
.quiz-response .eye2-left {
  top: 57%;
  left: 58.5%;
}
.quiz-response .eye2-right {
  top: 57%;
  left: 63%;
}
.quiz-response .quiz-infos {
  position: relative;
  z-index: 1;
  max-width: 14rem;
}
.quiz-response .quiz-infos .quiz-info {
  flex-direction: row;
}
@media (min-width: 1000px) {
  .quiz-response .quiz-infos {
    max-width: 14rem;
    margin: 2rem auto 0;
  }
}
.quiz-response-bg {
  width: 100%;
  background: bottom/cover no-repeat url(/images/quiz.jpg?850bcd8dcb6d9551410821db5f0cca6b);
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 1000px) {
  .quiz-response-bg {
    height: 100vh;
  }
}
.quiz-result {
  width: 100%;
  max-width: 40rem;
  background: #fff;
  border-radius: 10px;
  color: #141a48;
  text-align: center;
  position: relative;
  z-index: 1;
}
.quiz-result img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.quiz-result h2 {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1rem 1.5rem 0.5rem;
}
@media (min-width: 1000px) {
  .quiz-result h2 {
    font-size: 3.2rem;
    padding: 3rem 3rem 1rem 3rem;
  }
}
.quiz-result p {
  font-size: 0.9rem;
  color: #97a1bb;
  padding: 0rem 1.5rem 1rem;
}
@media (min-width: 1000px) {
  .quiz-result p {
    padding: 0rem 3rem 3rem 3rem;
    max-width: 60%;
    margin: 0 auto;
  }
}

@keyframes wink {
  20% {
    transform: rotate3d(1, 1, 1, -15deg) scaleY(1);
  }
  25% {
    transform: rotate3d(1, 1, 1, -15deg) scaleY(0.35);
  }
  30% {
    transform: rotate3d(1, 1, 1, -15deg) scaleY(1);
  }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-100px);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(-7px);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
.quiz-item {
  max-width: 40rem;
  padding: 2rem 0;
}
@media (min-width: 1000px) {
  .quiz-item {
    padding: 0 4rem;
    max-width: 75rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
  }
  .quiz-item.active .quiz-title {
    opacity: 1;
  }
  .quiz-item.active .quiz-questions {
    opacity: 1;
    transform: scale(1);
  }
  .quiz-item.active .quiz-next {
    opacity: 1;
  }
}
.quiz-item .quiz-btn_container {
  position: relative;
  width: auto;
}
.quiz-item .quiz-btn_container .alert {
  position: absolute;
  bottom: -5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-item .quiz-btn_container .alert p {
  text-align: center;
}
.quiz-item button {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .quiz-item button {
    display: block;
    margin: 0 auto;
  }
}
.quiz-bg {
  width: 100%;
  height: 30rem;
  background: bottom/cover no-repeat url(/images/quiz.jpg?850bcd8dcb6d9551410821db5f0cca6b);
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 1000px) {
  .quiz-bg {
    position: fixed;
    height: 100vh;
  }
}
.quiz-classic .quiz-title h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.quiz-classic .quiz-title h2 img {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  margin-left: 0.5rem;
  transform: translateY(-5px);
}
.quiz-title {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .quiz-title {
    text-align: center;
    opacity: 0;
  }
}
.quiz-title p {
  color: #78cb46;
  font-size: 0.9rem;
}
@media (min-width: 1000px) {
  .quiz-title p {
    font-size: 1rem;
  }
}
.quiz-title h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.5rem;
}
@media (min-width: 1000px) {
  .quiz-title h2 {
    font-size: 2rem;
  }
}
.quiz-title h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 1rem;
}
.quiz-title span {
  color: #f99703 !important;
}
.quiz-questions {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0;
  position: relative;
  z-index: 1;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .quiz-questions {
    margin: 4rem 0;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    transform: scale(1.1);
    gap: 1.5rem;
    opacity: 0;
  }
}
@media (min-width: 1000px) {
  .quiz-question {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .quiz-question:hover {
    transform: scale(0.95);
  }
}
.quiz-question input[type=checkbox] {
  display: none;
}
.quiz-question input[type=checkbox] + label.success {
  background: #46cb6a;
  color: #fff;
}
.quiz-question input[type=checkbox] + label.success::before {
  border: 2px solid #fff;
}
.quiz-question input[type=checkbox]:checked + label {
  background: #a6afc5;
}
.quiz-question input[type=checkbox]:checked + label.error {
  background: #cb4646;
  color: #fff;
}
.quiz-question input[type=checkbox]:checked + label.error::before {
  border: 2px solid #fff;
}
.quiz-question input[type=checkbox]:checked + label.error::after {
  background: center/0.6rem 0.6rem no-repeat url(/images/icon-checked-white.svg?80b9fadceb70808b7dba3fea6a271a9c);
}
.quiz-question input[type=checkbox]:checked + label.success {
  background: #46cb6a;
  color: #fff;
}
.quiz-question input[type=checkbox]:checked + label.success::before {
  border: 2px solid #fff;
}
.quiz-question input[type=checkbox]:checked + label.success::after {
  background: center/0.6rem 0.6rem no-repeat url(/images/icon-checked-white.svg?80b9fadceb70808b7dba3fea6a271a9c);
}
.quiz-question input[type=checkbox]:checked + label::after {
  content: "";
  background: center/0.6rem 0.6rem no-repeat url(/images/icon-checked-blue.svg?bf24be0df3217ec1ef9a420eb4b77842);
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: 50%;
  right: 2.3rem;
  transform: translateY(-45%);
}
.quiz-question input[type=text],
.quiz-question input[type=number] {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem 2rem;
  font-size: 0.9rem;
  color: #080a2e;
}
.quiz-question label {
  display: block;
  background: #fff;
  border-radius: 10px;
  color: #141a48;
  padding: 1.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
  line-height: 1;
  padding-right: 4rem;
}
.quiz-question label p {
  width: calc(100% - 2rem);
}
@media (min-width: 1000px) {
  .quiz-question label {
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 1.5rem 2rem;
  }
}
.quiz-question label::before {
  content: "";
  border: 2px solid #141a48;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}
.quiz-question.multiple label::before {
  border-radius: 5px;
}
@media (min-width: 1000px) {
  .quiz-next {
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
}

.bilanCarbone .quiz-questions {
  display: flex;
  flex-wrap: wrap;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}
@media (min-width: 1200px) {
  .bilanCarbone .quiz-questions {
    padding: 0 6rem;
  }
}
.bilanCarbone .quiz-questions .quiz-question {
  width: 100%;
}
@media (min-width: 1000px) {
  .bilanCarbone .quiz-questions .quiz-question {
    width: 48%;
  }
}
.bilanCarbone .quiz-questions .quiz-question-text {
  width: 100%;
}
.bilanCarbone .quiz-questions .quiz-question-text:hover {
  transform: scale(1);
}
.bilanCarbone .quiz-questions input[type=text],
.bilanCarbone .quiz-questions input[type=number] {
  width: 100%;
}
.bilanCarbone .quiz-questions input::-webkit-outer-spin-button,
.bilanCarbone .quiz-questions input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bilanCarbone .quiz-questions input[type=number] {
  -moz-appearance: textfield;
}

.quiz-image {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 1.5rem;
  color: #141a48;
  position: relative;
  z-index: 1;
}
@media (min-width: 700px) {
  .quiz-image {
    padding: 2rem;
  }
}
.quiz-image_img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.quiz-image_zoom {
  display: none;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quiz-image_zoom:hover {
  transform: scale(1.1);
}
@media (min-width: 1000px) {
  .quiz-image_zoom {
    background: #141a48;
    border-radius: 0 5px 0 5px;
    bottom: 0;
    cursor: pointer;
    display: block;
    height: 3rem;
    padding: 0.8rem;
    position: absolute;
    right: 50px;
    width: 3rem;
  }
}
.quiz-image_content {
  margin-top: 1.5rem;
}
@media (min-width: 1000px) {
  .quiz-image_content {
    margin-top: 0;
  }
}
.quiz-image_content p {
  font-size: 0.95rem;
  line-height: 1.3;
}
.quiz-image_content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.quiz-image .quiz-next {
  display: flex;
  margin: 1.5rem auto 0;
  border: 1px solid #141a48;
  padding: 1rem 2rem;
}
.quiz-image_shape {
  width: 2rem;
  height: 2rem;
  position: absolute;
  bottom: -1.25rem;
  right: calc(50% - 1rem);
  transform: rotate(180deg);
}
@media (min-width: 1000px) {
  .quiz-image-horizontal {
    max-width: 45rem;
    padding: 10rem 3rem 3rem;
    margin-top: 7rem;
  }
  .quiz-image-horizontal > div:first-of-type {
    position: absolute;
    top: -7rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
.quiz-image-horizontal .quiz-image_img {
  aspect-ratio: 16/9;
}
@media (min-width: 1000px) {
  .quiz-image-horizontal .quiz-image_img {
    width: auto;
    height: 14rem;
  }
}
@media (min-width: 1000px) {
  .quiz-image-vertical-left {
    max-width: 60rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }
  .quiz-image-vertical-left > div:first-of-type {
    position: relative;
    grid-column: 1/4;
  }
  .quiz-image-vertical-left > div:last-of-type {
    grid-column: 4/10;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.quiz-image-vertical-left .quiz-image_img {
  max-width: 15rem;
  aspect-ratio: 9/16;
}
@media (min-width: 1000px) {
  .quiz-image-vertical-left .quiz-image_img {
    max-width: none;
  }
}
@media (min-width: 1000px) {
  .quiz-image-vertical-right {
    max-width: 60rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }
  .quiz-image-vertical-right > div:first-of-type {
    position: relative;
    grid-column: 7/10;
    grid-row: 1;
  }
  .quiz-image-vertical-right > div:last-of-type {
    grid-column: 1/7;
    grid-row: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.quiz-image-vertical-right .quiz-image_img {
  max-width: 15rem;
  aspect-ratio: 9/16;
}
@media (min-width: 1000px) {
  .quiz-image-vertical-right .quiz-image_img {
    max-width: none;
  }
}

.quiz-explanation {
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  position: relative;
  z-index: 1;
  color: #141a48;
  margin-bottom: 3rem;
}
.quiz-explanation p {
  font-size: 0.95rem;
}
@media (min-width: 1000px) {
  .quiz-explanation {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto 3rem !important;
    padding: 4rem;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .quiz-explanation .quiz-title {
    text-align: left;
    margin-bottom: 1.5rem;
  }
  .quiz-explanation .quiz-title h2 {
    font-size: 1.5rem;
  }
  .quiz-explanation .quiz-title h3 {
    max-width: 60%;
  }
}
@media (min-width: 1400px) {
  .quiz-explanation {
    max-width: 60rem;
  }
}
.quiz-explanation .quiz-next {
  display: flex;
  margin: 2rem auto 0;
  border: 1px solid #141a48;
  padding: 1rem 2rem;
}
.quiz-block_content {
  display: block;
}
@media (min-width: 1000px) {
  .quiz-block_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: -4rem;
    background: none;
    border-radius: 0;
    max-width: 70rem;
  }
}
.quiz-block_content .bloc {
  max-width: 100%;
  align-items: stretch;
  justify-content: center;
  flex-wrap: inherit;
}
@media (min-width: 1000px) {
  .quiz-block_content .bloc {
    max-width: 75%;
  }
}
.quiz-block_content .bloc .quiz-content {
  max-width: 100%;
  margin-top: 0;
}
@media (min-width: 1000px) {
  .quiz-block_content .bloc .quiz-content p {
    font-size: 1rem;
    line-height: 1.3;
  }
  .quiz-block_content .bloc .quiz-content a {
    text-decoration: underline;
  }
}
@media (min-width: 1600px) {
  .quiz-block_content .bloc .quiz-content p {
    font-size: 1.1rem;
  }
}
.quiz-block_content .bloc .quiz-right {
  width: 100%;
  right: 0;
}
@media (min-width: 1000px) {
  .quiz-block_content .bloc .quiz-right {
    position: relative;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (min-width: 1000px) {
  .quiz-block_content .bloc:first-of-type {
    width: 30%;
    max-height: 14rem;
    transform: translateY(6rem);
    position: relative;
  }
}
.quiz-block_content .bloc:first-of-type .quiz-zoom {
  display: none;
  cursor: pointer;
}
@media (min-width: 1000px) {
  .quiz-block_content .bloc:first-of-type .quiz-zoom {
    display: block;
    width: 3rem;
    height: 3rem;
    padding: 0.8rem;
    background: #080a2e;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 0 5px;
  }
}
.quiz-block_content .bloc:last-of-type {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .quiz-block_content .bloc:last-of-type {
    margin-top: 0;
    background: #fff;
    padding: 9rem 4rem 4rem;
    border-radius: 15px;
  }
}
.quiz-content_video {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 auto 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quiz-content_video .video_explanation_text {
  margin-top: 2rem;
  color: #fff;
}
.quiz-content_video .quiz-video {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quiz-content_video .quiz-video video {
  position: absolute;
  top: 0;
  border-radius: 20px;
  left: 0;
  right: 0;
  width: 100%;
}
.quiz-content_video .quiz-video #playpause {
  bottom: 11rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #78cb46;
  width: 6rem;
  border-radius: 50%;
  height: 6rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1000px) {
  .quiz-content_video .quiz-video #playpause {
    bottom: 0;
  }
}
.quiz-content_video .quiz-video #playpause img {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
}
.quiz-content_video .quiz-title {
  margin-bottom: 2rem;
  text-align: center;
}
.quiz-content_video .quiz-title h2 {
  color: #fff;
}
@media (min-width: 1000px) {
  .quiz-item.active .quiz-explanation {
    opacity: 1;
    transform: scale(1);
  }
  .quiz-item.active .quiz-video {
    opacity: 1;
    transform: scale(1);
  }
}
.quiz-shape {
  position: absolute;
  bottom: -1rem;
  left: calc(50% - 1rem);
  width: 2rem;
  transform: rotate(180deg);
}
@media (min-width: 1000px) {
  .quiz-shape {
    left: 50%;
    transform: rotate(180deg) translateX(50%);
  }
}
@media (min-width: 1000px) {
  .quiz-content p {
    font-size: 1rem;
    line-height: 1.6;
  }
}
.quiz-content p:not(:last-of-type) {
  margin-bottom: 0.75rem;
}
.quiz-imgs {
  display: none;
}
@media (min-width: 1000px) {
  .quiz-imgs {
    display: block;
  }
  .quiz-imgs img {
    position: absolute;
  }
  .quiz-imgs img.quiz-left {
    width: 12rem;
    bottom: -4rem;
    left: -8rem;
  }
  .quiz-imgs img.quiz-right {
    width: 20rem;
    bottom: -6rem;
    right: -14rem;
  }
}

.quiz-screen {
  padding: 4rem 0;
}
@media (min-width: 1000px) {
  .quiz-screen {
    padding: 0 4rem;
    max-width: 75rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
  }
  .quiz-screen.active .quiz-title {
    opacity: 1;
  }
  .quiz-screen.active .quiz-questions {
    opacity: 1;
    transform: scale(1);
  }
  .quiz-screen.active .quiz-next {
    opacity: 1;
  }
}
.quiz-screen button {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .quiz-screen button {
    display: block;
    margin: 0 auto;
  }
}

@media (min-width: 1000px) {
  .quiz-bravo {
    padding: 0 4rem;
  }
}
.quiz-bravo .quiz-title h2 {
  font-size: 3rem;
  margin: 0.5rem 0 1rem;
}
.quiz-bravo .quiz-title p:last-of-type {
  font-size: 2rem;
  color: #fff;
  line-height: 1.2;
}
.quiz-bravo .quiz-line {
  margin: 2rem auto;
  width: 100%;
  max-width: 30rem;
}
@media (min-width: 1000px) {
  .quiz-bravo .quiz-line {
    margin: 2rem auto;
  }
}
.quiz-bravo .quiz-line div {
  background: #fff;
  border-radius: 10px;
  padding: 1rem 2rem;
  color: #080a2e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.quiz-bravo .quiz-line div::before {
  content: "";
  display: block;
  height: 100%;
  background: rgba(120, 203, 70, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
}
.quiz-bravo .quiz-line div:first-of-type::before {
  width: 70%;
}
.quiz-bravo .quiz-line div:nth-of-type(2)::before {
  width: 80%;
}
.quiz-bravo .quiz-line div:last-of-type::before {
  width: 55%;
}
.quiz-bravo .quiz-line div:not(:last-of-type) {
  margin-bottom: 1rem;
}
.quiz-bravo .quiz-line div p {
  position: relative;
  z-index: 1;
}
.quiz-bravo .quiz-line div p:last-of-type {
  font-weight: bold;
}
.quiz-bravo .quiz-timeline {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  position: relative;
}
.quiz-bravo .quiz-timeline-new {
  background: #fff;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  border-radius: 10px;
  padding: 1rem;
  transform: translateX(-50%);
}
.quiz-bravo .quiz-timeline-new p {
  text-align: center;
  margin: 0;
}
.quiz-bravo .quiz-timeline-new p:first-of-type {
  font-size: 0.8rem;
  color: #97a1bb;
}
.quiz-bravo .quiz-timeline-new p:last-of-type {
  color: #080a2e;
}
.quiz-bravo a {
  margin: 7rem auto 0;
  display: flex;
}
@media (min-width: 1000px) {
  .quiz-bravo a {
    margin: 8rem auto 0;
  }
}
.quiz-bravo a:last-of-type {
  margin-top: 3rem;
}

.bravo_buttons {
  margin: 0 auto;
}

.bravo-buttons {
  display: flex;
  height: auto;
  margin: 8rem;
  justify-content: center;
}
.bravo-buttons a {
  margin: 0 !important;
}
.bravo-buttons a:last-of-type {
  margin-top: 3rem;
}
.bravo-buttons button {
  margin: 0 !important;
}

.quiz-fox {
  width: 100%;
  margin: 2rem 0;
  position: relative;
  display: none;
}
.quiz-fox img {
  width: 100%;
}
@media (min-width: 1000px) {
  .quiz-fox {
    display: block;
    margin: 0 auto;
    max-width: 32rem;
  }
}
.quiz-fox::before {
  content: "";
  display: block;
  position: absolute;
  width: 5px;
  height: 10px;
  background: #080a2e;
  top: 30%;
  left: 58%;
  border-radius: 10px;
  z-index: 1;
  transform: rotate(-5deg);
  animation: wink 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.quiz-fox::after {
  content: "";
  display: block;
  position: absolute;
  width: 5px;
  height: 10px;
  background: #080a2e;
  top: 30%;
  left: 65%;
  z-index: 1;
  border-radius: 10px;
  transform: rotate(5deg);
}
.quiz-message {
  position: relative;
}
@media (min-width: 1000px) {
  .quiz-message {
    min-height: 50rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.quiz-message .button {
  margin-top: 4rem;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-message .button.active {
  opacity: 1;
  visibility: visible;
}
.quiz-msg {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .quiz-msg {
    margin-top: unset;
    width: 100%;
    position: absolute;
    top: 30%;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
  }
}
.quiz-msg-item {
  border-radius: 10px;
  line-height: 1.4;
  position: relative;
}
.quiz-msg-item::before {
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-image: url(/images/fox-mobile.png?b033452805b7553f81554854698e5ec6);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media (min-width: 1000px) {
  .quiz-msg-item {
    max-width: 20rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4rem);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: absolute;
    top: 0;
  }
  .quiz-msg-item::before {
    display: none;
  }
  .quiz-msg-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .quiz-msg-item.adios {
    opacity: 0;
    visibility: hidden;
  }
  .quiz-msg-item:first-of-type {
    transition-delay: 0.2s !important;
  }
}
.quiz-msg-item svg {
  position: absolute;
  bottom: -1.4rem;
  width: 2rem;
  height: 2rem;
  transform: rotate(180deg);
}
.quiz-msg-item:nth-of-type(even) {
  padding: 1.5rem 7rem 1.5rem 1.5rem;
}
@media (min-width: 1000px) {
  .quiz-msg-item:nth-of-type(even) {
    padding: 2rem;
    justify-self: end;
    right: -2rem;
  }
}
.quiz-msg-item:nth-of-type(even)::before {
  right: 1.5rem;
}
.quiz-msg-item:nth-of-type(odd) {
  padding: 1.5rem 1.5rem 1.5rem 7rem;
  background: #fff;
  color: #141a48;
}
@media (min-width: 1000px) {
  .quiz-msg-item:nth-of-type(odd) {
    padding: 2rem;
    left: -1rem;
  }
}
.quiz-msg-item:nth-of-type(odd)::before {
  left: 1.5rem;
}
.quiz-msg-item:nth-of-type(odd) svg {
  right: 2rem;
}
.quiz-msg-item:nth-of-type(odd) svg path {
  fill: #fff;
}
.quiz-msg-item:nth-of-type(even) {
  background: #78cb46;
  color: #fff;
}
.quiz-msg-item:nth-of-type(even) svg {
  left: 2rem;
}
.quiz-msg-item:nth-of-type(even) svg path {
  fill: #78cb46;
}
@media (min-width: 1000px) {
  .quiz-msg-item:nth-of-type(even) {
    top: 4rem;
  }
}
.quiz-msg-item:not(:last-of-type) {
  margin-bottom: 2rem;
}
@media (min-width: 1000px) {
  .quiz-msg-item:not(:last-of-type) {
    margin-bottom: 0;
  }
}

@media (min-width: 1000px) {
  .quiz-msg-item:nth-of-type(1) {
    transition-delay: 0.5s;
  }

  .quiz-msg-item:nth-of-type(2) {
    transition-delay: 1s;
  }

  .quiz-msg-item:nth-of-type(3) {
    transition-delay: 1.5s;
  }

  .quiz-msg-item:nth-of-type(4) {
    transition-delay: 2s;
  }

  .quiz-msg-item:nth-of-type(5) {
    transition-delay: 2.5s;
  }

  .quiz-msg-item:nth-of-type(6) {
    transition-delay: 3s;
  }

  .quiz-msg-item:nth-of-type(7) {
    transition-delay: 3.5s;
  }

  .quiz-msg-item:nth-of-type(8) {
    transition-delay: 4s;
  }

  .quiz-msg-item:nth-of-type(9) {
    transition-delay: 4.5s;
  }
}
@media (min-width: 1000px) {
  .quiz-msg-item.more:nth-of-type(3) {
    transition-delay: 4s;
  }

  .quiz-msg-item.more:nth-of-type(4) {
    transition-delay: 4.5s;
  }
}
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #080a2e;
  z-index: 1000;
  overflow: auto;
  animation: lightboxIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lightbox.fadeOut {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lightbox button {
  width: 3rem;
  height: 3rem;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(8, 10, 46, 0.05);
  position: fixed;
  z-index: 1001;
  cursor: pointer;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lightbox button:hover {
  transform: scale(1.1);
}
.lightbox button.lightbox-close {
  top: 1rem;
  right: 1rem;
}
.lightbox button.lightbox-close svg {
  width: 1rem;
  height: 1rem;
}
.lightbox-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-container img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 2rem;
  margin: 0 auto;
  animation: lightboxIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media all and (min-width: 1000px) {
  .lightbox-container-full {
    display: initial;
  }
  .lightbox-container-full img {
    width: 100%;
    height: auto;
    max-height: initial;
  }
}

@keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.quizz {
  width: 100vw;
  min-height: 100vh;
  background: top/cover no-repeat url(/images/quiz.jpg?850bcd8dcb6d9551410821db5f0cca6b);
}
@media (min-width: 700px) {
  .quizz.no-scroll {
    height: 100vh;
    overflow: hidden;
  }
}
.quizz_header {
  width: 90vw;
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (min-width: 700px) {
  .quizz_header {
    height: 8rem;
    gap: 4rem;
  }
}
@media (min-width: 1000px) {
  .quizz_header {
    gap: 6rem;
  }
}
.quizz_header_logo {
  display: none;
}
@media (min-width: 700px) {
  .quizz_header_logo {
    display: block;
  }
  .quizz_header_logo img {
    width: 8rem;
  }
}
.quizz_header_timeline {
  width: calc(100% - 5rem);
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 700px) {
  .quizz_header_timeline {
    width: calc(100% - 31rem);
    gap: 0.75rem;
  }
}
@media (min-width: 1000px) {
  .quizz_header_timeline {
    width: calc(100% - 36rem);
  }
}
.quizz_header_timeline p {
  font-size: 0.9rem;
}
@media (min-width: 700px) {
  .quizz_header_timeline p {
    font-size: 1rem;
  }
}
.quizz_header_timeline p span {
  color: #97a1bb;
}
.quizz_header_timeline div {
  width: 100%;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  position: relative;
}
.quizz_header_timeline div span {
  width: 25%;
  transition: width 0.2s ease-in-out;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background: #78cb46;
  border-radius: 5px;
}
.quizz_header_leave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #141a48;
  border-radius: 5px;
  padding: 1rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
@media (min-width: 700px) {
  .quizz_header_leave {
    width: 15rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}
.quizz_header_leave img {
  width: 0.75rem;
  height: 0.75rem;
}
@media (min-width: 700px) {
  .quizz_header_leave img {
    width: 1rem;
    height: 1rem;
  }
}
.quizz_header_leave p {
  display: none;
}
@media (min-width: 700px) {
  .quizz_header_leave p {
    display: block;
  }
}
.quizz_item {
  width: 90vw;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
.quizz_item a {
  text-decoration: underline;
}
.quizz_item_content.active {
  opacity: 1;
  visibility: visible;
  display: block;
}
@media (min-width: 700px) {
  .quizz_item_content.active {
    display: flex;
  }
}
.quizz_item_quiz {
  padding-bottom: 5rem;
}
@media (min-width: 700px) {
  .quizz_item_quiz {
    padding-bottom: unset;
    max-width: 50rem;
    margin: 0 auto;
    height: calc(100vh - 20rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    left: 0;
    right: 0;
  }
  .quizz_item_quiz.scroll {
    justify-content: flex-start;
  }
  .quizz_item_quiz::-webkit-scrollbar {
    width: 10px;
  }
  .quizz_item_quiz::-webkit-scrollbar-track {
    border-radius: 5px;
    background: rgba(120, 203, 70, 0.15);
  }
  .quizz_item_quiz::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #78cb46;
  }
}
.quizz_item_quiz .quizz_error {
  background: #cb4646;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}
.quizz_item_prime {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  .quizz_item_prime {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto 2rem;
  }
}
.quizz_item_title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  .quizz_item_title {
    width: 100%;
    max-width: 35rem;
    margin: 0 auto;
    text-align: center;
  }
}
.quizz_item_prefix, .quizz_item_suffix {
  font-size: 1.1rem;
  margin: 2rem auto;
  max-width: 35rem;
  text-align: justify;
}
.quizz_item_text {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  .quizz_item_text {
    width: 100%;
    max-width: 35rem;
    margin: 0 auto 2rem;
    text-align: center;
  }
}
.quizz_item_type {
  font-size: 0.9rem;
  color: #78cb46;
  margin: 0rem auto;
}
@media (min-width: 700px) {
  .quizz_item_type {
    width: 100%;
    max-width: 35rem;
    text-align: center;
  }
}
.quizz_item_btn {
  background: #141a48;
  padding: 0 5vw;
  width: 100vw;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 700px) {
  .quizz_item_btn {
    padding: unset;
    height: 6rem;
  }
}
.quizz_item_btn div {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 500px) {
  .quizz_item_btn div {
    gap: 2rem;
  }
}
@media (min-width: 700px) {
  .quizz_item_btn div {
    max-width: 42rem;
    gap: 12rem;
  }
}
.quizz_item_btn div.firstStep {
  display: flex;
  justify-content: end;
}
.quizz_item_btn_prev {
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #141a48;
  border: 1px solid #fff;
}
.quizz_item_btn_next {
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #78cb46;
  border: 1px solid #78cb46;
}
.quizz_item_btn_next.firstStep {
  width: 15rem;
}
.quizz_item_btn_next.error {
  animation: shake 0.5s;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.quizz_item_checkbox {
  margin-top: 1rem;
}
@media (min-width: 700px) {
  .quizz_item_checkbox {
    width: 100%;
    max-width: 35rem;
    margin-right: auto;
    margin-left: auto;
  }
  .quizz_item_checkbox:first-of-type {
    margin-top: 2rem;
  }
}
.quizz_item_checkbox input {
  display: none;
}
.quizz_item_checkbox input:checked + label {
  background: #9ba6ff;
  border-color: #9ba6ff;
}
.quizz_item_checkbox input:checked + label::after {
  content: "";
  display: block;
  background: center/0.6rem 0.6rem no-repeat url("/images/icon-checked-blue.svg");
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 1rem;
}
.quizz_item_checkbox label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 5px solid #fff;
  border-radius: 5px;
  color: #141a48;
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  transition: background 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quizz_item_checkbox label::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border: 2px solid #141a48;
  border-radius: 3px;
}
.quizz_item_checkbox label p {
  width: calc(100% - 2.5rem);
}
.quizz_item_checkbox-radio::before {
  content: "";
  border-radius: 8px !important;
}
.quizz_item_checkbox-selected_key {
  width: calc(100% - 3.25rem);
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_checkbox-selected_key {
    max-width: 31.75rem;
    transform: translateX(-1.6rem);
  }
}
.quizz_item_checkbox-selected_key::before {
  content: "";
  display: block;
  width: 3.75rem;
  height: 100%;
  background: #78cb46;
  border-radius: 5px;
  position: absolute;
  right: -3.25rem;
}
.quizz_item_checkbox-selected_key::after {
  content: "";
  display: block;
  background: center/1.5rem 1.5rem no-repeat url("/images/icon-checked-white.svg");
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: -2.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.quizz_item_checkbox-selected_key label {
  border: 5px solid #78cb46;
  border-right: unset;
  background: #c3ff9d;
}
.quizz_item_checkbox-selected_key label::before {
  background: #78cb46;
  border-color: #78cb46;
}
.quizz_item_checkbox-unselected_distractor {
  width: calc(100% - 3.25rem);
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_checkbox-unselected_distractor {
    max-width: 31.75rem;
    transform: translateX(-1.6rem);
  }
}
.quizz_item_checkbox-unselected_distractor::before {
  content: "";
  display: block;
  width: 3.75rem;
  height: 100%;
  background: #97a1bb;
  border-radius: 5px;
  position: absolute;
  right: -3.25rem;
}
.quizz_item_checkbox-unselected_distractor::after {
  content: "";
  display: block;
  background: center/1.25rem 1.25rem no-repeat url("/images/icon-close.svg");
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  right: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
}
.quizz_item_checkbox-selected_distractor {
  width: calc(100% - 3.25rem);
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_checkbox-selected_distractor {
    max-width: 31.75rem;
    transform: translateX(-1.6rem);
  }
}
.quizz_item_checkbox-selected_distractor::before {
  content: "";
  display: block;
  width: 3.75rem;
  height: 100%;
  background: #cb4646;
  border-radius: 5px;
  position: absolute;
  right: -3.25rem;
}
.quizz_item_checkbox-selected_distractor::after {
  content: "";
  display: block;
  background: center/1.25rem 1.25rem no-repeat url("/images/icon-close.svg");
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  right: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
}
.quizz_item_checkbox-selected_distractor label {
  border: 5px solid #cb4646;
  border-right: unset;
}
.quizz_item_checkbox-selected_distractor label::before {
  background: #cb4646;
  border-color: #cb4646;
}
.quizz_item_checkbox-unselected_key {
  width: calc(100% - 3.25rem);
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_checkbox-unselected_key {
    max-width: 31.75rem;
    transform: translateX(-1.6rem);
  }
}
.quizz_item_checkbox-unselected_key::before {
  content: "";
  display: block;
  width: 3.75rem;
  height: 100%;
  background: #78cb46;
  border-radius: 5px;
  position: absolute;
  right: -3.25rem;
}
.quizz_item_checkbox-unselected_key::after {
  content: "";
  display: block;
  background: center/1.5rem 1.5rem no-repeat url("/images/icon-checked-white.svg");
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: -2.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.quizz_item_checkbox-unselected_key label {
  border: 5px solid #78cb46;
  border-right: unset;
  background: #c3ff9d;
}
.quizz_item_feedback {
  font-size: 0.8rem;
  padding-left: 1.25rem;
}
@media (min-width: 700px) {
  .quizz_item_feedback {
    width: 100%;
    max-width: 35rem;
    margin: 0.5rem auto 0;
  }
}
.quizz_item_solution {
  margin: 2rem auto 1rem;
  padding: 1.5rem;
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_solution {
    width: 100%;
    max-width: 42rem;
    padding: 2rem;
  }
}
.quizz_item_solution h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.quizz_item_solution p {
  font-size: 0.9rem;
}
.quizz_item_solution img {
  position: absolute;
  height: 1rem;
  bottom: -1rem;
}
.quizz_item_solution-error {
  background: #cb4646;
}
.quizz_item_solution-error img {
  left: 0;
}
.quizz_item_solution-success {
  background: #78cb46;
}
.quizz_item_solution-success img {
  left: 0;
}
.quizz_item_solution-gray {
  background: #97a1bb;
}
.quizz_item_solution-gray img {
  right: 0;
}
@media (min-width: 700px) {
  .quizz_item_explanation {
    max-width: 42rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 16rem);
  }
}
.quizz_explanation {
  width: 100%;
  background: #fff;
  border-radius: 5px;
}
.quizz_explanation_image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.quizz_explanation_content {
  padding: 2rem;
}
@media (min-width: 700px) {
  .quizz_explanation_content {
    padding: 2rem 3rem;
  }
}
.quizz_explanation_content p {
  font-size: 1rem;
  color: #141a48;
  line-height: 1.4;
}
.quizz_explanation_content p:first-of-type {
  color: #78cb46;
}
.quizz_explanation_content div {
  font-size: 0.9rem;
  color: #141a48;
  line-height: 1.4;
}
.quizz_explanation_content h2 {
  color: #141a48;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 1rem 0;
  padding-top: 1rem;
}
.quizz_explanation_btn {
  padding: 0 2rem 2rem;
}
@media (min-width: 700px) {
  .quizz_explanation_btn {
    padding: 0 3rem 3rem;
  }
}
.quizz_explanation_btn div {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 320px) {
  .quizz_explanation_btn div {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 700px) {
  .quizz_explanation_btn div {
    gap: 6rem;
  }
}
.quizz_explanation_btn div.firstStep {
  display: flex;
  justify-content: end;
}
.quizz_explanation_btn_prev {
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #97a1bb;
  color: #97a1bb;
}
.quizz_explanation_btn_next {
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #78cb46;
  border: 1px solid #78cb46;
}
.quizz_explanation_btn_next.firstStep {
  width: 15rem;
}
.quizz_item_explanation-headband .quizz_explanation_img {
  position: relative;
}
.quizz_item_explanation-headband .quizz_explanation_shape {
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
}
.quizz_item_explanation-headband .quizz_explanation_image {
  aspect-ratio: auto;
  border-radius: 5px 5px 0 0;
}
.quizz_item_explanation-headband .quizz_explanation_content {
  padding: 1rem 2rem 2rem;
}
.quizz_item_explanation-horizontal {
  margin-top: 2rem;
}
.quizz_item_explanation-horizontal .quizz_explanation_img {
  align-items: end;
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
}
@media (min-width: 700px) {
  .quizz_item_explanation-horizontal .quizz_explanation_img {
    padding: 1rem 3rem;
  }
}
.quizz_item_explanation-horizontal .quizz_explanation_image {
  aspect-ratio: auto;
}
.quizz_item_explanation-horizontal .quizz_explanation_image-zoom {
  display: none;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quizz_item_explanation-horizontal .quizz_explanation_image-zoom:hover {
  transform: scale(1.1);
}
@media (min-width: 1000px) {
  .quizz_item_explanation-horizontal .quizz_explanation_image-zoom {
    background: #141a48;
    border-radius: 0 5px 0 5px;
    cursor: pointer;
    display: block;
    height: 3rem;
    padding: 0.8rem;
    position: absolute;
    width: 3rem;
  }
}
.quizz_item_explanation-horizontal .quizz_explanation_content,
.quizz_item_explanation-horizontal .quizz_explanation_btn {
  transform: translateY(-2rem);
}
@media (min-width: 700px) {
  .quizz_item_explanation-horizontal .quizz_explanation_content,
.quizz_item_explanation-horizontal .quizz_explanation_btn {
    transform: translateY(-4rem);
  }
}
@media (min-width: 700px) {
  .quizz_item_explanation-horizontal .quizz_explanation_content {
    padding: 2rem 6rem;
  }
}
.quizz_item_explanation-horizontal .quizz_explanation_btn {
  padding-bottom: unset;
}
@media (min-width: 700px) {
  .quizz_item_explanation-horizontal .quizz_explanation_btn {
    padding: 0 6rem 0;
  }
}
.quizz_item_explanation-vertical-left {
  max-width: 52rem;
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-left .quizz_explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 3rem;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    align-items: center;
  }
}
.quizz_item_explanation-vertical-left .quizz_explanation_img {
  align-items: end;
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 0;
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-left .quizz_explanation_img {
    padding: unset;
    grid-column: 1/2;
    grid-row: 1/2;
  }
}
.quizz_item_explanation-vertical-left .quizz_explanation_image-zoom {
  display: none;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quizz_item_explanation-vertical-left .quizz_explanation_image-zoom:hover {
  transform: scale(1.1);
}
@media (min-width: 1000px) {
  .quizz_item_explanation-vertical-left .quizz_explanation_image-zoom {
    background: #141a48;
    border-radius: 0 5px 0 5px;
    cursor: pointer;
    display: block;
    height: 3rem;
    padding: 0.8rem;
    position: absolute;
    width: 3rem;
  }
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-left .quizz_explanation_content {
    padding: unset;
    grid-column: 2/3;
  }
}
.quizz_item_explanation-vertical-left .quizz_explanation_btn {
  padding: 0.75rem 2rem 2rem;
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-left .quizz_explanation_btn {
    padding: 0.75rem 3rem 3rem;
  }
  .quizz_item_explanation-vertical-left .quizz_explanation_btn div {
    gap: 3rem;
  }
}
.quizz_item_explanation-video .quizz_explanation_img {
  padding: 2rem 2rem 0;
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_explanation-video .quizz_explanation_img {
    padding: 3rem 3rem 0;
  }
}
.quizz_item_explanation-video .plyr {
  border-radius: 5px;
}
@media (min-width: 700px) {
  .quizz_item_explanation-video .quizz_explanation_content {
    padding: 2rem 6rem;
  }
}
@media (min-width: 700px) {
  .quizz_item_explanation-video .quizz_explanation_btn {
    padding: 0 6rem 3rem;
  }
}
.quizz_item_explanation-vertical-right {
  max-width: 52rem;
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-right .quizz_explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 3rem;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    align-items: center;
  }
}
.quizz_item_explanation-vertical-right .quizz_explanation_img {
  align-items: end;
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 0;
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-right .quizz_explanation_img {
    padding: unset;
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
.quizz_item_explanation-vertical-right .quizz_explanation_image-zoom {
  display: none;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quizz_item_explanation-vertical-right .quizz_explanation_image-zoom:hover {
  transform: scale(1.1);
}
@media (min-width: 1000px) {
  .quizz_item_explanation-vertical-right .quizz_explanation_image-zoom {
    background: #141a48;
    border-radius: 0 5px 0 5px;
    cursor: pointer;
    display: block;
    height: 3rem;
    padding: 0.8rem;
    position: absolute;
    width: 3rem;
  }
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-right .quizz_explanation_content {
    padding: unset;
    grid-column: 1/2;
  }
}
.quizz_item_explanation-vertical-right .quizz_explanation_btn {
  padding: 0.75rem 2rem 2rem;
}
@media (min-width: 700px) {
  .quizz_item_explanation-vertical-right .quizz_explanation_btn {
    padding: 0.75rem 3rem 3rem;
  }
  .quizz_item_explanation-vertical-right .quizz_explanation_btn div {
    gap: 3rem;
  }
}
.quizz_item_explanation-video .quizz_explanation_img {
  padding: 2rem 2rem 0;
  position: relative;
}
@media (min-width: 700px) {
  .quizz_item_explanation-video .quizz_explanation_img {
    padding: 3rem 3rem 0;
  }
}
.quizz_item_explanation-video object {
  width: 100%;
  height: 100%;
}
.quizz_item_explanation-video .plyr {
  border-radius: 5px;
}
@media (min-width: 700px) {
  .quizz_item_explanation-video .quizz_explanation_content {
    padding: 2rem 6rem;
  }
}
@media (min-width: 700px) {
  .quizz_item_explanation-video .quizz_explanation_btn {
    padding: 0 6rem 3rem;
  }
}
.quizz_item_explanation-3d .quizz_explanation {
  position: relative;
}
.quizz_item_explanation-3d .quizz_tree_1 {
  display: none;
}
@media (min-width: 700px) {
  .quizz_item_explanation-3d .quizz_tree_1 {
    display: block;
    width: 8rem;
    position: absolute;
    bottom: 5rem;
    left: -5rem;
  }
}
.quizz_item_explanation-3d .quizz_tree_2 {
  display: none;
}
@media (min-width: 700px) {
  .quizz_item_explanation-3d .quizz_tree_2 {
    display: block;
    width: 12rem;
    position: absolute;
    bottom: 5rem;
    right: -8rem;
  }
}
@media (min-width: 700px) {
  .quizz_item_explanation-3d .quizz_explanation_content {
    padding: 3rem 3rem 4rem;
  }
  .quizz_item_explanation-3d .quizz_explanation_content h2 {
    margin: 2rem 0;
  }
}
.quizz_item_result {
  margin-right: auto;
  margin-left: auto;
  max-width: 32rem;
}
@media (min-width: 700px) {
  .quizz_item_result {
    min-height: calc(100vh - 16rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.quizz_item_result_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quizz_item_result_content > p {
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.4;
}
.quizz_item_result_content > p:first-of-type {
  color: #78cb46;
}
.quizz_item_result_content h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 1rem 0;
}
.quizz_item_result_progress {
  width: 100%;
  margin: 2rem 0 4rem;
}
@media (min-width: 700px) {
  .quizz_item_result_progress {
    margin-bottom: 6rem;
  }
}
.quizz_item_result_progress > p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.quizz_item_result_progress div {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  position: relative;
  background: linear-gradient(to right, rgba(44, 218, 161, 0.25), rgba(49, 127, 226, 0.25));
}
.quizz_item_result_progress div span {
  display: block;
  height: 40px;
  border-radius: 5px;
  width: 80%;
  background: linear-gradient(to right, #2cdaa1, #317fe2);
}
.quizz_item_result_progress div p {
  font-size: 0.9rem;
  font-weight: 700;
  position: absolute;
  left: 1rem;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.quizz_item_result .quizz_item_result_btn {
  width: 100%;
  display: grid;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.quizz_item_result .quizz_item_result_btn a {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.quizz_item_result .quizz_item_result_btn a svg {
  width: 1rem;
  height: 1rem;
  transform: translateY(0.2rem);
}
.quizz_item_result .quizz_item_result_simple {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .quizz_item_result .quizz_item_result_simple a {
    max-width: 16rem;
    justify-self: center;
  }
}
.quizz_item_result .quizz_item_result_duo {
  grid-template-columns: 1fr 1fr;
}
.quizz_item_msg {
  padding-bottom: 4rem;
}
@media (min-width: 1000px) {
  .quizz_item_msg {
    padding-bottom: unset;
    max-width: 80rem;
    margin: 0 auto;
    height: calc(100vh - 20rem);
    min-height: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.quizz_item_msg h2 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
@media (min-width: 1000px) {
  .quizz_item_msg h2 {
    text-align: center;
    margin-bottom: 2rem;
  }
}
.quizz_item_msg_items {
  z-index: 1;
  margin: 2rem 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1000px) {
  .quizz_item_msg_items {
    margin: unset;
    gap: 0;
    width: 90%;
    max-width: 72rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.quizz_item_msg_item {
  position: relative;
}
@media (min-width: 1000px) {
  .quizz_item_msg_item {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .quizz_item_msg_item.active {
    opacity: 1;
    visibility: visible;
  }
  .quizz_item_msg_item.hide {
    opacity: 0;
    visibility: hidden;
  }
  .quizz_item_msg_item.more:nth-of-type(3) {
    transition-delay: 4s;
  }
  .quizz_item_msg_item.more:nth-of-type(4) {
    transition-delay: 4.5s;
  }
  .quizz_item_msg_item:nth-of-type(2) {
    transition-delay: 1s;
  }
  .quizz_item_msg_item:nth-of-type(3) {
    transition-delay: 1.5s;
  }
  .quizz_item_msg_item:nth-of-type(4) {
    transition-delay: 2s;
  }
  .quizz_item_msg_item:nth-of-type(5) {
    transition-delay: 2.5s;
  }
  .quizz_item_msg_item:nth-of-type(6) {
    transition-delay: 3s;
  }
  .quizz_item_msg_item:nth-of-type(7) {
    transition-delay: 3.5s;
  }
  .quizz_item_msg_item:nth-of-type(8) {
    transition-delay: 4s;
  }
  .quizz_item_msg_item:nth-of-type(9) {
    transition-delay: 4.5s;
  }
}
@media (min-width: 1000px) {
  .quizz_item_msg_item {
    max-width: 20rem;
  }
}
@media (min-width: 1000px) {
  .quizz_item_msg_item:nth-of-type(odd) {
    top: -6rem;
    left: 2rem;
  }
}
.quizz_item_msg_item:nth-of-type(odd) p {
  background: #fff;
  color: #141a48;
  padding: 1.5rem 1.5rem 1.5rem 6rem;
}
@media (min-width: 1000px) {
  .quizz_item_msg_item:nth-of-type(odd) p {
    padding: 1.5rem;
  }
}
.quizz_item_msg_item:nth-of-type(odd) svg {
  right: 2rem;
}
.quizz_item_msg_item:nth-of-type(odd) svg path {
  fill: #fff;
}
.quizz_item_msg_item:nth-of-type(odd) img {
  left: 1.5rem;
}
@media (min-width: 1000px) {
  .quizz_item_msg_item:nth-of-type(even) {
    top: 0;
    right: 0;
  }
}
.quizz_item_msg_item:nth-of-type(even) p {
  background: #78cb46;
  padding: 1.5rem 6rem 1.5rem 1.5rem;
}
@media (min-width: 1000px) {
  .quizz_item_msg_item:nth-of-type(even) p {
    padding: 1.5rem;
  }
}
.quizz_item_msg_item:nth-of-type(even) svg {
  left: 2rem;
}
.quizz_item_msg_item:nth-of-type(even) img {
  right: 1.5rem;
}
.quizz_item_msg_item p {
  width: 100%;
  border-radius: 5px;
}
.quizz_item_msg_item svg {
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(180deg);
  display: block;
  position: absolute;
  bottom: -1rem;
}
.quizz_item_msg_item img {
  width: 3rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 1000px) {
  .quizz_item_msg_item img {
    display: none;
  }
}
.quizz_item_msg > img {
  width: 80%;
  max-width: 30rem;
  display: block;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .quizz_item_msg > img {
    width: 100%;
  }
}
.quizz_item_msg .quizz_item_btn div {
  max-width: 42rem;
  gap: 1rem;
}
@media (min-width: 1000px) {
  .quizz_item_msg .quizz_item_btn div {
    gap: 12rem;
  }
}
.quizz_item_msg .quizz_item_btn div button {
  width: 100%;
}
.quizz_item_msg .quizz_item_btn div button:only-child {
  grid-column: 2/3;
  justify-self: flex-end;
}

:root {
  --plyr-color-main: #78cb46;
}

.quizz_step_text {
  color: #141a48;
}

.quiz_header_btns {
  width: 100%;
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}

.quiz_header_btn {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
}
.quiz_header_btn_infos {
  background-color: rgba(159, 159, 159, 0.54);
}
.quiz_header_btn_infos p {
  color: rgba(255, 255, 255, 0.51);
}
.quiz_header_btn_infos p span {
  color: #fff;
}
.quiz_header_btn_leave {
  background-color: rgba(77, 77, 77, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.51);
  color: #fff;
}
.quiz_header_btn_leave img {
  width: 1rem;
}
.quiz_header_btn.running_out_of_time {
  background-color: #cb4646;
}

.competition-modal h3 {
  font-size: 2rem;
}
.competition-modal h3:nth-of-type(2) {
  margin-bottom: 1rem;
}
.competition-modal h4 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.competition-modal .competition_bloc {
  margin: 2rem 0;
}
.competition-modal .competition_bloc ul {
  font-size: 0.9rem;
  color: #97a1bb;
  line-height: 1.4;
  list-style: disc inside;
}

.competition_results {
  width: 100%;
  justify-content: center;
  display: flex;
  gap: 1rem;
}
@media (max-width: 699px) {
  .competition_results {
    flex-direction: column;
    align-items: center;
  }
}
.competition_results_btn {
  border-radius: 5px;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: grid;
  width: 60%;
  grid-template-columns: 1fr 4fr;
  background-image: url(/images/competition_results_background.png?f80487db9a5d34a086a23a8c30cad3e8);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 499px) {
  .competition_results_btn {
    width: 100%;
  }
}
@media (min-width: 700px) {
  .competition_results_btn {
    width: 33%;
  }
}
.competition_results_btn img {
  width: 2rem;
}
.competition_results_btn p {
  margin-top: 0 !important;
}
.competition_results_btn span {
  padding: 0 !important;
  font-size: 1.2rem !important;
}
.competition_results_btn_large {
  background-image: url(/images/competition_results_background_large.png?559244e5ff9dddd075279b88959d5688);
}
.competition_results_container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  justify-content: center;
  align-items: center;
  margin: auto;
}
@media (min-width: 1000px) {
  .competition_results_container {
    width: 60vw;
  }
}
.competition_results_container h4 {
  color: #78cb46;
  margin-bottom: 1rem;
}
.competition_results_container h2 {
  font-size: 2rem;
}
.competition_results_container h3 {
  font-size: 1.5rem;
}
.competition_results_container_title {
  width: 100%;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1rem;
}
.competition_results_container_btns {
  justify-content: center;
  display: flex;
  gap: 2rem;
}
@media (max-width: 699px) {
  .competition_results_container_btns {
    flex-direction: column;
  }
}
.competition_results_container_btns .competition_results_btn {
  display: flex;
  gap: 3rem;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2rem 3rem;
}
.competition_results_container_header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.competition_results_container .btn_primary {
  gap: 1.5rem;
  border-radius: 5px;
}

.competition_intro {
  top: 20%;
  gap: 2rem;
}
.competition_intro_title {
  font-size: 2rem;
  font-weight: 400;
}
.competition_intro_content {
  background: rgba(8, 10, 46, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  gap: 2rem;
  border-radius: 10px;
}
.competition_intro .competition_go_btn {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.competition_intro .competition_go_btn button {
  width: 30%;
}
.competition_intro ul {
  list-style: disc inside;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 999px) {
  #competition_container .quizz_header {
    display: grid;
    grid-template-columns: 1fr 4fr;
    height: auto;
  }
  #competition_container .quizz_header_timeline {
    width: auto;
  }
  #competition_container .quiz_header_btns {
    grid-column: 1/3;
    grid-row: 2;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  #competition_container .quizz_header {
    gap: 0;
  }
  #competition_container .quizz_header_logo {
    grid-column: 1/2;
    grid-row: 1;
  }
  #competition_container .quizz_header_timeline {
    grid-column: 2/3;
    grid-row: 1;
  }
}
@media (max-width: 699px) {
  #competition_container .quizz_header_timeline {
    grid-column: 1/3;
    grid-row: 1;
  }
  #competition_container .quizz_header .quiz_header_btns {
    flex-direction: column;
    gap: 1rem;
  }
}

.btn-celebrate {
  background-color: #78cb46;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.btn-celebrate i {
  background: #cb4646;
  display: block;
  height: 8px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 3px;
  z-index: -1;
}

@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.auth {
  width: 100vw;
  min-height: 100vh;
  background: center/cover no-repeat url(/images/quiz.jpg?850bcd8dcb6d9551410821db5f0cca6b);
  padding: 2rem;
}
@media (min-width: 500px) {
  .auth {
    padding: 3rem;
  }
}
@media (min-width: 1000px) {
  .auth {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}
@media (min-width: 1200px) {
  .auth {
    -moz-column-gap: 5rem;
         column-gap: 5rem;
  }
}
.auth_logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 500px) {
  .auth_logo {
    max-width: 28rem;
    margin: 0 auto;
  }
}
@media (min-width: 1000px) {
  .auth_logo {
    max-width: unset;
    margin: unset;
    grid-column: 1/3;
  }
}
.auth_logo img {
  width: 7.5rem;
}
.auth_fox {
  display: none;
}
@media (min-width: 1000px) {
  .auth_fox {
    display: initial;
    justify-self: end;
    align-self: center;
    position: relative;
  }
}
@media (min-width: 1000px) {
  .auth_fox img {
    width: 100%;
    max-width: 40rem;
  }
}
@media (min-width: 1000px) {
  .auth_fox .eye {
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: #111111;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .auth_fox .eye-left {
    top: 30%;
    left: 34%;
    transform: rotate(-15deg);
  }
  .auth_fox .eye-right {
    top: 30%;
    left: 41%;
    transform: rotate(15deg);
  }
  .auth_fox .eye span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #253084;
    position: absolute;
    top: 20%;
    left: 20%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .auth_fox .eye-password {
    transform: scaleY(0.3);
  }
  .auth_fox .eye-password span {
    opacity: 0;
  }
}
.auth_form {
  margin-top: 2rem;
}
@media (min-width: 500px) {
  .auth_form {
    max-width: 28rem;
    margin: 3rem auto 0;
  }
}
@media (min-width: 1000px) {
  .auth_form {
    align-self: center;
    justify-self: center;
    margin: unset;
    max-width: 32rem;
    width: 100%;
  }
}
.auth_form_fox-message {
  background: #97a1bb;
  border-radius: 5px;
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  padding: 1rem;
}
.auth_form_fox-message_close-icon {
  align-self: flex-end;
}
.auth_form_fox-message_close-icon img {
  height: 15px;
  width: 15px;
}
.auth_form_fox-message svg {
  display: none;
}
.auth_form_fox-message_1 {
  margin-bottom: 1rem;
}
@media (min-width: 1000px) {
  .auth_form_fox-message {
    background: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    right: 50%;
    top: 8%;
  }
  .auth_form_fox-message_close-icon {
    display: none;
  }
  .auth_form_fox-message div {
    background: #fff;
    border-radius: 5px;
    color: #141a48;
    line-height: 1.45;
    max-width: 25rem;
    min-width: 25rem;
    padding: 1rem;
  }
  .auth_form_fox-message div svg {
    display: block;
    height: 2.5rem;
    left: 2rem;
    position: absolute;
    transform: rotate(180deg);
  }
  .auth_form_fox-message_1 {
    min-height: 5rem;
    max-height: 5rem;
  }
  .auth_form_fox-message_1 svg {
    top: 5rem;
  }
  .auth_form_fox-message_1._3 {
    margin-top: 10rem;
  }
  .auth_form_fox-message_1._3 svg {
    top: 15rem;
  }
  .auth_form_fox-message_2 {
    min-height: 6.75rem;
    max-height: 6.75rem;
  }
  .auth_form_fox-message_2 svg {
    top: 13.85rem;
  }
}
.auth_form_title {
  background: center/cover no-repeat url(/images/login.jpg?7d61042112103a990667b8b564ccc52b);
  border-radius: 5px 5px 0 0;
  padding: 1.5rem;
}
@media (min-width: 500px) {
  .auth_form_title {
    padding: 2rem;
  }
}
@media (min-width: 1000px) {
  .auth_form_title {
    padding: 3rem;
  }
}
.auth_form_title h1 {
  font-size: 1.8rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .auth_form_title h1 {
    font-size: 2.1rem;
  }
}
.auth_form_title h2 {
  font-size: 1rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .auth_form_title h2 {
    font-size: 1.4rem;
  }
}
.auth_form_title .error {
  color: #cb4646;
}
.auth_form_title p {
  color: #97a1bb;
  font-size: 0.9rem;
}
@media (min-width: 1000px) {
  .auth_form_title p {
    font-size: 1rem;
    margin-top: 0.25rem;
  }
}
.auth_form_content {
  background: #242952;
  border-radius: 0 0 5px 5px;
  padding: 1.5rem;
}
@media (min-width: 500px) {
  .auth_form_content {
    padding: 2rem;
  }
}
@media (min-width: 1000px) {
  .auth_form_content {
    padding: 3rem;
  }
}
.auth_form_content div h2 span {
  color: #a3a6b4;
}
@media (min-width: 500px) {
  .auth_form_content div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.auth_form_content div p {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
@media (min-width: 500px) {
  .auth_form_content div p {
    margin-top: unset;
  }
}
@media (min-width: 1000px) {
  .auth_form_content div p {
    font-size: 0.9rem;
  }
}
.auth_form_content div p a {
  color: #78cb46;
  text-decoration: underline;
}
.auth_form_content form {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 500px) {
  .auth_form_content form {
    margin-top: 2rem;
  }
}
@media (min-width: 1000px) {
  .auth_form_content form {
    gap: 1rem;
  }
}
.auth_form_content form input:not([type=submit], [type=checkbox]) {
  width: 100%;
  background: #2f325e;
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem;
  border: 1px solid #44498b;
  border-radius: 5px;
  color: #fff;
  transition: padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .auth_form_content form input:not([type=submit], [type=checkbox]) {
    padding: 1rem;
  }
}
.auth_form_content form input:not([type=submit], [type=checkbox]):-webkit-autofill, .auth_form_content form input:not([type=submit], [type=checkbox]):-webkit-autofill:hover, .auth_form_content form input:not([type=submit], [type=checkbox]):-webkit-autofill:focus, .auth_form_content form input:not([type=submit], [type=checkbox]):-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 60px #2f325e inset !important;
  background-color: #2f325e !important;
  background-clip: content-box !important;
  -webkit-text-fill-color: #fff !important;
}
.auth_form_content form input:not([type=submit], [type=checkbox])::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  position: absolute;
  right: 0;
}
.auth_form_content form input:not([type=submit], [type=checkbox]).is-invalid {
  border-color: #cb4646;
}
.auth_form_content form input:not([type=submit], [type=checkbox]):focus {
  border: 1px solid #fff;
}
.auth_form_content form > a {
  color: #78cb46;
  font-size: 0.8rem;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
@media (min-width: 1000px) {
  .auth_form_content form > a {
    font-size: 0.9rem;
  }
}
.auth_form_content form p {
  font-size: 0.9rem;
  text-align: center;
}
.auth_form_content form p a {
  color: #fff;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  text-decoration: underline;
}
.auth_form_content form .p-group {
  text-align: start;
}
.auth_form_content form .p-group a {
  margin: 0;
}
.auth_form_content form .terms_and_policy {
  margin-top: 2rem;
}
.auth_form_content form input[type=submit], .auth_form_content form input[type=button] {
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #78cb46;
  border: 1px solid #78cb46;
  margin-top: 0.75rem;
}
@media (min-width: 500px) {
  .auth_form_content form input[type=submit], .auth_form_content form input[type=button] {
    margin-top: 1rem;
  }
}
.auth_form_content form input[type=submit][disabled], .auth_form_content form input[type=button][disabled] {
  background: #97a1bb;
  border: 1px solid #97a1bb;
  cursor: not-allowed;
}
.auth_form_content form select {
  background: #2f325e;
  border: 1px solid #44498b;
  border-radius: 5px;
  padding: 1.5rem;
  width: 100%;
}
.auth_form_content form select option {
  background: #2f325e;
}
.auth_input {
  position: relative;
}
.auth_input.active label {
  font-size: 0.8rem;
  transform: translateY(0.5rem);
  height: auto;
  padding: 0 0.75rem;
}
@media (min-width: 500px) {
  .auth_input.active label {
    transform: translateY(-0.75rem);
  }
}
@media (min-width: 1000px) {
  .auth_input.active label {
    transform: translateY(-0.85rem);
    padding: 0 1rem;
  }
}
.auth_input.active input:not([type=submit]) {
  padding: 1.75rem 0.75rem 0.75rem;
}
@media (min-width: 1000px) {
  .auth_input.active input:not([type=submit]) {
    padding: 2rem 1rem 1rem;
  }
}
.auth_input label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 0 0.75rem 0 0.9rem;
  font-size: 0.9rem;
  color: #97a1bb;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .auth_input label {
    padding: 0 1rem 0 1.15rem;
  }
}
.auth_input_icon {
  position: relative;
}
.auth_input_icon input {
  width: 100%;
}
.auth_input_icon img {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  bottom: 0.85rem;
  right: 1rem;
  cursor: pointer;
}
@media (min-width: 1000px) {
  .auth_input_icon img {
    bottom: 1.1rem;
  }
}
.auth_text {
  color: #97a1bb;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
.auth_btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #78cb46;
  border: 1px solid #78cb46;
  margin-top: unset;
}
.auth_error {
  color: #cb4646;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.auth_success {
  color: #46cb6a;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.auth_status {
  color: #97a1bb;
  line-height: 1.4;
}
.auth_single .auth_back {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.auth_single .auth_back img {
  width: 0.75rem;
  height: 0.75rem;
  transform: translateY(1px);
}
@media (min-width: 1000px) {
  .auth_single .auth_form {
    grid-column: 1/3;
    justify-self: center;
  }
}
.auth_single .auth_form_content form {
  margin-top: unset;
}
.auth_single .auth_form_content form input[type=submit] {
  width: 100%;
  max-width: 18em;
}
.auth_onboarding .auth_form_content > p {
  font-size: 0.9rem;
}
.auth_onboarding .auth_form_content form > p {
  color: #97a1bb;
}
.auth_onboarding .auth_form_content form input[type=submit] {
  margin-left: auto;
  max-width: 10rem;
}
.auth .select {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  margin-top: 1rem;
}
.auth .select .label_select {
  color: #141a48;
  margin-bottom: 0.5rem;
}
.auth .select img {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 1.5rem;
  right: 2rem;
}
.auth .select .select-field input,
.auth .select .select-field label,
.auth .select .select-field input:checked ~ .select-placeholder {
  display: none;
}
.auth .select .select-field input:checked + label,
.auth .select .select-field .select-placeholder {
  display: block;
}
.auth .select .select-field label {
  width: 100%;
  padding: 1.25rem 3.5rem 1.25rem 1.5rem;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  white-space: pre-wrap;
  line-height: 1.2;
}
.auth .select .select-field label img {
  width: 1rem;
  height: 1rem;
  float: right;
}
.auth .select .select-options {
  animation-fill-mode: both;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background: #242952;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 0 0 10px 10px;
  width: 100%;
  border-top: unset;
  max-height: 12rem;
  overflow-y: scroll;
  padding: 1rem 0;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 500px) {
  .auth .select .select-options {
    flex-direction: column;
    align-items: flex-start;
  }
}
.auth .select .select-options::-webkit-scrollbar {
  display: none;
}
.auth .select .select-options-above {
  z-index: 1;
}
.auth .select .select-options label {
  display: block;
  cursor: pointer;
  font-weight: 400;
  padding: 0.5rem 1.5rem;
  white-space: pre-line;
  line-height: 1.2;
  width: 100%;
}
.auth .select .select-options label:hover {
  background: #141a48;
}
.auth .select .select-options-focus {
  position: absolute;
  opacity: 0;
}
.auth .select .show-options {
  opacity: 1;
  visibility: visible;
}
.auth_lang {
  position: relative;
}
.auth_lang.active div {
  background: #676b72;
}
.auth_lang.active div img:last-of-type {
  transform: rotate(-180deg);
}
.auth_lang.active ul {
  opacity: 1;
  visibility: visible;
}
.auth_lang div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 1rem;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 700px) {
  .auth_lang div {
    padding: 1.25rem;
  }
}
.auth_lang div img {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 700px) {
  .auth_lang div img {
    width: 1rem;
    height: 1rem;
  }
}
.auth_lang ul {
  width: 100%;
  position: absolute;
  top: 3.2rem;
  left: 0;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 1rem;
  border-radius: 5px;
  display: grid;
  gap: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 700px) {
  .auth_lang ul {
    top: 3.7rem;
    padding: 1.25rem;
  }
}
.auth_lang ul li {
  text-align: center;
  cursor: pointer;
}
.auth_register .auth_form_content input.js-password {
  padding-right: 5rem;
}
.auth_register .auth_form_content input#invitation_token {
  padding-right: 2.5rem;
}
.auth_register .js-eye {
  right: 3rem;
}
.auth_register .js-password_info:hover + .auth_password_info {
  opacity: 1;
  visibility: visible;
}
.auth_register .auth_password_info {
  width: 80%;
  position: absolute;
  top: 90%;
  right: 0;
  background: #141a48;
  border: 1px solid #080a2e;
  z-index: 10;
  padding: 1rem;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.auth_register .auth_password_info p {
  margin-top: unset;
  font-size: 0.9rem;
}

#modal-register-locale .auth_lang {
  justify-content: center;
}
#modal-register-locale .auth_lang div,
#modal-register-locale .auth_lang ul {
  background-color: #fff;
  border: 1px solid #141a48;
  width: 60%;
  justify-content: center;
}
#modal-register-locale .auth_lang div {
  margin-top: 0;
}
#modal-register-locale .auth_lang div p {
  color: #141a48;
}
#modal-register-locale .auth_lang ul {
  color: #141a48;
  left: unset;
}
@media (min-width: 700px) {
  #modal-register-locale .auth_lang div,
#modal-register-locale .auth_lang ul {
    width: 30%;
  }
}

#confirm-locale {
  color: #fff;
  background: #78cb46;
  border: 1px solid #78cb46;
}

.foreground_lang {
  z-index: 20;
}

.alert_container {
  margin-bottom: 2rem;
}

.alert {
  align-items: center;
  border-radius: 10px;
  display: flex;
  font-size: 0.9rem;
  justify-content: space-between;
  padding: 1rem 2rem;
  width: 100%;
}

.close-alert {
  font-weight: bold;
}
.close-alert:hover {
  cursor: pointer;
  transform: scale(1.25);
}

.alert_error {
  background: #cb4646;
}
.alert_error:not(:last-of-type) {
  margin-bottom: 1rem;
}
.alert_error:last-of-type {
  margin-bottom: 2rem;
}
.alert_error img {
  width: 0.9rem;
}

.alert_success {
  background: #78cb46;
  margin-bottom: 2rem;
}

.entreprise {
  padding: 4rem 0;
}
.entreprise_container {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .entreprise_container {
    grid-template-columns: 28rem 1fr;
    align-items: flex-start;
  }
  .entreprise_container_reverse {
    grid-template-columns: 1fr 28rem;
  }
}
.entreprise .col-1 {
  margin-bottom: 2rem;
}

.col-2 {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 1200px) {
  .col-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.col-3 {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1200px) {
  .col-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1400px) {
  .col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.entreprise_header {
  padding-bottom: 2rem;
}
.entreprise_header h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.entreprise_header ul {
  width: 100%;
  position: relative;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: pointer;
  padding-bottom: 1rem;
}
.entreprise_header ul::-webkit-scrollbar {
  height: 4px;
}
.entreprise_header ul::-webkit-scrollbar-track {
  background: #141a48;
  border-radius: 10px;
}
.entreprise_header ul::-webkit-scrollbar-thumb {
  background: #78cb46;
  border-radius: 10px;
}
.entreprise_header ul.grab {
  cursor: grab;
}
.entreprise_header ul li {
  display: inline-block;
}
.entreprise_header ul li:not(:last-of-type) {
  margin-right: 1rem;
}
.entreprise_header p.title {
  color: #78cb46;
}

.entreprise_card {
  width: 100%;
  background: #141a48;
  border-radius: 10px;
  padding: 5rem 2rem 2rem 2rem;
  position: relative;
}
.entreprise_card_banner {
  width: 100%;
  height: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px 10px 0 0;
  background: #353a66;
}
.entreprise_card_logo {
  width: 10rem;
  height: 10rem;
  background: #080a2e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 auto 1.5rem;
}
.entreprise_card_logo img {
  width: 6rem;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.entreprise_card_photo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 auto 1.5rem;
}
.entreprise_card_photo img {
  width: 10rem;
  height: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.entreprise_card_mission p {
  text-align: center;
}
.entreprise_card_mission p:last-of-type {
  width: 100%;
  margin-top: 1rem;
}
.entreprise_card_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entreprise_card_list:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.entreprise_card_overtitle {
  color: #78cb46;
  text-align: center;
  margin-bottom: 0.5rem;
}
.entreprise_card_subtitle {
  font-weight: 700;
}
.entreprise_card_infos p {
  margin-bottom: 0.25rem;
}
.entreprise_card_infos p:first-of-type {
  margin-bottom: 1rem;
}
.entreprise_card_infos p:last-of-type {
  margin-bottom: 0;
}
.entreprise_card h2 {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
.entreprise_card span {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(151, 161, 187, 0.25);
  margin: 1.5rem 0;
  border-radius: 10px;
}
.entreprise_card ul {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.entreprise_card ul li img {
  width: 100%;
}

.entreprise_add {
  width: 100%;
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
@media (min-width: 1400px) {
  .entreprise_add {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
}
@media (min-width: 1400px) {
  .entreprise_add div {
    padding-right: 2rem;
  }
}
.entreprise_add p {
  text-align: center;
}
.entreprise_add p:first-of-type {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
@media (min-width: 1400px) {
  .entreprise_add p:first-of-type {
    font-size: 2.6rem;
  }
}
.entreprise_add p:last-of-type {
  text-transform: uppercase;
}
.entreprise_add .btn {
  width: 100%;
  margin-top: 1rem;
}
@media (min-width: 1400px) {
  .entreprise_add .btn {
    margin-top: 0rem;
    white-space: nowrap;
  }
}
.entreprise_number {
  width: 100%;
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
.entreprise_number div {
  width: 10rem;
  height: 10rem;
  border: 2px solid #78cb46;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.entreprise_number div p {
  font-size: 1.6rem;
  color: #fff;
}
.entreprise_number p {
  text-align: center;
  color: #97a1bb;
}
.entreprise_number h3 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin: 1rem 0 0.5rem;
}

.entreprise_employes {
  width: 100%;
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.entreprise_employes_searches {
  display: grid;
  grid-template-columns: 1fr 3rem;
  gap: 1rem;
}
@media (min-width: 1400px) {
  .entreprise_employes_searches {
    grid-template-columns: 1fr 1fr;
  }
  .entreprise_employes_searches .search {
    width: 22rem;
  }
}
.entreprise_employes_filter {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  background: #080a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.entreprise_employes_filter img {
  width: 1rem;
}
.entreprise_employes_filter ul {
  position: absolute;
  top: 4rem;
  right: 0;
  background: #fff;
  border-radius: 10px;
  color: #141a48;
  padding: 1.5rem;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.7, 0, 0.3, 1), visibility 0.2s cubic-bezier(0.7, 0, 0.3, 1);
}
.entreprise_employes_filter ul.active {
  opacity: 1;
  visibility: visible;
}
.entreprise_employes_filter ul img {
  position: absolute;
  width: 1rem;
  top: -0.6rem;
  right: 1rem;
}
.entreprise_employes_filter ul li:not(:last-of-type) {
  margin-bottom: 1rem;
}
.entreprise_employes_filter ul li label {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  position: relative;
  white-space: nowrap;
}
.entreprise_employes_filter ul li label span {
  display: block;
  float: left;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border: 2px solid #141a48;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.entreprise_employes_filter ul li input:checked + span {
  background: #78cb46;
  border: 2px solid #78cb46;
}
.entreprise_employes_filter ul li input:checked + span + img {
  opacity: 1;
}
.entreprise_employes_filter ul li img {
  opacity: 0;
  width: 10px;
  position: absolute;
  top: 7px;
  left: 5px;
}
.entreprise_employes_filter ul li .hidden {
  display: none;
}
.entreprise_employes_filter-dark {
  background: #141a48;
  width: 3.5rem;
  height: 3.5rem;
}
.entreprise_employes_filter-dark ul {
  top: 4.5rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_button {
    margin-left: auto;
  }
}
.entreprise_employes_button .btn {
  width: 100%;
  margin-top: 1rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_button .btn {
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0;
  }
}
.entreprise_employes_titles {
  display: none;
}
@media (min-width: 1400px) {
  .entreprise_employes_titles {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .entreprise_employes_titles li {
    font-size: 0.9rem;
    color: #97a1bb;
  }
}
.entreprise_employes_list {
  margin-top: 2rem;
}
.entreprise_employes_list li:not(:last-of-type) {
  border-bottom: 1px solid rgba(151, 161, 187, 0.25);
  padding-bottom: 1.5rem;
}
.entreprise_employes_list li:not(:first-of-type) {
  padding-top: 1.5rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_list li {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
  }
}
.entreprise_employes_list li .entreprise_employes_person {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 500px) {
  .entreprise_employes_list li .entreprise_employes_person {
    grid-template-columns: 4rem auto 4rem;
  }
}
@media (min-width: 1200px) {
  .entreprise_employes_list li .entreprise_employes_person {
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0;
  }
}
.entreprise_employes_list li .entreprise_employes_person img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}
@media (min-width: 1400px) {
  .entreprise_employes_list li .entreprise_employes_person div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.entreprise_employes_list li .entreprise_employes_person div p:first-of-type {
  font-size: 1.1rem;
}
.entreprise_employes_list li .entreprise_employes_person div p:last-of-type {
  color: #97a1bb;
}
@media (min-width: 1400px) {
  .entreprise_employes_list li .entreprise_employes_person div p:last-of-type {
    color: #fff;
  }
}
.entreprise_employes_list li .entreprise_employes_person .entreprise_employes_state {
  text-align: right;
  font-size: 0.9rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_list li .entreprise_employes_person .entreprise_employes_state {
    text-align: left;
  }
}
.entreprise_employes_list li .entreprise_employes_person .entreprise_employes_state-actif {
  color: #46cb6a;
}
.entreprise_employes_list li .entreprise_employes_person .entreprise_employes_state-inactif {
  color: #cb4646;
}
.entreprise_employes_list li a {
  width: 100%;
  margin-top: 1rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_list li a {
    width: auto;
    margin-top: 0;
  }
}
.entreprise_employes_pagination {
  margin-top: 2rem;
}
.entreprise_employes_pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .entreprise_employes_pagination ul {
    justify-content: flex-end;
  }
}
.entreprise_employes_pagination ul li:first-of-type a, .entreprise_employes_pagination ul li:last-of-type a {
  background: #141a48;
}
.entreprise_employes_pagination ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 10px;
  background: #fff;
  color: #141a48;
}
.entreprise_employes_pagination ul li a.active {
  background: #78cb46;
  color: #fff;
}
.entreprise_employes_pagination ul li a img {
  width: 1rem;
}

.company_search_user {
  position: relative;
}

.LoaderBalls {
  position: absolute;
  z-index: 4;
  top: 1.25rem;
  right: 2rem;
  width: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.LoaderBalls__item {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f3f4f6;
}
.LoaderBalls__item:nth-child(1) {
  animation: bouncing 0.4s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95);
}
.LoaderBalls__item:nth-child(2) {
  animation: bouncing 0.4s 0.1s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
}
.LoaderBalls__item:nth-child(3) {
  animation: bouncing 0.4s 0.2s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
}

@keyframes bouncing {
  0% {
    transform: translate3d(0, 5px, 0) scale(1.2, 0.85);
  }
  100% {
    transform: translate3d(0, -10px, 0) scale(0.9, 1.1);
  }
}
.company_search_users_list {
  position: absolute;
  z-index: 4;
  top: 3.5rem;
  left: 30%;
  background: #fff;
  padding: 1rem;
  color: #141a48;
  width: 70%;
  border-radius: 10px;
  max-height: 20rem;
  overflow-y: scroll;
}
.company_search_users_list li {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 5px;
  transition: background 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  padding: 0.5rem;
}
.company_search_users_list li:hover {
  background: #efefef;
}
.company_search_users_list li div:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080a2e;
  color: #fff;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
}
.company_search_users_list li div img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.company_search_users_list li div p:last-of-type {
  color: #97a1bb;
  font-size: 0.8rem;
}

@media (min-width: 1000px) {
  .entreprise_doc_search {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .entreprise_doc_search .search {
    max-width: 22rem;
  }
}
.entreprise_doc_search a {
  width: 100%;
  margin-top: 1rem;
}
@media (min-width: 1000px) {
  .entreprise_doc_search a {
    width: auto;
    margin-top: 0;
  }
}
.entreprise_doc_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
}
.entreprise_doc_title h2 {
  font-size: 1.6rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .entreprise_doc_title div {
    display: flex;
    align-items: center;
  }
}
.entreprise_doc_title img {
  display: none;
}
@media (min-width: 1000px) {
  .entreprise_doc_title img {
    display: block;
    width: 1.5rem;
    cursor: pointer;
  }
  .entreprise_doc_title img:first-of-type {
    margin-right: 1rem;
  }
}
.entreprise_doc_item {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .entreprise_doc_item {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
  }
  .entreprise_doc_item.grab {
    cursor: grab;
  }
}
.entreprise_doc_item_element {
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
@media (min-width: 1000px) {
  .entreprise_doc_item_element {
    width: 420px;
    display: inline-block;
    margin-right: 20px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .entreprise_doc_item_element:last-of-type {
    margin-right: 0;
  }
}
.entreprise_doc_item_element h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
  white-space: initial;
}
.entreprise_doc_item_element p {
  color: #97a1bb;
  white-space: initial;
}
.entreprise_doc_item_element p:first-of-type {
  color: #78cb46;
}
.entreprise_doc_item_element > div {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.entreprise_doc_item_element > div a {
  display: flex;
  height: 3rem;
}
.entreprise_doc_item_element > div div {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entreprise_doc_item_element > div div:first-of-type {
  background: #fff;
}
.entreprise_doc_item_element > div div:last-of-type {
  background: #cb4646;
}
.entreprise_doc_item_element > div div img {
  width: 1rem;
}

.add_filter {
  display: flex;
  align-items: center;
}
.add_filter li {
  padding: 1.5rem;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.add_filter li.active {
  background: #141a48;
}

.add_tab {
  display: none;
  padding: 2rem;
  background: #141a48;
  border-radius: 0 10px 10px 10px;
}
@media (min-width: 1000px) {
  .add_tab {
    padding: 4rem;
  }
}
.add_tab.active {
  display: block;
}
.add_tab > div {
  margin-bottom: 2rem;
  position: relative;
}
@media (min-width: 1000px) {
  .add_tab > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.add_tab > div > label {
  display: block;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.add_tab > div > label span {
  display: block;
  font-size: 0.9rem;
  color: #97a1bb;
}
@media (min-width: 1000px) {
  .add_tab > div > label {
    width: 30%;
  }
}
.add_tab > div > input {
  background: #080a2e;
  padding: 1rem 2rem;
  width: 100%;
  border-radius: 10px;
}
.add_tab > div > input::-moz-placeholder {
  color: #97a1bb;
}
.add_tab > div > input:-ms-input-placeholder {
  color: #97a1bb;
}
.add_tab > div > input::placeholder {
  color: #97a1bb;
}
@media (min-width: 1000px) {
  .add_tab > div > input {
    width: 70%;
  }
}
.add_tab .select {
  width: 100%;
  display: inline-block;
}
@media (min-width: 1000px) {
  .add_tab .select {
    width: 70%;
  }
}
.add_tab .select .select-field input,
.add_tab .select .select-field label,
.add_tab .select .select-field input:checked ~ .select-placeholder {
  display: none;
}
.add_tab .select .select-field input:checked + label,
.add_tab .select .select-field .select-placeholder {
  display: block;
}
.add_tab .select .select-field label {
  background: #080a2e;
  padding: 1rem 2rem;
  border-radius: 10px;
}
.add_tab .select .select-options {
  animation-fill-mode: both;
  opacity: 0;
  position: absolute;
  background: #fff;
  color: #141a48;
  border-radius: 10px;
  width: 100%;
}
@media (min-width: 1000px) {
  .add_tab .select .select-options {
    width: 70%;
  }
}
.add_tab .select .select-options label {
  display: block;
  padding: 1rem 2rem;
  position: relative;
}
.add_tab .select .select-options label:hover {
  background: rgba(120, 203, 70, 0.25);
}
.add_tab .select .select-options-focus {
  position: absolute;
  opacity: 0;
}
.add_tab .select .show-options {
  opacity: 1;
  visibility: visible;
}
.add_tab button {
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .add_tab button {
    display: block;
  }
}

.entreprise_defis {
  margin-top: 2rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .entreprise_defis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .entreprise_defis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1400px) {
  .entreprise_defis {
    grid-template-columns: repeat(4, 1fr);
  }
}
.entreprise_defis li {
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
.entreprise_defis li h2 {
  font-size: 1.2rem;
  font-weight: 700;
}
.entreprise_defis li p {
  font-size: 0.9rem;
  color: #97a1bb;
  margin-top: 0.5rem;
}
.entreprise_defis li div {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cb4646;
  margin-left: auto;
  cursor: pointer;
}
.entreprise_defis li div img {
  width: 1rem;
}
.entreprise_defis li.inactive {
  background: #97a1bb;
}
.entreprise_defis li.inactive h2 {
  color: #141a48;
}
.entreprise_defis li.inactive p {
  display: none;
}
.entreprise_defis li.inactive div {
  background: #141a48;
}

.entreprise_classement {
  margin-top: 2rem;
}
.entreprise_classement_number {
  display: grid;
  gap: 2rem;
}
.entreprise_classement_titles {
  display: none;
}
@media (min-width: 1400px) {
  .entreprise_classement_titles {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .entreprise_classement_titles li {
    font-size: 0.9rem;
    color: #97a1bb;
  }
}
.entreprise_classement li {
  display: grid;
  grid-template-columns: 2rem 4rem auto auto;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1400px) {
  .entreprise_classement li {
    gap: 0;
    grid-template-columns: repeat(5, 1fr);
  }
}
.entreprise_classement li:not(:last-of-type) {
  border-bottom: 1px solid rgba(151, 161, 187, 0.25);
  padding-bottom: 1.5rem;
}
.entreprise_classement li:not(:first-of-type) {
  padding-top: 1.5rem;
}
.entreprise_classement .rank {
  width: 2rem;
  color: #97a1bb;
  display: flex;
  justify-content: center;
}
.entreprise_classement .photo {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}
.entreprise_classement .job {
  display: none;
}
@media (min-width: 1400px) {
  .entreprise_classement .job {
    display: block;
  }
}
.entreprise_classement .points {
  display: flex;
  justify-content: flex-end;
}
@media (min-width: 1400px) {
  .entreprise_classement .points {
    display: block;
  }
}

.parameters {
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
@media (min-width: 1000px) {
  .parameters {
    padding: 3rem;
  }
}
@media (min-width: 1400px) {
  .parameters {
    padding: 4rem;
  }
}
.parameters .col-2:last-of-type {
  margin-bottom: 0;
}
.parameters_lang label {
  margin-bottom: 0.75rem;
}
.parameters_btns {
  background: #141a48;
  border-radius: 10px;
  padding: 2rem;
}
@media (min-width: 1000px) {
  .parameters_btns {
    padding: 3rem;
  }
}
@media (min-width: 1400px) {
  .parameters_btns {
    padding: 4rem;
  }
}
.parameters_btns p {
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.parameters_btns input,
.parameters_btns button,
.parameters_btns a {
  width: 100%;
}
.parameters_btns input {
  margin-bottom: 1rem;
}

.company-stats {
  width: 100%;
}
.company-stats__title {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-template-areas: "filter-by-company" "download-stats";
}
@media (min-width: 700px) {
  .company-stats__title {
    margin: 1rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "filter-by-company download-stats";
  }
}
.company-stats__title__filter-by-company {
  grid-area: "filter-by-company";
}
.company-stats__title__download-stats {
  grid-area: "download-stats";
}
.company-stats__title__download-stats a, .company-stats__title__download-stats button {
  width: 100%;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
}
@media (min-width: 700px) {
  .company-stats__title__download-stats {
    justify-self: end;
  }
}
.company-stats__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  grid-template-areas: "access-available" "adoption-rate" "engagement-rate" "carbon-assessment" "training-modules" "training-provided";
  margin: 1rem auto;
}
@media (min-width: 1000px) {
  .company-stats__info {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
    row-gap: 3rem;
    grid-template-areas: "access-available adoption-rate engagement-rate" "carbon-assessment training-modules training-provided";
    margin: 1rem auto;
  }
}
.company-stats__info .card {
  background-clip: content-box, border-box;
  background-image: linear-gradient(#080a2e, #080a2e), radial-gradient(circle at top left, #43f0d9, #0c3c68);
  background-origin: border-box;
  border-radius: 8px;
  border: double 2px transparent;
}
.company-stats__info .card_content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.company-stats__info .card_content h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-right: 1rem;
}
.company-stats__info .card_content img {
  cursor: pointer;
  height: 23px;
  width: 23px;
}
.company-stats__info__access-available {
  grid-area: "access-available";
  border-radius: 5px;
}
.company-stats__info__adoption_rate {
  grid-area: "adoption-rate";
}
.company-stats__info__engagement-rate {
  grid-area: "engagement-rate";
}
.company-stats__info__carbon-assessment {
  grid-area: "carbon-assessment";
}
.company-stats__info__training-modules {
  grid-area: "training-modules";
}
.company-stats__info__training-provided {
  grid-area: "training-provided";
}
.company-stats__desc {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  grid-template-areas: "parent-users-count" "download-stats" "download-certificate";
  margin: 1rem auto;
}
@media (min-width: 1000px) {
  .company-stats__desc {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 3rem;
    grid-template-areas: "parent-users-count download-stats download-certificate";
    margin: 1rem auto 3.5rem auto;
  }
}
.company-stats__desc .card {
  background-clip: content-box, border-box;
  background-image: linear-gradient(#080a2e, #080a2e), radial-gradient(circle at top left, #43f0d9, #0c3c68);
  background-origin: border-box;
  border-radius: 8px;
  border: double 2px transparent;
}
.company-stats__desc .card_content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.32rem 0.75rem;
}
.company-stats__desc .card_content h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-right: 1rem;
}
.company-stats__desc .card_content img {
  cursor: pointer;
  height: 23px;
  width: 23px;
}
.company-stats__desc__parent_users_count {
  grid-area: "parent-users-count";
  border-radius: 5px;
}
.company-stats__desc__download_stats {
  grid-area: "download-stats";
}
.company-stats__desc__download-certificate {
  grid-area: "download-certificate";
}
.company-stats_table-heading {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "table-title" "search-by-user";
  margin: 2rem auto;
}
@media (min-width: 1000px) {
  .company-stats_table-heading {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "table-title search-by-user";
    margin: 4rem auto;
  }
}
.company-stats_table-heading_title {
  grid-area: "table-title";
  margin: 1rem 0;
}
@media (min-width: 1000px) {
  .company-stats_table-heading_title {
    margin: 0;
  }
}
.company-stats_table-heading_title h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
.company-stats_table-heading_search {
  align-items: center;
  background: #242952;
  border-radius: 5px;
  display: flex;
  grid-area: "search-by-user";
  padding: 1rem;
}
.company-stats_table-heading_search img {
  height: 25px;
  width: 25px;
}
.company-stats_table-heading_search input {
  margin-left: 1rem;
  width: 100%;
}

@media (min-width: 1000px) {
  .bilanCarbone {
    height: 100vh;
    min-height: 50rem;
    position: relative;
  }
}
.bilanCarbone .shape {
  display: none;
}
@media (min-width: 1000px) {
  .bilanCarbone .shape {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 46rem;
  }
  .bilanCarbone .shape img {
    width: 100%;
  }
}
@media (min-width: 1000px) {
  .bilanCarbone .container {
    padding: 3rem;
  }
}
.bilanCarbone .container .topleft svg {
  width: 1.5rem;
  height: 3.5rem;
}
.bilanCarbone .container .topleft p span {
  color: #97a1bb;
}
.bilanCarbone .container .green {
  color: #78cb46;
  margin-bottom: 1rem;
}
.bilanCarbone .container .gray {
  color: #97a1bb;
  margin-top: 1rem;
}
.bilanCarbone .container h1,
.bilanCarbone .container h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
@media (min-width: 1000px) {
  .bilanCarbone .container h1,
.bilanCarbone .container h2 {
    font-size: 2.4rem;
  }
}
.bilanCarbone .container h1 span,
.bilanCarbone .container h2 span {
  font-style: italic;
}
@media (min-width: 1000px) {
  .bilanCarbone-container {
    display: grid;
    grid-template-rows: 3.5rem calc(100vh - 13.5rem) 4rem;
  }
}
.bilanCarbone-container .center {
  padding: 4rem 0;
}
@media (min-width: 1000px) {
  .bilanCarbone-container .center {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .bilanCarbone-container .center-content {
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.bilanCarbone-container .center .subtitle {
  font-size: 1.4rem;
  margin-top: 2rem;
}
.bilanCarbone-container .center .btn {
  margin-top: 4rem;
}
@media (min-width: 1000px) {
  .bilanCarbone-container .bottom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
}
.bilanCarbone-container .bottom p {
  font-size: 0.9rem;
  color: #97a1bb;
}
.bilanCarbone-container .bottom p a {
  text-decoration: underline;
}
.bilanCarboneQuiz-container .topleft p {
  padding-bottom: 4rem;
}
@media (min-width: 1000px) {
  .bilanCarboneQuiz-container .topleft p {
    padding-bottom: 0;
  }
}
.bilanCarboneQuiz-container .quiz-item {
  padding: 0;
}
@media (min-width: 1000px) {
  .bilanCarboneQuiz-container .quiz-item {
    max-width: 79rem;
    padding: 0 4rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.bilanCarboneQuiz-container .quiz-item-area {
  position: relative;
  margin: 2rem auto;
  width: 100%;
}
@media (min-width: 1000px) {
  .bilanCarboneQuiz-container .quiz-item-area {
    max-width: 40rem;
    margin: 4rem auto;
  }
}
.bilanCarboneQuiz-container .quiz-item-area textarea {
  width: 100%;
  height: 10rem;
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  color: #141a48;
  resize: none;
  line-height: 1.4;
}
.bilanCarboneQuiz-container .quiz-item-area textarea::-moz-placeholder {
  color: #97a1bb;
}
.bilanCarboneQuiz-container .quiz-item-area textarea:-ms-input-placeholder {
  color: #97a1bb;
}
.bilanCarboneQuiz-container .quiz-item-area textarea::placeholder {
  color: #97a1bb;
}
.bilanCarboneQuiz-container .quiz-item-area img {
  width: 2rem;
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

@media (min-width: 1000px) {
  .bilanCarbone-duo {
    display: grid;
    grid-template-columns: 20rem 1fr;
  }
}
.bilanCarbone-duo .bilanCarbone-container {
  grid-template-rows: initial;
  padding: 0;
}
.bilanCarbone-duo .bilanCarbone-container .nav_logo img {
  padding: 0;
  position: relative;
  margin: auto;
  display: flex;
}
@media (min-width: 1000px) {
  .bilanCarbone-duo .bilanCarbone-container .center {
    padding: 0 2rem;
    position: relative;
  }
}
.bilanCarbone-duo .bilanCarbone-container .center .gray {
  max-width: 34rem;
  font-size: 0.9rem;
  margin-top: 2rem;
}
.bilanCarbone-duo .bilanCarbone-container .menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bilanCarbone-duo .bilanCarbone-container .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .bilanCarbone-duo .bilanCarbone-container .top {
    display: none;
  }
}
@media (min-width: 1000px) {
  .bilanCarbone-duo .bilanCarbone-container .top .nav_logo {
    display: none;
  }
}
.bilanCarbone-duo .bilanCarbone-container .top-right {
  display: flex;
  align-items: center;
}
.bilanCarbone-duo .bilanCarbone-container .top .home,
.bilanCarbone-duo .bilanCarbone-container .top .total {
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bilanCarbone-duo .bilanCarbone-container .top .home img,
.bilanCarbone-duo .bilanCarbone-container .top .total img {
  width: 1rem;
}
.bilanCarbone-duo .bilanCarbone-container .top .home {
  width: 8rem;
  gap: 1rem;
  background: #141a48;
  margin-left: 1rem;
}
.bilanCarbone-duo .bilanCarbone-container .top .total {
  width: 3.5rem;
  background: #fff;
}
@media (min-width: 1000px) {
  .bilanCarbone-duo .bilanCarbone-container .top .total {
    display: none;
  }
}

@media (min-width: 1000px) {
  .bilanCarbone-single {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bilanCarbone-single .bilanCarbone-container {
    display: unset;
  }
}

.base_page_bilanCarbone {
  background: center/cover no-repeat url(/images/bilan-carbone-bg.jpg?7ba1e807f87d3bc725676783c63c83cf);
}

@media (min-width: 1000px) {
  .bilanCarbone-step .center-content {
    max-width: none;
  }
}
@media (min-width: 1000px) {
  .bilanCarbone-step .steps {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 6rem;
    align-items: center;
    margin-top: 4rem;
  }
}
.bilanCarbone-step .steps .step-border {
  display: block;
  width: 75%;
  height: 1px;
  margin: 0 auto;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%232A3167FF' stroke-width='4' stroke-dasharray='6%2c 18' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
@media (min-width: 1000px) {
  .bilanCarbone-step .steps .step-border {
    width: 1px;
    height: 30vh;
  }
}
.bilanCarbone-step .step {
  margin: 4rem 0;
}
@media (min-width: 1000px) {
  .bilanCarbone-step .step {
    margin: 0;
    width: 100%;
    max-width: 32rem;
  }
}
.bilanCarbone-step .step:last-of-type {
  margin-bottom: 0;
}
.bilanCarbone-step .step-img {
  position: relative;
  width: 12rem;
  margin: 0 auto;
}
.bilanCarbone-step .step-img img {
  width: 100%;
}
.bilanCarbone-step .step-img p {
  font-size: 8rem;
  position: absolute;
  bottom: -2rem;
  left: -1rem;
}
.bilanCarbone-step .step-title {
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  position: relative;
  margin: 3rem 0 2rem;
}
.bilanCarbone-step .step-title img {
  width: 3rem;
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.bilanCarbone-step .step-title h2 {
  color: #141a48;
  text-align: center;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}
.bilanCarbone-step .step-text {
  color: #97a1bb;
  line-height: 1.5;
  text-align: center;
}
.bilanCarbone-step .step-text span {
  font-weight: 700;
}

.bilanCarbone-menu .center-content {
  max-width: 50rem;
}
.bilanCarbone-menu .menu-selection {
  width: 100%;
  margin-top: 4rem;
  position: relative;
}
.bilanCarbone-menu .menu-selection > img,
.bilanCarbone-menu .menu-selection > svg {
  width: 100%;
}
.bilanCarbone-menu .menu-selection > img {
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bilanCarbone-menu .menu-selection > img.active {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.bilanCarbone-menu .menu-selection .menu-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.bilanCarbone-menu .menu-svg {
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 2;
}
.bilanCarbone-menu .menu-svg polygon {
  cursor: pointer;
}
.bilanCarbone-menu .menu-name {
  display: inline-block;
  background: #fff;
  padding: 1rem 2rem;
  border-radius: 10px;
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bilanCarbone-menu .menu-name-replay {
  z-index: 10;
}
@media (min-width: 1000px) {
  .bilanCarbone-menu .menu-name-replay#menu1 {
    top: 0.5rem;
    left: 47%;
  }
  .bilanCarbone-menu .menu-name-replay#menu2 {
    top: 5.5rem;
    left: 72%;
  }
  .bilanCarbone-menu .menu-name-replay#menu3 {
    top: 13.5rem;
    left: 65%;
  }
  .bilanCarbone-menu .menu-name-replay#menu4 {
    top: 15.5rem;
    left: 32%;
  }
  .bilanCarbone-menu .menu-name-replay#menu5 {
    top: 10.5rem;
    left: 7%;
  }
  .bilanCarbone-menu .menu-name-replay#menu6 {
    top: 2rem;
    left: 15%;
  }
}
@media (min-width: 1000px) {
  .bilanCarbone-menu .menu-name {
    transform: none;
  }
}
.bilanCarbone-menu .menu-name.active {
  opacity: 1;
  visibility: visible;
}
.bilanCarbone-menu .menu-name p {
  text-align: center;
}
.bilanCarbone-menu .menu-name p:first-of-type {
  font-size: 0.8rem;
  color: #97a1bb;
}
.bilanCarbone-menu .menu-name p:last-of-type {
  color: #141a48;
}
.bilanCarbone-menu .menu-name a.btn {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
}
.bilanCarbone-menu .menu-name a.btn img {
  width: 0.6rem;
  height: 0.6rem;
}
@media (min-width: 1000px) {
  .bilanCarbone-menu #menu1 {
    top: 2rem;
    left: 47%;
  }
  .bilanCarbone-menu #menu2 {
    top: 6.5rem;
    left: 75%;
  }
  .bilanCarbone-menu #menu3 {
    top: 15rem;
    left: 68%;
  }
  .bilanCarbone-menu #menu4 {
    top: 17rem;
    left: 35%;
  }
  .bilanCarbone-menu #menu5 {
    top: 12rem;
    left: 9%;
  }
  .bilanCarbone-menu #menu6 {
    top: 4rem;
    left: 16%;
  }
}

@media (min-width: 1000px) {
  .bc-quiz {
    height: 100vh;
    min-height: 950px;
    position: relative;
  }
}
@media (min-width: 1000px) {
  .bc-quiz {
    display: grid;
    grid-template-columns: 20rem 1fr;
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .bc-quiz .nav_logo img {
    padding: 0;
    position: relative;
    margin: auto;
    display: flex;
  }
}
.bc-quiz .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  position: relative;
  z-index: 1;
}
.bc-quiz .top .nav_title {
  display: none;
}
@media (min-width: 1000px) {
  .bc-quiz .top .nav_title {
    display: block;
  }
}
@media (min-width: 1000px) {
  .bc-quiz .top .nav_logo {
    display: none;
  }
}
.bc-quiz .top-right {
  display: flex;
  align-items: center;
}
.bc-quiz .top .home,
.bc-quiz .top .total {
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bc-quiz .top .home img,
.bc-quiz .top .total img {
  width: 1rem;
}
.bc-quiz .top .home {
  width: 8rem;
  gap: 1rem;
  background: #141a48;
  margin-left: 1rem;
}
.bc-quiz .top .home p {
  font-size: 0.9rem;
  transform: translateY(-0.05rem);
}
.bc-quiz .top .total {
  width: 3.5rem;
  background: #fff;
}
@media (min-width: 1000px) {
  .bc-quiz .top .total {
    display: none;
  }
}
.bc-quiz-sidebar {
  width: 100vw;
  min-height: 100vh;
  padding: 3rem;
  position: relative;
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar .nav_logo {
    width: 100%;
    height: 8rem;
    padding: 0;
    background: #28306a;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 100px 100px;
  }
}
.bc-quiz-sidebar-title {
  font-size: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(151, 161, 187, 0.25);
}
.bc-quiz-sidebar-total {
  padding: 2rem 0;
  text-align: center;
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar-total {
    text-align: center;
  }
}
.bc-quiz-sidebar-total p:nth-child(2) {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.bc-quiz-sidebar-total p:last-child {
  font-size: 0.9rem;
  color: #a0a0b8;
}
.bc-quiz-sidebar-average {
  padding: 2rem 0;
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar-average .btn {
    width: 100%;
  }
}
.bc-quiz-sidebar-average p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.bc-quiz-sidebar-average p:last-of-type {
  display: none;
}
.bc-quiz-sidebar-average p span {
  font-weight: bold;
  font-size: 1.4rem;
  display: block;
}
.bc-quiz-sidebar-average .btn {
  background: none;
  display: flex;
  border: 1px solid rgba(151, 161, 187, 0.25);
  border-radius: 10px;
}
.bc-quiz-content {
  padding: 4rem 0;
}
@media (min-width: 1000px) {
  .bc-quiz-content {
    display: grid;
    grid-template-rows: 2rem auto 4rem;
    padding: 3rem;
  }
}
.bc-quiz-content .top span {
  color: #a0a0b8;
}
.bc-quiz-content .center {
  padding: 4rem 0;
}
@media (min-width: 1000px) {
  .bc-quiz-content .center {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .bc-quiz-content .center-content {
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.bc-quiz-content .center .green {
  color: #78cb46;
  margin-bottom: 1rem;
}
.bc-quiz-content .center .gray {
  color: #97a1bb;
  margin-top: 1rem;
}
.bc-quiz-content .center h1,
.bc-quiz-content .center h2 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.bc-quiz-content .center h1 span,
.bc-quiz-content .center h2 span {
  font-style: italic;
}
.bc-quiz-content .center .subtitle {
  font-size: 1.4rem;
  margin-top: 2rem;
}
.bc-quiz-content .center .btn {
  margin-top: 4rem;
}
.bc-quiz-content .center .center__profil {
  padding: 3rem;
  position: relative;
  background-color: #141a48;
  border-radius: 10px;
  margin-top: 6rem;
}
@media (min-width: 1000px) {
  .bc-quiz-content .center .center__profil {
    max-width: 40rem;
    margin: 8rem auto 0;
    position: relative;
  }
}
.bc-quiz-content .center .center__profil_icon {
  height: 8rem;
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.bc-quiz-content .center .center__profil_shape {
  height: 6rem;
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
}
.bc-quiz-content .bottom {
  margin-top: 1rem;
}
@media (min-width: 1000px) {
  .bc-quiz-content .bottom {
    margin-top: unset;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
}
.bc-quiz-content .bottom p {
  font-size: 0.9rem;
  color: #97a1bb;
}
.bc-quiz-content .bottom p span {
  text-decoration: underline;
}
.bc-quiz .bilanCarboneQuiz-container .topleft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.bc-quiz .bilanCarboneQuiz-container .topleft .home {
  background: #080a2e;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bc-quiz .bilanCarboneQuiz-container .topleft .home img {
  width: 1rem;
}
@media (min-width: 1000px) {
  .bc-quiz .bilanCarboneQuiz-container .quiz-item {
    padding: 0 4rem;
    margin: auto;
    top: inherit;
    left: inherit;
    transform: inherit;
    position: relative;
  }
}
@media (min-width: 1000px) {
  .bc-quiz .bilanCarboneQuiz-container .quiz-item .quiz-questions {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 1000px) {
  .bc-quiz .bilanCarboneQuiz-container .quiz-item .toit {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .bc-quiz-content .quiz-item {
    width: calc(100% - 20rem);
    max-width: none !important;
    padding: 0 3rem;
    margin: 0 auto;
    height: 100%;
  }
}

@media (min-width: 1000px) {
  .bc-quiz-choices .quiz-item {
    max-width: none;
  }
}

.bc-quiz-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar {
    position: initial;
    opacity: 1;
    visibility: visible;
    display: block;
    width: 100%;
    padding: 3rem 0 0 0;
  }
}
.bc-quiz-sidebar.active {
  display: block;
  opacity: 1;
  visibility: visible;
}
@media (max-width: 999px) {
  .bc-quiz-sidebar.active {
    background: #141a48;
    z-index: 5;
  }
  .bc-quiz-sidebar.active .bc-quiz-sidebar-content {
    padding: 2rem;
  }
}
@media (max-width: 699px) {
  .bc-quiz-sidebar.active {
    padding: 2rem;
  }
}
@media (max-width: 499px) {
  .bc-quiz-sidebar.active .bc-quiz-sidebar-content {
    padding: 1rem;
  }
}
.bc-quiz-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar-top {
    display: none;
  }
}
.bc-quiz-sidebar-top-close {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  background: #080a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar-top-close {
    display: none;
  }
}
.bc-quiz-sidebar-top-close img {
  width: 1rem;
}
.bc-quiz-sidebar-content {
  background: linear-gradient(to bottom right, rgba(54, 59, 97, 0.5), rgba(166, 167, 179, 0.5));
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1000px) {
  .bc-quiz-sidebar-content {
    padding: 2rem;
  }
}
.bc-quiz-sidebar-result {
  padding: 2rem 0;
  border-top: 1px solid rgba(151, 161, 187, 0.25);
  border-bottom: 1px solid rgba(151, 161, 187, 0.25);
}
.bc-quiz-sidebar-result > div {
  margin-bottom: 1.5rem;
}
.bc-quiz-sidebar-result > div:last-of-type {
  margin-bottom: 0;
}
.bc-quiz-sidebar-result > div .no-result {
  font-size: 0.8rem;
  color: #97a1bb;
  margin-left: -1rem;
}
.bc-quiz-sidebar-result > div div {
  display: flex;
  align-items: center;
}
.bc-quiz-sidebar-result > div div span {
  display: block;
  height: 5px;
  border-radius: 10px;
  margin-right: 1rem;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bc-quiz-sidebar-result > div div span.transport {
  background: #cb4646;
}
.bc-quiz-sidebar-result > div div span.logement {
  background: #46c1cb;
}
.bc-quiz-sidebar-result > div div span.alimentation {
  background: #a746cb;
}
.bc-quiz-sidebar-result > div div span.equipement {
  background: #cbc246;
}
.bc-quiz-sidebar-result > div div span.service, .bc-quiz-sidebar-result > div div span.profil {
  background: #46cb8e;
}
.bc-quiz-sidebar-result > div div p {
  font-size: 0.8rem;
  color: #fff;
  width: 3rem;
  text-align: right;
}

.quiz-title p.quiz-question-description {
  margin-top: 1rem;
  color: r #97a1bb;
}

.bilanCarbone_content {
  background: center/cover no-repeat url(/images/bilan-carbone-bg-2.jpg?bfaed9a66b8bdae46c1e92c1974a03ab);
}

.quiz-choices {
  margin: -2rem 0 2rem;
}
@media (min-width: 1200px) {
  .quiz-choices.quiz-choices-trio {
    grid-template-columns: repeat(3, 1fr);
    max-width: 60rem;
    margin: -2rem auto 3rem;
  }
  .quiz-choices.quiz-choices-trio .quiz-choice {
    margin-top: 0;
  }
  .quiz-choices.quiz-choices-trio .quiz-choice:not(:first-of-type) {
    margin-top: 0;
  }
}
@media (min-width: 1000px) {
  .quiz-choices.quiz-choices-quatuor {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .quiz-choices.quiz-choices-quatuor {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }
}
.quiz-choices.quiz-choices-price .quiz-choice-input input {
  width: 4rem;
}
@media (min-width: 1000px) {
  .quiz-choices {
    max-width: 40rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 2rem auto;
  }
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice {
    max-width: 18rem;
    margin-top: -3.5rem;
  }
}
.quiz-choices .quiz-choice:not(:first-of-type) {
  margin-top: -1rem;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice:not(:first-of-type) {
    margin-top: -3.5rem;
  }
}
.quiz-choices .quiz-choice-img {
  width: 6rem;
  height: 6rem;
  background: #fff;
  border: 2px solid #97a1bb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transform: translateY(3rem);
}
.quiz-choices .quiz-choice-img img {
  width: 2rem;
  height: 2rem;
}
.quiz-choices .quiz-choice-content {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 4.5rem 2rem 2rem;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-content {
    padding: 3.5rem 1.5rem 1.5rem;
  }
}
.quiz-choices .quiz-choice-content > h3 {
  color: #141a48;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-content > h3 {
    font-size: 1.1rem;
  }
}
.quiz-choices .quiz-choice-content > p {
  color: #97a1bb;
  text-align: center;
  font-size: 0.9rem;
  margin: 0.5rem auto 1.5rem;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-content > p {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
}
.quiz-choices .quiz-choice-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.quiz-choices .quiz-choice-input input {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  color: #141a48;
  font-size: 1.4rem;
  font-weight: 700;
  transform: translateY(-2px);
  -moz-appearance: textfield;
}
.quiz-choices .quiz-choice-input input::-moz-selection {
  background: none;
}
.quiz-choices .quiz-choice-input input::selection {
  background: none;
}
.quiz-choices .quiz-choice-input input::-webkit-outer-spin-button, .quiz-choices .quiz-choice-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quiz-choices .quiz-choice-input p {
  width: 2.5rem;
  height: 2.5rem;
  background: #141a48;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.quiz-choices .quiz-choice-input p::-moz-selection {
  background: none;
}
.quiz-choices .quiz-choice-input p::selection {
  background: none;
}
.quiz-choices .quiz-choice-input p span {
  display: block;
  transform: translateY(-2px);
}
.quiz-choices .quiz-choice-input p span::-moz-selection {
  background: none;
}
.quiz-choices .quiz-choice-input p span::selection {
  background: none;
}
.quiz-choices .quiz-choice-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.quiz-choices .quiz-choice-buttons button {
  margin-top: 1.5rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid #141a48;
  color: #141a48;
  border-radius: 5px;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.quiz-choices .quiz-choice-buttons button.active {
  background: #141a48;
  color: #fff;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-buttons button {
    font-size: 0.8rem;
    margin-top: 1rem;
  }
}
.quiz-choices .quiz-choice-btns {
  margin: 2rem auto 0;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-btns {
    grid-column: 1/3;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
}
.quiz-choices .quiz-choice-btns .quiz-choice-number {
  background: #fff;
  color: #141a48;
  font-weight: 700;
}
.quiz-choices .quiz-choice-btns .quiz-choice-alert {
  background: #cb4646;
  color: #fff;
  margin-top: 1rem;
  display: none;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-btns .quiz-choice-alert {
    margin-top: 0;
  }
}
.quiz-choices .quiz-choice-btns .quiz-choice-alert.active {
  display: block;
}
.quiz-choices .quiz-choice-btns p {
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8rem;
}
.quiz-choices .quiz-choice-appear {
  display: none;
}
.quiz-choices .quiz-choice-appear.active {
  display: block;
}
.quiz-choices .quiz-choice-appear > p {
  color: #97a1bb;
  font-size: 0.9rem;
  text-align: center;
  margin: 1rem 0 0.5rem;
}
@media (min-width: 1000px) {
  .quiz-choices .quiz-choice-appear > p {
    font-size: 0.8rem;
  }
}

@media (min-width: 1000px) {
  .resultats {
    align-items: center;
    display: flex;
  }
  .resultats .bilanCarbone-container {
    display: initial;
  }
}
.resultats .felicitation h1 {
  font-size: 1.4rem;
  text-align: center;
}
@media (min-width: 1000px) {
  .resultats .felicitation h1 {
    font-size: 2.4rem;
  }
}
.resultats .felicitation h1 span {
  display: block;
  font-size: 2.8rem;
  font-style: inherit;
}
@media (min-width: 1000px) {
  .resultats .felicitation h1 span {
    font-size: 4rem;
  }
}
.resultats .felicitation div {
  position: relative;
}
@media (min-width: 1000px) {
  .resultats .felicitation div div {
    align-items: center;
    display: flex;
    justify-content: center;
  }
}
.resultats .felicitation div p {
  color: #141a48;
  font-size: 3.5vw;
  font-weight: 400;
  left: 50%;
  margin-top: -0.5rem;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media (min-width: 1000px) {
  .resultats .felicitation div p {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-top: -1.25rem;
  }
}
.resultats .felicitation div p span {
  display: block;
  font-size: 10vw;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
@media (min-width: 1000px) {
  .resultats .felicitation div p span {
    font-size: 4rem;
  }
}
.resultats .felicitation div p.results-thanks {
  color: #fff;
  display: block;
  font-size: 2rem;
  margin: 2rem 0 4rem 0;
  position: initial;
  transform: none;
}
.resultats .felicitation div img {
  width: 100%;
}
@media (min-width: 1000px) {
  .resultats .felicitation div img {
    max-width: 35rem;
  }
}
.resultats .bottom {
  display: grid;
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .resultats .bottom {
    align-items: center;
    display: flex;
    gap: 2rem;
    margin-top: 0;
  }
}
.resultats .bottom .btn {
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}
@media (min-width: 1000px) {
  .resultats .bottom .btn {
    margin-bottom: 0rem;
    width: 20rem;
  }
}
@media (min-width: 1000px) {
  .resultats .details {
    margin-bottom: 4rem;
  }
}
.resultats .details .carbon-graph {
  background: #141a48;
  border-radius: 5px;
  display: none;
  margin-top: 2rem;
  padding-top: 1rem;
  width: 100%;
}
.resultats .details .carbon-graph.active {
  display: block;
}
.resultats .details .center-content {
  margin: 0 auto;
  max-width: 65rem;
  width: 100%;
}
.resultats .details .center-content.no-comparison {
  display: block;
}
.resultats .details .center-content .top__detail {
  display: block;
  width: 100%;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .top__detail {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}
.resultats .details .center-content .top__detail h1 {
  font-size: 1.4rem;
  text-align: left;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .top__detail h1 {
    font-size: 2.4rem;
  }
}
.resultats .details .center-content .top__detail h1 span {
  display: block;
  font-size: 2.4rem;
  font-style: inherit;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .top__detail h1 span {
    font-size: 4rem;
  }
}
.resultats .details .center-content .top__detail .carbon-result {
  margin: 2rem 0;
  position: relative;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .top__detail .carbon-result {
    max-width: 25rem;
  }
}
.resultats .details .center-content .top__detail .carbon-result img {
  width: 100%;
}
.resultats .details .center-content .top__detail .carbon-result p {
  font-weight: 700;
  position: absolute;
}
.resultats .details .center-content .top__detail .carbon-result p:first-of-type {
  color: #fff;
  font-size: 16vw;
  left: 50%;
  top: 18%;
  transform: translateX(-55%) rotate(-6.5deg);
}
@media (min-width: 1000px) {
  .resultats .details .center-content .top__detail .carbon-result p:first-of-type {
    font-size: 5rem;
    top: 17%;
    transform: translateX(-60%) rotate(-6.5deg);
  }
}
.resultats .details .center-content .top__detail .carbon-result p:last-of-type {
  bottom: 22%;
  color: #141a48;
  font-size: 3.5vw;
  left: 50%;
  transform: translateX(-48%) rotate(-6.5deg);
}
@media (min-width: 1000px) {
  .resultats .details .center-content .top__detail .carbon-result p:last-of-type {
    bottom: 23%;
    font-size: 1rem;
  }
}
.resultats .details .center-content .center__detail {
  display: block;
  margin: 0;
  padding: 0;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .center__detail {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}
.resultats .details .center-content .center__detail > div {
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .center__detail > div {
    width: 48%;
  }
}
.resultats .details .center-content .center__detail > div img {
  width: 100%;
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .center__detail > div img {
    width: 30rem;
  }
}
.resultats .details .center-content .center__detail > div h2 {
  font-size: 1.6rem;
  margin: 2rem 0 1rem;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .center__detail > div h2 {
    font-size: 2.2rem;
    margin-top: 0;
  }
}
.resultats .details .center-content .center__detail > div p {
  color: #97a1bb;
}
.resultats .details .center-content .center__detail > div .btn {
  background: #080a2e;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}
.resultats .details .center-content .center__detail > div .btn.active {
  color: #141a48;
  background: #fff;
}
.resultats .details .center-content .center__detail > div .btn:first-of-type {
  margin-bottom: 1rem;
  margin-right: 1rem;
}
@media (min-width: 1000px) {
  .resultats .details .center-content .center__detail > div .btn:first-of-type {
    margin-bottom: 0;
  }
}

@media (min-width: 1000px) {
  .page-error {
    position: relative;
  }
}
.page-error header {
  height: 5rem;
  display: flex;
  align-items: flex-end;
}
.page-error header svg {
  width: 1.5rem;
  height: 3.5rem;
}
.page-error section {
  padding-top: 4rem;
}
@media (min-width: 1000px) {
  .page-error section {
    padding-top: 0;
    height: calc(100vh - 5rem);
    min-height: 40rem;
  }
}
.page-error section .container {
  max-width: 36rem;
  margin: 0 0 0 8vw;
}
@media (min-width: 1000px) {
  .page-error section .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 12vw;
    position: relative;
    z-index: 1;
  }
}
.page-error section h1 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
}
.page-error section .page-error-txt {
  font-size: 1.2rem;
  margin: 2rem 0 1rem;
}
.page-error section .page-eror-txt-gray {
  color: #97a1bb;
}
.page-error section .btn {
  margin: 2rem 0;
}
.page-error section span {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(151, 161, 187, 0.25);
  margin-bottom: 2rem;
}
.page-error .page-error-fox {
  display: none;
}
@media (min-width: 1000px) {
  .page-error .page-error-fox {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50vw;
    height: calc(100vh - 5rem);
    min-height: 40rem;
  }
  .page-error .page-error-fox img {
    height: 100%;
    position: absolute;
  }
}

.onboarding {
  width: 100%;
  height: 100%;
  padding: 4rem 0;
}
@media (min-width: 1000px) {
  .onboarding {
    width: 100vw;
    height: 100vh;
    min-height: 40rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.onboarding_modal {
  width: 84vw;
  max-width: 28rem;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
  border-radius: 10px;
  padding: 4rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.onboarding_modal .hide {
  display: none;
}
.onboarding_modal > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.onboarding_modal > img {
  width: 80%;
  max-width: 15rem;
}
.onboarding_modal .onboarding_text {
  color: #141a48;
  font-weight: 700;
}
.onboarding_modal .onboarding_gray {
  color: #97a1bb;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  line-height: 1.2;
}
.onboarding_modal .onboarding_back {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 2rem;
  left: 2rem;
  cursor: pointer;
}
.onboarding_modal .select {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  position: relative;
}
.onboarding_modal .select .label_select {
  color: #141a48;
  margin-bottom: 0.5rem;
}
.onboarding_modal .select .select-field input,
.onboarding_modal .select .select-field label,
.onboarding_modal .select .select-field input:checked ~ .select-placeholder {
  display: none;
}
.onboarding_modal .select .select-field input:checked + label,
.onboarding_modal .select .select-field .select-placeholder {
  display: block;
}
.onboarding_modal .select .select-field label {
  padding: 1.25rem 1.5rem;
  color: #141a48;
  border: 1px solid #97a1bb;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.onboarding_modal .select .select-field label img {
  width: 1rem;
  height: 1rem;
  float: right;
}
.onboarding_modal .select .select-options {
  animation-fill-mode: both;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background: #fff;
  color: #141a48;
  border-radius: 0 0 10px 10px;
  width: 100%;
  border: 1px solid #97a1bb;
  border-top: unset;
  max-height: 12rem;
  overflow-y: scroll;
  padding: 1rem 0;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.onboarding_modal .select .select-options::-webkit-scrollbar {
  display: none;
}
.onboarding_modal .select .select-options label {
  display: block;
  cursor: pointer;
  font-weight: 400;
  padding: 0.5rem 1.5rem;
}
.onboarding_modal .select .select-options label:hover {
  background: rgba(20, 26, 72, 0.05);
}
.onboarding_modal .select .select-options-focus {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.onboarding_modal .select .select-options-focus:focus + * {
  opacity: 1;
  visibility: visible;
}
.onboarding hr {
  margin: 2rem 0 1rem 0;
  border-top: 1px solid #b6bdcf;
}
.onboarding .onboarding_cgu {
  color: #b6bdcf;
  white-space: normal;
  font-size: 0.8rem;
  font-weight: 300;
}
.onboarding .onboarding_cgu a {
  text-decoration: underline;
}

body.body-tutorial {
  height: 100vh;
  overflow: hidden;
}

.tutorial {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10002;
  background: rgba(8, 10, 46, 0.9);
  padding: 2rem;
}
@media (min-width: 1000px) {
  .tutorial {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.tutorial_modal {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  position: relative;
  height: 90vh;
  overflow-y: scroll;
}
@media (min-width: 1000px) {
  .tutorial_modal {
    max-width: 60rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: unset;
  }
}
.tutorial_bg {
  width: 100%;
  height: 20rem;
  background-image: url(/images/tutorial-bg.png?20049fb07ed3d421d5536b370056bbea);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}
.tutorial_step {
  width: 100%;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tutorial_step.hide {
  display: none;
}
.tutorial_step p {
  color: #141a48;
}
@media (min-width: 1000px) {
  .tutorial_step p {
    max-width: 70%;
  }
}
.tutorial_step a {
  color: #141a48;
  text-decoration: underline;
  font-weight: 700;
  margin-top: 0.5rem;
}
.tutorial_step .timeline {
  width: 90%;
  max-width: 26rem;
  margin: 2rem 0;
}
@media (min-width: 1000px) {
  .tutorial_step .timeline {
    margin: 0;
  }
}
.tutorial_step .btn {
  width: 100%;
  max-width: 10rem;
}
.tutorial_step .btn-secondary {
  border: 2px solid #141a48;
  color: #141a48;
  background: unset;
  margin-top: 1rem;
}
@media (min-width: 1000px) {
  .tutorial_step .btn-secondary {
    margin-top: 0;
  }
}
.tutorial_bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1000px) {
  .tutorial_bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 2rem;
  }
  .tutorial_bottom .timeline {
    grid-column: 2/4;
    grid-row: 1;
    justify-self: center;
  }
  .tutorial_bottom .js-prev {
    grid-column: 1/2;
    grid-row: 1;
  }
  .tutorial_bottom .js-next {
    grid-column: 4/5;
    grid-row: 1;
    justify-self: flex-end;
  }
}
.tutorial_img {
  width: 100%;
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1000px) {
  .tutorial_img {
    min-height: 18rem;
  }
}
@media (min-width: 1000px) {
  .tutorial_img2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 2rem;
  }
  .tutorial_img2 img {
    grid-column: 1/2;
    grid-row: 1;
    justify-self: flex-end;
  }
  .tutorial_img2 .tutorial_msg {
    grid-column: 2/3;
    grid-row: 1;
  }
}
.tutorial_img img {
  width: auto;
  max-width: 100%;
  max-height: 12rem;
}
@media (min-width: 1000px) {
  .tutorial_img img {
    min-height: 12rem;
  }
}
.tutorial_img .tutorial_msg {
  width: 80%;
  margin: 0 auto 1rem;
  padding: 2rem;
  border-radius: 10px;
  line-height: 1.4;
  position: relative;
  background: #fff;
  color: #141a48;
}
@media (min-width: 1000px) {
  .tutorial_img .tutorial_msg {
    width: 22rem;
    margin: 0;
  }
  .tutorial_img .tutorial_msg p {
    max-width: none;
  }
}
.tutorial_img .tutorial_msg p {
  text-align: left;
}
.tutorial_img .tutorial_msg svg {
  position: absolute;
  bottom: -2rem;
  left: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  transform: rotate(180deg);
}
@media (min-width: 1000px) {
  .tutorial_img .tutorial_msg svg {
    bottom: calc(50% - 1.5rem);
    left: -2rem;
    transform: rotate(-90deg);
  }
}
.tutorial_title {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.tutorial_close {
  width: 3.5rem;
  height: 3.5rem;
  background: #080a2e;
  border-radius: 0 10px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 2;
}
.tutorial_close:hover img {
  transform: scale(0.85) rotate(90deg);
}
.tutorial_close img {
  width: 1rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tutorial_home {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(8, 10, 46, 0.8);
  display: none;
}
@media (min-width: 1000px) {
  .tutorial_home {
    display: block;
  }
  .tutorial_home.hide {
    opacity: 0;
    visibility: hidden;
  }
}
.tutorial_home_msg {
  padding: 1rem;
  border-radius: 10px;
  line-height: 1.4;
  background: #fff;
  color: #141a48;
  position: absolute;
}
.tutorial_home_msg svg {
  position: absolute;
  width: 2rem;
  height: 2rem;
}
.tutorial_home_msg_fox {
  width: 22rem;
  bottom: 15rem;
  right: 15rem;
}
.tutorial_home_msg_fox svg {
  bottom: -1.5rem;
  right: 1.5rem;
  transform: rotate(180deg);
}
.tutorial_home_msg_capsule {
  top: 45vw;
  left: 12rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 3s;
}
@media (min-width: 1200px) {
  .tutorial_home_msg_capsule {
    top: 43vw;
  }
}
@media (min-width: 1400px) {
  .tutorial_home_msg_capsule {
    top: 36vw;
  }
}
@media (min-width: 1600px) {
  .tutorial_home_msg_capsule {
    top: 36vw;
  }
}
@media (min-width: 1800px) {
  .tutorial_home_msg_capsule {
    top: 36rem;
  }
}
.tutorial_home_msg_capsule.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.tutorial_home_msg_capsule svg {
  top: -1.5rem;
  left: 1.5rem;
}
.tutorial_home_msg_menu {
  position: absolute;
  top: 13.2rem;
  left: 8rem;
  display: grid;
  gap: 2rem;
}
.tutorial_home_msg_menu .tutorial_home_msg {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}
.tutorial_home_msg_menu .tutorial_home_msg.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.tutorial_home_msg_menu svg {
  bottom: calc(50% - 1rem);
  left: -1.5rem;
  transform: rotate(-90deg);
}
.tutorial_home_close {
  position: absolute;
  bottom: 10.5rem;
  right: 21rem;
  cursor: pointer;
  z-index: 1;
}
.tutorial_home img {
  width: 24rem;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
}

.tutorial_msg_accent {
  background: #78cb46;
  color: #fff;
}

.tutorial_light {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial_light.scroll {
  padding: 2rem 0;
  align-items: flex-start;
  overflow-y: auto;
}
.tutorial_light .tutorial_modal {
  height: auto;
}
.tutorial_light .timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.tutorial_light .timeline span {
  display: block;
  width: 12px;
  height: 12px;
  background: rgba(20, 26, 72, 0.25);
  border-radius: 50%;
}
.tutorial_light .timeline span.active {
  background: #78cb46;
}
.tutorial_light .tutorial_step:nth-of-type(3) .tutorial_bg {
  background-image: url(/images/tutorial-light-2.png?580ba1b5be3f1762804f4295c303dcaa);
}
.tutorial_light .tutorial_step:nth-of-type(4) .tutorial_bg {
  background-image: url(/images/tutorial-light-3.png?4b9bd10019d35aa653e8fa9647c6d8d3);
}

.light_nav {
  height: 9rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.light_nav::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 10, 46, 0.75), transparent);
}
.light_nav.active .light_nav_icon span {
  transform: rotate(45deg) translateX(1px);
}
.light_nav.active .light_nav_icon span::before {
  opacity: 0;
  visibility: hidden;
}
.light_nav.active .light_nav_icon span::after {
  transform: rotate(-90deg) translateX(2px);
}
.light_nav.active .light_nav_menu {
  opacity: 1;
  visibility: visible;
}
.light_nav_container {
  width: 84vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 700px) {
  .light_nav_container {
    justify-content: flex-start;
    gap: 4rem;
  }
}
.light_nav_mobile_container {
  align-items: center;
  display: flex;
}
@media (min-width: 700px) {
  .light_nav_mobile_container {
    width: 100%;
  }
}
.light_nav_subcontainer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
@media (min-width: 700px) {
  .light_nav_subcontainer {
    width: 100%;
  }
}
.light_nav_content_right {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.light_nav_content_right .app-version {
  display: none;
}
@media (min-width: 700px) {
  .light_nav_content_right .app-version {
    display: block;
  }
}
.light_nav_logout {
  position: relative;
}
@media (max-width: 699px) {
  .light_nav_logout {
    display: none;
  }
}
.light_nav_logout_tooltip {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #141a48;
  font-size: 0.9rem;
  opacity: 0;
  visibility: hidden;
}
.light_nav_logout_div {
  border-radius: 8px;
  border: 1px solid #97a1bb;
  color: #97a1bb;
  padding: 0.4rem;
  position: relative;
}
.light_nav_logout_div:hover .logout_tooltip {
  opacity: 1;
  visibility: visible;
}
.light_nav .nav_icon {
  background: #141a48;
  border: 1px solid #242952;
}
.light_nav_logo {
  position: relative;
  z-index: 11;
}
.light_nav_logo img {
  height: 5rem;
}
.light_nav_icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #141a48;
  border: 1px solid #242952;
  position: relative;
  z-index: 11;
}
@media (min-width: 700px) {
  .light_nav_icon {
    display: none;
  }
}
.light_nav_icon span {
  width: 1.5rem;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.light_nav_icon span::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  transform: translateY(-6px);
}
.light_nav_icon span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  transform: translateY(4px);
}
.light_nav_menu {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: #141a48;
  padding: 8rem 8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 700px) {
  .light_nav_menu {
    width: unset;
    height: unset;
    position: initial;
    background: unset;
    padding: unset;
    flex-direction: row;
    gap: 2rem;
    opacity: 1;
    visibility: visible;
  }
}
.light_nav_menu li {
  font-size: 2.4rem;
  text-align: center;
  color: #97a1bb;
}
@media (min-width: 700px) {
  .light_nav_menu li {
    font-size: 1rem;
  }
}
.light_nav_menu li.current {
  color: #fff;
}
.light_nav_menu li.app-version {
  font-size: 1rem;
}
@media (min-width: 700px) {
  .light_nav_menu_logout, .light_nav_menu .li_logout, .light_nav_menu .app-version {
    display: none;
  }
}

.light_about {
  width: 84vw;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .light_about {
    padding-bottom: 4rem;
  }
}
@media (min-width: 1000px) {
  .light_about .eye {
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: #111111;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .light_about .eye-left {
    top: 31.2%;
    left: 26.2%;
    transform: rotate(-15deg);
  }
  .light_about .eye-right {
    top: 31.2%;
    left: 30.5%;
    transform: rotate(5deg);
  }
  .light_about .eye span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #253084;
    position: absolute;
    top: 20%;
    left: 20%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .light_about .eye-wink {
    transform: scaleY(0.3);
  }
  .light_about .eye-wink span {
    opacity: 0;
  }
}
.light_about_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1000px) {
  .light_about_title {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    position: relative;
  }
}
.light_about_title img {
  width: 100%;
}
.light_about_title img.light_about_fox-desktop {
  display: none;
}
@media (min-width: 1000px) {
  .light_about_title img.light_about_fox-mobile {
    display: none;
  }
  .light_about_title img.light_about_fox-desktop {
    display: block;
  }
}
.light_about_title div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.light_about_title div h1 {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
.light_about_faq h2 {
  font-size: 1.6rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(151, 161, 187, 0.5);
  padding-bottom: 1rem;
  margin: 4rem 0 0;
}
.light_about_faq dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(151, 161, 187, 0.25);
  border-radius: 5px;
  padding: 1rem;
  cursor: pointer;
  margin-top: 2rem;
  color: #cacadf;
}
@media (min-width: 1000px) {
  .light_about_faq dt {
    padding: 2rem;
    max-width: 45rem;
  }
}
.light_about_faq dt p {
  width: 90%;
  font-size: 0.9rem;
  font-weight: 400;
}
@media (min-width: 1000px) {
  .light_about_faq dt p {
    font-size: 1rem;
  }
}
.light_about_faq dt svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.light_about_faq dd {
  font-size: 0.9rem;
  margin: 2rem 0 0;
  border-left: 2px solid rgba(151, 161, 187, 0.25);
  padding-left: 2rem;
  line-height: 1.4;
  color: #cacadf;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .light_about_faq dd {
    max-width: 35rem;
    font-size: 1rem;
  }
}
.light_about_bloc {
  margin: 4rem 0;
}
.light_about_bloc h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.light_about_bloc h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.light_about_bloc p {
  color: #a0a0b8;
  margin-bottom: 1rem;
}
.light_about_bloc a:not(.light_about_bloc_btn) {
  color: #a0a0b8;
  text-decoration: underline;
  display: inline-block;
}
.light_about_bloc .light_about_bloc_btn {
  background: #141a48;
  font-weight: 700;
  padding: 1rem;
  border-radius: 5px;
  display: inline-block;
}
.light_about_bloc div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.light_details {
  width: 84vw;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 4rem;
}
@media (min-width: 1000px) {
  .light_details {
    padding-bottom: 6rem;
  }
  .light_details_top {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6rem;
  }
}
@media (min-width: 1000px) {
  .light_details .eye {
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: #111111;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .light_details .eye-left {
    top: 30%;
    left: 58%;
    transform: rotate(-15deg);
  }
  .light_details .eye-right {
    top: 30%;
    left: 65%;
    transform: rotate(15deg);
  }
  .light_details .eye span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #253084;
    position: absolute;
    top: 20%;
    left: 20%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .light_details .eye-wink {
    transform: scaleY(0.3);
  }
  .light_details .eye-wink span {
    opacity: 0;
  }
}
.light_details_global {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1000px) {
  .light_details_global {
    align-items: flex-start;
    width: 50%;
    max-width: 30rem;
  }
}
.light_details_global svg {
  width: 12rem;
  height: 12rem;
}
@media (min-width: 1000px) {
  .light_details_global svg {
    position: absolute;
    top: 10%;
    left: 10%;
  }
}
.light_details_global svg path {
  stroke: #78cb46;
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
}
.light_details_global > div div {
  width: 12rem;
  height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -0.25rem;
  left: calc(50% - 6rem);
}
@media (min-width: 1000px) {
  .light_details_global > div div {
    top: 10%;
    left: 10%;
  }
}
.light_details_global p {
  transform: translateY(-0.25rem);
}
.light_details_global p:first-of-type {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
}
.light_details_global p:last-of-type {
  color: #97a1bb;
  font-size: 0.8rem;
}
.light_details_global p.full_points {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
}
.light_details_global img {
  display: none;
}
@media (min-width: 1000px) {
  .light_details_global img {
    display: block;
    width: 100%;
  }
}
.light_details_cat {
  margin-top: 4rem;
}
@media (min-width: 1000px) {
  .light_details_cat {
    margin-top: unset;
    width: 50%;
  }
}
.light_details_cat > p {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.light_details_cat .btn {
  width: 100%;
  text-align: center;
}
.light_details_cat ul {
  display: grid;
  gap: 1rem;
  margin-bottom: 4rem;
}
.light_details_cat ul li {
  border-bottom: 1px solid rgba(151, 161, 187, 0.25);
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.light_details_cat ul li p:first-of-type {
  width: 25%;
}
.light_details_cat ul li p:last-of-type {
  width: 10%;
  color: #97a1bb;
  font-size: 0.8rem;
}
.light_details_cat ul li div {
  width: 50%;
  height: 6px;
  border-radius: 5px;
}
.light_details_cat ul li div span {
  display: block;
  height: 6px;
  border-radius: 5px;
}
.light_details_cat ul li.light_details_cat_mobilite div {
  background: linear-gradient(to right, rgba(247, 65, 65, 0.25), rgba(230, 118, 192, 0.25));
}
.light_details_cat ul li.light_details_cat_mobilite div span {
  width: 30%;
  background: linear-gradient(to right, #f74141, #e676c0);
}
.light_details_cat ul li.light_details_cat_green div {
  background: linear-gradient(to right, rgba(44, 218, 161, 0.25), rgba(49, 127, 226, 0.25));
}
.light_details_cat ul li.light_details_cat_green div span {
  width: 80%;
  background: linear-gradient(to right, #2cdaa1, #317fe2);
}
.light_details_cat ul li.light_details_cat_alimentation div {
  background: linear-gradient(to right, rgba(106, 213, 131, 0.25), rgba(189, 184, 71, 0.25));
}
.light_details_cat ul li.light_details_cat_alimentation div span {
  width: 80%;
  background: linear-gradient(to right, #6ad583, #bdb847);
}
.light_details_all {
  margin-top: 6rem;
}
.light_details_all h2 {
  font-size: 1.6rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(151, 161, 187, 0.5);
  padding-bottom: 1rem;
  margin-bottom: 4rem;
}
@media (min-width: 1000px) {
  .light_details_all h2 {
    margin-bottom: 6rem;
  }
}
.light_details_all > div:not(.progress_container_btns):not(.competition_results_container_btns_large) {
  display: grid;
  gap: 4rem;
}
@media (min-width: 1000px) {
  .light_details_all > div:not(.progress_container_btns):not(.competition_results_container_btns_large) {
    gap: 6rem;
    max-width: 1000px;
    margin: 0 auto;
  }
}
.light_details_all > div:not(.progress_container_btns):not(.competition_results_container_btns_large) h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 0.25rem;
}
@media (min-width: 1000px) {
  .light_details_all > div:not(.progress_container_btns):not(.competition_results_container_btns_large) > div {
    display: grid;
    gap: 4rem;
    align-items: center;
    grid-template-columns: 1fr 1fr;
  }
}
.light_details_all ul {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 1000px) {
  .light_details_all ul {
    margin-top: unset;
  }
}
.light_details_all ul li {
  border-bottom: 1px solid rgba(151, 161, 187, 0.25);
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.light_details_all ul li > p {
  width: 35%;
}
.light_details_all ul li div {
  width: 60%;
  height: 30px;
  border-radius: 5px;
  position: relative;
}
.light_details_all ul li div span {
  display: block;
  height: 30px;
  border-radius: 5px;
}
.light_details_all ul li div p {
  font-size: 0.9rem;
  font-weight: 700;
  position: absolute;
  left: 1rem;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.light_details_all ul li.light_details_completion div {
  background: linear-gradient(to right, rgba(247, 65, 65, 0.25), rgba(230, 118, 192, 0.25));
}
.light_details_all ul li.light_details_completion div span {
  background: linear-gradient(to right, #f74141, #e676c0);
}
.light_details_all ul li.light_details_good div {
  background: linear-gradient(to right, rgba(44, 218, 161, 0.25), rgba(49, 127, 226, 0.25));
}
.light_details_all ul li.light_details_good div span {
  background: linear-gradient(to right, #2cdaa1, #317fe2);
}
.light_details_all .light_details_tag {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
  display: inline-block;
  color: #fff;
}
.light_details_all .light_details_tag_mobilite {
  background: rgba(204, 204, 51, 0.5);
}
.light_details_all .light_details_tag_green {
  background: rgba(51, 192, 204, 0.5);
}
.light_details_all .light_details_tag_alimentation {
  background: rgba(204, 51, 86, 0.5);
}

.progress_container_btns .competition_results_container_btns {
  width: 100%;
  gap: 2rem;
}
.progress_container_btns .competition_results_container_btns .competition_results_btn {
  width: 100%;
}
.progress_container_btns .competition_results_container_btns .competition_results_btn p {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
}
.progress_container_btns .competition_results_container_btns .competition_results_btn p span {
  color: #97a1bb;
  font-size: 1rem !important;
}
@media (max-width: 999px) {
  .progress_container_btns .competition_results_container_btns .competition_results_btn {
    padding: 2rem 0;
    gap: 1rem;
  }
}

#full_progress .light_details_all h2 {
  margin-bottom: 3rem;
}
#full_progress .certificates_section .progress_container_btns {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 500px) {
  #full_progress .certificates_section .progress_container_btns {
    text-align: center;
  }
}
#full_progress .certificates_section .progress_container_btns span {
  color: #97a1bb;
  font-size: 0.9rem;
}
#full_progress .certificates_section .progress_container_btns .progress_container_btns {
  gap: 0.5rem;
}
#full_progress .certificates_section .progress_container_btns .btn {
  padding: 0.7rem;
  border-radius: 5px;
}
#full_progress .certificates_section .progress_container_btns .btn img {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
}
#full_progress .certificates_section .progress_container_btns_disabled {
  opacity: 0.3;
}
#full_progress .certificates_section .grid_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 700px) and (max-width: 999px) {
  #full_progress .certificates_section .grid_container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 500px) and (max-width: 699px) {
  #full_progress .certificates_section .grid_container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 499px) {
  #full_progress .certificates_section .grid_container {
    display: flex;
    flex-direction: column;
  }
  #full_progress .certificates_section .grid_container > .progress_container_btns {
    flex-direction: row;
    justify-content: space-between;
  }
}
#full_progress .competition_results_container_btns_large {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 499px) {
  #full_progress .competition_results_container_btns_large {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 500px) and (max-width: 1000px) {
  #full_progress .competition_results_container_btns_large {
    grid-template-columns: repeat(2, 1fr);
  }
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large {
  padding: 3rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 500px) and (max-width: 700px) {
  #full_progress .competition_results_container_btns_large .competition_results_btn_large {
    padding: 2rem;
  }
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large > div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large_title {
  text-align: center;
  border-bottom: 1px solid rgba(151, 161, 187, 0.5);
  padding-bottom: 2rem;
  margin-bottom: 1rem;
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large_title p {
  font-size: 1.4rem;
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large_title span {
  color: #97a1bb;
  font-size: 0.9rem;
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large_content > div {
  display: flex;
  align-items: center;
  gap: 2rem;
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large_content > div span {
  color: #fff;
  font-size: 1.4rem;
}
#full_progress .competition_results_container_btns_large .competition_results_btn_large_content > div p {
  color: #97a1bb;
  font-size: 1rem;
}

@media (min-width: 1000px) {
  .light_story {
    padding-top: 13rem;
    transform: translateY(-9rem);
    padding-bottom: unset;
  }
}
@media (min-width: 1000px) {
  .light_story h1 {
    max-width: 60rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}
.light_story .btn {
  margin-top: 2rem;
}
.light_story p.story_info,
.light_story .container > div {
  color: #97a1bb;
}
@media (min-width: 1000px) {
  .light_story p.story_info,
.light_story .container > div {
    text-align: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.light_progress .progress_module_desc {
  color: #97a1bb;
}
.light_progress .progress_module_img a {
  position: initial;
  top: 0;
  left: 0;
  transform: unset;
}
.light_progress .progress_module_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.light_progress .progress_module_img {
  background-blend-mode: saturation;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16/9;
}
.light_progress .progress_module_img .icon_eye {
  width: 1rem;
  height: 1rem;
  transform: unset;
}
.light_progress_footer {
  align-items: start;
  border-top: 1px solid #97a1bb;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 4rem;
  padding: 2rem 0;
}
@media (min-width: 700px) {
  .light_progress_footer {
    flex-direction: row;
    justify-content: space-between;
  }
}
.light_progress_footer .any-problem {
  font-size: 1.1rem;
  font-weight: 700;
}
.light_progress_footer .any-problem a {
  color: #97a1bb;
  font-weight: 400;
  text-decoration: underline;
}
.light_progress_footer .app-version {
  color: #dee0f8ff;
}

.light_modal_progress .bloc {
  padding: unset;
}
.light_modal_progress .bloc > div:first-of-type {
  border-radius: 5px 5px 0 0;
  background: center/cover no-repeat url(/images/story.jpg?6ac192b93094292993b1db93601bf2a4);
  padding: 4rem 2rem 2rem 2rem;
}
@media (min-width: 1000px) {
  .light_modal_progress .bloc > div:first-of-type {
    padding: 6rem 3rem 3rem 3rem;
  }
}
.light_modal_progress .bloc > div:first-of-type .close {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  top: 1rem;
  right: 1rem;
}
@media (min-width: 1000px) {
  .light_modal_progress .bloc > div:first-of-type .close {
    top: 2rem;
    right: 2rem;
  }
}
.light_modal_progress .bloc > div:first-of-type h2 {
  font-size: 2rem;
  border-bottom: unset;
  padding-bottom: unset;
}
@media (min-width: 1000px) {
  .light_modal_progress .bloc > div:first-of-type h2 {
    margin-bottom: 2rem;
  }
}
.light_modal_progress .bloc > div:last-of-type {
  border-radius: 0 0 5px 5px;
  padding: 2rem;
}
@media (min-width: 1000px) {
  .light_modal_progress .bloc > div:last-of-type {
    padding: 3rem;
  }
}
.light_modal_progress .bloc > div:last-of-type p span {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
  display: inline-block;
  color: #fff;
}
.light_modal_progress .bloc > div:last-of-type .progress_bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.25);
}

.light_error {
  width: 90vw;
  margin: 2rem auto;
  max-width: 1200px;
}
.light_error_message {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  font-size: 2rem;
}

.light_title {
  width: 84vw;
  margin: 0 auto 2rem;
}
.light_title h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.light_title a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.light_title a img {
  width: 0.75rem;
  height: 0.75rem;
  transform: translateY(1px);
}
.light_title p.title {
  color: #78cb46;
}

.light_profile {
  width: 84vw;
  max-width: 1000px;
  margin: 0 auto;
}
.light_profile_bloc {
  background: #242952;
  padding: 2rem;
  border-radius: 5px;
}
@media (min-width: 700px) {
  .light_profile_bloc {
    padding: 3rem;
    transform: scale(0.9);
    transform-origin: top;
  }
}
.light_profile_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.light_profile_title img {
  width: 6rem;
  height: 6rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.light_profile_title h2 {
  font-size: 1.4rem;
  font-weight: 700;
}
@media (min-width: 700px) {
  .light_profile_title h2 {
    font-size: 1.6rem;
  }
}
.light_profile_title p {
  color: #97a1bb;
}
.light_profile form {
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) {
  .light_profile form {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.light_profile form .auth_error {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: unset;
}
.light_profile form > div {
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) {
  .light_profile form > div {
    gap: 2rem;
  }
}
.light_profile form > div > div > label {
  font-size: 0.9rem;
  color: #97a1bb;
  margin-bottom: 0.5rem;
  display: block;
}
.light_profile form > div > div > input[type=text],
.light_profile form > div > div > input[type=email] {
  width: 100%;
  background: #2f325e;
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem;
  border: 1px solid #44498b;
  border-radius: 5px;
  color: #fff;
  transition: padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .light_profile form > div > div > input[type=text],
.light_profile form > div > div > input[type=email] {
    padding: 1rem;
  }
}
.light_profile form > div > div > input[type=text].is-invalid,
.light_profile form > div > div > input[type=email].is-invalid {
  border-color: #cb4646;
}
.light_profile form > div > div > input[type=text]:focus,
.light_profile form > div > div > input[type=email]:focus {
  border: 1px solid #fff;
}
.light_profile form > div > div > input[type=text]:disabled,
.light_profile form > div > div > input[type=email]:disabled {
  opacity: 0.4;
}
.light_profile form .select {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  position: relative;
}
.light_profile form .select .label_select {
  color: #141a48;
  margin-bottom: 0.5rem;
}
.light_profile form .select img {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 1.25rem;
  right: 1rem;
}
.light_profile form .select .select-field input,
.light_profile form .select .select-field label,
.light_profile form .select .select-field input:checked ~ .select-placeholder {
  display: none;
}
.light_profile form .select .select-field input:checked + label,
.light_profile form .select .select-field .select-placeholder {
  display: block;
}
.light_profile form .select .select-field label {
  width: 100%;
  padding: 1rem 1.5rem 1rem 0.75rem;
  font-size: 1rem;
  color: #fff;
  background: #2f325e;
  border: 1px solid #44498b;
  border-radius: 5px;
  cursor: pointer;
  white-space: pre-wrap;
  line-height: 1;
}
@media (min-width: 1000px) {
  .light_profile form .select .select-field label {
    padding: 1.25rem 2rem 1.25rem 1rem;
  }
}
.light_profile form .select .select-field label img {
  width: 1rem;
  height: 1rem;
  float: right;
}
.light_profile form .select .select-options {
  animation-fill-mode: both;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background: #242952;
  border: 1px solid #44498b;
  color: #fff;
  border-radius: 0 0 5px 5px;
  width: 100%;
  border-top: unset;
  max-height: 12rem;
  overflow-y: scroll;
  padding: 1rem 0;
  z-index: 1;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 500px) {
  .light_profile form .select .select-options {
    flex-direction: column;
    align-items: flex-start;
  }
}
.light_profile form .select .select-options::-webkit-scrollbar {
  display: none;
}
.light_profile form .select .select-options label {
  display: block;
  cursor: pointer;
  font-weight: 400;
  padding: 0.5rem 1.5rem;
  white-space: pre-line;
  line-height: 1.2;
  width: 100%;
}
.light_profile form .select .select-options label:hover {
  background: #141a48;
}
.light_profile form .select .select-options-focus {
  position: absolute;
  opacity: 0;
}
.light_profile form .select .show-options {
  opacity: 1;
  visibility: visible;
}
.light_profile form > div:last-of-type {
  margin-top: 1rem;
}
@media (min-width: 700px) {
  .light_profile form > div:last-of-type {
    grid-column: 1/3;
    gap: 1rem;
    justify-self: center;
    width: 100%;
    max-width: 24rem;
  }
}
.light_profile form a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.light_profile form input[type=submit] {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: #78cb46;
  border: 1px solid #78cb46;
}
.light_profile_delete {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .light_profile_delete {
    max-width: 16rem;
  }
}

.profile_password {
  width: 84vw;
  margin: 0 auto;
  padding-bottom: 4rem;
}
.profile_password.auth {
  background: unset;
  padding: 0 0 2rem 0;
  min-height: unset;
}
.profile_password .auth_form_content form {
  margin-top: unset;
}

.modal_light .bloc {
  background: #fff;
  padding: 2rem;
}
@media (min-width: 700px) {
  .modal_light .bloc {
    padding: 3rem;
  }
}
.modal_light .bloc p {
  color: #141a48;
  font-size: 1.2rem;
  margin: unset;
}
.modal_light .bloc div {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}
.modal_light .bloc div button {
  align-items: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  max-width: 10rem;
  padding: 1rem;
  width: 100%;
}
.modal_light .bloc div button:first-of-type, .modal_light .bloc div button.cancel_button {
  border: 1px solid #141a48;
  color: #141a48;
}
.modal_light .bloc div button:last-of-type, .modal_light .bloc div button.confirm_button {
  background: #46cb6a;
  border: 1px solid #46cb6a;
}
.modal_light .bloc div button.cancel_button {
  background: none;
  border: 1px solid #141a48;
  color: #141a48;
}
.modal_light .bloc div button.confirm_button {
  color: #fff;
}
.modal_light .bloc div .logout_form {
  align-items: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  margin-top: 0;
  max-width: 10rem;
  padding: 1rem;
  width: 100%;
}

.light_project {
  width: 84vw;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .light_project {
    width: 100vw;
    padding-bottom: 4rem;
    padding-left: 8vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
@media (min-width: 1400px) {
  .light_project {
    padding-left: calc((100vw - 1200px) / 2);
  }
}
.light_project div:first-of-type {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1000px) {
  .light_project div:first-of-type {
    max-width: 30rem;
  }
}
.light_project div:first-of-type h1 {
  font-size: 2rem;
  font-weight: 700;
}
.light_project div:first-of-type p:first-of-type {
  color: #78cb46;
}
.light_project div:first-of-type p:last-of-type {
  color: #97a1bb;
}
.light_project div:last-of-type {
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .light_project div:last-of-type {
    margin-top: unset;
  }
}
.light_project div:last-of-type img {
  width: 100%;
}
@media (min-width: 1000px) {
  .light_project div:last-of-type img {
    transform: scale(2) translateX(1rem);
  }
}

.light_project_explication {
  width: 84vw;
  max-width: 1200px;
  margin: 4rem auto;
}
@media (min-width: 1000px) {
  .light_project_explication {
    margin: 6rem auto;
    display: grid;
    gap: 12rem;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
}
@media (min-width: 1000px) {
  .light_project_explication .eye {
    width: 12px;
    height: 20px;
    border-radius: 2px;
    background: #111111;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    grid-column: unset;
    grid-row: unset;
    gap: unset;
  }
  .light_project_explication .eye-left {
    top: 26%;
    left: 28%;
    transform: rotate(-15deg);
  }
  .light_project_explication .eye-right {
    top: 26%;
    left: 35%;
    transform: rotate(5deg);
  }
  .light_project_explication .eye span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #253084;
    position: absolute;
    top: 20%;
    left: 20%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .light_project_explication .eye-wink {
    transform: scaleY(0.3);
  }
  .light_project_explication .eye-wink span {
    opacity: 0;
  }
}
.light_project_explication div {
  display: grid;
  gap: 1rem;
}
@media (min-width: 1000px) {
  .light_project_explication div {
    grid-column: 2/3;
    grid-row: 1;
    gap: 1.5rem;
  }
}
.light_project_explication h2 {
  font-size: 2rem;
  font-weight: 700;
}
.light_project_explication p {
  color: #97a1bb;
}
.light_project_explication img {
  width: 75%;
  max-width: 20rem;
  display: block;
  margin: 2rem auto 0;
}
@media (min-width: 1000px) {
  .light_project_explication img {
    width: 100%;
    max-width: unset;
    grid-column: 1/2;
    grid-row: 1;
    margin: unset;
  }
}

.light_project_impact {
  width: 84vw;
  max-width: 1200px;
  margin: 4rem auto;
  background: #141a48;
  border-radius: 5px;
  padding: 2rem;
}
@media (min-width: 1000px) {
  .light_project_impact {
    margin: 6rem auto;
    padding: 4rem;
  }
}
.light_project_impact h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 1rem 0;
  text-align: center;
}
@media (min-width: 1000px) {
  .light_project_impact h2 {
    max-width: 34rem;
    margin: 1.5rem auto;
  }
}
.light_project_impact > p:first-of-type {
  color: #78cb46;
  text-align: center;
}
.light_project_impact > p:last-of-type {
  text-align: center;
}
@media (min-width: 1000px) {
  .light_project_impact > p:last-of-type {
    max-width: 38rem;
    margin: 0 auto;
  }
}
.light_project_impact p {
  color: #97a1bb;
}
.light_project_impact > div {
  margin-top: 2rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .light_project_impact > div {
    max-width: 46rem;
    margin: 3rem auto 0;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
.light_project_impact > div > div {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .light_project_impact > div > div {
    gap: 3rem;
  }
}
.light_project_impact > div > div div {
  display: grid;
  gap: 0.5rem;
}
.light_project_impact > div h3 {
  font-weight: 700;
}
.light_project_impact > div img {
  width: 2.75rem;
  height: 2.75rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.light_project_about {
  width: 84vw;
  max-width: 1000px;
  margin: 4rem auto;
}
@media (min-width: 1000px) {
  .light_project_about {
    margin: 8rem auto;
  }
}
.light_project_about span {
  font-size: 0.8rem;
}
.light_project_about span:empty {
  display: none;
}
.light_project_about span a {
  text-decoration: underline;
}
.light_project_about h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 1rem 0;
  text-align: center;
}
@media (min-width: 1000px) {
  .light_project_about h2 {
    max-width: 34rem;
    margin: 1.5rem auto 3rem;
  }
}
.light_project_about > div {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .light_project_about > div {
    grid-template-columns: 1fr 1fr;
  }
}
.light_project_about > div div {
  background: #141a48;
  padding: 3rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .light_project_about > div div {
    padding: 4rem;
  }
}
.light_project_about > div div img {
  height: 2rem;
}

.light_project_bloc {
  width: 84vw;
  max-width: 1200px;
  margin: 4rem auto 0;
  padding-bottom: 4rem;
}
@media (min-width: 1000px) {
  .light_project_bloc {
    padding-bottom: 6rem;
  }
}
.light_project_bloc img {
  transform: rotate(180deg);
  margin-left: 1rem;
  width: 1rem;
  height: 1rem;
}

.modal_contact.scroll {
  padding: 2rem 0;
  align-items: flex-start;
  overflow-y: auto;
}
.modal_contact .bloc {
  padding: 0;
}
.modal_contact .bloc .close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  top: 1rem;
  right: 1rem;
}
@media (min-width: 1000px) {
  .modal_contact .bloc .close {
    top: 2rem;
    right: 2rem;
  }
}
.modal_contact .bloc .close img {
  width: 0.75rem;
}
.modal_contact_title {
  background: center/cover no-repeat url(/images/login.jpg?7d61042112103a990667b8b564ccc52b);
  border-radius: 5px 5px 0 0;
  padding: 1.5rem;
}
@media (min-width: 1000px) {
  .modal_contact_title {
    padding: 3rem;
  }
}
.modal_contact_title h1 {
  font-size: 1.8rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .modal_contact_title h1 {
    font-size: 2.1rem;
  }
}
.modal_contact_title p {
  color: #97a1bb;
  font-size: 0.9rem;
}
@media (min-width: 1000px) {
  .modal_contact_title p {
    font-size: 1rem;
    margin-top: 0.25rem;
  }
}
.modal_contact .bloc form {
  margin-top: unset;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 1000px) {
  .modal_contact .bloc form {
    padding: 3rem;
    gap: 2rem;
  }
}
.modal_contact .bloc form label {
  font-size: 0.9rem;
  color: #97a1bb;
  margin-bottom: 0.5rem;
  display: block;
}
.modal_contact .bloc form div:not(:last-of-type) {
  margin-bottom: unset;
}
.modal_contact .bloc form div:nth-of-type(3),
.modal_contact .bloc form div:nth-of-type(4) {
  grid-column: 1/3;
}
.modal_contact .bloc form input[type=text],
.modal_contact .bloc form input[type=email],
.modal_contact .bloc form textarea {
  width: 100%;
  background: #2f325e;
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem;
  border: 1px solid #44498b;
  border-radius: 5px;
  color: #fff;
  transition: padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .modal_contact .bloc form input[type=text],
.modal_contact .bloc form input[type=email],
.modal_contact .bloc form textarea {
    padding: 1rem;
  }
}
.modal_contact .bloc form input[type=text]:focus,
.modal_contact .bloc form input[type=email]:focus,
.modal_contact .bloc form textarea:focus {
  border: 1px solid #fff;
}
.modal_contact .bloc form textarea {
  resize: none;
  line-height: 1.4;
}
.modal_contact .bloc form input[type=submit] {
  margin-top: unset;
  grid-column: 2/3;
}
.modal_contact .is-invalid {
  border-color: #cb4646 !important;
}

.light_my_company {
  width: 84vw;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .light_my_company {
    padding-bottom: 4rem;
  }
}
.light_my_company_title {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-template-areas: "filter-by-company" "download-stats";
}
@media (min-width: 700px) {
  .light_my_company_title {
    margin: 1rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "filter-by-company download-stats";
  }
}
.light_my_company_title_filter-by-company {
  grid-area: "filter-by-company";
}
.light_my_company_title_download-stats {
  grid-area: "download-stats";
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
}
.light_my_company_title_download-stats a, .light_my_company_title_download-stats button {
  width: 100%;
}
@media (min-width: 700px) {
  .light_my_company_title_download-stats {
    justify-self: end;
  }
}
.light_my_company_training {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  grid-template-areas: "training-available" "training-started" "training-completed" "training-provided";
  margin: 2rem auto;
}
@media (min-width: 1000px) {
  .light_my_company_training {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    grid-template-areas: "training-available training-started training-completed training-provided";
    margin: 1rem auto;
  }
}
.light_my_company_training .card {
  background-clip: content-box, border-box;
  background-image: linear-gradient(#080a2e, #080a2e), radial-gradient(circle at top left, #43f0d9, #0c3c68);
  background-origin: border-box;
  border-radius: 8px;
  border: double 2px transparent;
}
.light_my_company_training .card_content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.light_my_company_training .card_content h2 {
  font-size: 2rem;
  font-weight: bold;
  min-width: 6.2rem;
}
.light_my_company_training .card_content img {
  cursor: pointer;
  height: 23px;
  width: 23px;
}
.light_my_company_training .card_content_training_duration {
  min-width: 10.5rem !important;
}
.light_my_company_training_available {
  grid-area: "training-available";
  border-radius: 5px;
}
.light_my_company_training_started {
  grid-area: "training-started";
}
.light_my_company_training_completed {
  grid-area: "training-completed";
}
.light_my_company_training_provided {
  grid-area: "training-provided";
}
.light_my_company_table-heading {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "table-title" "search-by-user";
  margin: 2rem auto;
}
@media (min-width: 1000px) {
  .light_my_company_table-heading {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "table-title search-by-user";
    margin: 4rem auto;
  }
}
.light_my_company_table-heading_title {
  grid-area: "table-title";
  margin: 1rem 0;
}
@media (min-width: 1000px) {
  .light_my_company_table-heading_title {
    margin: 0;
  }
}
.light_my_company_table-heading_title h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
.light_my_company_table-heading_search {
  align-items: center;
  background: #242952;
  border-radius: 5px;
  display: flex;
  grid-area: "search-by-user";
  padding: 1rem;
}
.light_my_company_table-heading_search img {
  height: 25px;
  width: 25px;
}
.light_my_company_table-heading_search input {
  margin-left: 1rem;
  width: 100%;
}

.table_heading-container {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "table-title" "search-by-user";
  margin: 2rem auto;
}
@media (min-width: 1000px) {
  .table_heading-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "table-title search-by-user";
  }
}
.table_heading-container_title {
  grid-area: "table-title";
  margin: 1rem 0;
}
@media (min-width: 1000px) {
  .table_heading-container_title {
    margin: 0;
  }
}
.table_heading-container_title h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
.table_heading-container_search {
  grid-area: "search-by-user";
  background: #242952;
  padding: 1rem;
  border-radius: 0.5rem;
  align-items: center;
  display: flex;
}
.table_heading-container_search img {
  height: 25px;
  width: 25px;
}
.table_heading-container_search input {
  margin-left: 1rem;
  width: 100%;
}
.table_content {
  background: #242952;
  border-radius: 0.5rem;
  padding: 1rem;
}
.table_content .tools {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
.table_content .tools_filter-by {
  width: 27.5rem;
}
.table_content .data {
  overflow-x: auto;
}
.table_content .list {
  width: 100%;
}
.table_content .list td, .table_content .list th {
  padding: 1rem;
  text-align: left;
}
.table_content .list thead {
  text-align: center;
  font-weight: bold;
}
.table_content .list thead tr {
  border-bottom: 2px solid #676595;
}
.table_content .list thead tr th {
  text-transform: uppercase;
}
.table_content .list thead tr th:last-child {
  text-align: end;
}
.table_content .list tbody {
  text-align: center;
}
.table_content .list tbody tr {
  border-bottom: 2px solid #43425d;
}
.table_content .list tbody tr:hover {
  background: #141a48;
}
.table_content .list tbody tr td:last-child {
  text-align: end;
}
.table_content .list tbody td {
  vertical-align: middle;
}
.table_content .list tbody td img {
  max-width: 40px;
}
.table_content .list tbody td .show {
  text-decoration: underline;
}
.table_content .list tbody td .show:hover {
  color: #3545c0;
}
.table_content .list tbody .options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 5rem;
}
.table_content .list tbody .options form {
  margin-left: 1rem;
}
.table_content .list tbody .options form button {
  color: #cb4646;
}

.search_container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 2rem;
}
.search_container input[type=search] {
  background: #fff;
  border: #efefef;
  padding: 1rem;
  border-radius: 4px;
  margin-right: 1rem;
  width: 25rem;
}

.customized-select {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  width: 100%;
}
.customized-select .label_select {
  color: #141a48;
  margin-bottom: 0.5rem;
}
.customized-select img {
  cursor: pointer;
  height: 1rem;
  position: absolute;
  right: 1rem;
  top: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 1rem;
}
.customized-select .select-field input,
.customized-select .select-field label,
.customized-select .select-field input:checked ~ .select-placeholder {
  display: none;
}
.customized-select .select-field input:checked + label,
.customized-select .select-field .select-placeholder {
  display: block;
}
.customized-select .select-field label {
  background: #2f325e;
  border-radius: 5px;
  border: 1px solid #44498b;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.5rem 1rem 0.75rem;
  white-space: pre-wrap;
  width: 100%;
}
@media (min-width: 1000px) {
  .customized-select .select-field label {
    padding: 1.25rem 2rem 1.25rem 1rem;
  }
}
.customized-select .select-field label img {
  float: right;
  height: 1rem;
  width: 1rem;
}
.customized-select .select-options {
  animation-fill-mode: both;
  background: #242952;
  border-radius: 0 0 5px 5px;
  border-top: unset;
  border: 1px solid #44498b;
  color: #fff;
  max-height: 12rem;
  opacity: 0;
  overflow-y: scroll;
  padding: 1rem 0;
  position: absolute;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  visibility: hidden;
  width: 100%;
  z-index: 1;
}
@media (min-width: 500px) {
  .customized-select .select-options {
    align-items: flex-start;
    flex-direction: column;
  }
}
.customized-select .select-options::-webkit-scrollbar {
  display: none;
}
.customized-select .select-options#countries-options::-webkit-scrollbar {
  display: block;
  width: 1rem;
}
.customized-select .select-options label {
  cursor: pointer;
  display: block;
  font-weight: 400;
  line-height: 1.2;
  padding: 0.5rem 1.5rem;
  white-space: pre-line;
  width: 100%;
}
.customized-select .select-options label:hover {
  background: #141a48;
}
.customized-select .select-options-focus {
  opacity: 0;
  position: absolute;
}
.customized-select .show-options {
  opacity: 1;
  visibility: visible;
}

.pagination {
  margin-top: 2rem;
}
.pagination nav {
  display: block;
}
@media (min-width: 700px) {
  .pagination nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}
.pagination .btn {
  margin-bottom: 1rem;
  margin-right: 1rem;
}
@media (min-width: 700px) {
  .pagination .btn {
    margin-bottom: 0;
  }
}
.pagination .results {
  color: #97a1bb;
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  .pagination .results {
    margin-bottom: 0;
  }
}

.btn {
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 300;
  display: inline-block;
  transition: background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn_rounded {
  border-radius: 50%;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.btn_rounded:first-of-type {
  margin-right: 0.5rem;
}

.btn_small {
  font-size: 0.8rem;
  padding: 0.8rem 1rem;
}

.btn_icon {
  padding: 0.4rem;
}

.btn_primary {
  background: #78cb46;
  color: #fff;
}
.btn_primary:hover {
  background: #60ad31;
}

.btn_primary_outlined {
  background: none;
  color: #78cb46;
  border: 1px solid #efefef;
}
.btn_primary_outlined:hover {
  background: #78cb46;
  color: #fff;
  border: 1px solid #78cb46;
}

.btn_blue {
  background: none;
  color: #fff;
  border: 1px solid #97a1bb;
}
.btn_blue:hover {
  background: #141a48;
  color: #fff;
  border: 1px solid #fff;
}

.btn_disabled {
  background: #efefef;
  color: #c9c9c9;
  border: 1px solid #efefef;
  cursor: not-allowed;
}

.btn_blue_outlined {
  background: none;
  color: #141a48;
  border: 1px solid #efefef;
}
.btn_blue_outlined:hover {
  background: #141a48;
  color: #fff;
  border: 1px solid #141a48;
}

.btn_red {
  background: #cb4646;
  color: #fff;
  border: 1px solid #cb4646;
}
.btn_red:hover {
  background: none;
  color: #cb4646;
  border: 1px solid #cb4646;
}

.btn_red_outlined {
  background: none;
  color: #cb4646;
  border: 1px solid #efefef;
}
.btn_red_outlined:hover {
  background: #cb4646;
  color: #fff;
  border: 1px solid #cb4646;
}

.tooltip_container {
  position: relative;
}
@media (max-width: 699px) {
  .tooltip_container {
    display: none;
  }
}
.tooltip_container_content {
  background: #242952;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  left: 50%;
  opacity: 0;
  padding: 0.75rem 1rem;
  position: absolute;
  top: 2rem;
  transform: translateX(-50%);
  visibility: hidden;
  width: 15rem;
}
@media (max-width: 699px) {
  .tooltip_container_content {
    width: auto;
  }
}
.tooltip_container_div {
  position: relative;
}
.tooltip_container_div:hover .tooltip-text {
  background-color: #242952;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.cookies-modal {
  align-items: center;
  background: rgba(8, 10, 46, 0);
  bottom: 0;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 20px;
  position: fixed;
  right: 0;
  visibility: hidden;
  z-index: 10;
}
.cookies-modal.active {
  opacity: 1;
  visibility: visible;
}
.cookies-modal .modal-container {
  align-items: center;
  background-color: rgba(60, 74, 97, 0.8);
  border-radius: 5px;
  border: 1px solid #3C4A61;
  bottom: 0;
  justify-content: center;
  left: 0;
  margin: 1rem 2rem;
  padding: 20px;
  position: fixed;
  right: 0;
  width: 50%;
}
@media (min-width: 320px) {
  .cookies-modal .modal-container {
    width: 80%;
    margin: 1rem auto;
  }
}
@media (min-width: 1000px) {
  .cookies-modal .modal-container {
    width: 90%;
  }
}
@media (min-width: 1200px) {
  .cookies-modal .modal-container {
    width: 80%;
  }
}
.cookies-modal .modal-container .title {
  font-size: 1rem;
}
.cookies-modal .modal-container .heading {
  font-weight: bold;
}
@media (min-width: 700px) {
  .cookies-modal .modal-container .heading {
    font-size: 2rem;
  }
}
.cookies-modal .modal-container .modal-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 1rem;
  justify-content: space-between;
}
@media (min-width: 700px) {
  .cookies-modal .modal-container .modal-content {
    align-items: center;
    flex-direction: row;
    font-size: 1rem;
  }
}
.cookies-modal .modal-container .modal-content .actions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .cookies-modal .modal-container .modal-content .actions {
    flex-direction: row;
    gap: 3rem;
  }
}
.cookies-modal .modal-container .modal-content .actions .accept {
  background: #3C4A61;
  border-radius: 8px;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  min-width: 3rem;
  padding: 1rem;
}
@media (min-width: 320px) {
  .cookies-modal .modal-container .modal-content .actions .accept {
    min-width: 10rem;
  }
}
.cookies-modal .modal-container .modal-content .actions .accept:hover {
  transform: scale(1.05);
}
.cookies-modal .modal-container .modal-content .actions .detail a {
  color: #fff;
  text-decoration: underline;
}
.cookies-modal .modal-container .modal-content .actions .detail:hover {
  transform: scale(1.05);
}

.page {
  width: 90vw;
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
  font-size: 1rem;
  color: #97a1bb;
}
@media (min-width: 700px) {
  .page {
    padding: 4rem 0 6rem;
  }
}
.page_scroll {
  width: 100%;
  max-width: 18rem;
  background: #78cb46;
  border-radius: 5px;
  position: fixed;
  bottom: 2rem;
  z-index: 10;
  left: calc(50% - 9rem);
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  cursor: pointer;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page_scroll.hide {
  opacity: 0;
  visibility: hidden;
}
.page_scroll img {
  width: 1rem;
}
.page_scroll p {
  color: #fff;
  font-size: 0.9rem;
}
.page-header {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 700px) {
  .page-header {
    margin-bottom: 3rem;
  }
}
.page-header h1 {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
}
.page-header p {
  color: #78cb46;
}
.page-body {
  display: grid;
  gap: 0.5rem;
  line-height: 1.6;
}
@media (min-width: 700px) {
  .page-body {
    gap: 0.75rem;
  }
}
.page-body br {
  display: none;
}
.page-body strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
}
.page-body ul {
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 700px) {
  .page-body ul {
    gap: 0.75rem;
  }
}
.page-body > div > strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}
.page-body > div > a > strong {
  font-weight: 400;
  text-decoration: underline;
}
.page .page-footer {
  border-top: 1px solid #43435e;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .page .page-footer {
    margin-top: 3rem;
  }
}
.page .page-footer p {
  max-width: 20rem;
  margin: 1rem auto;
}

@media (max-width: 699px) {
  .quizz_header_page .quizz_header_logo {
    display: block;
  }
  .quizz_header_page .quizz_header_logo img {
    width: 8rem;
  }
}

#page-cookies span {
  font-weight: 600;
}
#page-cookies .page-body br {
  display: block;
}

.vfull_nav {
  align-items: center;
  -webkit-backdrop-filter: blur(17px);
          backdrop-filter: blur(17px);
  display: flex;
  height: 9rem;
  position: sticky;
  top: 0;
  z-index: 4;
}
.vfull_nav.active .vfull_nav_icon span {
  transform: rotate(45deg) translateX(1px);
}
.vfull_nav.active .vfull_nav_icon span::before {
  opacity: 0;
  visibility: hidden;
}
.vfull_nav.active .vfull_nav_icon span::after {
  transform: rotate(-90deg) translateX(2px);
}
.vfull_nav.active .vfull_nav_menu {
  opacity: 1;
  visibility: visible;
}
.vfull_nav_container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 84vw;
}
@media (min-width: 1000px) {
  .vfull_nav_container {
    gap: 4rem;
    justify-content: flex-start;
  }
}
.vfull_nav_mobile_container {
  align-items: center;
  display: flex;
}
@media (min-width: 1000px) {
  .vfull_nav_mobile_container {
    width: 100%;
  }
}
.vfull_nav_subcontainer {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1000px) {
  .vfull_nav_subcontainer {
    width: 100%;
  }
}
.vfull_nav_content {
  position: relative;
}
.vfull_nav_content_right {
  display: none;
}
@media (min-width: 1000px) {
  .vfull_nav_content_right {
    align-items: center;
    display: flex;
    gap: 1rem;
    position: relative;
  }
}
.vfull_nav_content_right_profile {
  background: linear-gradient(135deg, rgba(20, 26, 72, 0.7), rgba(20, 26, 72, 0.4));
  border-radius: 1rem;
  padding: 0.5rem;
}
.vfull_nav_content_right_progress {
  background: linear-gradient(to right, rgba(32, 28, 28, 0.75), rgba(82, 69, 69, 0.75));
  border-radius: 1rem;
}
.vfull_nav_logo {
  position: relative;
  z-index: 11;
}
.vfull_nav_logo img {
  height: 5rem;
}
.vfull_nav_icon {
  align-items: center;
  background: #141a48;
  border-radius: 10px;
  border: 1px solid #242952;
  cursor: pointer;
  display: flex;
  height: 3.5rem;
  justify-content: center;
  position: relative;
  width: 3.5rem;
  z-index: 11;
}
@media (min-width: 1000px) {
  .vfull_nav_icon {
    display: none;
  }
}
.vfull_nav_icon span {
  background: #fff;
  border-radius: 10px;
  height: 2px;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 1.5rem;
}
.vfull_nav_icon span::before {
  background: #fff;
  border-radius: 10px;
  content: "";
  display: block;
  height: 2px;
  transform: translateY(-6px);
  width: 100%;
}
.vfull_nav_icon span::after {
  background: #fff;
  border-radius: 10px;
  content: "";
  display: block;
  height: 2px;
  transform: translateY(4px);
  width: 100%;
}
.vfull_nav_menu {
  align-items: flex-start;
  background: #141a48;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 8rem 8vw;
  position: absolute;
  top: 0;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  visibility: hidden;
  width: 100vw;
  z-index: 10;
}
@media (min-width: 1000px) {
  .vfull_nav_menu {
    align-items: center;
    background: unset;
    flex-direction: row;
    height: unset;
    opacity: 1;
    padding: unset;
    position: initial;
    visibility: visible;
    width: unset;
  }
}
.vfull_nav_menu li {
  color: #f6f6f6;
  font-size: 1.5rem;
  opacity: 0.8;
}
@media (max-width: 499px) {
  .vfull_nav_menu li.pt-3 {
    padding-top: 3rem;
  }
}
@media (min-width: 1000px) {
  .vfull_nav_menu li {
    font-size: 1rem;
  }
}
.vfull_nav_menu li.current {
  color: #fff;
}
.vfull_nav_menu .mobile_view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}
.vfull_nav_menu .mobile_view li {
  font-size: 1rem;
  font-weight: 300;
  display: flex;
  align-items: center;
}
.vfull_nav_menu .mobile_view li > .js-modal-element {
  color: #cb4646;
}
.vfull_nav_menu .mobile_view li > .js-modal-element img {
  fill: #cb4646;
  width: 1rem;
}
@media (min-width: 1000px) {
  .vfull_nav_menu .mobile_view {
    display: none;
  }
}
.vfull_nav_menu .scrore_bar_mobile {
  margin: 7rem auto auto auto;
  background: linear-gradient(to right, rgba(32, 28, 28, 0.75), rgba(82, 69, 69, 0.75));
  border-radius: 1rem;
}
@media (min-width: 1000px) {
  .vfull_nav_menu .scrore_bar_mobile {
    display: none;
  }
}

.profile {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding-right: 1rem;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1000px) {
  .profile:hover {
    transform: scale(0.9);
  }
}
.profile img {
  border-radius: 10px;
  cursor: pointer;
  height: 3.5rem;
  width: 3.5rem;
}
.profile svg {
  width: 1rem;
}
.profile_bloc {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #efefef;
  cursor: default;
  opacity: 0;
  padding: 1.5rem;
  position: absolute;
  right: 5rem;
  top: 4.5rem;
  transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  visibility: hidden;
  z-index: 2;
}
.profile_bloc.active {
  opacity: 1;
  visibility: visible;
}
.profile_bloc img {
  position: absolute;
  right: 2rem;
  top: -0.6rem;
  width: 1rem;
}
.profile_bloc li {
  color: #141a48;
  font-size: 0.9rem;
}
.profile_bloc li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.profile_bloc li:last-of-type {
  color: #cb4646;
}

.confirm-modal .bloc {
  background: #fff;
  overflow-y: auto;
  padding: 2rem;
}
@media (min-width: 700px) {
  .confirm-modal .bloc {
    padding: 3rem;
  }
}
.confirm-modal .bloc p {
  color: #141a48;
  font-size: 1.4rem;
}
.confirm-modal .bloc .sub-title {
  font-size: 1rem;
  font-weight: 600;
}
.confirm-modal .bloc .sub-title span {
  color: #F9C328;
}
.confirm-modal .bloc div {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2rem;
}
.confirm-modal .bloc div button {
  align-items: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  max-width: 10rem;
  padding: 1rem;
  width: 100%;
}
.confirm-modal .bloc div button:first-of-type, .confirm-modal .bloc div button.cancel_button {
  border: 1px solid #141a48;
  color: #141a48;
}
.confirm-modal .bloc div button:last-of-type, .confirm-modal .bloc div button.confirm_button {
  background: #46cb6a;
  border: 1px solid #46cb6a;
}
.confirm-modal .bloc div button.cancel-button {
  background: none;
  border: 1px solid #141a48;
  color: #141a48;
}
.confirm-modal .bloc div button.confirm-button {
  color: #fff;
}
.confirm-modal .bloc div .form {
  align-items: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  margin-top: 0;
  max-width: 10rem;
  padding: 1rem;
  width: 100%;
}

.score {
  background: linear-gradient(135deg, rgba(20, 26, 72, 0.7), rgba(20, 26, 72, 0.4));
  border-radius: 1rem;
  cursor: pointer;
  padding: 1.4rem;
  position: relative;
  width: 14rem;
}
.score_title {
  display: none;
}
.score_progress {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.score_progress .circle > svg {
  height: 1.5rem;
  width: 1.5rem;
}
.score_progress .circle > svg path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  stroke: #78cb46;
}
.score .score_desc_total {
  display: none;
}
.score_detail > a {
  display: none;
}
.score_expanded {
  height: 300px;
  position: relative;
  transition: min-height 0.5s ease-in;
  width: 300px;
}
.score_expanded .score_title {
  display: inherit;
}
.score_expanded .score_progress {
  display: block;
}
.score_expanded .score_progress .circle,
.score_expanded .score_progress .score_desc {
  display: flex;
  justify-content: center;
}
.score_expanded .score_progress .circle > svg {
  height: 10rem;
  position: absolute;
  top: 25%;
  width: 10rem;
}
.score_expanded .score_progress .circle > svg path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1;
  stroke: #78cb46;
}
.score_expanded .score_progress .score_desc_obtained {
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 48%;
  width: 5rem;
  text-align: center;
  width: 100%;
}
.score_expanded .score_progress .score_desc_total {
  display: inherit;
  opacity: 0.8;
  position: absolute;
  top: 56%;
  width: 5rem;
}
.score_expanded .score_progress .score_pointer > svg {
  position: absolute;
  right: 6%;
  top: 9%;
}
.score_expanded .score_progress .score_detail > a {
  bottom: 6%;
  color: #78cb46;
  display: inherit;
  position: absolute;
  right: 10%;
}
.score_expanded .score_progress .score_detail > a:hover {
  color: #46cb6a;
}
@media (min-width: 1000px) {
  .score_expanded {
    position: absolute;
    right: 100%;
    top: 3%;
  }
}

.base_page {
  position: relative;
}
.base_page.with_homeblock {
  background: center bottom/cover no-repeat url(/images/start.jpg?817b1ce36a0a8a95529f3219edc5e5f0);
  height: 60vh;
}
.base_page.with_homeblock::before {
  content: "";
  width: 100%;
  height: 5%;
  background: linear-gradient(to top, #080a2e, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
}
.base_page.with_homeblock::after {
  content: "";
  width: 25%;
  height: 100%;
  background: linear-gradient(to right, #080a2e, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (max-width: 499px) {
  .main_content {
    margin: 0 1rem;
  }
}
@media (min-width: 500px) and (max-width: 699px) {
  .main_content {
    margin: 0 3rem;
  }
}
@media (min-width: 700px) {
  .main_content {
    margin: 0 5rem;
  }
}

.base_page_bilanCarbone .main_content {
  margin: auto;
  width: 84vw;
}

@media (min-width: 1000px) {
  .bilanCarbone_content .main_content {
    margin: auto;
    width: 84vw;
  }
}
.base_page_bilanCarbone::before,
.bilanCarbone_content::before {
  content: "";
  width: 100%;
  height: 10%;
  background: linear-gradient(to top, #080a2e, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
}