/* ------------------------------- */
/* CSS by Armadiyo (Juillet 2026). */
/* */
/* www.armadiyo.com */
/* ------------------------------- */
:root{
--accentuel: #E63B11; /* Icon menu + apostrophe */
--debat-main-color: #F69F00; /* Orange */
--debat-main-color-dark: #B46D09;
--debat-main-color-light: #FDECCC;
--background-parcours-avis: #B46D09;
--background-popover: #BED56D;
--background-bloc-recap: #FFF5B9;
--background-central: #FDECCC;
--contour-champ: #BFADD6;
--bleu-encre: #201A41;
--bleu-encre-75: #2F2853;
--bleu-encre-25: #B8B4CF;
--lavande-100: #778DD8;
--lavande-75: #A0AFE4;
--lavande-50: #C8D0EF;
--lavande-25: #C8D0EF;
--lavande: #B8B4CF;
--turquoise: #00A0B0;
--jaune-soleil-25: #FFE2AE;
--bleu-givre: #75C7D2;
--anthracite-10: #E0E0E0;
--anthracite-50: #8E8E8E;
--anthracite-75: #5E5E5E;
--petrole-100: #004F54;
--petrole-75: #1E9198;
--petrole-25: #C6F4F7;
--petrole-10: #EDF7F7;
--vert-prairie-100: #55A43D;
--vert-prairie-10: #DFF5DC;
--bleu-roi: #1D71B8;
--bg-btn-majoritaire: #D8ECF6;
--jugement-0: #55A43D;
--jugement-1: #90B52C;
--jugement-2: #F9D133;
--jugement-3: #F99D33;
--jugement-4: #E63B11;
--posDotStart: -5px;
--posDotFinal: 0px;
--widthDotStart: 0px;
--widthDotFinal: 0px;
--posBulleStart: 1200px;
--posBulleFinal: 1000px;
--posInfoStart: -1000px;
--posInfoFinal: 0px;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: var(--bleu-encre);
font-optical-sizing: auto;
font-family: 'TTNormsPro-Rg', sans-serif;
}
body{
background: var(--debat-main-color);
/*background: var(--background-central);*/
padding: 0;
margin: 0;
}
.preload{
display: none;
}
.onlyOnTabletPortrait,
.onlyOnMobile,
.onlyForSmall{
display: none;
}
.displayblock{
display: block;
}
.displayinlineblock{
display: inline-block;
}
.mb4{margin-bottom: 4px;}
.mb8{margin-bottom: 8px;}
.mb16{margin-bottom: 16px;}
.mb32{margin-bottom: 32px;}
.mb40{margin-bottom: 40px;}
.mt16{margin-top: 16px;}
.pb0{padding-bottom: 0px;}
.pb40{padding-bottom: 40px;}
.pb60{padding-bottom: 60px;}
.pb80{padding-bottom: 80px;}
.mh60{min-height: 60px;}
.mh65{min-height: 65px;}
.mh40{min-height: 40px;}
.tal{text-align: left;}
.tac{text-align: center;}
.mauto{margin:0 auto;}
.homepage .fa-hourglass-half{
font-size: 24px;
color: var(--vert-prairie-100);
animation: rotate 10s infinite;
animation-delay: 5s;
animation-timing-function: cubic-bezier(.5,0,.5,1);
}
@-webkit-keyframes rotate {
0% { -webkit-transform:rotate(0deg) }
10% { -webkit-transform:rotate(360deg) }
100% { -webkit-transform:rotate(360deg) }
}
.page-mediateur h1,
.homepage h1{
font-family: 'TTNormsPro-Bd', sans-serif;
font-size: 36px;
line-height: 36px;
font-weight: 700;
margin-top: 32px;
margin-bottom: 12px;
color: var(--bleu-encre);
}
.page-mediateur h2,
.homepage h2{
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 22px;
line-height: 110%;
font-weight: 500;
margin-bottom: 16px;
padding: 0 5%;
color: var(--bleu-encre);
}
.homepage h3{
font-size: 18px;
line-height: 24px;
font-weight: 700;
padding: 0 15%;
color: var(--bleu-encre);
margin-top: 8px;
margin-bottom: 8px;
}
.homepage footer{
position: relative;
}
.homepage-visuel,
.merci-visuel-haut{
height: 437.5px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
/*
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
*/
}
.merci-visuel-haut:before,
.homepage-visuel:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 40px;
/*background: linear-gradient(180deg, rgba(253, 236, 204, 0) 0%, #FDECCC 100%);*/
background-image: url('../../images/brush@2x.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
}
.page-header-recap{
height: 172px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
/*
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
*/
}
.page-header-recap:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 40px;
/*background: linear-gradient(180deg, rgba(253, 236, 204, 0) 0%, #FDECCC 100%);*/
background-image: url('../../images/brush@2x.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
}
.pagelambda-header-visuel{
height:172px;
background-image:url('../../images/visuel-page@2x.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.pagelambda-header-visuel:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 40px;
background-image: url('../../images/brush@2x.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
}
/*
.homepage-visuel:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 152px;
background: linear-gradient(180deg, rgba(117, 199, 210, 0) 0%, #75C7D2 100%);
}
.inner-page-background:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 40px;
background: linear-gradient(180deg, rgba(215, 222, 244, 0) 0%, #75C7D2 100%);
}
*/
a{
cursor: pointer;
}
h1{
font-size: 32px;
line-height: 35px;
margin:0;
}
h2{
font-size: 18px;
font-weight: 700;
line-height: 22px;
font-family: 'TTNormsPro-Bd', sans-serif;
}
.fs24{
font-size: 24px;
}
p{
font-size: 15px;
line-height: 130%;
font-weight: 400;
}
strong, b{
font-family: 'TTNormsPro-Bd', sans-serif;
}
.little-a{
color: var(--bleu-encre);
text-align: center;
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 12px;
font-style: normal;
line-height: 110%;
text-decoration: none;
}
.msg-alert{
color: var(--debat-main-color);
text-align: center;
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 12px;
font-style: normal;
line-height: 110%;
margin-top: 18px;
}
iframe{
max-width: 100%;
height: 280px;
}
/* --= Scrollbars =-- */
/* Works on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--bleu-encre-75) var(--bleu-encre-25);
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: var(--bleu-encre-75);
}
*::-webkit-scrollbar-thumb {
background-color: var(--bleu-encre);
border-radius: 20px;
border: 3px solid var(--bleu-encre-75);
}
/* --= formulaires =-- */
input:focus,
textarea:focus,
input:focus-within,
textarea:focus-within,
input:focus-visible,
textarea:focus-visible{
outline: 2px solid var(--bleu-encre);
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
input:-moz-focusring,
textarea:-moz-focusring{
outline: 2px solid var(--bleu-encre);
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
button, input, optgroup, select, textarea{
border: 0;
font-family: 'TTNormsPro-Rg', sans-serif;
}
input[type='number'],
input[type='text'],
input[type='email']{
border: 1px solid var(--contour-champ);
/*background: var(--petrole-10);*/
font-size: 13px;
line-height: 15px;
width: 100%;
padding: 16px;
border-radius: 8px;
}
input[type='number']::placeholder,
input[type='text']::placeholder,
input[type='email']::placeholder{
font-size: 13px;
line-height: 160%;
color: #7550A2;
opacity: 1;
}
::-webkit-input-placeholder {
font-size: 13px;
line-height: 15px;
color: #7550A2;;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
font-size: 13px;
line-height: 15px;
color: #7550A2;;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 13px;
line-height: 15px;
color: #7550A2;;
opacity: 1;
}
:-ms-input-placeholder {
font-size: 13px;
line-height: 15px;
color: #7550A2;;
opacity: 1;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-size: 13px;
line-height: 15px;
color: #7550A2;;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 13px;
line-height: 15px;
color: color: #7550A2;;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 13px;
line-height: 15px;
color: color: #7550A2;;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: 13px;
line-height: 15px;
color: color: #7550A2;;
opacity: 1;
}
textarea{
border: 1px solid var(--contour-champ);
background: white;
font-size: 13px;
line-height: 160%;
width: 90%;
padding: 16px;
border-radius: 16px;
min-height: 240px;
margin: 0 auto;
resize : both;
min-width : 90%;
max-width : 90%;
}
textarea::placeholder{
font-size: 13px;
line-height: 15px;
color: #7550A2;
}
div.input-email{
border-radius: 8px;
border: 2px solid var(--bleu-encre);
padding: 0px 4px;
text-align: left;
height: 38px;
vertical-align: middle;
position: relative;
display: inline-block;
width: 100%;
background: linear-gradient(180deg, #00B0E5 0%, #0090BC 50%) !important;
}
div.input-email input[type='email']{
padding: 16px;
font-size: 13px;
width: 90% !important;
border-radius: 8px 0px 0px 8px;
height: 32px;
margin: 0;
position: absolute;
left: 1px;
top: 1px;
}
div.input-email input[type='email']:focus{
border:0;
}
div.input-email button{
height: 32px;
width: 10%;
margin: 0;
background: transparent;
color: white;
text-align: center;
position: absolute;
right: 1px;
top: 1px;
cursor: pointer;
}
div.input-email button i{
color: white;
}
/* --= Popover Invitation Partage des données personnelles =-- */
.popover-jaune{
position: fixed;
width: 290px;
border-radius: 24px;
padding: 22px 24px;
background: var(--background-popover);
box-shadow: 0px 20px 60px 0px rgba(32, 26, 65, 0.50);
z-index: 50;
transition: all 0.5s;
}
.popover-jaune:before{
content:'';
background:url('data:image/svg+xml,');
width: 27px;
height: 26px;
display: block;
position: absolute;
left: -26px;
bottom: 24px;
}
.popover-jaune p{
color: var(--bleu-encre);
font-size: 14px;
font-weight: 700;
line-height: 140%;
}
.popover-jaune p:first-child{
color: var(--bleu-encre);
font-size: 20px;
font-weight: 700;
line-height: 23px;
margin-bottom: 8px;
}
.popover-jaune .btn-nonmerci,
.btn-nonmerci{
color: var(--bleu-encre);
font-size: 12px;
font-weight: 700;
line-height: 110%;
text-align: left;
text-decoration: underline;
}
.popover-jaune .btn-oui,
.btn-oui{
color: white;
font-size: 12px;
font-style: normal;
line-height: 110%;
padding-right: 24px !important;
text-align: left;
text-decoration: underline;
}
.popover-jaune .btn-oui:after,
.btn-oui:after{
content: '\f061';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 6px;
top: 6px;
font-size: 12px;
z-index: 12;
}
.invitation-donnees-personnelles{
pointer-events: none;
top: 18px;
left: var(--posBulleStart);
opacity: 0;
}
.invitation-donnees-personnelles-open{
pointer-events: auto;
left: var(--posBulleFinal);
opacity: 1;
}
.invitation-reagir{
/*position: absolute;*/
pointer-events: none;
bottom: 10%;
left: var(--posBulleStart);
opacity: 0;
}
.invitation-reagir-open{
pointer-events: auto;
left: var(--posBulleFinal);
opacity: 1;
}
.info-avis{
/*position: absolute;*/
pointer-events: none;
bottom: 10%;
left: var(--posBulleStart);
opacity: 0;
}
.info-avis-open{
pointer-events: auto;
left: var(--posBulleFinal);
opacity: 1;
}
.info-jugement{
/*position: absolute;*/
pointer-events: none;
bottom: 10%;
left: var(--posBulleStart);
opacity: 0;
}
.info-jugement-open{
pointer-events: auto;
left: var(--posBulleFinal);
opacity: 1;
}
.btn-nonmerci{
font-size: 12px;
font-style: normal;
line-height: 110%;
text-align: left;
padding: 0 14px 0 0;
margin-right: 16px;
position: relative;
}
.btn-nonmerci:after{
content: '\f00d';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 12;
}
.btn-nonmerci:hover{
background: transparent !important;
}
.btn-custom{
position: absolute !important;
bottom: -60px;
max-width: 245px;
}
.btn-merci{
position: absolute !important;
bottom: -40px;
max-width: 245px;
left: 50%;
transform: translateX(-50%);
}
.btn-mobile-filtre{
text-align: left;
}
.btn-duree:after{
content: '\f252';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 12;
}
.btn-down:after{
content: '\f078';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 12;
}
.btn-close{
padding-right: 30px !important;
}
.btn-close:after{
content: '\f00d';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
z-index: 12;
}
.btn-filtre-open:after{
content: '\f00d';
}
.alertMsg{
display: none;
background-color: white;
border-radius: 16px;
padding: 32px 60px 32px 60px !important;
max-width: 640px;
text-align: center;
}
.alertMsg p{
line-height: 24px;
font-weight: 800;
line-height: 120%;
}
.btn-close-alertMsg{
margin-top:16px;
}
.lnk-passer{
margin-top: 12px;
font-family: 'TTNormsPro-Bd', sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 110%;
text-align: center;
text-decoration: none;
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
}
.lnk-passer:after{
content: '\f061';
font-family: 'Font Awesome 6 Free';
font-size: 12px;
z-index: 12;
padding-left: 6px;
}
.lnk-passer:hover{
text-decoration: underline;
}
/* --= featherlight =-- */
.lightbox {
display: none;
}
.featherlight-content{
box-shadow: 1px 10px 22px 0px rgba(0, 79, 84, 0.1);
background: white !important;
border-radius: 16px;
z-index: 999;
}
.lightbox-text {
background-color: white;
padding: 16px 30px 16px 30px !important;
min-width: 680px;
max-width: 740px;
}
#infosPersos .lightbox-text{
border-radius: 32px;
}
.lightbox-text h1{
margin-top: 16px;
margin-bottom: 8px;
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
}
.lightbox-text .titre-lightbox-text{
margin-top: 16px;
margin-bottom: 16px;
font-family: 'TTNormsPro-Bd', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: normal;
padding:0 10%;
}
.lightbox-text p{
font-size: 16px;
line-height: 120%;
margin-bottom: 8px;
}
.lightbox-img {
padding: 50px 0px 0px 0px !important;
}
.featherlight:last-of-type{
background: rgba(0, 0, 0, 0.5) !important;
}
.btn-close-lightbox{
position: absolute !important;
left: 50%;
transform: translateX(-50%);
top: 5px;
}
.btn-close-lightbox-inner{
position: absolute !important;
left: 50%;
transform: translateX(-50%);
/*top: 52px;*/
}
.btn-close-lightbox-inner,
.btn-close-lightbox{
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: normal;
padding-right: 22px !important;
}
.btn-close-lightbox-inner:after,
.btn-close-lightbox:after{
content: '\f00d';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 12;
}
.btn-close-lightbox-inner:hover:after,
.btn-close-lightbox:hover:after{
color: white;
}
.featherlight-close{
display: none;
}
/*
.featherlight-content .zoomImg img,
.featherlight-content .lightbox-img img{
height: 80vh;
min-height: calc(var(--vh, 1vh) * 80);
width: auto;
border-radius: 16px;
}
*/
.featherlight .featherlight-content{
padding: 0 !important;
}
.featherlight-content .zoomImg img,
.featherlight-content .lightbox-img img{
width: 100%;
max-width: 888px;
}
.btn-dark:after{
color: white;
}
.btn-next{
padding-right: 28px !important;
}
.btn-next:after{
content: '\f061';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 12;
}
.btn-choix{
text-align: left;
min-height: 40px;
}
/* --= Timeline =-- */
.timeline{
margin: 16px auto;
}
.timeline .grid-parent{
color: var(--bleu-encre);
font-size: 12px;
font-style: normal;
line-height: normal;
letter-spacing: -0.2px;
}
.progressbar{
width:320px;
background-color: white;
height: 6px;
position: relative;
margin: 10px auto;
border-radius: 6px;
}
.progressbar .dot{
width: 16px;
height: 16px;
background-color: white;
border-radius: 8px;
border: 4px solid var(--debat-main-color);
position: absolute;
top: -4px;
left:var(--posDotStart);
transition: all 0.5s;
}
.progressbar .dot:before{
content: '';
position: absolute;
display: inline-block;
width:var(--widthDotStart);
background-color: var(--debat-main-color);
height: 7px;
right: 10px;
top: 0px;
border-radius: 6px 0px 0px 6px;
transition: all 0.5s;
}
.progressbar-active .dot:before{
width:var(--widthDotFinal);
}
.progressbar-active .dot{
left:var(--posDotFinal);
}
/* Boutons */
.btn{
display: inline-block;
text-decoration: none;
position: relative;
cursor: pointer;
}
.btn100 span,
.btn100 span p{
font-weight: 700;
}
.btn-condition{
display: none;
}
.btn span{
display: inline-block;
}
.btn-fixe{
z-index: 50;
}
.btn-size-xl{
border-radius: 8px;
padding: 14px 20px;
}
.btn-size-xl span{
font-size: 18px;
line-height: 18px;
font-weight: 700;
}
.btn-size-l{
border-radius: 8px;
padding: 8px 20px;
}
.btn-size-l span{
font-size: 14px;
line-height: 14px;
font-weight: 700;
}
.btn-size-m{
border-radius: 6px;
padding: 8px 20px;
}
.btn-size-m span{
font-size: 14px;
line-height: 14px;
}
.btn-size-s{
border-radius: 4px;
padding: 6px 12px;
}
.btn-size-s span{
font-size: 12px;
line-height: 12px;
}
.btn-size-xs{
border-radius: 4px;
padding: 0px 6px;
}
.btn-size-xs span{
font-size: 10px;
line-height: 22px;
height: 22px;
}
.btn-dark{
background: linear-gradient(180deg, #404C8D 0%, var(--bleu-encre) 50%);
}
.btn-dark span,.btn-dark p,.btn-dark strong{
color: #fff;
}
.btn-light{
background: linear-gradient(180deg, #FFF 19.79%, #E3E9F7 50%);
}
.btn-light span{
color: var(--bleu-encre);
}
.btn-grey{
background: linear-gradient(180deg, #C8D0EF 0%, #A0AFE4 50%);
}
.btn-grey span{
color: var(--bleu-encre);
}
.btn-mauve{
background: linear-gradient(0deg, #BFADD6, #BFADD6), linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%);
}
.btn-mauve span{
color: var(--bleu-encre);
}
.btn-ocean{
background: linear-gradient(180deg, #00B0E5 0%, var(--lavande-100) 50%);
}
.btn-ocean span{
color: #fff;
}
.btn-azur{
background: linear-gradient(180deg, #00B0E5 0%, var(--bleu-azur) 50%);
}
.btn-azur span{
color: #fff;
}
.btn-disable{
background: var(--lavande);
}
.btn-disable span{
color: #8178B0;
}
.btn-disable:after{
color: #8178B0 !important;
}
.btn:not(.btn-disable):hover, .btn100:not(.btn-disable):hover{
/*background: var(--bleu-encre);*/
background: linear-gradient(180deg, #404C8D 0%, #201A41 50%);
}
.btn:not(.btn-disable):hover span, .btn100:not(.btn-disable):hover span{
color: #ffffff;
}
.btn:not(.btn-disable):hover p, .btn100:not(.btn-disable):hover p,
.btn:not(.btn-disable):hover strong, .btn100:not(.btn-disable):hover strong{
color: #ffffff;
}
.bloc-bleu-encre .btn:not(.btn-disable):hover, .bloc-bleu-encre .btn100:not(.btn-disable):hover{
background: white;
}
.bloc-bleu-encre .btn:not(.btn-disable):hover span, .bloc-bleu-encre .btn100:not(.btn-disable):hover span{
/*color: var(--bleu-encre);*/
color: var(--bleu-hover);
}
.btn-slide{
width: auto !important;
position: absolute;
bottom: 17px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0px 10px 40px 0px #FFFFFF;
}
.btn-reagir{
position: relative;
}
.btn-reagir:after {
content: '\f075';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 20px;
top: 8px;
font-size: 16px;
line-height: 32px;
z-index: 12;
}
.btn-nouveau-participant{
position: fixed;
border-radius: 16px;
padding: 8px 20px;
right: 40px;
bottom: 30px;
background: white;
z-index: 900;
}
.btn-nouveau-participant span{
color: var(--debat-main-color);
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 15px;
padding-right: 16px;
}
.btn-nouveau-participant:after {
content: '\f234';
font-family: 'Font Awesome 6 Free';
color: var(--debat-main-color);
position: absolute;
right: 10px;
bottom: 9px;
font-size: 15px;
z-index: 12;
}
.btn-nouveau-participant:hover:after {
color: white;
}
.btn-plus{
position: relative;
padding-right: 25px;
text-align: left;
}
.btn-plus:after {
content: '\2b';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 8px;
top: 10px;
font-size: 12px;
z-index: 12;
}
.btn-question{
position: relative;
padding-right: 45px;
text-align: left;
cursor: pointer;
}
.btn-question:after {
content: '\f061';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 20px;
top: 8px;
font-size: 16px;
line-height: 32px;
z-index: 12;
}
.btn-telecharger-pdf{
position: relative;
padding-right: 40px;
}
.btn-telecharger-pdf:after {
content: '\f019';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 20px;
top: 8px;
font-size: 16px;
line-height: 32px;
z-index: 12;
}
.btn-recevoir-pdf{
position: relative;
padding-right: 40px;
}
.btn-recevoir-pdf:after {
content: '\f061';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 20px;
top: 8px;
font-size: 16px;
line-height: 32px;
z-index: 12;
}
.btn-fleche{
position: relative;
padding-right: 25px;
text-align: left;
}
.btn-fleche:after {
content: '\f061';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 15px;
top: 2px;
font-size: 16px;
line-height: 32px;
z-index: 12;
}
.btn-light:after{
color: var(--bleu-encre);
}
.btn-disable:after{
color: var(--anthracite-50);
}
.btn-ext{
padding-right: 28px;
text-align: left;
}
.btn-ext:after {
content: '\f08e';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: 8px;
top: 3px;
font-size: 12px;
z-index: 12;
}
.btn-ext span{
font-family: 'TTNormsPro-Rg', sans-serif;
line-height: 20px;
}
.btn-ext2 span{
padding-right: 0px;
text-align: left;
position: relative;
width: 100%;
height: 20px;
line-height: 20px;
display: inline-block;
}
.btn-ext2 span:after {
content: '\f08e';
font-family: 'Font Awesome 6 Free';
color: white;
position: absolute;
right: -5px;
top: 0px;
font-size: 12px;
z-index: 12;
}
.btn100{
width: 100%;
display: block;
text-decoration: none;
position: relative;
cursor: pointer;
}
/*
width:100%; max-width:582px; height:120px; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 77.22%);
background: linear-gradient(180deg, rgba(117, 199, 210, 0) 0%, #3FB1C0 77.22%);
*/
.posBottomPage{
position: fixed;
bottom: 0px;
left: 50%;
transform:translateX(-50%);
padding-bottom: 32px;
z-index: 50;
padding-top: 0px;
height:140px;
}
.posBottomPageGradient{
width:100%;
max-width:582px;
height:140px;
/*background:linear-gradient(180deg, rgba(117, 199, 210, 0) 0%, #3FB1C0 77.22%);*/
background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
/* 17/08 - Permet la transparence pour les boutons */
.posBottomPage{
pointer-events: none;
}
.posBottomPage a,
.posBottomPage button{
pointer-events: auto;
}
.fs12{font-size: 12px;}
.fs13{font-size: 13px;}
.fs14{font-size: 14px;}
.fs16{font-size: 15px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}
.typopicto{
color: #FFF;
font-family: 'Font Awesome 6 Free';
font-size: 12px;
padding-left: 5px;
}
.nav-menu .typopicto{
color: var(--debat-main-color);
float: right;
padding-right: 15px;
margin-top: 3px;
}
.intro p{
font-family: 'TTNormsPro-Bd';
font-weight: 700;
font-size: 16px;
line-height: 120%;
padding:16px 40px 0px 40px
}
.cta-homepage{
margin: 24px auto 48px auto !important;
}
.cta-homepage p{
font-size: 16px;
line-height: 120%;
}
.cta-homepage .btn-start{
margin-bottom: 0px;
}
.slider-homepage{
background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
padding-top: 24px !important;
}
section.container{
width: 100%;
max-width: 680px;
height: 100%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
background: linear-gradient(90deg, rgba(215,222,244,0) 0px, rgba(215,222,244,0) 49px,var(--background-central) 49px, var(--background-central) 631px, var(--background-central) 631px, rgba(215,222,244,0) 631px, rgba(215,222,244,0) 100%);
margin: 0px auto;
display: block;
position: relative;
z-index: 5;
text-align: center;
overflow: clip;
}
section.container_simple{
width: 100%;
max-width: 680px;
background: #FAEDDC;
background: linear-gradient(90deg, rgba(215,222,244,0) 0px, rgba(215,222,244,0) 49px,var(--background-central) 49px, var(--background-central) 631px, var(--background-central) 631px, rgba(215,222,244,0) 631px, rgba(215,222,244,0) 100%);
margin: 0px auto;
display: block;
position: relative;
z-index: 5;
text-align: center;
overflow: clip;
}
.inner{
width: 100%;
max-width: 582px;
display: inline-block;
position: relative;
z-index: 5;
padding: 24px 24px;
margin: 0px auto;
/*padding-bottom: 80px;*/
}
.inner-nopad{
width: 100%;
max-width: 582px;
display: inline-block;
position: relative;
z-index: 5;
padding: 0px 24px;
margin: 0px auto;
}
.inner-full{
width: 100%;
max-width: 582px;
display: inline-block;
position: relative;
z-index: 5;
padding: 0px;
margin: 0px auto;
}
.inner-full-bloc{
width: 100%;
background-color: #fff;
display: inline-block;
position: relative;
z-index: 5;
padding: 24px 24px;
border-radius: 32px;
margin: 0px auto 0px auto;
box-shadow: 1px 10px 22px 0px rgba(0, 79, 84, 0.1);
/*
display:flex;
justify-content: space-around;
*/
}
.inner-full-bloc-size-s{
width: 100%;
background-color: #fff;
display: inline-block;
position: relative;
z-index: 5;
padding: 8px 24px;
border-radius: 32px;
margin: 0px auto 0px auto;
box-shadow: 1px 10px 22px 0px rgba(0, 79, 84, 0.1);
/*
display:flex;
justify-content: space-around;
*/
}
.bloc-bleu-encre div,
.bloc-bleu-encre p{
color: white;
}
.bloc-bleu-encre h3{
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: normal;
color: white;
margin-bottom: 8px;
}
.background-degrades{
position: relative;
height: 100%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
overflow: clip;
background: var(--debat-main-color);
}
.background-degrades::before {
content: "";
width: 50%;
height: 100%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
background: linear-gradient(163.77deg, rgba(32, 26, 65, 0.75) 0%, rgba(32, 26, 65, 0) 78.65%);
/*background: linear-gradient(-45deg,rgba(32, 26, 65, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 0%);*/
position: fixed;
z-index: 1;
left: 0;
top: 0;
}
.background-degrades::after {
content: "";
width: 50%;
height: 100%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
background: linear-gradient(17.57deg, rgba(32, 26, 65, 0.75) -6.19%, rgba(32, 26, 65, 0) 63.85%);
position: fixed;
z-index: 1;
right: 0;
bottom: 0;
}
.logo-debat{
position: fixed;
left: 10%;
top: 80px;
z-index: 6;
}
.chosen-container-single .chosen-single span{
color: white;
font-size: 14px;
}
.chosen-container .chosen-results li{
color: white;
font-size: 13px;
padding: 6px 8px !important;
}
.item-select{
font-family: 'TTNormsPro-Bd', sans-serif;
font-size: 14px;
font-weight: 700;
border-radius: 6px !important;
border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
padding: 16px;
padding-right: 44px;
color: white;
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M0 0L7 8L14 0H0Z' fill='white'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 7px, linear-gradient(180deg, #404C8D 0%, #201A41 50%)!important;
}
.chosen-container-single .chosen-single{
border-radius: 6px !important;
border: 0 !important;
box-shadow: none !important;
webkit- box-shadow: none !important;
/*background: linear-gradient(180deg, #C8D0EF 0%, #A0AFE4 50%) !important;*/
background: linear-gradient(180deg, #404C8D 0%, #201A41 50%) !important;
}
.chosen-container-single .chosen-single span{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 12px;
/*color: var(--bleu-encre) !important;*/
color: white !important;
}
.chosen-container .chosen-results{
border-radius: 6px !important;
background: var(--bleu-encre) !important;
color: white;
margin: 0 !important;
padding: 0 0 6px 0 !important;
}
.chosen-container-single .chosen-drop{
margin-top: 4px !important;
border: 0 !important;
}
.chosen-container li.active-result{
background-color: var(--bleu-encre);
font-size: 12px;
}
.chosen-container li.result-selected{
background-color: var(--bleu-encre);
font-size: 12px;
}
.chosen-container .chosen-results li.highlighted{
background-color: var(--bleu-encre) !important;
background: none !important;
color: var(--bleu-givre) !important;
}
/* --- Bloc en savoir plus --- */
.bloc-info-ensavoirplus{
position: fixed;
pointer-events: none;
left: 49px;
bottom: var(--posInfoStart);
opacity: 0;
width: 100%;
max-width: 582px;
z-index: 100;
padding: 32px 24px 12px 24px;
margin: 0px auto;
background-color: #fff;
border-radius: 16px 16px 0px 0px;
box-shadow: 0px -1.60501px 2.04777px 0px rgba(14, 41, 52, 0.06), 0px -3.85706px 4.92108px 0px rgba(14, 41, 52, 0.09), 0px -7.2625px 9.26595px 0px rgba(14, 41, 52, 0.11), 0px -12.95506px 16.52887px 0px rgba(14, 41, 52, 0.13), 0px -24.23101px 30.91543px 0px rgba(14, 41, 52, 0.16), 0px -58px 74px 0px rgba(14, 41, 52, 0.22);
transition: all 0.5s;
}
.bloc-info-ensavoirplus-open{
bottom: var(--posInfoFinal);
pointer-events: auto;
opacity: 1;
display: block;
}
.info-ensavoirplus{
padding: 24px 24px;
display: inline-block;
overflow: auto;
}
/* --- Bloc en savoir plus --- */
.bloc-methodologie{
position: fixed;
pointer-events: none;
left: 49px;
bottom: var(--posInfoStart);
opacity: 0;
width: 100%;
max-width: 582px;
z-index: 100;
padding: 32px 24px 12px 24px;
margin: 0px auto;
background-color: #fff;
border-radius: 16px 16px 0px 0px;
box-shadow: 0px -1.60501px 2.04777px 0px rgba(14, 41, 52, 0.06), 0px -3.85706px 4.92108px 0px rgba(14, 41, 52, 0.09), 0px -7.2625px 9.26595px 0px rgba(14, 41, 52, 0.11), 0px -12.95506px 16.52887px 0px rgba(14, 41, 52, 0.13), 0px -24.23101px 30.91543px 0px rgba(14, 41, 52, 0.16), 0px -58px 74px 0px rgba(14, 41, 52, 0.22);
transition: all 0.5s;
}
.bloc-methodologie-open{
bottom: var(--posInfoFinal);
pointer-events: auto;
opacity: 1;
display: block;
}
.info-methodologie{
padding: 24px 24px;
display: inline-block;
overflow: auto;
}
.info-methodologie .titre-methodo{
font-size: 20px;
}
/* --- FOOTER --- */
footer{
/*position: relative;*/
position: fixed;
left: 0px;
bottom: 0px;
z-index: 99;
width: 100%;
text-align: center;
margin-top: 0px;
padding-bottom: 24px;
}
footer a{
color: var(--bleu-encre);
font-size: 11px;
font-style: normal;
line-height: normal;
text-decoration-line: underline;
margin:0px 7px;
}
.bg-bleu-encre footer a{
color: white;
}
/* Menu ---------------------------- */
.menu{
position: fixed;
top: 22px;
z-index: 20;
cursor: pointer;
}
.menu button{
width: 88px;
height: 32px;
border: 0;
border-radius: 32px;
padding: 0px;
background-color: #fff;
display: inline-block;
position: relative;
transition: all 0.2s;
z-index: 10;
cursor: pointer;
/*box-shadow: 1px 10px 22px 0px rgba(32,26,65,0.5);*/
}
.menu-open nav{
pointer-events: none;
}
.menu-open nav a,
.menu-open nav button,
.menu-open nav input,
.menu-open nav textarea{
pointer-events: auto;
}
.menu button span{
font-size: 13px;
line-height: 17px;
font-weight: 500;
text-align: right;
position: absolute;
right: 37px;
top: 8px;
}
.menu-open button{
width: 230px;
height: 190px;
display: inline-block;
border-radius: 16px;
box-shadow: 1px 10px 22px 0px rgba(32,26,65,0.2);
}
button.btn-mediateur{
width: 108px;
}
button.btn-mediateur-form{
width: 108px;
}
.menu-open button.btn-mediateur{
width: 280px;
height: 175px;
}
.menu-open button.btn-mediateur-form{
width: 280px;
height: 365px;
}
.icon-burger{
width: 32px;
height: 32px;
position: absolute;
right: 0px;
top: 0px;
z-index: 12;
cursor: pointer;
}
.icon-burger:after{
content: '\f0c9';
font-family: 'Font Awesome 6 Free';
color: white;
background-color: var(--accentuel);
width: 32px;
height: 32px;
border-radius: 16px;
position: absolute;
right: -1px;
top: 0px;
text-align: center;
font-size: 16px;
line-height: 32px;
cursor: pointer;
z-index: 12;
}
.menu-open .icon-burger:after{
content: '\f00d';
}
.menu nav{
width: 100%;
display: none;
position: absolute;
top: 10px;
left: 0px;
z-index: 11;
}
.menu-open nav{
display: inline-block;
}
.menu nav ul{
list-style: none;
opacity: 0;
transition: opacity 3s;
}
.menu-open nav ul{
opacity: 1;
}
.menu nav ul li{
width: 100%;
}
.menu nav ul li a{
color: var(--bleu-fonce);
text-align: left;
text-decoration: none;
padding: 0px 20px;
}
.menu nav ul li.menu-lvl1{
padding:4px 0px;
}
.menu nav ul li.menu-lvl1 a{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 15px;
}
.menu nav ul li.menu-lvl2{
padding: 4px 0px;
}
.menu nav ul li.menu-lvl2 a{
font-size: 13px;
}
.menu nav ul li.menu-lvl3{
padding:5px 0px;
}
.menu nav ul li.menu-lvl3 a{
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 15px;
font-weight: normal;
color: var(--debat-main-color);
}
.menu nav ul li.menu-lv3-exit{
padding:4px 0px;
}
.menu nav ul li.menu-lv3-exit a{
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 15px;
font-weight: normal;
color: var(--accentuel);
}
.menu nav ul li.menu-lv3-exit .typopicto{
color: var(--accentuel);
}
.menu nav ul li.menu-lv3-close{
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 15px;
font-weight: normal;
padding:0px 0px 8px 0px;
}
.menu nav ul li.menu-lv3-close a{
text-decoration: underline;
}
.menu nav ul li.menu-borderb{
height: 0px;
padding: 4px 0 0px 0;
margin: 0px 0px 4px 0px;
border-bottom: 1px solid #ccc;
}
.menu-open nav ul{
-webkit-animation: 0.5s ease 0s normal 1 fadein;
animation: 0.5s ease 0s normal 1 fadein;
}
.menu-mediateur-info,
.menu-mediateur-form{
padding: 20px 20px 10px 20px !important;
}
.menu-mediateur-form p{
margin: 10px 0px;
}
.menu-mediateur-form a.btn-dark{
color: white;
margin-top: 8px;
padding: 8px 20px !important;
}
@keyframes fadein{
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadein{
0% { opacity:0; }
100% { opacity:1; }
}
.bloc-filter{
position: sticky;
position: -webkit-sticky;
top: 32px;
z-index: 9;
}
.bloc-filter-themes{
padding : 15px 24px;
}
.bloc-blanc{
background-color: #fff;
position: relative;
padding: 20px 25px;
border-radius: 24px;
margin: 24px auto;
box-shadow: 1px 10px 22px 0px rgba(32,26,65,0.2);
display:block;
justify-content: space-around;
}
.bloc-blanc:after{
content: '';
clear: both;
}
.etiquette-titre{
color: var(--bleu-encre);
text-align: center;
position: absolute;
top: -20px;
left: 50%;
transform : translateX(-50%);
white-space: nowrap;
font-family: "TTNormsPro-Bd";
font-size: 14px;
font-style: normal;
line-height: normal;
background-color: #fff;
padding: 12px 16px;
border-radius: 20px;
box-shadow: 1px 10px 20px 0px rgba(32,26,65,0.2);
justify-content: space-around;
}
.etiquette-titre:after{
content: '';
clear: both;
}
.etiquette-reponse{
color: var(--bleu-encre);
text-align: center;
position: absolute;
top: -20px;
left: 50%;
transform : translateX(-50%);
white-space: nowrap;
font-size: 14px;
font-weight: 700;
line-height: normal;
background-color: #fff;
padding: 12px 16px;
border-radius: 20px;
box-shadow: 1px 10px 20px 0px rgba(32,26,65,0.2);
justify-content: space-around;
}
.etiquette-bonne-reponse, .etiquette-fausse-reponse{
padding: 12px 16px 12px 38px;
}
.etiquette-bonne-reponse:before{
content:"";
position: absolute;
display: block;
background: url('../../images/good.svg') no-repeat;
background-size: cover;
width: 24px;
height: 24px;
left:6px;
top: 8px;
}
.etiquette-fausse-reponse:before{
content:"";
position: absolute;
display: block;
background: url('../../images/wrong.svg') no-repeat;
background-size: cover;
width: 24px;
height: 24px;
left:6px;
top: 8px;
}
.bloc-resultats-texte,
.bloc-texte{
text-align: left;
font-size: 15px;
line-height: 22px;
padding-bottom: 16px;
}
.bloc-resultats-texte a,
.bloc-texte a{
/*color: #1A5393;*/
text-decoration: none;
}
.bloc-texte,
.bloc-texte p,
.bloc-resultats-texte p{
text-align: left;
font-size: 14px;
line-height: 160%;
margin-bottom: 8px;
}
.bloc-resultats-texte ul,
.bloc-texte ul{
list-style: none;
margin-bottom: 8px;
}
.bloc-texte ul li,
.bloc-resultats-texte ul li{
text-align: left;
font-size: 15px;
line-height: 21px;
padding-left: 20px;
position: relative;
margin:4px 0px;
}
.bloc-texte ul li:before,
.bloc-resultats-texte ul li:before{
content: '';
/*background:url('../../images/puce@2x.svg') no-repeat;*/
background:url('../../images/puce@2x.png') no-repeat;
background-size: contain;
width: 8px;
height: 8px;
position: absolute;
left: 6px;
top: 6px;
}
.bloc-image{
display: block;
position: relative;
margin-top: 16px;
margin-bottom: 24px;
}
.bloc-image img{
width: 100%;
height: auto;
border-top: 2px solid var(--lavande-75);
border-bottom: 2px solid var(--lavande-75);
}
.btn-agrandir{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
position: absolute;
left: 50%;
transform : translateX(-50%);
bottom: -6px;
color: var(--bleu-encre);
font-size: 12px;
line-height: normal;
border-radius: 4px;
background: var(--debat-main-color);
padding: 4px 24px 4px 8px;
cursor: pointer;
}
.btn-agrandir:after{
content:"";
position: absolute;
display: block;
background: url('../../images/label.png') no-repeat;
width: 12px;
height: 12px;
right:7px;
top: 6px;
}
.videoplayer{
padding: 7px 0px;
}
.videoplayer img{
max-width: 100%;
}
.bloc-themrap{
border-top: 1px solid var(--debat-main-color);
padding: 15px 0px;
color: var(--bleu-encre);
font-size: 16px;
font-style: normal;
line-height: 160%;
text-align: left;
}
.tag-theme{
padding: 0px 6px 0px 2px;
border-radius: 0px 4px 4px 0px;
background: #A0AFE4;
color: var(--bleu-encre);
position: relative;
height: 16px;
line-height: 16px;
font-size: 11px;
display: inline-block;
margin-left: 12px;
}
.tag-theme:before{
content:"";
position: absolute;
display: block;
background: url('../../images/corner.png') no-repeat;
width: 13px;
height: 16px;
left: -12px;
top: 0px;
}
.intro-quiz h2,.intro-quiz p,.intro-quiz a{
font-size: 16px;
line-height: 20px;
}
.intro-quiz a{
font-size: 13px;
text-decoration: underline;
}
.intro-quiz p,.intro-quiz a{
color: var(--debat-main-color);
}
.bloc-resultats h2{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
margin: 0px auto 16px auto;
}
.parcours-title-h2{
font-size: 16px;
line-height: 18px;
margin: 8px auto;
}
.parcours-title-h3{
font-size: 20px;
font-weight: normal;
line-height: 22px;
line-height: 120%;
}
.page-parcours h4{
font-size: 25px;
font-weight: normal;
line-height: normal;
}
.question-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 120%;
text-align: left;
margin-bottom: 8px;
color: var(--bleu-encre);
}
.question-subtitle{
text-align: left;
font-size: 12px;
font-weight: 500;
line-height: 120%;
color: var(--debat-main-color-dark);
margin-bottom: 16px;
}
.question-content, .question-content p{
font-size: 16px;
line-height: 120%;
text-align: left;
margin-bottom: 10px;
}
.question-label{
text-align: left;
margin: 16px 0px 0px 0px;
font-size: 14px;
font-weight: 500;
line-height: 140%;
}
.reponses-subtitle{
text-align: center;
margin-bottom: 20px;
margin-top: 10px;
}
.reponses-subtitle p,.reponses-subtitle li{
font-size: 14px;
font-weight: 700;
line-height: 120%;
border-radius: 8px;
padding: 8px 8px 8px 8px !important;
text-align: center;
background-color: var(--debat-main-color-light);
margin-bottom: 5px;
}
.reponses-subtitle ul{
list-style: none;
}
/*
.reponses-subtitle li{
margin: 6px 0px;
position: relative;
padding-left: 25px;
}
.reponses-subtitle li:before{
content:'';
background: url('../../images/good.svg') no-repeat;
background-size: contain;
width: 16px;
height: 17px;
display: block;
position: absolute;
left: 0px;
top: 1px;
}
*/
.reagir-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: normal;
text-align: center;
color: var(--debat-main-color);
width: 75%;
margin: 0px auto 8px auto;
}
.reagir-subtitle{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 25px;
line-height: 120%;
text-align: center;
color: var(--bleu-encre);
margin: 0px auto 32px auto;
}
.results-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 110%;
text-align: center;
width: 50%;
margin: 0px auto 8px auto;
}
.results-subtitle{
font-weight: 700;
text-align: center;
font-size: 20px;
font-weight: normal;
line-height: 120%;
}
.form-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 110%;
text-align: center;
width: 90%;
margin: 0px auto 24px auto;
}
.form-subtitle{
font-weight: 700;
text-align: center;
font-size: 20px;
font-weight: normal;
line-height: 120%;
}
.form-content{
width: 90%;
/*padding: 0px 50px;*/
margin: 0 auto 16px auto;
font-size: 16px;
line-height: 140%;
}
.form-content p{
font-size: 16px;
line-height: 140%;
margin-bottom: 20px;
}
.form-content img{
width: 100%;
max-width: 100%;
margin-bottom: 16px;
}
.f_form label{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 110%;
}
.merci-title{
font-family: 'TTNormsPro-Bd', sans-serif;
color: var(--bleu-encre);
font-weight: 700;
font-size: 30px;
line-height: 110%;
text-align: center;
margin: 20px auto 16px auto;
padding: 0px;
}
.merci-subtitle{
text-align: center;
font-size: 25px;
font-weight: normal;
line-height: normal;
}
.merci-subtitle-encadre{
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: normal;
background-color: white;
padding: 8px 16px;
border-radius: 24px;
display: inline-block;
}
.merci-visuel{
top: 0px;
height: 222px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.merci-visuel:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 171px;
/*background: linear-gradient(180deg, rgba(211, 141, 49, 0) 0%, var(--bleu-encre) 99.99%, #E3EDF8 100%);*/
background: var(--bleu-encre);
}
.page-aproposde h1{
color: var(--bleu-encre);
margin: 0px auto 24px auto;
}
.page-aproposde h2{
text-align: left;
margin: 16px auto 8px auto;
}
.page-aproposde p{
font-family: 'TTNormsPro-Rg';
font-weight: 500;
text-align: left;
margin: 0px auto 8px auto;
padding: 0px;
}
/*
.page-quietesvous .inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
*/
.page-quietesvous .inner{
margin-top: 30px;
}
.page-quietesvous h1{
font-weight: 700;
color: white;
font-size: 24px;
line-height: 120%;
}
.page-quietesvous h2{
font-weight: 700;
color: var(--bleu-encre);
font-size: 18px;
line-height: 120%;
text-align: left;
margin: 0px auto 8px auto;
}
.page-quietesvous p{
text-align: left;
margin: 0px auto 4px auto;
line-height: 16px;
}
/* Header parcours --------------------------- */
.parcours-header{
height: 80px;
background-color: white;
padding: 8px 0px;
text-align: left;
}
.parcours-title-header{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
color: var(--bleu-encre);
font-size: 14px;
line-height: 1em;
text-align: left;
padding: 0px 28px;
margin-top: 8px;
margin-bottom: 6px;
}
.parcours-header ul,
ul.resultats-parcours{
list-style-type: none;
display: flex;
justify-content: space-between;
position: relative;
padding: 0px 34px;
z-index: 6;
}
.parcours-header ul:after,
ul.resultats-parcours:after{
content: '';
width: calc(100% - 64px);
height: 3px;
background: var(--debat-main-color);
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
z-index: -2;
}
.parcours-header ul li,
ul.resultats-parcours li{
position: relative;
min-width: 16px;
text-align: center;
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 30px;
}
.parcours-header ul li:after,
ul.resultats-parcours li:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
border-radius: 16px;
background-color: white;
border: 3px solid var(--lavande-50);
display: block;
left: 50%;
transform: translateX(-50%);
z-index: -1;
top: 0px;
}
.parcours-header ul li.intro,
ul.resultats-parcours li.intro{
color: var(--bleu-encre);
font-weight: 700;
}
.parcours-header ul li.intro:after,
ul.resultats-parcours li.intro:after{
border: 3px solid var(--bleu-encre);
}
.parcours-header ul li.active,
ul.resultats-parcours li.active{
color: var(--bleu-encre);
font-weight: 700;
}
.parcours-header ul li.active:after,
ul.resultats-parcours li.active:after{
background-color: white;
border: 3px solid var(--bleu-encre);
}
.parcours-header ul li.past:after,
ul.resultats-parcours li.past:after{
background-color: var(--lavande-100);
border: 3px solid var(--lavande-100);
}
.parcours-header ul li.past,
ul.resultats-parcours li.past{
color: var(--bleu-encre);
font-weight: 700;
}
.parcours-header ul li.reponse-bonne,
.parcours-header ul li.reponse-fausse,
ul.resultats-parcours li.reponse-bonne,
ul.resultats-parcours li.reponse-fausse{
color: transparent;
}
.parcours-header ul li.reponse-bonne:after,
ul.resultats-parcours li.reponse-bonne:after{
background: url('../../images/good.svg') no-repeat;
background-size: cover;
background-color: #1A968C;
border: 3px solid #1A968C;
}
.parcours-header ul li.reponse-fausse:after,
ul.resultats-parcours li.reponse-fausse:after{
background: url('../../images/wrong.svg') no-repeat;
background-size: cover;
background-color: #E08B65;
border: 3px solid #E08B65;
}
.parcours-header ul:after,
ul.resultats-parcours:after{
content: '';
width: calc(100% - 64px);
height: 3px;
background: linear-gradient(
to right,
var(--bleu-encre) var(--progress, 0%),
var(--lavande-50) var(--progress, 0%)
);
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
z-index: -2;
}
.etapes-progress-mobile{
padding: 8px 24px 0 24px;
}
.etapesOnMobile-label{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 15px;
margin-bottom: 8px;
}
.etapesOnMobile-label span{
background: var(--debat-main-color);
color: white;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0 4px;
}
.etapes-bars-mobile{
display: flex;
gap: 6px;
margin-top: 20px;
}
.etape-bar-mobile{
flex: 1;
height: 6px;
background: var(--bleu-encre-25);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.etape-bar-mobile.past{
background: var(--debat-main-color);
}
.etape-bar-mobile.active{
background: var(--bleu-encre);
}
.etape-bar-mobile.active .etape-bar-mobile-fill{
position: absolute;
top: 0; left: 0; bottom: 0;
background: var(--debat-main-color); /* progression dans le chapitre en cours */
border-radius: 3px;
}
.parcours-visuel{
height: 172px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.parcours-visuel:before{
content:'';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
height: 40px;
/*background: linear-gradient(180deg, rgba(253, 236, 204, 0) 0%, #FDECCC 100%);*/
background-image: url('../../images/brush@2x.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
}
.page-chapter .parcours-visuel{
height: 320px;
}
/* -== AVIS ==- */
.parcours-avis{
padding: 0px 0px;
text-align: left;
min-height: 174px;
background: var(--background-parcours-avis);
}
.parcours-avis-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: normal;
text-align: center;
color: white;
margin: 8px auto;
}
/* -== AVIS avec portraits (personas) ==- */
img.persona{
max-height: 252px;
margin-left: -35px;
}
.parcours-avis-personas{
list-style-type: none;
display: flex;
align-items: center; /* était: flex-start */
justify-content: center;
gap: clamp(8px, 2vw, 24px);
position: relative;
padding: 8px 38px 16px 38px;
z-index: 6;
}
.parcours-avis-personas li{
text-align: center;
color: white;
flex: 0 0 auto;
}
.parcours-avis-personas li.btn-previous-avis,
.parcours-avis-personas li.btn-next-avis{
align-self: center;
min-width: 24px;
}
.parcours-avis-personas .persona-avatar{
background: #FDECCC;
/* Taille de base calculée selon le nombre d'items, bornée entre un min et un max */
width: clamp(36px, calc(280px / var(--avis-count, 3)), 64px);
height: clamp(36px, calc(280px / var(--avis-count, 3)), 64px);
border-radius: 50%;
overflow: hidden;
margin: 0 auto 8px auto;
border: 3px solid var(--bleu-encre);
transition: all 0.3s;
/* Limite fixée par les images du projet */
/* A revoir si nécessaire */
max-width: 104px;
max-height: 104px;
}
.parcours-avis-personas .persona-avatar img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.parcours-avis-personas .persona-avatar-fallback{
background-color: var(--debat-main-color-dark);
color: white;
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
line-height: clamp(36px, calc(280px / var(--avis-count, 3)), 100px);
font-size: calc(clamp(36px, calc(280px / var(--avis-count, 3)), 100px) * 0.35);
}
.parcours-avis-personas li.active .persona-avatar{
width: calc(clamp(36px, calc(280px / var(--avis-count, 3)), 100px) * 1.25);
height: calc(clamp(36px, calc(280px / var(--avis-count, 3)), 100px) * 1.25);
border: 3px solid white;
}
.parcours-avis-personas .persona-name{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: clamp(10px, calc(9px + (0.5vw)), 13px);
line-height: normal;
color: white;
margin: 0;
}
/*
.parcours-avis ul{
list-style-type: none;
display: flex;
justify-content: space-between;
position: relative;
padding: 0px 38px;
z-index: 6;
height: 122px;
}
.parcours-avis ul li{
position: relative;
line-height: 122px;
min-width: 16px;
text-align: center;
color: transparent;
}
.parcours-avis ul li:first-child{
width: 25%;
text-align: left;
}
.parcours-avis ul li:last-child {
width: 25%;
text-align: right;
}
*/
/*
.parcours-avis ul li:first-child:after,
.parcours-avis ul li:last-child:after{
display: none;
}
.parcours-avis ul li:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: var(--petrole-75);
display: block;
left: 50%;
transform: translateX(-50%);
z-index: -1;
top: 5px;
}
.parcours-avis ul li.active:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: url('../../images/slider-dot@2x.png') no-repeat;
background-size: 100%;
display: block;
left: 50%;
transform: translateX(-50%);
z-index: -1;
top: 5px;
}
.parcours-avis ul li.past:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: url('../../images/slider-dot-past@2x.png') no-repeat;
background-size: 100%;
display: block;
left: 50%;
transform: translateX(-50%);
z-index: -1;
top: 5px;
}
*/
/* -== Journey ==- */
.bloc-info{
/*
position: absolute;
padding-bottom: 24px;
left: 50%;
top: 270px;
transform: translateX(-50%);
top: 50%;
transform: translate(-50%,calc(50% - 330px));
*/
}
.bloc-questions,.bloc-info,.bloc-choix-avis{
padding-bottom: 100px;
}
.bloc-reponses,.bloc-quietesvous{
padding-bottom: 160px;
}
.info-title{
font-weight: 700;
font-size: 16px;
line-height: normal;
text-align: center;
width: 90%;
color: var(--debat-main-color-dark);
margin: 0 auto 8px auto;
text-transform: uppercase;
}
.info-subtitle{
font-weight: 700;
font-size: 25px;
color: var(--bleu-encre);
width: 70%;
line-height: normal;
text-align: center;
margin: 0 auto 24px auto;
}
.info-content{
width: 90%;
/*padding: 0px 50px;*/
margin: 0 auto 16px auto;
font-size: 16px;
line-height: 140%;
}
.info-content p{
font-size: 16px;
line-height: 140%;
margin-bottom: 20px;
}
.info-image img{
width: 100%;
max-width: 100%;
margin-bottom: 16px;
}
.info-content ul{
list-style: none;
margin-bottom: 8px;
}
.info-content ul li{
text-align: left;
font-size: 15px;
line-height: 21px;
padding-left: 20px;
position: relative;
margin:4px 0px;
}
.info-content ul li p{
margin-bottom: 0px;
}
.info-content ul li:before{
content: '';
/*background:url('../../images/puce@2x.svg') no-repeat;*/
background:url('../../images/puce@2x.png') no-repeat;
background-size: contain;
width: 8px;
height: 8px;
position: absolute;
left: 6px;
top: 6px;
}
/* -== Chapter ==- */
.chapter-step{
font-weight: 700;
font-size: 16px;
line-height: normal;
text-align: center;
width: 90%;
color: var(--debat-main-color-dark);
margin: 0 auto 8px auto;
}
.chapter-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 25px;
line-height: 120%;
text-align: left;
margin-bottom: 24px;
color: var(--bleu-encre);
text-align: center;
}
/* -== Open QUestion ==- */
.openquestion-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 120%;
text-align: left;
margin-bottom: 10px;
color: var(--bleu-encre);
}
.openquestion-subtitle{
font-weight: 700;
font-size: 25px;
color: var(--bleu-encre);
width: 70%;
line-height: normal;
text-align: center;
margin: 0 auto 24px auto;
}
.openquestion-content{
text-align: left;
margin: 0 auto 0px auto;
font-size: 16px;
line-height: 140%;
}
.openquestion-content p{
font-size: 16px;
line-height: 140%;
margin-bottom: 20px;
}
.openquestion-image img{
width: 100%;
max-width: 100%;
margin-bottom: 16px;
}
.openquestion-content ul{
list-style: none;
margin-bottom: 8px;
}
.openquestion-content ul li{
text-align: left;
font-size: 15px;
line-height: 21px;
padding-left: 20px;
position: relative;
margin:4px 0px;
}
.openquestion-content ul li p{
margin-bottom: 0px;
}
.openquestion-content ul li:before{
content: '';
/*background:url('../../images/puce@2x.svg') no-repeat;*/
background:url('../../images/puce@2x.png') no-repeat;
background-size: contain;
width: 8px;
height: 8px;
position: absolute;
left: 6px;
top: 6px;
}
.openquestion-form textarea{
width: 100%;
max-width: 100%;
}
/* -== Proposition ==- */
.proposition-intro-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: normal;
text-align: center;
width: 50%;
color: var(--debat-main-color);
margin: 0 auto 8px auto;
}
.proposition-intro-subtitle{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 25px;
line-height: normal;
text-align: center;
margin: 0 auto 24px auto;
}
.proposition-intro p{
padding: 0px 50px;
}
.bloc-proposition-title{
width: 75%;
margin-bottom: 36px;
text-align: left;
}
.proposition-title{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: normal;
text-align: left;
}
.bloc-proposition-title a{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
text-align: left;
font-size: 10px;
font-style: normal;
line-height: 110%; /* 11px */
letter-spacing: 0.2px;
text-decoration: underline;
}
.proposition-citation{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 100%;
/*font-style: italic;*/
text-align: left;
background: white;
padding: 16px 24px;
border-radius: 32px 32px 0px 32px;
position: relative;
margin-bottom: 24px;
}
.proposition-citation:before{
content:'';
background:url('data:image/svg+xml,') no-repeat;
width: 32px;
height: 25px;
position: absolute;
left: 24px;
top: -12px;
}
.proposition-citation:after{
content:'';
background:url('data:image/svg+xml,') no-repeat;
width: 26px;
height: 25px;
position: absolute;
right: -26px;
bottom: -10px;
}
.proposition-nom{
color: white;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: normal;
text-align: left;
background: var(--debat-main-color-dark);
padding: 4px 8px;
border-radius: 12px;
position: absolute;
right: 16px;
bottom: -10px;
}
.proposition-avis{
background: white;
padding: 12px;
border-radius: 12px;
position: relative;
margin-bottom: 32px;
/*min-height: 100px;*/
}
.proposition-avis p{
max-height: 140px;
overflow: auto;
display: inline-block;
padding-right: 8px;
padding-bottom: 16px;
font-size: 12px;
font-weight: 500;
line-height: 160%;
}
.proposition-avis:after{
content: '';
position: absolute;
width: 100%;
height: 35px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 77.22%);
border-radius: 0px 0px 12px 12px;
bottom: 0px;
left: 0px;
z-index: +1;
}
.btn-avis-proposition{
position: absolute;
bottom: -10px;
right: 32px;
white-space: nowrap;
z-index: 15;
}
.btn-avis-disabled{
opacity: 0.3;
pointer-events: none;
}
.avis-reactions{
background: white;
padding: 20px 24px;
border-radius: 24px;
/*max-width: 460px;*/
margin: 0 auto;
}
.avis-reactions .grid-100{
margin-bottom: 12px;
}
.btn-avis-reaction{
position: relative;
text-align: left;
padding: 0px 20px;
}
.btn-avis-reaction-active{
background: linear-gradient(180deg, #404C8D 0%, var(--bleu-encre) 50%);
}
.btn-avis-reaction span{
width: 100%;
display: inline-block;
height: 32px;
line-height: 32px;
}
.btn-avis-reaction-active span{
color: white;
}
.btn-avis-reaction .zone_saisie_avis{
display: none;
padding-bottom: 8px;
}
.btn-avis-reaction .zone_saisie_avis textarea{
width: 100%;
min-height: 100px;
border-radius: 4px;
padding: 8px 10px;
background: #E9E1F4;
color: var(--bleu-encre);
font-size: 12px;
font-style: normal;
line-height: normal;
}
.btn-avis-reaction .zone_saisie_avis textarea:focus{
background: white;
}
.btn-avis-reaction:after {
position: absolute;
right: 20px;
top: 10px;
font-size: 12px;
z-index: 12;
}
.btn-avis-reaction-active:after{
color: white;
}
.btn-avis-reaction:hover:after{
color: white;
}
.btn-jesuisdaccord:after {
content: '\f164';
font-family: 'Font Awesome 6 Free';
}
.btn-jenesuispasdaccord:after {
content: '\f165';
font-family: 'Font Awesome 6 Free';
}
.btn-jedonnemonavis:after {
content: '\f075';
font-family: 'Font Awesome 6 Free';
}
.btn-jenaipasdavis{
text-decoration: none;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 110%;
}
.bloc-merci-fin-etape{
/*margin-top: 30px;*/
}
.bloc-rs{
position: relative;
height: 180px !important;
background: none;
margin-top: 20px;
}
.bloc-actions-fin{
position: absolute;
top: 435px;
left: 50%;
transform: translateX(-50%);
}
.bloc-actions-fin-etape{
/*
height: 66px;
*/
height: auto;
}
.bloc-actions-fin-etape .grid-33:nth-child(1){
border-right: 1px solid var(--anthracite-50);
}
.bloc-actions-fin-etape .grid-33:nth-child(2){
border-right: 1px solid var(--anthracite-50);
}
.bloc-actions-fin-etape-cloture{
height: auto;
}
.bloc-actions-fin-etape,
.bloc-actions-fin-etape-cloture{
font-size: 16px;
font-weight: 400;
}
.bloc-actions-content{text-align: center;margin-top: 16px;}
.bloc-actions-content h2{
font-family: TTNormsPro-Rg, sans-serif;
font-size: 22px;
line-height: 110%;
font-weight: 500;
margin-bottom: 16px;
color: var(--bleu-encre);
padding: 0px 5%;
}
.bloc-actions-content h3{
font-family: TTNormsPro-Rg, sans-serif;
font-size: 18px;
line-height: 110%;
font-weight: 500;
margin-bottom: 16px;
color: var(--bleu-encre);
padding: 0px 5%;
}
.bloc-actions-content p{text-align: center;font-size: 16px; font-family: 'TTNormsPro-Rg';line-height: 120%;margin:0 0 10px 0;padding: 0;}
.bloc-actions-morecontent, .bloc-actions-morecontent p{text-align: center;}
.bloc-actions-content ul, .bloc-actions-morecontent ul{list-style: none; margin-top: 16px;}
.bloc-actions-content ul li, .bloc-actions-morecontent ul li{padding-left: 0px;}
.bloc-actions-content ul li:before, .bloc-actions-morecontent ul li:before{display: none;}
.bloc-actions-content ul li a, .bloc-actions-morecontent ul li a{font-size: 18px; color:white; margin-bottom: 8px;}
.bloc-actions-content .lnk-simple{text-decoration: underline;}
/* Jugement majoritaire */
.bloc-jugement-title{
width: 75%;
margin:0px auto 0px auto;
text-align: left;
}
.jugement-title{
font-weight: 700;
text-align: center;
font-size: 25px;
line-height: 100%;
color: white;
margin:24px auto;
}
.jugement-subtitle{
font-weight: 700;
text-align: center;
font-size: 16px;
line-height: 100%;
color: var(--vert-prairie-10);
text-transform: uppercase;
margin:8px auto;
}
.jugement-content{
font-weight: 500;
text-align: center;
font-size: 16px;
line-height: 140%;
color: var(--bleu-encre);
margin:0px auto;
}
.btn-majoritaire{
width: 50px;
height: 50px;
border-radius: 8px;
background-color: var(--bg-btn-majoritaire);
text-align: center;
vertical-align: middle;
display: block;
margin: 0px auto 16px auto;
cursor: pointer;
transition: all 0.3s;
}
.page-info .btn-majoritaire{
cursor: auto;
}
.btn-majoritaire-actif.btn-majoritaire-0,
.btn-majoritaire-0:hover{
background-color: var(--jugement-0);
}
.btn-majoritaire-actif.btn-majoritaire-0 i,
.btn-majoritaire-0:hover i{
color: white;
}
.btn-majoritaire-actif.btn-majoritaire-1,
.btn-majoritaire-1:hover{
background-color: var(--jugement-1);
}
.btn-majoritaire-actif.btn-majoritaire-1 i,
.btn-majoritaire-1:hover i{
color: white;
}
.btn-majoritaire-actif.btn-majoritaire-2,
.btn-majoritaire-2:hover{
background-color: var(--jugement-2);
}
.btn-majoritaire-actif.btn-majoritaire-2 i,
.btn-majoritaire-2:hover i{
color: white;
}
.btn-majoritaire-actif.btn-majoritaire-3,
.btn-majoritaire-3:hover{
background-color: var(--jugement-3);
}
.btn-majoritaire-actif.btn-majoritaire-3 i,
.btn-majoritaire-3:hover i{
color: white;
}
.btn-majoritaire-actif.btn-majoritaire-4,
.btn-majoritaire-4:hover{
background-color: var(--jugement-4);
}
.btn-majoritaire-actif.btn-majoritaire-4 i,
.btn-majoritaire-4:hover i{
color: white;
}
.btn-majoritaire i{
font-size: 24px;
color: var(--bleu-encre);
}
.bloc-reglette{
margin: 24px 0px 100px 0px;
opacity: 0;
margin-top: 48px;
transition: all 0.5s;
}
.bloc-reglette-anim{
opacity: 1;
margin-top: 24px;
}
.page-info .bloc-reglette{
margin: -100px 0px 100px 0px;
}
.bloc-reglette h3{
text-align: center;
width: 80%;
font-size: 16px;
font-weight: 500;
margin: 0px auto 16px auto;
}
.bloc-btn-reglette{
font-size: 14px;
text-align: center;
}
/* Recapitulatif */
.libelle-etape{
margin-top: 16px;
text-align: left;
}
.libelle-etape p{
background-color: var(--bleu-encre);
display: inline-block;
padding: 0px 0px 0px 14px;
border-radius: 24px;
}
.libelle-etape span{
background-color: var(--debat-main-color);
display: inline-block;
padding: 5px 10px;
border-radius: 15px;
}
.libelle-etape p,
.libelle-etape span{
font-size: 16px;
color: white;
font-weight: 700;
height: 30px;
}
.titre-etape{
margin-top: 16px;
text-align: left;
font-size: 20px;
font-weight: bold;
line-height: 130%;
}
.recap-step-titre{
font-family: 'TTNormsPro-Bd', sans-serif;
font-size: 16px;
font-weight: bold;
}
.recap-step-label{
margin-top: 16px;
padding-bottom: 8px;
font-size: 13px;
font-weight: normal;
color: var(--debat-main-color);
}
.recap-step-img{
width: 100%;
border: 1px solid var(--petrole-75) ;
border-radius: 4px;
margin: 8px 0px;
}
.bloc-step p img{
width: 100%;
height: auto;
border-top: 2px solid var(--lavande-75);
border-bottom: 2px solid var(--lavande-75);
margin: 10px 0px;
}
.recap-step-reactions-label{
margin-top: 16px;
margin-bottom: 8px;
font-size: 13px;
font-weight: normal;
color: white;
background-color: var(--debat-main-color);
display: inline-block;
padding: 5px 10px;
border-radius: 15px;
}
.recap-step-reactions-label strong{
color: white;
}
.recap-step-reactions{
font-size: 14px;
font-size: 500;
line-height: 130%;
padding: 8px;
background-color: var(--background-bloc-recap);
color: var(--bleu-encre);
border-radius: 8px;
border: 1px solid var(--debat-main-color);
}
.actions-pdf{}
.bloc-step ul li{
font-size: 14px;
font-weight: 500;
line-height: 130%;
padding-left: 1em; text-indent: -1em;
}
.bloc-step ul li:before{
content:'\f111';
font-family: 'Font Awesome 6 Free';
color: var(--debat-main-color);
font-size: 8px;
padding-top: 2px;
padding-right: 5px;
}
.bloc-step ul{
list-style: none;
}
.bloc-step p{
line-height: 130%;
}
.bloc-step .etiquette-reponse{
color: var(--bleu-encre);
text-align: center;
position: relative;
top: unset;
left: unset;
transform : unset;
background-color: transparent;
box-shadow: unset;
border: 1px solid var(--debat-main-color);
display: inline-block;
}
/* -== //// ==- */
.txttests{
border-top: 1px solid #DED5CE;
padding: 10px 0px 0px 0px;
margin: 12px auto;
}
.txttests p{
color: var(--complementaire);
font-size: 16px;
font-style: normal;
font-weight: normal;
line-height: 20px;
margin-bottom: 10px;
}
.etapesOnMobile{
display: none;
}
.mobile-liste-themes{
display: none;
}
.mobile-filtre-themes{
display: none;
}
/* Loader blanc */
.lds-ring {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 44px;
height: 44px;
margin: 4px;
border: 4px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* loader bleu */
.lds-ellipsis,
.lds-ellipsis div {
box-sizing: border-box;
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33.33333px;
width: 13.33333px;
height: 13.33333px;
border-radius: 50%;
background: #778DD8;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(0);
opacity: 1;
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
.bloc-resultats-priorisation{
margin-bottom: 15px;
text-align: left;
position: relative;
}
.bloc-resultats-priorisation:after{
content: '';
width: 100%;
height: 3px;
display: block;
background-image: linear-gradient(to right, rgba(160, 175, 228, 1) 80%, rgba(160, 175, 228, 0) 0%);
background-position: bottom;
background-size: 35px 3px;
background-repeat: repeat-x;
}
.bloc-resultats-priorisation ul{
list-style: none;
}
.bloc-resultats-priorisation ul li{
border: 2px solid #fff;
padding: 8px 10px;
margin-bottom: 15px;
border-radius: 8px;
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 140%;
}
/* Popover fin de parcours */
.bloc-findeparcours-surtitre{
font-family: 'TTNormsPro-Rg';
font-size: 14px;
margin-bottom: 32px;
color: var(--bleu-encre);
text-align: center;
}
.bloc-findeparcours-titre{
font-family: 'TTNormsPro-Bd';
font-weight: 700;
font-size: 24px;
margin-bottom: 32px;
color: var(--bleu-encre);
text-align: center;
}
.bloc-findeparcours-texte{
font-family: 'TTNormsPro-Rg';
font-size: 16px;
margin-bottom: 32px;
color: var(--bleu-encre);
text-align: center;
}
/* Visualisation PDF */
@page {
size: A4 portrait;
margin-top: 5mm;
margin-right: 10mm;
margin-bottom: 20mm;
margin-left: 10mm;
@bottom-right{
content: counter(page) "/" counter(pages);
}
}
.page-pdf{
background-color: white;
margin: 0px auto;
text-align: center;
}
.page-pdf #content{
margin: 0px auto;
width: 80%;
max-width: 80%;
/*max-width: 582px;*/
}
.page-pdf .inner-nopad,
.page-pdf .inner{
max-width: unset;
}
.page-pdf .bloc-blanc{
background: transparent;
box-shadow: unset;
border: 1px solid var(--bleu-encre);
border-top: 0;
border-bottom: 0;
border-radius: 0;
margin: 0px auto;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
}
.page-pdf .bloc-step-up{
background-color: #fff;
position: relative;
padding: 20px 20px 0px 20px;
border: 1px solid var(--bleu-encre);
border-radius: 24px 24px 0px 0px;
border-bottom: 0px;
margin: 24px auto 0px auto;
display:block;
}
.page-pdf .bloc-step-down{
background-color: #fff;
position: relative;
padding: 0px 20px 20px 20px;
border: 1px solid var(--bleu-encre);
border-radius: 0px 0px 24px 24px;
border-top: 0px;
margin: 0px auto 24px auto;
display:block;
}
.page-pdf .bloc-merci-fin-etape{
padding-top: 0px;
}
.page-pdf .merci-title{
font-size: 30px;
margin: 0px auto 10px auto;
}
.page-pdf .merci-subtitle{
font-size: 20px;
margin: 0px auto 20px auto;
}
.page-pdf .merci-subtitle-encadre{
text-align: center;
font-size: 25px;
font-weight: bold;
font-family: 'TTNormsPro-Bd', sans-serif;
line-height: normal;
color: white;
background-color: var(--debat-main-color);
padding: 8px 16px;
border-radius: 24px;
display: inline-block;
margin: 0 auto;
}
.page-pdf .recap-step-reactions{
font-size: 14px;
font-size: 500;
line-height: 130%;
padding: 8px;
background-color: transparent;
color: var(--bleu-encre);
border-radius: 8px;
border: 1px solid var(--bleu-encre);
}
.page-pdf .libelle-etape,
.page-pdf .titre-etape{
margin-top: 16px;
font-size: 18px;
}
.page-pdf .libelle-etape p{
background-color: var(--bleu-encre);
color: white;
}
.pagedjs_first_page:before{
content:'';
background: url('../../images/logo-debat-pdf@2x.png') no-repeat;
background-size: 100% auto;
width: 120px;
height: 104px;
display: block;
position: absolute;
top: 10mm;
left: 10mm;
}
@media print {
html,body {
margin: 0;
padding: 0;
}
ul:empty {
display: none;
}
.bloc-etape{
page-break-inside: avoid;
}
header, footer {
position: fixed;
}
header {
top: 0;
}
footer {
bottom: 0;
}
#pageFooter{
position: fixed;
background-color: #fff;
height: 70px;
padding: 15px 5px;
border-top: 1px solid var(--bleu-encre);
bottom: 0px;
left: 10mm;
width: 190mm;
text-align: left;
}
.print_footer_url{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 12px;
}
.print_footer_date{
font-family: 'TTNormsPro-Rg', sans-serif;
font-size: 10px;
font-weight: 400;
}
.print_footer_pages{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 10px;
color: var(--debat-main-color);
z-index: 999;
height: 20px;
line-height: 18px;
}
.pagedjs_margin-content{
position: absolute;
right: 42px;
bottom: 34px;
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
font-size: 10px;
background-color: var(--debat-main-color);
color: white;
padding: 2px;
width: 32px !important;
height: 20px;
border-radius: 16px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 14px;
z-index: 999;
}
}
@media all and (max-width: 1024px) {
.hideOnSmall{
display: none !important;
}
.onlyForSmall{
display: block !important;
}
.mb16OnSmall{
margin-bottom: 16px !important;
}
.pb0OnSmall{
padding-bottom: 0px !important;
}
.menu{
right: 28px !important;
top: 10px;
}
/*
.homepage .inner-nopad p{
padding: 20px 0px !important;
}
*/
.page-mediateur section.container,
.homepage section.container{
padding-bottom: 0px;
}
.page-mediateur h1,
.homepage h1{
font-size: 28px;
line-height: 110%;
padding: 0;
}
.page-mediateur h2,
.homepage h2{
/*font-size: 26px;*/
font-size: 18px;
line-height: 110%;
padding: 0;
}
.page-mediateur h3,
.homepage h3{
padding: 0;
margin-bottom: 0;
}
.homepage .intro:first-child{
margin-top: -60px !important;
}
.homepage p{
padding: 10px 0 !important;
}
.inner-full-bloc{
width: 90%;
padding: 16px 28px !important;
}
/* --= Boutons =-- */
.btn-size-xl{
padding: 14px 10px;
}
.btn-reagir span,
.btn-question span{
padding-right: 20px;
}
/* --= Splashscreen =-- */
.splashscreen{
width: 100%;
/*max-width: 680px;*/
height: 100%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
/* background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(190, 227, 237, 0.95) 100%);*/
background: linear-gradient(17.57deg, rgba(32, 26, 65, 0.75) -6.19%, rgba(32, 26, 65, 0) 63.85%);
margin: 0px auto;
position: relative;
z-index: 100;
text-align: center;
}
.splashscreen .timeline{
position: fixed;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.splashscreen .timeline .grid-parent{
color: white;
}
.splashscreen .lds-ring{
position: fixed;
bottom: 40%;
left: calc(50% - 15px);
transform: translateX(-50%);
}
.splashscreen .logo-mobile-debat{
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.splashscreen .logo-mobile-debat2{
position: fixed;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
}
.bloc-filter{
display: none;
}
.tile{
max-width: 100%;
background-position: 0px -20px;
}
/*
footer{
position: relative;
margin-top: 48px;
}
*/
.homepage footer,
.page-last footer{
position: relative;
}
footer{
padding-bottom: 10px;
}
footer a{
margin: 0px 6px;
}
/*
footer a{
display: block;
width: 100%;
margin-bottom: 8px;
}
*/
.intro{
margin-top: 0px !important;
}
.proposition-intro p{
padding: 0px 18px;
}
.parcours-avis ul{
padding: 0px 28px;
}
.bloc-proposition-title{
width: 100%;
padding: 0px;
}
.lightbox-img img{
width: 100% !important;
height: auto !important;
}
}
@media all and (max-height: 769px) {
.page-merci footer{
position: relative;
background: var(--debat-main-color);
display: none;
}
}
@media all and (max-width: 821px) {
.onlyOnTabletPortrait{
display: block !important;
}
.btn-nouveau-participant{
display: none;
}
}
@media all and (max-width: 720px) {
.btn-question{
padding-right: 20px;
padding-left: 20px;
}
.onlyOnMobile{
display: block !important;
}
.splashscreen .progressbar{
width: 184px;
}
.hideOnMobile{
display: none !important;
}
.background-degrades:before,
.background-degrades:after{
display: none;
}
iframe{
height: 180px;
}
.mh65{
min-height: auto;
}
section.container{
background: var(--background-central);
padding-bottom: 80px;
}
.page-merci section.container{
padding-bottom: 0px;
}
.pt0-mobile{
padding-top: 0px;
}
.menu-open button{
width: 318px;
}
.nav-menu p{
padding: 0px !important;
}
h1{
font-size: 24px;
line-height: 26px;
}
.parcours-title-h2{
width: 100%;
font-size: 13px;
line-height: 15px;
}
.invitation-donnees-personnelles{
display: none;
}
.invitation-donnees-personnelles-open{
display: block;
}
.invitation-reagir{
display: none;
}
.invitation-reagir-open{
display: block;
}
.posBottomPage{
height: 120px !important;
padding-top: 20px;
}
/*
.page-recapitulatif .posBottomPage{
height: 160px !important;
}
*/
.page-recapitulatif .btn-mobile-filtre{
padding-right: 40px;
}
.lightbox-text{
min-width: auto;
padding: 20px 30px !important;
}
.btn-close-lightbox-inner{
top: 0px !important;
}
.proposition-avis p{
overflow: unset;
}
.proposition-avis:after{
display: none;
}
.proposition-citation{
padding: 26px 24px;
}
.inner-avec-bloc-blanc{
padding: 24px 0px;
}
.page-recapitulatif .inner-avec-bloc-blanc{
padding: 0px 0px 8px 0px;
}
.overlay-bleu-ocean{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--debat-main-color);
opacity: 0.9;
z-index: 5;
}
.btn-custom{
position: relative !important;
bottom: 0px !important;
max-width: auto;
}
.mobile-liste-themes{
display: none;
text-align: left;
border-radius: 8px;
background-color: white;
width: calc(100% - 48px);
padding: 20px 20px 30px 20px;
position:fixed;
left: 24px;
bottom: 64px;
z-index: 12;
}
.mobile-liste-themes a{
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: normal;
text-decoration: none;
padding: 10px;
}
.mobile-liste-themes ul{
list-style: none;
width: 100%;
margin-top: 10px;
}
.mobile-liste-themes ul li{
width: 100%;
padding: 0px;
border-bottom: 1px solid #AECBEA;
text-align: left;
}
.mobile-liste-themes ul li.duree-choisie a{
background: linear-gradient(180deg, #404C8D 0%, var(--bleu-encre) 50%);
color: white;
position: relative;
}
.mobile-liste-themes ul li.duree-choisie a:after{
content: '\f00c';
font-family: 'Font Awesome 6 Free';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 12;
}
.mobile-liste-themes ul li a{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
display: block;
font-size: 12px;
font-style: normal;
line-height: normal;
text-decoration: none;
padding: 10px;
}
.mobile-liste-themes ul li p{
color: var(--accentuel);
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: normal;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 10px;
}
.parcours-header{
height: 80px;
}
.etapesOnMobile{
font-family: 'TTNormsPro-Bd', sans-serif;
font-weight: 700;
width: 80px;
padding:4px 0px;
line-height: 1;
display: inline-block;
border-radius: 16px;
text-align: center;
border: 3px solid #1A5393;
background: #1A5393;
font-size: 14px;
font-style: normal;
line-height: normal;
margin-left: 24px;
margin-top: 18px;
}
.etapesOnMobile-intro{
border: 3px solid var(--bleu-encre);
background: white;
}
.etapesOnMobile-mauvaise-reponse{
width: 80px;
padding:4px 0px;
line-height: 1;
display: inline-block;
border-radius: 16px;
text-align: center;
margin-left: 24px;
margin-top: 18px;
background: #E08B65;
border: 3px solid #E08B65;
color: white;
position: relative;
}
.etapesOnMobile-mauvaise-reponse:after{
content: '\f00d';
font-family: 'Font Awesome 6 Free';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 12px;
z-index: 12;
color: white;
}
.etapesOnMobile-bonne-reponse{
width: 80px;
padding:4px 0px;
line-height: 1;
display: inline-block;
border-radius: 16px;
text-align: center;
margin-left: 24px;
margin-top: 18px;
background: #1A968C;
border: 3px solid #1A968C;
position: relative;
}
.etapesOnMobile-bonne-reponse:after{
content: '\f00c';
font-family: 'Font Awesome 6 Free';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 12px;
z-index: 12;
color: white;
}
.btn-agrandir{
text-wrap: nowrap;
}
.invitation-reagir-open:before{
content:'';
background:url('data:image/svg+xml,');
width: 26px;
height: 27px;
display: block;
position: absolute;
left:50%;
transform: translateX(-50%);
top: unset;
bottom: -26px;
}
.featherlight-content .zoomImg img{
width: 100%;
height: auto;
}
.invitation-donnees-personnelles{
transition: none;
}
.invitation-donnees-personnelles-open:before{
display: none;
}
.invitation-donnees-personnelles-open{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.btn-slide span{
text-wrap: nowrap;
}
.homepage .btn-size-xl span{
font-size: 14px;
}
.w100{
float: none !important;
margin-left: auto;
margin-right: auto ;
}
.bloc-merci-fin-etape{
padding-bottom: 32px !important;
}
/*
.bloc-actions-fin-etape{
height: 96px !important;
}
*/
.bloc-actions-fin-etape .grid-60{
padding: 10px 0px;
}
.bloc-bleu-encre{
padding-bottom: 0px;
}
.bloc-bleu-encre h3{
margin-bottom: 16px;
}
.bloc-info{
position: relative;
padding-top: 24px;
padding-bottom: 48px;
left: unset;
top: unset;
transform: unset;
}
.page-quietesvous .inner{
padding-top: 24px;
padding-bottom: 24px;
position: relative;
left: unset;
top: unset;
transform: unset;
}
.featherlight .featherlight-content{
width: 94% !important;
}
/*
.actions-pdf{
bottom: 70px;
}
*/
.actions-pdf .btn-size-xl{
padding: 10px;
}
.actions-pdf .btn-size-xl span{
font-size: 14px;
}
.bloc-recap{
padding-left: 20px;
padding-right: 20px;
}
.lightbox-text .titre-lightbox-text{
font-size: 20px;
}
.page-quietesvous .posBottomPage{
height: 160px !important;
}
.popover-jaune:before{
transform: rotate(-90deg);
left: 140px;
bottom: -24px;
}
.bloc-reglette{
padding: 16px 0px !important
}
.page-info .bloc-reglette{
margin: -30px 0px 100px 0px;
}
.bloc-btn-reglette{
font-size: 9px;
text-align: center;
}
.bloc-rs{
position: relative;
height: 180px !important;
background: none;
}
.bloc-actions-fin-etape .grid-33:nth-child(1){
padding-bottom: 5px;
border-bottom: 1px solid var(--anthracite-50);
border-right: 0;
margin-bottom: 10px;
}
.bloc-actions-fin-etape .grid-33:nth-child(2){
border-bottom: 1px solid var(--anthracite-50);
border-right: 0;
padding-bottom: 5px;
margin-bottom: 10px;
}
.bloc-actions-fin-etape .btn100{
width: 70%;
}
.page-merci footer{
position: relative;
background: var(--debat-main-color);
}
.page-quietesvous section.container{
padding-bottom: 0px;
}
.page-quietesvous footer{
position: relative;
margin-top: -35px;
}
.btn-avis-reaction{
padding: 0px 10px;
}
.btn-avis-reaction span{
width: 100%;
display: inline-block;
height: auto;
line-height: 1em;
padding: 8px 0px;
}
}
/* Désactive complètement hover sur mobile */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
.btn-choix:hover,
.btn-choix:active,
.btn-choix:focus {
background: inherit !important;
transition: none !important;
}
/* Force les bonnes couleurs selon l'état */
.btn-choix.btn-dark:hover,
.btn-choix.btn-dark:active,
.btn-choix.btn-dark:focus {
background: linear-gradient(180deg, #404C8D 0%, var(--bleu-encre) 50%) !important;
}
.btn-choix.btn-grey:hover,
.btn-choix.btn-grey:active,
.btn-choix.btn-grey:focus {
background: linear-gradient(180deg, #C8D0EF 0%, #A0AFE4 50%) !important;
}
/* Force la couleur du texte */
.btn-choix.btn-dark:hover span,
.btn-choix.btn-dark:active span,
.btn-choix.btn-dark:focus span,
.btn-choix.btn-dark:hover p,
.btn-choix.btn-dark:active p,
.btn-choix.btn-dark:focus p,
.btn-choix.btn-dark:hover strong,
.btn-choix.btn-dark:active strong,
.btn-choix.btn-dark:focus strong{
color: white !important;
}
.btn-choix.btn-grey:hover span,
.btn-choix.btn-grey:active span,
.btn-choix.btn-grey:focus span,
.btn-choix.btn-grey:hover p,
.btn-choix.btn-grey:active p,
.btn-choix.btn-grey:focus p,
.btn-choix.btn-grey:hover strong,
.btn-choix.btn-grey:active strong,
.btn-choix.btn-grey:focus strong {
color: var(--bleu-encre) !important;
}
}