/*!
Theme Name: academy
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: academy
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playwrite+AU+SA:wght@100..400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap");

:root {
    --dark: #11181e;
    --grey: #21272d;
    --midgrey: #52575b;
    --green: #86bd4a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
    background: #fff;
}

ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo.logo {
    width: 140px;
    margin-bottom: 10px;
    margin-top: -10px;
}

.boxed {
    width: calc(100% - 200px);
    max-width: 1000px;
    padding: 0px;
}

.backend {
    background-color: #f9f9f9;
    padding: 30px;
    min-height: 100vh;
}

.head {
    padding: 30px;
    padding-top: 42px;
}

#quiz-content .head {
    padding-top: 42px !important;
}

#page {
    max-width: 1100px;
    margin-inline: auto;
    display: flex;
}

header {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    width: 200px;
    padding: 20px;
    padding-top: 40px;
    min-height: 100vh;
}

header ul {
    list-style: none;
}

header ul li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #23273a;
    padding: 12px 0;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1px;
}

header ul li a span {
    font-size: 1.1rem !important;
}

.flex-end {
    justify-content: flex-end;
}

.btn {
    color: #fff;
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    background: #23273a;
}

.btn-login {
    color: #fff;
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    background: #86bd4a;
}

.thematiques-list {
    display: flex;
    flex-wrap: nowrap; /* Désactive le wrap pour un slider horizontal */
    overflow-x: auto; /* Permet le défilement horizontal */
    gap: 20px; /* Ajoute de l'espace entre les éléments */
    scroll-behavior: smooth; /* Défilement fluide */
    -ms-overflow-style: none; /* Pour Internet Explorer et Edge */
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.thematiques-list::-webkit-scrollbar {
    display: none; /* Masque la barre de défilement pour un rendu plus propre */
}

.thematique {
    flex: 0 0 auto; /* Les éléments prennent une largeur fixe et ne s'étirent pas */
    width: 40%; /* Définissez une largeur adaptée au design */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    scroll-snap-align: start;
}

.cover {
    background: url(https://www.agence-evenementielle-innovevents.fr/wp-content/uploads/2022/04/background-header-agence-1.jpg);
    background-size: cover;
    height: 150px;
}

.thematique-inside {
    padding: 30px;
}

.thematique h2 {
    color: #23273a;
    font-size: 1.15rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.ressource {
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.ressource h3 span {
    background: #fff;
    display: inline-flex;
    width: 25px;
    height: 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.ressource h3 {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #fff !important;
    gap: 6px;
}

.ressource a {
    text-decoration: none;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    padding: 9px 14px;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
}

.ressource p {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 300;
    margin: 15px 0;
}

.back_orange {
    background: linear-gradient(10deg, #f4c718, #ff8c12);
}

.back_orange h3 span {
    color: #fba414;
}

.back_violet {
    background: linear-gradient(10deg, #e318f4, #7212ff);
}

.back_violet h3 span {
    color: #9a14fb;
}

.back_bleu {
    background: linear-gradient(10deg, #18c0f4, #127aff);
}

.back_bleu h3 span {
    color: #1492fb;
}

.back_vert {
    background: linear-gradient(10deg, #18f44f, #2ab747);
}

.back_vert h3 span {
    color: #24cc4a;
}

.back_rouge {
    background: linear-gradient(10deg, #f66, #ff542c);
}

.back_rouge h3 span {
    color: #ff5a40;
}

.back_noir {
    background: linear-gradient(10deg, #313131, #000);
}

.doc {
    position: absolute;
    width: 95px;
    bottom: -45px;
    right: 30px;
}

.doc_mail {
    position: absolute;
    width: 95px;
    bottom: -25px;
    right: 30px;
}

.quizz-list {
    display: flex;
    gap: 15px;
    list-style: none;
}

.base {
    background: linear-gradient(60deg, #86bd4a, #82e11a) !important;
}

.base a {
    color: #fff !important;
}

.base .starting {
    background: #fff3;
}

.expert {
    background: #fff;
    border: 0px;
    opacity: 0.65;
    filter: grayscale();
}

.home .backend {
    background-color: #f9f9f9 !important;
}

.b_rank {
    background: #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.rank_ico {
    width: 35px;
}

.r_title {
    font-weight: 500;
    font-size: 1.15rem;
    display: block;
    color: #23273a;
}

.b_rank p {
    display: block;
    line-height: 1.5;
    opacity: 0.45;
    font-weight: 400;
    margin-bottom: 20px;
    color: #23273a;
}

.b_rank a {
    text-decoration: none;
    background: linear-gradient(60deg, #86bd4a, #82e11a) !important;
    color: #fff;
    font-size: 0.9rem;
    padding: 10px 15px;
    display: inline-block;
    border-radius: 10px;
    font-weight: 500;
}

.r_tag {
    color: #74d000;
    text-transform: uppercase;
    font-size: 0.85rem;
    background: #69c70024;
    display: inline-block;
    padding: 6px 10px;
    letter-spacing: 0.2px;
    border-radius: 8px;
    font-weight: 600;
}

.you_win {
    width: 250px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(1.25);
}

.cat {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
}

.quizz-list li {
    background: #fff;
    width: 50%;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgb(246, 247, 250);
    overflow: hidden;
}

.quizz-list .insider {
    padding: 15px;
}

.quizz-list .heads {
    width: 100%;
    height: 80px;
    background: #000;
}

.quizz-list li.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.quizz-list li a {
    text-decoration: none;
    color: #23273a;
    font-weight: 600;
}

.starting {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
    background: var(--green);
    color: #fff !important;
    width: fit-content;
    padding: 9px 15px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    border: 0px;
    margin-inline: auto;
}

/* Boutons de bascule */
.form-toggle-buttons {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.form-toggle {
    background-color: transparent;
    color: #23273a;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 15px;
    font-weight: 600;
    width: 100%;
    background-color: var(--grey);
    transition: 0.2s ease;
}

.form-toggle.active {
    background-color: #86bd4a;
}

.form-toggle:hover {
    background-color: #86bd4a;
}

/* Conteneurs des formulaires */
.form-container {
    display: none;
}

.form-container:not(.hidden) {
    display: block;
}

.hidden {
    display: none !important;
}

.adform {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
}

.adform input {
    width: 100%;
    height: 45px;
    border: 0px;
    background: var(--grey);
    border-radius: 10px;
    color: #23273a;
    text-indent: 10px;
}

.adform label {
    color: #23273a;
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.adform select {
    width: 100%;
    height: 45px;
    background-color: #fff;
    color: #23273a;
    border: 0px;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 400;
}

.adform button[type="submit"] {
    border: 0px;
    background-color: var(--green);
    color: #23273a;
    font-weight: 600;
    display: inline-block;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.page-template-register h1 {
    color: #23273a;
    margin-top: 50px;
}

.quiz-container {
    border-radius: 8px;
}

.quiz-container h2 {
    font-size: 2rem;
    color: #23273a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quiz-container form div {
    margin-bottom: 10px;
}

.ask-question {
    font-size: 1.5rem;
    font-weight: 600;
    max-width: 80%;
    line-height: 1.35;
    margin-bottom: 30px;
    color: #23273a;
}

#quiz-content > p {
    font-size: 1.25rem;
    color: #23273a;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 40px;
}

#quiz-form {
    margin-top: 20px;
}

#quiz-form > div {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

#quiz-form > div > label {
    color: #23273a;
    font-weight: 400;
}

.quiz-container button {
    background-color: #86bd4a;
    color: #fff;
    padding: 13px 26px;
    border: none;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
}

.quiz-container button:hover {
    background-color: #86bd4a;
}

.hidden {
    display: none;
}

.tag {
    color: #86bd4a;
    background: #86bd4a1c;
    font-size: 0.9rem;
    padding: 8px 12px;
    display: inline-block;
    border-radius: 10px;
    font-weight: 500;
}

#feedback {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    color: #23273a;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 20px;
}

#feedback p strong {
    font-weight: 600;
}

#next-question {
    margin-top: 20px;
    background: #86bd4a;
    font-size: 1rem;
    padding: 10px 20px;
}

.congrat,
.fail {
    color: #23273a;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 15px;
    display: block;
    line-height: 1;
}
.congrat {
    margin-bottom: 0px;
}

.pager h1 {
    color: #23273a;
    margin-top: 0px !important;
    margin-bottom: 20px;
}

.pager h3 {
    color: #23273a;
    margin-top: 10px !important;
    margin-bottom: 10px;
}

.ranking-table {
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    border-color: #d9d9ea;
}

.ranking-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.ranking-table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.ranking-table th,
.ranking-table td {
    padding: 10px 20px;
    color: #23273a;
    text-align: left;
    border-color: #d9d9ea;
}

.ranking-table th {
    font-weight: 600;
}

.ranking-table th:last-child,
.ranking-table td:last-child,
.ranking-table th:first-child,
.ranking-table td:first-child {
    text-align: center;
}

.ranking-table td:first-child {
    font-weight: 600;
}

.quiz-result {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    margin: 0;
    color: #23273a;
}

.level_bad {
    border: 2px solid red;
}

.level_bad .myscore {
    background: #ff00000f !important;
    color: red !important;
}

.level_medium {
    border: 2px solid orange;
}

.level_medium .myscore {
    background: #ffa5001c !important;
    color: #df9000 !important;
}

.level_win {
    border: 2px solid #96bd4a;
}

.filter-form {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px 25px;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
}

.filter-form select {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 250px;
    height: 45px;
    padding-left: 15px;
    font-family: "Inter", sans-serif;
    font-size: 0.9rem !important;
    font-weight: 500;
    border-radius: 8px;
}

.seem {
    text-decoration: none;
    color: #b7b7b7;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 5px;
    transform: translateY(1px);
}

.seem span {
    font-size: 1rem;
}

.no-result-message {
    font-size: 0.9rem;
    opacity: 0.3;
    margin-bottom: 20px;
    padding: 10px 20px;
}

.selector {
    border: 0px;
    border-radius: 10px;
    background: #fff;
    padding: 12px 20px;
    font-weight: 500;
}

.selector.ver {
    background: linear-gradient(60deg, #86bd4a, #82e11a) !important;
    color: #fff;
}

.view-wrong-answers {
    font-size: 0.9rem;
    border: 0px;
    background: #f6f7fa;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 500;
    margin-top: 10px;
    cursor: pointer;
}

.remain {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    margin-top: 10px;
    color: #23273a;
}

.remain span {
    font-size: 0.9rem;
    color: #23273a;
}

.remain-text {
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    margin-top: 10px;
    color: #23273a;
}

.wrong-answers ul {
    list-style-position: inside;
    list-style: none;
}

.wrong-answers ul li {
    line-height: 1.5;
    margin: 20px 0;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
}

.wrong-answers ul li:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.wrong-answers ul li p {
    margin: 10px 0;
}

.wrong-answers ul li p strong {
    font-weight: 600;
}

.quiz-result h3 {
    font-weight: 600;
}

.myscore {
    background: #86bd4a21;
    color: #96bd4a;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 300;
}

.myscore strong {
    font-weight: 600;
}

.uptop {
    margin-top: -5px;
}

.tml .tml-label {
    display: block;
    margin: 0.5em 0 0.6em;
    color: #6b738a;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.2px;
    font-size: 0.85rem;
}

.tml .tml-field {
    width: 100%;
    height: 50px;
    background: #fff;
    border: 0px;
    border-radius: 15px;
    text-indent: 15px;
    color: #6b738a;
}

.tml-error a {
    color: #232323;
}

.tml-select {
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: #6b738a;
    border: 0px;
    border-radius: 15px;
    text-indent: 10px;
    font-size: 1rem;
    font-family: "Inter", sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    appearance: none;
}

.tml .tml-field:focus {
    outline: none;
}

.tml-button {
    border: 0px;
    border-radius: 10px;
    background: var(--green) !important;
    padding: 14px 24px;
    font-weight: 600;
    margin-top: 10px;
    color: #fff;
}

.tml-links {
    list-style-position: inside;
    list-style: none;
}

.tml-links a {
    color: #6b738a;
    line-height: 2;
    font-size: 1rem;
    font-weight: 400;
}

.tml .tml-action-confirmaction .success,
.tml .tml-error,
.tml .tml-message,
.tml .tml-success {
    border-left: 4px solid #86bd4a;
    box-shadow: unset !important;
    display: block;
    margin: 0 0 1.5em;
    padding: 0.8em;
    background: #fff;
    color: #23273a;
    font-weight: 500;
    line-height: 1.5;
}

/* Masquer l'indicateur de robustesse du mot de passe */
.tml-password-strength,
#password-strength-meter {
    display: none !important;
}

.tml-indicator-wrap,
.tml-indicator_hint-wrap {
    display: none !important;
}

.progress-bar {
    padding: 30px;
}

.progress {
    width: 100%;
    height: 10px;
    background: #f6f7fa;
    border-radius: 35px;
    overflow: hidden;
    position: relative;
}

.bar {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    background: #23273a;
    border-radius: 35px;
    transition: 0.4s ease;
}

.menu-mobile {
    display: none;
}

article h1 {
    font-size: 2.5rem !important;
    margin-top: 10px !important;
}

.tags {
    color: #74d000;
    text-transform: uppercase;
    font-size: 0.85rem;
    background: #69c70024;
    display: inline-block;
    padding: 6px 10px;
    letter-spacing: 0.2px;
    border-radius: 8px;
    font-weight: 500;
}

.entry-content {
    padding: 30px;
}

.entry-content h2,
.entry-content h2 strong {
    font-weight: 600 !important;
    margin: 20px 0;
    color: #23273a;
}

.entry-content h2:first-child {
    margin-top: 0 !important;
    color: #23273a;
}

.entry-content h3:not(.ressource h3),
.entry-content h3 strong {
    font-weight: 600 !important;
    font-size: 1.35rem;
    color: #23273a;
}

.entry-content p:not(.ressource p) {
    line-height: 1.75;
    margin: 15px 0;
    color: #23273a;
}

.entry-content p strong,
.entry-content ul li strong,
.entry-content ol li strong {
    font-weight: 600;
    color: #23273a;
}

.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    list-style-position: inside;
    line-height: 1.75;
    color: #23273a;
}

.topsep {
    border-top: 2px dotted rgba(0, 0, 0, 0.1);
    padding-top: 30px;
}

.backto {
    text-decoration: none;
    color: #fff;
    background: #23273a;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 20px;
}

.backto span {
    font-size: 1rem;
}

.m_tabs {
    overflow: hidden;
    border-radius: 35px;
    background-color: #fff;
}

.m_tabs button {
    width: 50%;
    height: 50px;
    border: 0px;
    background: #fff;
    font-weight: 500;
    cursor: pointer;
}

.m_tabs button.op {
    background: linear-gradient(60deg, #72bf31, #84db3c) !important;
    color: #fff;
    border-radius: 35px;
}

.m_creation {
    background-color: #fff;
    padding: 30px;
    border-radius: 30px;
    margin-top: 30px;
    display: none;
}

.m_creation.act {
    display: block !important;
}

.m_creation h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.m_creation h2 span {
    font-size: 1.2rem;
    width: 37px;
    height: 37px;
    background: #75c43317;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #72bf31;
}

.m_creation label {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
    line-height: 1.5;
}

.m_creation input {
    display: block;
    height: 50px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 35px;
    text-indent: 15px;
    font-weight: 400;
    width: 100%;
    font-size: 1rem;
}

.m_creation textarea {
    display: block;
    height: 100px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    text-indent: 15px 10px;
    font-weight: 400;
    width: 100%;
    padding: 15px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 1rem;
    font-family: "Inter", sans-serif;
    line-height: 1.5;
}

.m_creation textarea:focus {
    outline: none;
}

.m_creation input:focus {
    outline: none;
}

.m_select {
    position: relative;
}

.m_select select {
    appearance: none;
    -webkit-appearance: none;
    height: 50px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 35px;
    width: 100%;
    background-color: #fff;
    font-family: "Inter", sans-serif;
    text-indent: 10px;
    font-weight: 400;
    font-size: 1rem;
}

.m_select span {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.m_btn,
.me_btn {
    border: 0px;
    border-radius: 35px;
    background: #72bf31;
    color: #fff;
    font-weight: 500;
    padding: 14px 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.me_btn {
    background-color: #df9e27 !important;
}

.m_custom {
    width: 60%;
    aspect-ratio: 4/3;
    background: #00000008;
    border-radius: 20px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    font-weight: 400;
    color: #aeaeae;
    font-size: 0.9rem !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.m_custom img {
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.m_creation input[type="file"] {
    display: none;
}

.m_already {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 40px;
}

.ms_btn {
    text-decoration: none;
    color: #fff;
    background: #fe6751;
    padding: 13px 26px;
    display: inline-block;
    border-radius: 12px;
    font-weight: 500;
}

.ms_btn.m2 {
    background-color: #df9e27 !important;
}

.m_tabs button.m2.op {
    background: #df9e27 !important;
}

.ms_btn.m1 {
    background-color: #78c935 !important;
}

.m_mentor_img {
    width: 250px;
}

.mi_avatar {
    width: 150px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 15px;
    display: block;
    margin-bottom: 15px;
}

.mi_name,
.d_name {
    display: block;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-weight: 600;
    font-size: 1.15rem;
}

.mi_name span,
.d_name span {
    font-size: 1.25rem;
    color: #86bd4a;
    display: inline-block;
    margin-left: 5px;
    transform: translateY(3px);
}

.mrsep {
    border-right: 2px dotted rgba(0, 0, 0, 0.07);
}

.mi_why,
.mi_expertises {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 10px 0;
    text-wrap: balance;
    color: #2a4216;
}

.m_item {
    padding: 30px;
    background-color: #fff;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.07);
    border-radius: 30px;
}

.mi_label {
    font-size: 0.8rem;
    background: linear-gradient(60deg, #7ed237, #6fb739);
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
}

.mi_label span {
    font-size: 1rem;
}

.no_slots {
    font-size: 0.75rem;
    color: #acacac;
    background: rgba(81, 81, 81, 0.05);
    padding: 8px 14px;
    display: inline-block;
    border-radius: 35px;
    font-weight: 500;
}

.mi_agence {
    font-size: 0.8rem;
    background: #23273a0d;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 5px;
    font-weight: 500;
    color: #23273a;
    margin-top: 8px;
}

.mi_agence span {
    font-size: 0.9rem;
}

.resa button {
    background-color: #fff;
    padding: 10px 15px;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0px;
    font-weight: 500;
    cursor: pointer;
}

.resa button:hover {
    background-color: #f9f9f9;
}

.action-btn {
    cursor: pointer;
}

.action-btn span {
    font-size: 1rem;
    transform: translateY(2px);
}

.resa button:last-child {
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
}

.resa button:first-child {
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.resa button:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.asks {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
}

.pending_asks {
    margin: 10px 0 0;
    opacity: 0.3;
    font-size: 0.9rem;
}

.requests {
    list-style: none;
}

.requests li {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 2px dotted rgba(0, 0, 0, 0.1);
    padding: 30px 0;
    justify-content: space-between;
}

.requests li:last-child {
    border-bottom: 0px !important;
}

.requests li img {
    width: 100px;
    border-radius: 15px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.d_name {
    display: block;
    font-weight: 600;
    font-size: 1.15rem;
}

.d_ville {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    margin-top: 5px;
}

.d_ville span {
    font-size: 1rem;
}

.d_heure {
    font-size: 0.9rem;
    font-weight: 600;
    background: #f9f9f9;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.d_heure span {
    font-size: 0.9rem;
    opacity: 0.2;
}

.requests li button {
    border: 0px;
    font-size: 0.9rem;
    font-weight: 500;
    background: #f2f2f2;
    padding: 10px 15px;
    border-radius: 8px;
}

.red-action {
    color: red;
    background: #ff000014 !important;
}

.me_title {
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.15;
    text-align: center;
    max-width: 80%;
    margin-inline: auto;
}

.me_title .mentor {
    color: #72bf31;
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 2.5rem;
    position: relative;
}

.me_title .mentor img {
    position: absolute;
    bottom: -7px;
    left: 4px;
    width: 105px;
    z-index: 1;
    transform: rotate(1deg);
}

.me_title .mentore {
    color: #ffb734;
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 2.5rem;
    position: relative;
}

.me_title .mentore img {
    position: absolute;
    bottom: -8px;
    left: 30px;
    width: 90px;
    z-index: 1;
    transform: rotate(-9deg);
}

.start_1 {
    padding: 30px;
    background: #72bf3129;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
}

.start_1 > img {
    position: absolute;
    top: -35px;
    right: -34px;
    width: 120px;
}

.start_1 .s_text {
    color: #6eac3b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.start_1 .s_title {
    color: #54a612;
}

.start_2 {
    padding: 30px;
    background: linear-gradient(60deg, #7ed237, #6fb739);
    overflow: hidden;
    border-radius: 30px;
    position: relative;
}

.start_2 .s_ico {
    color: #fff;
    background: #ffffff21;
}

.start_2 > img {
    position: absolute;
    top: -15px;
    right: -10px;
    width: 110px;
}

.start_2 .s_text {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
}

.start_2 .s_title {
    color: #fff;
}

.start_3 {
    padding: 30px;
    background: #ffcf54;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
}

.start_3 > img {
    position: absolute;
    top: -4px;
    right: -10px;
    width: 80px;
}

.start_3 .s_text {
    color: #151513;
    font-size: 0.9rem;
    line-height: 1.5;
}

.start_3 .s_ico {
    color: #161614;
}

.start_3 .s_title {
    color: #151513;
}

.s_title {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.s_title span {
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 2rem;
    line-height: 1;
}

.s_ico {
    color: #443e4a;
    background: #fff;
    width: 60px;
    display: flex;
    aspect-ratio: 1/1;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 1.65rem;
    margin-bottom: 20px;
}

.btn-mentor {
    display: inline-flex;
    text-decoration: none;
    color: #72bf31;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 35px;
    border: 2px solid #72bf31;
    padding: 11px 18px;
    align-items: center;
    gap: 5px;
}

.btn-mentor span {
    font-size: 1rem;
}

.btn-create {
    display: inline-flex;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 35px;
    border: 2px solid #72bf31;
    padding: 11px 18px;
    align-items: center;
    gap: 5px;
    background: #72bf31;
}

.btn-create span {
    font-size: 1rem;
}

.btn-mentore {
    display: inline-flex;
    text-decoration: none;
    color: #f4a412;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 35px;
    border: 2px solid #f4a412;
    padding: 11px 18px;
    align-items: center;
    gap: 5px;
}

.btn-mentore span {
    font-size: 1rem;
}

.spezial {
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 2.35rem;
    line-height: 1;
    color: #72bf31;
}

.speziale {
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 2.35rem;
    line-height: 1;
    color: #ffb734;
}

.page-mentore .m_tabs button.op {
    background: linear-gradient(60deg, #df9e27, #ffca2c) !important;
}

.page-mentore .m_creation h2 span {
    background: #e5a6281f !important;
    color: #e5a728 !important;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding:40px;
    box-sizing: border-box;
}

.container button{
    border:0px;
    padding: 13px 26px;
}

.container .screen{
    /* text-align: center; */
}

.container h1{
    font-size: 2.25rem;
}

.container h2{
    font-size: 2rem;
    text-wrap: balance;
    margin-bottom:20px;
}

.container p, .container ul {
    line-height: 1.5;
    margin: 20px auto;
    text-wrap:balance;
}

.container ul li{
    margin:5px 0
}

.container ul li ul{
    margin:10px 0 !important;
    font-size: .8rem;
}

.container ul li ul li{
    font-size: .8rem;
}

.container p:last-child{
    margin-bottom: 0 !important;
}

.screen_choice{
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 10px;
  cursor:pointer;
}

.screen_choice:hover{
    background-color: rgba(0,0,0,.03);
}

.screen_choice:last-child{
    margin-bottom:0;
}

.screen_choice button{
    background: transparent;
    color: #000;
    font-size: 1rem;
    padding: 0;
}

/*----------------------Vic-------------------------*/

.v-rating {
    .rating {
        width: 160px;
        height: 40px;
        margin-block: 20px;
    }
    .rating:not(:checked) > input {
        position: absolute;
        appearance: none;
    }

    .rating:not(:checked) > label {
        float: right;
        cursor: pointer;
        font-size: 30px;
        color: #666;
    }

    .rating:not(:checked) > label:before {
        content: "★";
        font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    }

    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
        color: #e58e09;
    }

    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: #ff9e0b;
    }

    .rating > input:checked ~ label {
        color: #ffa723;
    }

    textarea {
        width: 100%;
        font-family: inter;
        font-size: 0.9rem;
        padding: 20px;
        height: 160px;
        background: #f9f9f9;
        border: none;
        border-radius: 18px;
        line-height: 1.5em;
    }

    #v-reponse {
        display: none;
        font-size: 1rem;
        /* color: #23273a; */
        margin-top: 20px;
        font-weight: 700;
        color: #85bd4a;
    }
}
/*Like*/
.likes .like input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.like {
    position: relative;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    transition: 100ms;
    display: flex;
    gap: 5px;
    padding: 10px 20px;
    background: #f9f9f9;
    border-radius: 30px;
    font-weight: 600;
    width: max-content;
}

.checkmark {
    top: 0;
    left: 0;
    height: 2em;
    /* width: 2em; */
    transition: 100ms;
    animation: dislike_effect 400ms ease;
    display: flex;
    gap: 5px;
    height: 20px;
    svg {
        width: 20px;
        height: 20px;
    }
}

.like input:checked ~ .checkmark path {
    fill: #ff5353;
    stroke-width: 0;
}

.like input:checked ~ .checkmark {
    animation: like_effect 400ms ease;
}

.like:hover {
    svg {
        fill: #ff5353;
    }
}

@keyframes like_effect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes dislike_effect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
.days_remaining{
    display: block;
    color: #FFF;
    font-size: 0.7rem;
    &::before{
        content: "Rejouer dans : ";
    }
    &::after{
        content: " jour(s)";
    }

}

.v-score-classement{
    position: absolute;
    bottom: 50Px;
    left: 60%;
    transform: translateX(-50%);
    background: #FFF;
    border: 1.5px solid #EEE;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.07);
    padding: 9px 15px;
    font-size: 0.8rem;
    border-radius: 12px;
    text-wrap: nowrap;
}


@media (max-width: 810px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        background-color: #fff;
        padding-top: 100px;
        transition: 0.4s ease;
    }

    .boxed {
        width: 100% !important;
        max-width: 90%;
        margin-inline: auto;
    }

    .quizz-list {
        flex-direction: column;
    }

    .you_win {
        display: none;
    }

    .quizz-list li {
        width: 100%;
    }

    .thematique {
        width: 80% !important;
    }

    .thematique h2 {
        font-size: 1rem;
    }

    .home .backend {
        padding: 30px 20px;
    }

    .head {
        padding: 60px 0 30px;
    }

    .progress-bar {
        padding: 30px 0;
    }

    .ask-question {
        font-size: 1.25rem;
        max-width: 100%;
        line-height: 1.45;
    }

    #quiz-form > div > label {
        line-height: 1.5;
    }

    .ranking-table {
        table-layout: fixed;
    }

    .ranking-table th,
    .ranking-table td {
        padding: 10px;
        font-size: 0.7rem;
        line-height: 1.5;
    }

    .backend p {
        line-height: 1.5;
    }

    .menu-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 20px 30px;
        display: block !important;
    }

    .menuopen {
        transform: translateX(0) !important;
    }

    .toggle {
        appearance: none;
        border: 0;
        line-height: 1;
    }

    .toggle span {
        line-height: 1;
    }

    .menu-mobile img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
    }

    .quiz-container h2 {
        font-size: 1.5rem;
    }

    .quiz-container {
        margin-top: 20px;
    }

    .pager {
        margin-top: 40px;
    }

    .quiz-result {
        flex-direction: column;
        gap: 15px;
    }

    .quiz-result h3 {
        font-size: 1.05rem;
        text-align: center;
    }

    .quiz-content {
        margin-top: 20px;
    }

    .btn-mentore,
    .btn-mentor,
    .btn-create {
        padding: 11px 13px !important;
        font-size: 0.8rem !important;
    }

    .me_title {
        max-width: 90%;
    }

    .page-template-mentor-archive .backend,
    .page-template-mentor-account-creation .backend {
        padding: 0 !important;
        background-color: #fff !important;
    }

    .page-template-mentore .backend,
    .page-template-mentor .backend {
        padding: 0 !important;
    }

    .m_creation {
        background-color: #fff !important;
        padding: 0 !important;
        padding-bottom: 60px !important;
    }

    .asks {
        padding: 30px 0 !important;
    }

    .mrsep {
        border-right: 0px !important;
    }

    .resa button {
        padding: 8px 13px;
        font-size: 0.8rem !important;
    }

    .requests li {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mAuto {
        margin-inline: auto !important;
    }
}