.text-c0 {
    color: #fff;
}
.bg-c0 {
    background-color: #fff;
}
.text-c1 {
    color: #0b1b34;
}
.bg-c1 {
    background-color: #0b1b34;
}
.text-c2 {
    color: #343643;
}
.bg-c2 {
    background-color: #343643;
}
.text-c2c0 {
    color: #343643;
}
.bg-c2c0 {
    background-color: #343643;
}
.text-c2c7 {
    color: #343643;
}
.bg-c2c7 {
    background-color: #343643;
}
.text-c9 {
    color: #31486e;
}
.bg-c9 {
    background-color: #31486e;
}
.text-c5 {
    color: #962e3f;
}
.bg-c5 {
    background-color: #962e3f;
}
.text-c8 {
    color: #7d829a;
}
.bg-c8 {
    background-color: #7d829a;
}
.text-c3 {
    color: #a0b0bd;
}
.bg-c3 {
    background-color: #a0b0bd;
}
.text-c4 {
    color: #cedae6;
}
.bg-c4 {
    background-color: #cedae6;
}
.text-c4a {
    color: #e3ebf2;
}
.bg-c4a {
    background-color: #e3ebf2;
}
.text-c6 {
    color: #f2ebc7;
}
.bg-c6 {
    background-color: #f2ebc7;
}
.text-c6a {
    color: #f5f3e6;
}
.bg-c6a {
    background-color: #f5f3e6;
}
.text-c6b {
    color: #fffdf0;
}
.bg-c6b {
    background-color: #fffdf0;
}
.text-c7 {
    color: #f9fcff;
}
.bg-c7 {
    background-color: #f9fcff;
}
.text-c100 {
    color: #fafffa;
}
.bg-c100 {
    background-color: #fafffa;
}
.text-c101 {
    color: #e9f5e9;
}
.bg-c101 {
    background-color: #e9f5e9;
}
.text-c102 {
    color: #237255;
}
.bg-c102 {
    background-color: #237255;
}
.text-c120 {
    color: #f0f5fa;
}
.bg-c120 {
    background-color: #f0f5fa;
}
.text-c110 {
    color: #fcf7f8;
}
.bg-c110 {
    background-color: #fcf7f8;
}
.text-c111 {
    color: #f5e9eb;
}
.bg-c111 {
    background-color: #f5e9eb;
}
@font-face {
    font-family: Geomanist;
    src:
        url(fonts/geomanist-regular-webfont.woff2) format("woff2"),
        url(fonts/geomanist-regular-webfont.woff) format("woff"),
        url(fonts/Geomanist-Regular.otf) format("otf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: Geomanist;
    src:
        url(fonts/geomanist-regular-italic-webfont.woff2) format("woff2"),
        url(fonts/geomanist-regular-italic-webfont.woff) format("woff"),
        url(fonts/Geomanist-Regular-Italic.otf) format("otf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: Geomanist;
    src:
        url(fonts/geomanist-book-webfont.woff2) format("woff2"),
        url(fonts/geomanist-book-webfont.woff) format("woff"),
        url(fonts/Geomanist-Book.otf) format("otf");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: Geomanist;
    src:
        url(fonts/geomanist-book-italic-webfont.woff2) format("woff2"),
        url(fonts/geomanist-book-italic-webfont.woff) format("woff"),
        url(fonts/Geomanist-Book-Italic.otf) format("otf");
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: Geomanist;
    src:
        url(fonts/geomanist-medium-webfont.woff2) format("woff2"),
        url(fonts/geomanist-medium-webfont.woff) format("woff"),
        url(fonts/Geomanist-Medium.otf) format("otf");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: Geomanist;
    src:
        url(fonts/geomanist-medium-italic-webfont.woff2) format("woff2"),
        url(fonts/geomanist-medium-italic-webfont.woff) format("woff"),
        url(fonts/Geomanist-Medium-Italic.otf) format("otf");
    font-weight: 600;
    font-style: italic;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    min-height: auto;
}

html {
    font-size: 0.625em;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateY(0.1);
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: Geomanist, Verdana, sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    background-color: #f0f5fa;
    color: #343643;
    overflow-x: hidden;
}

/**marqueurs d'environnement**/

html.preprod body {
    border-top: 20px solid #217a09;
}

html.localhost body {
    border-top: 20px solid #ff8300;
}

body .strong,
body strong {
    font-weight: 600;
}

.sr-only,
.sr {
    position: absolute !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

@media (min-width: 992px) {
    #wrapper {
        width: 80%;
    }
}

#wrapper {
    width: 95%;
    max-width: 1024px;
    margin: auto;
}

pre {
    white-space: wrap;
}

.login-form,
.quiz-stagiaire,
.login-heading,
.login-frontoffice footer {
    margin: auto;
    margin-top: 5%;
}

.login-frontoffice main form {
    background: #f0f5fa90;
}

@media (max-width: 576px) {
    .login-frontoffice main {
        background: url("../assets/img/a-retenir.png") no-repeat 50% 100%
            #f0f5fa;
        padding-bottom: 200px;
        background-size: 200px;
    }
}

@media (min-width: 576px) {
    .login-frontoffice main {
        background: url("../assets/img/a-retenir.png") no-repeat 100% 100%
            #f0f5fa;
        background-size: 200px;
    }
}

footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
}

footer ul {
    padding: 0;
    text-align: center;
}

footer ul li {
    position: relative;
    list-style: none;
}

footer ul li:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.2em;
    margin-right: 0.3em;
    background-color: #9fafbc;
    border: 0.4rem solid transparent;
}

footer,
footer a {
    color: #31486e;
}

footer a:hover,
footer a:focus {
    text-decoration: none;
}

@media (min-width: 576px) {
    .login-form,
    .login-heading,
    .login-frontoffice footer {
        width: 50%;
    }
    .quiz-stagiaire {
        width: 80%;
    }
}

.login-heading img,
.main-heading img {
    display: block;
}

@media (min-width: 850px) {
    footer ul li {
        display: inline;
    }
    footer ul li:first-child:before {
        content: none;
    }
}

body.login-backoffice {
    background: #213657;
    color: #fff;
}

body.stagiaire,
body.formateur {
    font-size: 1.6rem;
}

.form-wrapper {
    position: relative;
}

.form-label {
    margin-bottom: 1.7rem;
}

.form-help {
    font-size: 0.9em;
    font-style: italic;
    margin: 0;
    display: block;
}

.login-form p,
.login-form label {
    font-size: 2.2rem;
    line-height: 2.8rem;
}

@media (min-width: 850px) {
    .menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

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

.nav-questions {
    margin-top: 1em;
}

.menu {
    border-bottom: 2px solid #213657;
}

.deco-etoile {
    margin-left: 2.5em;
    position: relative;
    top: -12px;
}

.identification-stagiaire {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
}

.identification-stagiaire a,
footer a {
    color: #31486e;
}
.identification-stagiaire a:hover,
footer a:hover,
.identification-stagiaire a:focus,
footer a:focus {
    text-decoration: none;
}

.info-connexion {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    text-align: right;
    margin: 0;
}

footer {
    margin-top: 5em;
    border-top: 2px solid #213657;
}

.menu li a,
.menu li button {
    display: block;
    padding: 0.5em;
    color: #213657;
    text-decoration: none;
}

.menu li a:hover,
.menu li button:hover,
.menu li a:focus,
.menu li button:focus {
    background-color: #213657;
    border-color: #213657;
    color: #fff;
}

@media (min-width: 576px) {
    fieldset,
    .fieldset {
        padding: 0.5rem 4rem;
    }
}

fieldset,
.fieldset {
    border: 0;
    border-left: 1rem solid #f9fcff;
    padding: 1.5rem 2rem;
    margin-bottom: 2.4rem;
    width: 100%;
}
fieldset legend {
    font-weight: bold;
    padding-top: 20px;
}

label {
    display: inline-block;
}

.form-label-help {
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 2rem;
}

.form-control-wrap {
    display: block;
    position: relative;
}

.form-list-item {
    margin-bottom: 0.5em;
}

.form-list-item label {
    margin-bottom: 0;
    position: relative;
    padding-left: 1.875rem;
    font-size: 1em;
    line-height: 1.09091em;
    margin-bottom: 1.09091em;
    font-family: "GeoMed", Verdana, Arial, sans-serif;
    color: #343643;
    display: block;
}

.list-item-label {
    display: inline-block;
    vertical-align: top;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.72727em;
    line-height: 1.5em;
}

.form-list-item.selected label {
    font-weight: bold;
}

input {
    padding: 0;
    border: 2px solid #7d829a;
    border-top-width: 2px;
}

input,
textarea,
select {
    padding: 0.5em;
}

label pre {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    max-width: 100%;
}

.texte-choix {
    display: inline-block;
    max-width: 88%;
    margin-left: 0.3em;
    vertical-align: middle;
}

.mention-selectionne {
    position: relative;
    display: block;
}

.login-form input {
    display: block;
    width: 100%;
}

.response-output {
    position: relative;
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 3.8rem;
    padding: 1.5rem 2rem;
    border: 2px solid #127718;
    color: #127718;
}

.response-output-error {
    position: relative;
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 3.8rem;
    padding: 1.5rem 2rem;
    border: 2px solid #962e3f;
    color: #962e3f;
}

body.login-backoffice .response-output-error {
    border: 2px solid #fff;
    color: #fff;
}

body.login-backoffice footer *,
body.login-backoffice footer a {
    color: #fff;
}

.inline-gp-button {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
}

.inline-gp-button li button {
    display: block;
    padding: 0.5em;
    font-size: 1.3rem;
    width: 50%;
    margin: auto;
    margin-bottom: 0.3em;
}
@media (min-width: 500px) {
    .inline-gp-button {
        display: flex;
        align-items: stretch;
        flex-basis: 0%;
        gap: 5px;
        margin-bottom: 1em;
    }

    .inline-gp-button li button {
        margin-bottom: 0;
        width: auto;
    }
}

.btn,
.button,
.a42-btn-alpha,
a.a42-btn-alpha,
.a42-btn-beta,
.site-header .menu .btn-contact a,
.a42-btn-gamma {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.2rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: 0.25s;
    transition-property: all;
    transition-property: box-shadow, background-color, color, border;
    text-decoration: none;
    border: none;
    box-shadow: none;
    white-space: normal;
    font-size: 2rem;
}

.a42-btn-alpha {
    background-color: #31486e;
    border: 3px solid #31486e;
    color: #fff;
}

.a42-btn-alpha.btn--important {
    background-color: #962e3f;
    border-color: #962e3f;
    color: #fff;
}

.a42-btn-alpha:hover,
.a42-btn-alpha:active,
.a42-btn-alpha:focus {
    background-color: #f2ebc7;
    border-color: #f2ebc7;
    color: #0b1b34;
}

.btn,
.button,
.a42-btn-alpha,
.a42-btn-beta,
.site-header .menu .btn-contact a,
.a42-btn-gamma {
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    font-family: Geomanist, Verdana, sans-serif;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

@media (min-width: 992px) {
    .btn,
    .button,
    .a42-btn-alpha,
    .a42-btn-beta,
    .site-header .menu .btn-contact a,
    .a42-btn-gamma {
        padding: 1.2rem 2rem;
        line-height: 2.5rem;
    }
}

.a42-btn-alpha[disabled] {
    background: #e9e9ed;
    color: #7d829a;
    border: 3px solid #e9e9ed;
    cursor: initial;
}

.a42-btn-beta {
    border: 2px solid #7d829a;
    color: #0b1b34;
}

.a42-btn-beta:hover {
    background-color: #31486e;
    border-color: #0b1b34;
    color: #fff;
}

.a42-btn-gamma.a42-btn-small {
    font-size: 1.4rem;
    line-height: 2rem;
}

.a42-block-align-right {
    margin-bottom: 0.5em;
    text-align: right;
}

details {
    cursor: pointer;
}
details h2,
details h3,
details h4 {
    display: inline-block;
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
}

tr {
    height: 100%;
}

td {
    height: 100%;
    vertical-align: middle;
}

.table-donnees {
    width: 100%;
}

.table-donnees,
.table-donnees tr,
.table-donnees td,
.table-donnees th {
    border: 1px solid #31486e;
    border-collapse: collapse;
}

.table-donnees th {
    background: #31486e;
    color: #fff;
}

.table-donnees td,
.table-donnees th {
    padding: 0.3em;
}

.table-donnees.table-filtres th {
    padding: 0em;
    border: 0;
}

.table-donnees th select {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.8em;
    box-shadow: none;
    border-radius: 0;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI5Mi40IiB2aWV3Qm94PSIwIDAgMjkyLjQgMjkyLjQiIHdpZHRoPSIyOTIuNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjg3IDY5LjRhMTcuNyAxNy43IDAgMCAwIC0xMy01LjRoLTI1NS42YTE3LjYgMTcuNiAwIDAgMCAtMTIuOSA1LjQgMTcuOSAxNy45IDAgMCAwIC0uMSAyNS43bDEyOCAxMjcuOWExNy45IDE3LjkgMCAwIDAgMjUuNiAwbDEyOC0xMjhhMTcuOCAxNy44IDAgMCAwIC0uMS0yNS42eiIgZmlsbD0iIzMxNDg2ZSIvPjwvc3ZnPg==");
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%;
    background-size: 0.65em auto;
}

.table-donnees th input:hover,
.table-donnees th button:hover,
.table-donnees th select:hover {
    cursor: pointer;
}

.table-donnees th .a42-btn-sort {
    background: #e3ebf2;
    color: #13233b;
    line-height: 1rem;
    font-weight: bold;
    border: 0;
    display: block;
    width: 100%;
    padding: 1.4rem 2rem;
}

.table-donnees th .a42-btn-sort:hover,
.table-donnees th .a42-btn-sort:focus {
    background: #962e3f;
    color: #ffffff;
}

.table-donnees th#th_date .a42-btn-sort {
    display: inline-block;
    width: 40%;
    margin: 0;
}

.table-donnees th input[type="date"] {
    display: inline-block;
    border: 0;
    padding: 1.15rem;
    box-shadow: none;
    width: 60%;
    margin: 0;
    vertical-align: top;
}

@media (min-width: 500px) {
    .td-actions {
        display: flex;
        gap: 4px;
        padding: 4px;
    }

    .td-actions .td-actions {
        padding-top: 0;
    }
}

.td-actions form {
    flex: 1;
}

.td-actions button,
.td-actions a {
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 1.3rem;
}
.td-actions button {
    width: 100%;
}

.td-actions input {
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 0.8em;
}

table .cell-statut {
    white-space: pre;
    text-align: center;
}

table .cell-repondants {
    text-align: center;
}

table .question-lancee {
    background-color: #e8f9f1;
    font-weight: bold;
}

table .question-exclue,
table .question-exclue th {
    background-color: #fff;
    color: #343643;
}

table .question-exclue,
table .question-exclue th,
table .question-exclue button {
    font-size: 1.2rem;
}

tr:not(.question-exclue) .ordre-question {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

tr:first-child .btn-monter,
tr.last-question-incluse .btn-descendre {
    display: none;
}

tr:not(.question-exclue) .btn-ordre button {
    background-color: #31486e;
    border: 0;
    color: #fff;
    padding: 5px;
}

tr:not(.question-exclue) .btn-ordre button:hover,
tr:not(.question-exclue) .btn-ordre button:focus {
    background-color: #f0f5fa;
    color: #31486e;
}

.questions-supprimees {
    font-size: 0.9em;
}

.questions-supprimees li {
    margin-bottom: 1em;
}

.questions-supprimees button {
    padding: 0 1rem;
    font-size: 0.95em;
}

.questions-supprimees li * {
    display: inline;
}

table .inactif {
    background-color: #c8c8c8;
}

table .inactif .a42-btn-alpha {
    background-color: #515151;
}

th.ordre-question {
    padding: 2px;
}
/*
.ordre-question input{
    width:50%;
    border:0;
}*/

.ordre-question button.a42-btn-alpha {
    width: 40%;
    padding: 0 0.5em;
}

.bulk-actions-wrapper {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 4px 4px 0 0;
    background: #cedae6;
}

.bulk-actions-wrapper label {
    font-weight: bold;
}

.bulk-actions-wrapper select {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.bulk-actions-wrapper .a42-btn-alpha {
    font-size: 1.5rem;
    padding: 0rem 1.8rem 0.2rem 1.8rem;
    line-height: 2.2rem;
}

.bulk-count {
    font-style: italic;
    color: #4d4d4d;
}

/** Statistiques **/
.table-statistiques {
    width: 100%;
}

.table-statistiques thead {
    position: absolute;
    top: -10000px;
}

.table-statistiques td,
.table-statistiques th {
    padding: 0.3em;
}

.table-statistiques tr td.jauge-statistiques {
    min-width: 50%;
    padding-right: 2px;
}

.table-statistiques tr {
    border-bottom: 1px solid #aaa;
}

.table-statistiques tr td {
    padding: 1em 0;
}

.bar-container {
    display: block;
    background: #eee;
    width: 100%;
    height: 12px;
    position: relative;
    border-radius: 4px;
    border: 1px solid #bf7879;
}

tr.bonne-reponse .bar-container {
    border: 1px solid #196c26;
}

.bar-fill {
    display: block;
    background: #962e3f;
    height: 100%;
    border-radius: 4px;
}
tr.bonne-reponse .bar-fill {
    background: #196c26;
}

.inline-form {
}

.inline-form .form-wrapper {
    display: inline-block;
    margin-right: 10px;
}

.inline-form .form-label,
.inline-form .form-control-wrap {
    display: inline-block;
}

.form-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.form-mini .form-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* Chaque champ prend de l’espace mais peut rétrécir */
    min-width: 180px;
    font-size: 1.3rem;
}

.form-mini .form-wrapper input[type="submit"] {
    margin-top: 1.6em; /* pour aligner verticalement le bouton avec les champs */
    width: auto;
    padding: 0 0.5rem;
    font-size: 1.3rem;
}

.form-mini .form-wrapper label {
    margin-bottom: 0.3em;
    font-weight: bold;
}

.form-mini .form-control-wrap input {
    width: 100%;
    padding: 0.4em;
    box-sizing: border-box;
}

.form-mini .form-label {
    margin-bottom: 0;
}

p.question-lancee {
    background-color: #e8f9f1;
    font-weight: bold;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #aac4b8;
}

p.question-masquee {
    font-weight: bold;
    background-color: #dfc6ca;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #962e3f;
}

.intro-previsualisation {
    font-weight: initial;
    font-size: 2rem;
    display: block;
}

.img-quiz {
    max-width: 100%;
    max-height: 500px;
    display: block;
    margin: auto;
    margin-bottom: 30px;
}

.a42-btn-magnify,
.a42-btn-close {
    cursor: pointer;
    border: 0;
    background: #acbac5;
    font-weight: bold;
    padding: 0.5em;
}

.a42-btn-magnify:focus,
.a42-btn-magnify:hover,
.a42-btn-close:focus,
.a42-btn-close:hover {
    background: #f2ebc7;
}

.a42-bloc-img {
    text-align: center; /* centre le wrapper inline */
}

.a42-img-wrapper {
    display: inline-block; /* le wrapper prend exactement la largeur de l'image */
    position: relative;
    padding-top: 2em;
}

.img-quiz {
    display: block;
}

.a42-btn-magnify {
    position: absolute;
    top: 0;
    right: 0;
}

.a42-dialog-img {
    width: 100%;
    text-align: left;
}

.a42-dialog-img img {
    max-width: 100%;
    display: block;
    margin: auto;
    margin-top: 15px;
}

/**galerie des images dans la gestion des modèles**/
.gallerie-image {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallerie-image img {
    max-width: 100px;
    max-height: 100px;
}