/* enquete */
.intro-wrapper.current-step {max-width:800px; margin:0 auto;}
.page-template-enquete-2 .intro-wrapper h2 {}
.page-template-enquete-2 #survey-wrapper {display: flex; flex-direction: column;}
.page-template-enquete-2 .category-wrapper.current-step {margin-top:0px;}
.page-template-enquete-2 .category-wrapper.current-step .category-title {color:#fd1c1c}
.page-template-enquete-2 .category-wrapper.current-step .load-next {margin:32px 0;}

.page-template-enquete-2 .category-wrapper .question-wrapper {display:flex; margin:0; border-bottom: solid #d5291e 1px; align-items: center;padding: 24px 0;}
.page-template-enquete-2 .category-wrapper .question-wrapper .question{font-size:16px; flex:1; margin:0; padding:0;}
.page-template-enquete-2 .category-wrapper .question-wrapper .answer-wrapper {width:30px; height:30px;}
.page-template-enquete-2 .category-wrapper .question-wrapper .answer-wrapper .answer-table {width:100%; height:100%;}
.page-template-enquete-2 .category-wrapper .question-wrapper .answer-wrapper .answer-table .answer {border-radius:50%; line-height:1; border-width:2px;}
.page-template-enquete-2 .category-wrapper .question-wrapper .answer-wrapper .answer-table .answer:hover {border-color:#fd1c1c; color:#fd1c1c;}
.page-template-enquete-2 .category-wrapper .question-wrapper .answer-input-wrapper {display:flex; align-items:center; border-color:#fd1c1c}

.page-template-enquete-2 .ajax-loader {display:none; width:100%; float:left; text-align:center}

.page-template-enquete-2 .question-wrapper .answer-wrapper .answer-table input[type="radio"]:checked+label {border-width:2px; border-color:#fd1c1c}

.password-form {max-width:800px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start;}
.password-form label {width: 100%; display: inline-block; font-size: 16px; font-weight: bold; text-align: left; margin-bottom: 8px;}
.password-form button {background-color: #d5291e;color: #fff;border: none;padding: 10px 50px; cursor:pointer; font-family: 'Montserrat'; line-height: 1.5; transition: .3s; margin-top:16px; font-weight:bold;}

/* results */
.page-template-results-2 .survey-results {display: inline-block;width: 100%;background-color: #fff; border: 2px solid #000;padding: 25px;}
.page-template-results-2 .survey-results h2 {font-size: 34px;line-height: 1.2!important;color: #fd1c1c; font-weight:bold !important}
.page-template-results-2 .survey-results table {width:auto; background:#efefef; padding:16px; margin-bottom:32px;}
.page-template-results-2 .survey-results table th {text-align:left; font-size:18px; padding-right:16px;}
.page-template-results-2 .survey-results table th:last-child,
.page-template-results-2 .survey-results table td:last-child {padding-right:0;}
.page-template-results-2 .survey-results table td {padding-right: 16px; font-size:16px;}

.graphs-container {display:grid; grid-template-columns: repeat(5, 1fr);}
.graphs-container .graph {flex:1;display: flex;padding: 0 8px;flex-direction: column;}
.graphs-container .graph h3 {text-align:center; width:100%; margin-top:16px; font-size:16px; }

@keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--value); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #fd1c1c;
  --secondary: rgb(253 28 28 / 10%);
  --size: 100%;
  float:left;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-family: Helvetica, Arial, sans-serif;
  font-size: 36px;
  color: var(--primary);
}


@media screen and (max-width:1000px){
	.page-template-enquete-2 .category-wrapper .question-wrapper {flex-direction:column; align-items:flex-start;}
	.page-template-enquete-2 .category-wrapper .question-wrapper .question {margin-bottom:10px;}
}