@import url('../fonts/font-roboto.css');
@import url('../fonts/font-syne.css');
@import url('../fonts/font-unbounded.css');

/* Fonts
================================================== */


/* Basics
================================================== */
* {font:16px/1.6 var(--font-roboto); color:inherit; font-weight:inherit; box-sizing:border-box;}
body {margin:0; color:var(--app-color); background:var(--app-bgcolor);}

hr {width:100%; border:none; border-top:1px solid var(--separator-bordercolor);}
form {margin:0;}


/* Application
================================================== */
#root {display:grid; grid-template-rows:min-content; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--default-app-background);}
#root header {display:grid; align-items:center; gap:var(--margin-small); padding:1rem 2rem; box-shadow:var(--default-nav-boxshadow);}
#root main {display:grid; align-items:baseline; overflow-y:auto; padding:2rem;}

#root header nav {display:flex; align-items:center; justify-content:space-between; gap:var(--margin-small);}
#root header nav #nav-right {display:flex; justify-content:end; gap:var(--margin-small);}
#root header nav #nav-right > * {align-self:center;}


/*
#root header nav {display:table; width:100%; border-bottom:#e6e8ed;}
#root header nav > div {display:table-cell; text-align:center; vertical-align:middle;}
#root header nav > div:first-child {width:12rem; text-align:left; line-height:1;}
#root header nav > div:last-child {width:12rem; text-align:right; line-height:1;}
#root header nav #nav-left #nav-logo {height:2rem; display:inline-block;}
#root header nav #nav-right > div {display:flex; align-items:center; justify-content:right; gap:1rem;}
*/

#root header nav button {font-size:inherit; padding:0.25em 0.5em; height:2.5em; white-space:nowrap;}
#root header nav button.button-account {font-size:inherit; width:2.5em; height:2.5em; border-radius:50%; background-color:var(--button-primary-bgcolor); color:var(--button-primary-color);}
#root header nav select {font-size:inherit; padding:0.25em 0.5em; font-weight:600; color:var(--nav-select-color); border-radius:1.5em; border-color:var(--nav-select-bordercolor); cursor:pointer;}

#root .main-footer {margin-top:var(--margin-large); text-align:center; color:var(--app-main-footer-color);}
#root .main-footer p {font-size:0.875em;}
#root .main-footer .main-footer-logos {display:flex; justify-content:center; gap:var(--margin-large); margin-top:var(--margin-small);}
#root .main-footer .main-footer-logos img {height:3em;}


/* Popup Menu
================================================== */
#profile-menu {position:relative;}
.popup-menu {position:absolute; right:0; top:3.5em; padding:1rem; background-color:var(--popupmenu-bgcolor); border-radius:0.5rem; box-shadow:0px 8px 32px 0px rgba(0, 0, 0, 0.20); z-index:1000;}
.popup-menu .popup-account {display:flex; flex-direction:column; align-items:center; gap:var(--margin-small);}
.popup-menu .popup-account #user-account-username {font-size:1.25rem; font-weight:700;}
.popup-menu .popup-account .account-pellet {display:flex; justify-content:center; align-items:center; font-size:inherit; width:2.5em; height:2.5em; border-radius:50%; background-color:var(--button-primary-bgcolor); color:var(--button-primary-color);}
.popup-menu .popup-menu-items {display:flex; flex-direction:column; padding-top:1rem; margin-top:1rem; border-top:1px solid var(--popupmenu-bordercolor);}
.popup-menu #user-account-username {color:var(--popup-username-color);}
.popup-menu .popup-menu-items button {color:var(--popup-button-color);}
.popup-menu .popup-menu-items a.button-style {color:var(--popup-button-color);}


/* Branding
================================================== */
#root #app-logo {font-family:var(--font-unbounded); font-size:1.2rem;}


/* Titres
================================================== */
h1, h2 {margin:0; font-weight:600;}
h1 {font-size:2rem;}
h2 {font-size:1.5rem;}

:is(h1, h2, h3, h4, h5, h6) * {font:inherit;}


/* Texte
================================================== */
.textalign-center {text-align:center;}
.textalign-right {text-align:right;}
.textalign-justified {text-align:justify;}
.showQuestionAfterAnswer {margin: 0 auto; width:75%}

strong {font-weight:700; font-size:inherit;}

p {margin:0 0 0.5em 0;}
p:last-of-type {margin:0;}


/* Layout
================================================== */
.container {margin:0 auto; width:100%;}
.container.intermediate-screen {min-height:100%; max-width:90%; padding:var(--margin-large); border-radius:1rem; background:var(--app-tiles-bgcolor);}

/*
section {margin:0 0 2rem 0;}
section:last-of-type {margin:0;}
*/

.card-container {margin:0 auto !important; padding:2rem; border-radius:0.5rem; background:var(--card-container-bgcolor);}

.card-container.border-thin {border:1px solid var(--card-container-bordercolor);}
.card-container.border-thick {border:2px solid var(--card-container-bordercolor);}

.card-container.width-small {max-width:30rem;}
.card-container.width-medium {max-width:60rem;}
.card-container.width-large {max-width:90%;}
.card-container.width-max {width:100%;}


/* Effets visuels
================================================== */
.glass-effect-light {backdrop-filter:blur(1px);}
.glass-effect-medium {backdrop-filter:blur(3px);}
.glass-effect-heavy {backdrop-filter:blur(5px);}


/* Flex Column Layout
================================================== */
/*
.col-layout {display:flex; flex-direction:row; gap:var(--margin-medium);}
.col-layout > * {display:flex; flex-direction:column; flex:1 1 0; gap:var(--margin-medium); width:100%;}
*/

.col-layout {display:flex; align-items:flex-start; gap:var(--margin-medium);}
.col-layout > * {display:flex; flex-direction:column; flex:1 1 0; gap:var(--margin-medium);}


/* Table Layout
================================================== */
.table-layout {display:table; table-layout:fixed; width:100%;}
.table-layout > div {display:table-row;}
.table-layout > div > div {display:table-cell; vertical-align:top;}
.table-layout > div > div.table-cellspacer-medium {width:1.5rem; background:transparent; border:none;}
.table-layout > div > div.table-cellspacer-large {width:3rem; background:transparent; border:none;}
.table-layout .table-cellvertical {vertical-align:middle;}


/* Formulaires
================================================== */
fieldset {display:flex; flex:1 1 0; flex-direction:column; gap:var(--margin-medium); border:none; padding:0;}

a.button-style, a:visited.button-style {text-decoration:none; display:inline-block; text-align:center;}
button, a.button-style {cursor:pointer; font-weight:600; padding:0.5rem; border:1px solid transparent; border-radius:0.5rem; background-color:transparent;}
button *, a.button-style * {cursor:pointer; text-decoration:none;}
button:hover, a.button-style:hover {background-color:var(--color-content-primary-accent-light) !important; color:var(--button-hover-color) !important;}
button:focus, a.button-style:focus {box-shadow:0 0 8px 4px var(--button-focus-shadowcolor);}
button:disabled {background-color:var(--color-background-light-neutral-transparent) !important; color:var(--button-disabled-color) !important;}

button.button-primary, a.button-style.button-primary {background-color:var(--button-primary-bgcolor); color:var(--button-primary-color);}
button.button-primary:disabled {background-color:var(--color-background-light-neutral-transparent);}

button.button-secondary, a.button-style.button-secondary {color:var(--button-secondary-color); border-color:var(--button-secondary-bordercolor);}
button.button-secondary:disabled {border-color:var(--button-disabled-bordercolor);}

button.button-tertiary {color:var(--button-secondary-color);}

button.button-primary-warning {background-color:var(--button-primary-warning-bgcolor); color:var(--button-primary-warning-color);}
button.button-primary-warning:disabled {background-color:var(--color-background-light-neutral-transparent);}

button.button-primary.button-green, a.button-primary.button-green {background-color:var(--color-alert-positive-dark);}

button[type=submit] {background-color:var(--button-primary-bgcolor); color:var(--button-primary-color);}
button[type=submit]:disabled {background-color:var(--color-background-light-neutral-transparent);}

button[type=reset] {color:var(--button-secondary-color); border-color:var(--button-secondary-bordercolor);}
button[type=reset]:disabled {border-color:var(--button-disabled-bordercolor);}
button[type=reset]#btn-game-create-cancel {color:var(--button-secondary-warning-color); border-color:var(--button-primary-warning-bordercolor);}
button#btn-game-create-cancel:hover {background-color:var(--color-content-alert-error-normal) !important; color:var(--button-primary-color) !important;}

input[type=radio], input[type=checkbox] {width:1em; height:1em; margin:0 1rem 0 0; color:var(--form-input-checkbox-color); background-color:var(--form-input-checkbox-bgcolor);}
input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=url], select, textarea {padding:0.5em; border-radius:0.25rem; color:var(--form-input-color); background-color:var(--form-input-bgcolor); border:1px solid var(--form-input-bordercolor);}
input[type=file] {padding:0.5rem; background-color:var(--form-file-bgcolor); border-radius:1rem; border:1px dashed var(--form-file-bordercolor);}
textarea {width:100%; resize:none;}

.form-generic {display:flex; flex-direction:column; gap:var(--margin-large);}

.form-item label {font-weight:700; line-height:1.5em; display:block;}
.form-item input[type=text], .form-item input[type=email], .form-item input[type=password], .form-item input[type=tel], .form-item input[type=url], .form-item select, .form-item input[type=file] {width:100%;}
.form-item.form-checkbox label {font-weight:400; display:inline;}

.form-item.form-item-required label::after {content:'*'; color:var(--app-color-content-alert-error-normal);}

.form-actions > div {display:flex; justify-content:center; gap:var(--margin-small);}
.form-actions > div.form-actions-sub {flex-direction:column;}

.form-info-icon {height:8rem;}


/* Formulaires - Boutons stylises
================================================== */
button[class*="btn-icon-"]:before {display:inline-block; width:1.5em; height:1.5em; content:''; vertical-align:text-bottom;}
button[class*="btn-icon-"] {display:flex; align-items:center; gap:0.5em;}
button[class*="button-primary"][class*="btn-icon-"]:before {background-color:var(--button-primary-color);}
button[class*="button-primary"][class*="btn-icon-"]:hover::before {background-color:var(--button-hover-color);}
button[class*="button-primary"][class*="btn-icon-"]:disabled::before {background-color:var(--button-disabled-color);}
button[class*="button-secondary"][class*="btn-icon-"]:before {background-color:var(--button-secondary-color);}
button[class*="button-secondary"][class*="btn-icon-"]:hover::before {background-color:var(--button-hover-color);}
button.button-nav-title {width:40px; height:40px; border:1px solid var(--button-navigation-back-bordercolor);}
button[class*="button-nav-title"][class*="btn-icon-"]:before {background-color:var(--button-navigation-back-bordercolor);}
button[class*="button-nav-title"][class*="btn-icon-"]:hover::before {background-color:var(--button-navigation-back-bordercolor);}

button.btn-icon-add:before {mask:var(--icon-add-mask); -webkit-mask:var(--icon-add-mask);}
button.btn-icon-arrow-left:before {mask:var(--icon-arrow-left-mask); -webkit-mask:var(--icon-arrow-left-mask);}
button.btn-icon-delete:before {mask:var(--icon-delete-mask); -webkit-mask:var(--icon-delete-mask);}
button.btn-icon-download:before {mask:var(--icon-download-mask); -webkit-mask:var(--icon-download-mask);}
button.btn-icon-email:before {mask:var(--icon-email-mask); -webkit-mask:var(--icon-email-mask);}
button.btn-icon-export:before {mask:var(--icon-export-mask); -webkit-mask:var(--icon-export-mask);}

button.btn-chevron-right {font-size:inherit; width:1.5em; height:1.5em; padding:0;}
button.btn-chevron-right > i {content:url(../images/icons/chevron_right.svg); width:100%; height:100%}

.isSelected {background-color:var(--color-content-primary-accent-dark) !important; color:var(--button-primary-color) !important;}


/* Formulaires - Boutons switch
================================================== */
button.switch {display:flex; font-size:inherit; align-items:center; gap:8px; background-color:transparent;}
button.switch:hover {background-color:transparent !important;}
button.switch .switch-slider {display:flex; font-size:inherit; width:3em; height:1.5em; padding:0.125em; justify-content:flex-start; align-items:center; border-radius:40px; background-color:var(--button-switch-label-inactive);}
button.switch .switch-circle {width:1.25em; font-size:inherit; height:1.25em; border-radius:200px; background-color:var(--button-switch-circle-bgcolor);}
button.switch .switch-left {font-size:inherit; color:var(--button-switch-label-active);}
button.switch .switch-right {font-size:inherit; color:var(--button-switch-label-inactive);}
button.switch label {font-size:inherit; color:var(--button-switch-label-active);}
button.switch label.switch-left {color:var(--button-switch-label-active);}
button.switch label.switch-right {color:var(--button-switch-label-inactive);}
button.switch.is-on .switch-slider {justify-content:flex-end;background-color:var(--button-switch-slider-bgcolor);}
button.switch.is-on .switch-left {color:var(--button-switch-label-inactive);}
button.switch.is-on .switch-right {color:var(--button-switch-label-active);}


/* Formulaires - Aside
================================================== */
aside.form-create-account {flex:0 1 30%; background-color:#D5E3F4; border-radius:8px; padding:1.5rem;}
aside.form-create-account .form-create-account-warning {background-color:var(--color-alert-error-light); border-radius:0.5rem; padding:1rem;}


/* Formulaires - Publish to global leaderboard
================================================== */
#global-leaderboard-approval {padding:2rem; border-radius:0.5rem; background-color:var(--game-table-sample-bgcolor);}
#global-leaderboard-approval .form-leaderboard {display:flex; flex-direction:column; align-items:center; gap:var(--margin-medium);}
#global-leaderboard-approval #global-leaderboard-ranking > * {text-align:center;}
#global-leaderboard-approval #global-leaderboard-ranking #global-leaderboard-ranking-position {font-size:1.25em; font-weight:700; color:var(--color-content-primary-accent-normal);}


/* Groupe de boutons
================================================== */
.action-button-group {display:flex; justify-content:center; align-items:center; gap:var(--margin-small, 1rem); flex-wrap:wrap;}
/*.action-button-group button, .action-button-group a.button-style {padding:0.5rem 1.25rem;}*/


/* Systeme KPI
================================================== */
.kpi-group {display:flex; font-size:inherit; flex-direction:row; justify-content:space-between; align-items:stretch; gap:var(--margin-medium, 1.5rem);}
.kpi-tile {display:flex; flex:1 1 100%; align-items:center;}
.kpi-tile > * {display:flex; flex-grow:1; justify-content:space-between; align-items:center; gap:var(--margin-medium, 1.5rem);}
.kpi-tile-value {font-weight:600;}
.kpi-tile .kpi-button-group {display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--margin-small);}
.kpi-tile.kpi-tile-smallest {flex-basis:1%;}
.kpi-tile.kpi-tile-smallest button, .kpi-tile.kpi-tile-smallest a {white-space:nowrap;}

.kpi-timer {display:flex; flex-direction:column; align-items:center; color:var(--app-color); gap:var(--margin-small, 1rem);}
.kpi-timer .kpi-timer-spinner {font-size:inherit; border:0.2em solid var(--app-color); border-top:0.2em solid transparent !important; border-radius:50%; width:1.5em; height:1.5em; animation:timerspin 2s linear infinite;}
.kpi-timer .kpi-timer-remaining {font-size:inherit; font-weight:600; color:inherit;}
.kpi-timer.timer-warning, .kpi-timer.timer-warning > * {color:#ff5a49; border-color:#ff5a49;}
.kpi-timer.timer-horizontal {flex-direction:row;}
@keyframes timerspin {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}
#nav-area .kpi-timer {font-size:1.25em;}
#app.game-environment.game-intermediate-screen .kpi-timer {font-size:2em;}


/* Environnement - Accueil
================================================== */
#app.homepage #root {background:var(--hp-app-background);}

#app.homepage h1 {font-family:var(--font-roboto); font-size:4rem; font-weight:300; line-height:120%;}
#app.homepage h2 {font-family:var(--font-roboto); font-size:2rem; font-weight:600; line-height:120%;}

#app.homepage #hp-welcomeword > p {font-size:1.25rem;}

#app.homepage #hp-content {display:flex; flex-direction:column; gap:4rem;}
#app.homepage #hp-content-layout {gap:4rem;}
#app.homepage #hp-content-layout > div {display:flex; flex-direction:column; gap:var(--margin-large);}
#app.homepage #hp-content-left {flex-basis:66%;}
#app.homepage #hp-content-right {flex-basis:33%;}

#app.homepage #hp-content-1 {font-size:1.5em !important;}
#app.homepage #hp-content-2 {font-size:1.25em !important; display:flex; justify-content:space-between; gap:3rem;}
#app.homepage #hp-content-2 > * {flex-basis:50%;}

/*#app.homepage .hp-personas-card {display:flex; flex-direction:column; gap:var(--margin-small); padding:2rem; border-radius:0.5rem; background-color:rgba(255,255,255,0.5); backdrop-filter:blur(5px); transition:.15s linear;}*/
#app.homepage .hp-personas-card {display:flex; flex-direction:column; gap:var(--margin-small); padding:2rem; border-radius:0.5rem; border:1px solid var(--hp-persona-card-bordercolor); background-color:var(--hp-persona-card-bgcolor); transition:.15s linear;}
#app.homepage .hp-personas-card:hover {transform:translateX(0.75rem);}
#app.homepage .hp-personas-card .hp-personas-card-actions {display:flex; flex-wrap:wrap; gap:var(--margin-small);}

#app.homepage #hp-content section {display:flex; flex-direction:column; gap:3rem;}
#app.homepage #hp-content section * {font-size:inherit;}

#app.homepage #hp-content-footer {display:flex; justify-content:space-between; align-items:center; gap:var(--margin-medium); border-top:1px solid var(--hp-footer-bordercolor); padding-top:2rem;}
#app.homepage #hp-content-footer img {height:3rem;}
#app.homepage #hp-content-footer #hp-content-footer-text p {font-size:0.875em;}
#app.homepage #hp-content-footer #hp-content-footer-logos {display:flex; justify-content:right; gap:var(--margin-large);}


/* Environnement - Jeu
================================================== */
#app.game-environment #root {background:var(--game-app-background);}
#app.game-environment #root main {background:var(--game-app-main-background);}
#app.game-environment #root header {box-shadow:var(--game-nav-boxshadow);}

#app.game-environment :is(h1,h2,h3,h4,h5,h6) {font-family:var(--font-unbounded);}

#app.game-environment .nickname-label {font-weight:500; font-size:0.875em; background-color:#DDD; border-radius:4px; padding:0.25em 0.5em; background:var(--app-tiles-bgcolor);}

#app.game-environment .game-card {padding:var(--margin-medium); border-radius:0.5rem; background:var(--app-tiles-bgcolor); backdrop-filter:blur(3px);}

#app.game-environment #game-kpi {width:100%; padding:0 0 2rem 0; border-bottom:1px solid var(--separator-bordercolor);}
#app.game-environment #game-kpi .kpi-group .kpi-tile {padding:1rem; border-radius:0.5rem; background:var(--app-tiles-bgcolor);}
#app.game-environment #game-kpi .kpi-tile-label {font-size:1.5rem; font-weight:600;}
#app.game-environment #game-kpi .kpi-tile-value {font-size:2rem; font-weight:600;}

#app.game-environment.game-intermediate-screen .container {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--margin-medium); min-height:100%; max-width:90%; padding:var(--margin-large); border-radius:1rem; background:var(--app-tiles-bgcolor);}

#app.game-environment.game-question-screen .container {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:var(--margin-large);}
#app.game-environment.game-question-screen .container > * {width:100%;}

#app.game-environment.game-question-screen #question-header h1 {font-family:var(--font-unbounded); font-weight:700; font-size:2em;}
#app.game-environment.game-question-screen #question-header h1 > label {font:inherit;}

#app.game-environment.game-question-screen #question-statement-block {display:flex; align-items:center; justify-content:space-between; gap:var(--margin-large);}
#app.game-environment.game-question-screen #question-statement-block #question-statement {font-size:1.25em; font-weight:600;}
#app.game-environment.game-question-screen #question-statement-block #question-context {font-size:1.25em; font-weight:300;}

#app.game-environment.game-question-screen [id^=question-hints-drawer-] .drawer-content {flex-direction:column; gap:var(--margin-large);}
#app.game-environment.game-question-screen [id^=question-hints-drawer-] .drawer-content section {display:flex; flex-direction:column; gap:var(--margin-small);}
#app.game-environment.game-question-screen [id^=question-hints-drawer-] .drawer-content section > * {margin:0;}
#app.game-environment.game-question-screen [id^=question-hints-drawer-] .drawer-content h3 {font-size:1.2em; font-weight:500;}

#app.game-environment.game-question-screen #question-details {flex-basis:40%;}
#app.game-environment.game-question-screen #question-answer {flex-basis:60%;}

#app.game-environment #question-body :is(h1, h2, h3, h4, h5, h6) {font-family:var(--font-roboto);}

#app.game-environment #question-answer .answer-titles {display:flex; justify-content:space-between; align-items:center; gap:var(--margin-medium);}
#app.game-environment #question-answer .answer-submit {display:flex; justify-content:right;}

#app.game-environment #question-answer .sub-question {display:flex; flex-direction:column; gap:var(--margin-small);}
#app.game-environment #question-answer .sub-question .sub-question-title {font-size:1.35em; font-weight:500;}
#app.game-environment #question-answer .sub-question .sub-question-blocks {display:flex; flex-direction:column; gap:var(--margin-medium);}
#app.game-environment #question-answer .sub-question .sub-question-blocks.column-layout {flex-direction:row;}
#app.game-environment #question-answer .sub-question .sub-question-block {display:flex; flex-direction:column; gap:var(--margin-small); flex-grow:1; padding:var(--margin-medium); border-radius:0.5rem; border:1px solid var(--game-answer-sub-question-block-bordercolor); backdrop-filter:blur(5px); flex-basis:1%;}
#app.game-environment #question-answer .sub-question .sub-question-block .sub-question-block-title {font-size:1.2em; font-weight:600;}

#app.game-environment #question-answer .answer-items {display:flex; flex-direction:column; justify-content:space-between; gap:var(--margin-medium, 1.5rem); flex-grow:0;}
#app.game-environment #question-answer .answer-items > * {display:flex; flex:1 1 0;}
#app.game-environment #question-answer .answer-items label {word-break:break-word;}
#app.game-environment #question-answer .answer-items .answer-item {display:flex; flex-flow:row; align-items:center; padding:var(--margin-small); font-weight:600; border-radius:0.5rem; color:var(--game-answer-item-color); background-color:var(--game-answer-item-bgcolor); cursor:pointer;}
#app.game-environment #question-answer .answer-items .answer-item:hover {color:var(--game-answer-item-hover-color); background-color:var(--game-answer-item-hover-bgcolor);}
#app.game-environment #question-answer .answer-items .answer-item.is-selected {color:var(--game-answer-item-selected-color); background-color:var(--game-answer-item-selected-bgcolor);}
#app.game-environment #question-answer .answer-items .answer-item.item-select > *,
#app.game-environment #question-answer .answer-items .answer-item.item-number > *,
#app.game-environment #question-answer .answer-items .answer-item.item-text > * {flex-direction:row; flex:1 1 0; justify-content:space-between; gap:var(--margin-medium, 1.5rem);}
#app.game-environment #question-answer .answer-items .answer-item input[type=text],
#app.game-environment #question-answer .answer-items .answer-item input[type=number] {width:100%;}

#app.game-environment #question-answer .answer-matrix table {border:none; border-radius:0; border-spacing:0.25rem; table-layout:fixed;}
#app.game-environment #question-answer .answer-matrix table td {position:relative; padding:0; background-color:var(--form-input-bgcolor); border:1px solid var(--dp-body-bordercolor); height:2rem;}
#app.game-environment #question-answer .answer-matrix table tr td:first-of-type {width:60%;}
#app.game-environment #question-answer .answer-matrix table thead td {height:0;} /* Hack pour cacher l'entête */
#app.game-environment #question-answer .answer-matrix table thead td {font-weight:600; border:none; text-align:center; background-color:transparent;}
#app.game-environment #question-answer .answer-matrix table tbody td:first-of-type {font-weight:600; border:none; background-color:transparent; min-width:15%; padding:0.5em 0.5em 0.5em 0;}
#app.game-environment #question-answer .answer-matrix input[type=text],
#app.game-environment #question-answer .answer-matrix input[type=number],
#app.game-environment #question-answer .answer-matrix select {width:100%; height:3em; border:none; border-radius:0;}

#app.game-environment #question-answer .answer-matrix input[type=text],
#app.game-environment #question-answer .answer-matrix input[type=number],
#app.game-environment #question-answer .answer-matrix select {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}

#question-answer .multilevel {display:flex; flex-direction:row; justify-content:space-between; gap:var(--margin-small);}
#question-answer .multilevel .answer-items {justify-content:flex-start !important;}
#question-answer .multilevel .answer-items > * {flex:0 !important;}

#app.game-environment .sub-question.columns-count-2 .sub-question-blocks {--nb-b-columns:2; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment .sub-question.columns-count-3 .sub-question-blocks {--nb-b-columns:3; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment .sub-question.columns-count-4 .sub-question-blocks {--nb-b-columns:4; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment .sub-question.columns-count-5 .sub-question-blocks {--nb-b-columns:5; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment [class*="sub-question"][class*="columns-count-"] .sub-question-block {min-width:max(20em, calc(((100% - (var(--margin-medium) * (var(--nb-b-columns) - 1))) / var(--nb-b-columns))));}

/*
#app.game-environment .sub-question-block.columns-count-2 .answer-items {--nb-ai-columns:2; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment .sub-question-block.columns-count-3 .answer-items {--nb-ai-columns:3; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment .sub-question-block.columns-count-4 .answer-items {--nb-ai-columns:4; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment .sub-question-block.columns-count-5 .answer-items {--nb-ai-columns:5; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
#app.game-environment [class*="sub-question-block"][class*="columns-count-"] .answer-item {min-width:max(7em, calc(((100% - (var(--margin-medium) * (var(--nb-ai-columns) - 1))) / var(--nb-ai-columns))));}
*/

#app.game-environment .sub-question-block.columns-count-2 .answer-items {--column-proportion-ai:50%;}
#app.game-environment .sub-question-block.columns-count-3 .answer-items {--column-proportion-ai:33%;}
#app.game-environment .sub-question-block.columns-count-4 .answer-items {--column-proportion-ai:25%;}
#app.game-environment .sub-question-block.columns-count-5 .answer-items {--column-proportion-ai:20%;}
#app.game-environment .answer-items {display:grid !important; gap:var(--margin-medium) !important; --column-proportion-ai:100%; grid-template-columns:repeat(auto-fit, minmax(max(8em, calc(var(--column-proportion-ai) - var(--margin-medium))), 1fr));}

#app.game-environment [class*="sub-question-block"][class*="columns-count-"] .answer-items > * {flex:0 0 auto !important;}

#app.game-environment #score-review {width:100%;}

#app.game-environment #game-scores {display:flex; flex-direction:column; gap:var(--margin-medium);}
#app.game-environment #game-scores, #app.game-environment #game-questions {width:100%;}
.game-scores-table {background-color:var(--game-table-sample-bgcolor);}
.game-scores-table tr td:first-child {width:1%; font-weight:600;}
.game-scores-table tr td:last-child {/*text-align:right; font-weight:600;*/ display:flex; justify-content:right;}
.game-scores-table tr.you > td {background-color:var(--game-table-sample-you-bgcolor);}
#app.game-environment #game-player-highlight {font-weight:700; width:100%; text-align:center; padding:var(--margin-small); border-radius:0.5rem; color:var(--game-player-highlight-color); background-color:var(--color-content-primary-accent-normal);}

#app.game-environment #game-podium-2 {display:flex; justify-content:center; gap:2.5rem; position:relative; height:418px; background:url('../images/interface/podium.png') no-repeat 15%;}
#app.game-environment #game-podium {display:flex; justify-content:center; gap:2.5rem; position:relative; height:418px; background:url('../images/interface/podium.png') no-repeat center;}
#app.game-environment #game-podium > *, #app.game-environment #game-podium-2 > * {display:flex; flex-direction:column; align-items:center; width:10rem;}
#app.game-environment #game-podium .podium-score, #app.game-environment #game-podium-2 .podium-score {font-size:1.25rem; font-weight:700;}
#app.game-environment #game-podium .podium-spacer-1, #app.game-environment #game-podium-2 .podium-spacer-1 {height:35%;}
#app.game-environment #game-podium .podium-spacer-2, #app.game-environment #game-podium-2 .podium-spacer-2 {height:45%;}
#app.game-environment #game-podium .podium-spacer-3, #app.game-environment #game-podium-2 .podium-spacer-3 {height:55%;}

#app.game-environment #score-summary {display:flex; flex-direction:column; align-items:center; width:100%; padding:0 0 2rem 0; border-bottom:1px solid var(--separator-bordercolor);}
#app.game-environment #score-summary #score-status-icon {width:12.5rem; height:12.5rem;}
#app.game-environment #score-summary #score-impact {font-size:1.25rem;}
#app.game-environment #score-summary :is(h1,h2,h3,h4,h5,h6),
#app.game-environment #score-review :is(h1,h2,h3,h4,h5,h6) {font-family:var(--font-roboto);}

#app.game-environment .game-countdown {display:flex; flex-direction:column; align-items:center;}
#app.game-environment #game-countdown-label {font-size:2em;}
#app.game-environment #game-countdown-value {font-size:4em; font-weight:600;}


/* Environnement - Jeu - Contexte avant questions
================================================== */
.context-content {display:flex; flex-direction:column; gap:var(--margin-medium); max-width:80em;}
.context-content img {width:100%; height:100%;}
.context-actions {display:flex; justify-content:center; width:100%;}

.contextTitle1 {font-size:1.5em; text-align:center;}
.contextText {text-align:center;}
.contextTextBold {font-weight:600; text-align:center;}
.contextTextItalic {font-style:italic; text-align:center;}

.contextListTitle {font-weight:600; text-align:center; border:1px solid #D9D9D9; border-bottom:none; padding:1em 1em 0 1em; background:var(--app-tiles-bgcolor); backdrop-filter:blur(3px); border-radius:0.5rem 0.5rem 0 0;}
.contextListItem {margin-top:calc(-1 * var(--margin-medium)); border:1px solid #D9D9D9; border-bottom:none; border-top:none; padding:1em 1em 0 1em; background:var(--app-tiles-bgcolor); backdrop-filter:blur(3px);}
.contextListItemLast {margin-top:calc(-1 * var(--margin-medium)); border:1px solid #D9D9D9; border-top:none; padding:1em; background:var(--app-tiles-bgcolor); backdrop-filter:blur(3px); border-radius:0 0 0.5rem 0.5rem;}
.contextListItem::before, .contextListItemLast::before {content:"-"; margin-right:0.5em; font-weight:600;}


/* Dashboard
================================================== */
#dashboard {width:100%;}

.dashboard-group {display:flex; flex-direction:column; gap:var(--margin-medium); padding:2rem; border-radius:0.5rem; background:var(--dashboard-container-bgcolor); border:1px solid var(--dashboard-container-bordercolor); width:100%;}

.dashboard-list-title {font-family:var(--font-unbounded); font-size:1.5rem; font-weight:400;}
.dashboard-list-title * {font:inherit;}

.dashboard-list {display:flex; flex-direction:column; gap:var(--margin-small);}
.dashboard-list .dashboard-card {display:flex; flex-direction:row; gap:var(--margin-small); font-weight:400; text-align:left; background:var(--card-container-bgcolor); border:1px solid var(--card-container-bordercolor); border-radius:0.5rem; padding:1rem;}
.dashboard-list .dashboard-card > * {display:flex; flex-direction:column;}
.dashboard-list .dashboard-card .dashboard-card-photo {width:8rem; height:8rem; flex-shrink:0; border-radius:0.25rem; border:1px solid var(--card-container-bordercolor); background-repeat:no-repeat;}
.dashboard-list .dashboard-card .dashboard-card-data {flex:1 0 0;}
.dashboard-list .dashboard-card .dashboard-card-data .dashboard-card-data-title {font-family:var(--font-roboto); font-size:1.25rem; font-weight:600;}

.dashboard-actions {display:flex; justify-content:right;}

#dashoard :is(h1,h2,h3,h4,h5,h6) {font-family:var(--font-unbounded);}

#dashboard #dashboard-cat-group .dashboard-card {font-weight:600;}
#dashboard #dashboard-cat-welcome .dashboard-list {gap:0;}

#dashboard table tbody tr :first-child {font-weight:600; font-size:1.25em; width:10%;}
#dashboard table tbody tr :last-child {font-weight:600; text-align:right; width:10%;}

#dashboard .dashboard-messages button {padding:0;}
#dashboard .dashboard-messages button > div {padding:0.5rem; text-align:left; font-weight:400; background:url('../images/icons/Attention.svg') right no-repeat;}
#dashboard .dashboard-messages button > div :first-child {font-weight:300; font-style:italic; font-size:0.875em;}

/*.dashboard-messages [class*=message-severity-] u*/
#dashboard .dashboard-messages button.message-severity-1 {color:var(--color-alert-error-dark); background-color:var(--color-alert-error-light);}
#dashboard .dashboard-messages button.message-severity-2 {color:var(--color-alert-warning-dark); background-color:var(--color-alert-warning-light);}
#dashboard .dashboard-messages button.message-severity-3 {color:var(--color-alert-positive-dark); background-color:var(--color-alert-positive-light);}
#dashboard .dashboard-messages button.message-severity-4 {color:var(--color-alert-informative-dark); background-color:var(--color-alert-informative-light);}
#dashboard .dashboard-messages button.message-severity-5 > div {background:none;}

#dashboard-footer {display:flex; justify-content:space-between; align-items:center; gap:var(--margin-medium); border-top:1px solid var(--hp-footer-bordercolor); padding-top:2rem; margin-top:var(--margin-large);}
#dashboard-footer img {height:3rem;}
#dashboard-footer #dashboard-footer-text p {font-size:0.875em;}
#dashboard-footer #dashboard-footer-logos {display:flex; justify-content:right; gap:var(--margin-large);}


/* Administration
================================================== */
.admin-approval-academicurl {word-wrap:break-word; max-width:14em; display:inline-block;}
.admin-actions {display:flex; flex-direction:row; border-radius:4px; overflow:hidden; border:1px solid #DDD;}
.admin-actions button {padding:0.25em 1em; border-radius:0; border:0;}


/* Messages pour header
================================================== */
#root header .header-message {padding:var(--margin-small); border-radius:4px; display:flex; gap:var(--margin-medium); justify-content:flex-start;}
#root header .header-message .header-date {font-weight:600; }
#root header .header-message.message-severity-1 {color:var(--color-alert-error-dark); background-color:var(--color-alert-error-light);}
#root header .header-message.message-severity-2 {color:var(--color-alert-warning-dark); background-color:var(--color-alert-warning-light);}
#root header .header-message.message-severity-3 {color:var(--color-alert-positive-dark); background-color:var(--color-alert-positive-light);}
#root header .header-message.message-severity-4 {color:var(--color-alert-informative-dark); background-color:var(--color-alert-informative-light);}
#root header .header-message.message-severity-5 > div {background:none;}


/* Details Pane
================================================== */
#details-pane, #dp-content {display:flex; flex-direction:column; gap:var(--margin-medium);}

#dp-content {width:100%; padding:2rem; background:var(--detailspane-bgcolor); border:1px solid var(--detailspane-bordercolor); border-radius:1rem;}
#dp-content .card-container {display:flex; flex-direction:column; gap:var(--margin-medium); width:100%; background-color:var(--detailspane-card-container-bgcolor); border-color:var(--detailspane-card-container-bordercolor);}
#dp-content .dp-actions {display:flex; justify-content:right; gap:var(--margin-small);}
#dp-content .dp-group {display:flex; justify-content:space-between; align-content:center; gap:var(--margin-small); padding:1rem; border-radius:0.5rem; border:1px solid var(--button-secondary-bordercolor);}

#dp-content .dp-title {display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between;}
#dp-content .dp-title > * {display:flex; flex-direction:row; align-items:flex-start; gap:var(--margin-small); flex-wrap:wrap;}
#dp-content .dp-title :not(:first-child) {justify-content:right;}

#dp-header, #dp-filters, #dp-filters > * {display:flex; align-items:center; gap:var(--margin-medium);}
#dp-header {justify-content:space-between;}
#dp-header * {font-weight:400;}
#dp-header h1 {font-size:1.5rem; font-weight:400; font-family:var(--font-unbounded);}
#dp-filters {justify-content:space-between;}
#dp-filters-right {justify-content:right;}
#dp-header-left {display:flex; align-items:center; gap:var(--margin-medium);}
#dp-header-right {display:flex; align-items:center; gap:var(--margin-small);justify-content:right;}
#dp-data {border-radius:0.5rem;}

#dp-parameters.col-layout, #dp-parameters.col-layout > * {gap:var(--margin-large);}

#dp-parameters .form-actions > div {justify-content:right;}


/* Details Pane - Ecrans specifiques
================================================== */
#dp-content #game-list.dashboard-list {--g-gap:1rem; --g-column-count:3; --g-min-width:30rem; --g-gap-width:calc((var(--g-column-count) - 1) * var(--g-gap)); --g-max-width:calc((100% - var(--g-gap-width)) / var(--g-column-count)); display:grid; grid-template-columns:repeat(auto-fill, minmax(max(var(--g-min-width), var(--g-max-width)), 1fr)); grid-gap:var(--g-gap);}
/*
#dp-content #game-list.dashboard-list {display:grid; grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr)); grid-gap:var(--margin-small);}
*/
/*
#dp-content #game-list.dashboard-list {display:flex; flex-direction:row; flex-wrap:wrap;}
#dp-content #game-list.dashboard-list .dashboard-card {flex:1 1 24rem;}
*/

#dp-content #game-status-container {display:flex; flex-direction:row; align-items:flex-start; gap:var(--margin-small);}
#dp-content #game-status-container > * {display:flex; flex-direction:row; align-items:flex-start; gap:var(--margin-small); flex-wrap:wrap;}
#dp-content #game-status-container :not(:first-child) {justify-content:right;}


/* Messages
================================================== */
.message-positive {color:var(--color-alert-positive-dark); background-color:var(--color-alert-positive-light);}
.message-informative {color:var(--color-alert-informative-dark); background-color:var(--color-alert-informative-light);}
.message-warning {color:var(--color-alert-warning-dark); background-color:var(--color-alert-warning-light);}
.message-error {color:var(--color-alert-error-dark); background-color:var(--color-alert-error-light);}


/* Barre de progression
================================================== */
.progressbar {font-size:inherit;}
.progressbar .pb-labels {display:flex; justify-content:space-between; gap:var(--margin-small);}
.progressbar .pb-labels :nth-child(2) {font-weight:600;}
.progressbar .pb-track {font-size:inherit; width:100%; height:0.75em; background-color:var(--progressbar-bgcolor); border:1px solid var(--progressbar-bordercolor); border-radius:0.5em; overflow:hidden;}
.progressbar .pb-progress {font-size:inherit; max-width:100%; width:0; height:100%; background-color:var(--progressbar-progress-bgcolor);}
.progressbar .pb-running-status {display:inline-block; vertical-align:text-top; width:1em; height:1em; border-radius:1em; background-color:var(--color-content-alert-error-normal);}
.progressbar .pb-running-status.is-running {background-color:var(--color-alert-positive-normal);}


/* Tirroirs
================================================== */
.drawer {display:flex; flex-direction:column; gap:0.5rem; border-radius:0.5rem; color:var(--drawer-color); background-color:var(--drawer-bgcolor); border:1px solid var(--color-content-primary-accent-light); overflow:hidden;}
.drawer > * {display:flex; flex-direction:row;}

.drawer button.drawer-head {padding:1rem; text-align:left; font-weight:400; border-radius:0;}

.drawer .drawer-head {justify-content:space-between; gap:var(--margin-small);}
.drawer .drawer-title {font-weight:600; flex-grow:1;}
.drawer .drawer-chevron {width:1.5em; content:var(--icon-chevron);}

.drawer .drawer-content {margin:1rem;}

.drawer.is-open .drawer-chevron {transition:.15s linear; transform:rotate(90deg);}
.drawer:not(.is-open) .drawer-content {display:none;}


/* Etiquettes
================================================== */
/*
.label-single-chevron > label {position:relative; display:block; white-space:nowrap; overflow:hidden;}
.label-single-chevron > label::after {content:url(../images/icons/chevron_right.svg); position:absolute; left:auto; right:0; display:inline-block; font-size:inherit;}
*/

/*
.label-single-chevron {position:relative; width:100%; min-height:1lh; overflow:hidden;}
.label-single-chevron::after {content:url(../images/icons/chevron_right.svg); position:absolute; left:auto; right:0; display:inline-block; font-size:inherit;}
.label-single-chevron > label {position:absolute; display:block; white-space:nowrap;}
*/

.label-single-chevron {display:flex; justify-content:space-between; flex-direction:row !important; width:0; min-width:100%} /* https://stackoverflow.com/questions/57599369/how-to-prevent-childs-content-from-stretching-parents-width */
.label-single-chevron > * {font:inherit;}
.label-single-chevron :first-child {overflow:hidden; white-space:nowrap;}
.label-single-chevron > i {content:url(../images/icons/chevron_right.svg);}

.label-dual {display:flex; gap:var(--margin-small); width:0; min-width:100%;}
.label-dual.spaced {justify-content:space-between;}
.label-dual :nth-child(2) {font-weight:600; overflow:hidden; white-space:normal;}


/* Tags
================================================== */
.tag-container {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:var(--margin-medium);}
.tag {font-size:0.75em; padding:6px; border-radius:4px; color:var(--tag-informative-color); background-color:var(--tag-informative-bgcolor);}
.tag.tag-player-name {font-size:1rem; padding:0.5rem; border-radius:0.25rem; border:1px solid var(--tag-informative-bordercolor); background-color:var(--tag-informative-bgcolor);}
.tag.tag-game-ranked {color:var(--tag-positive-color); background-color:var(--tag-positive-bgcolor);}
.tag.tag-game-status {font-size:1rem; font-weight:700; padding:0.375rem; border-radius:0.25rem; color:var(--color-content-neutral-primary-reversed); background-color:var(--tag-warning-color);}

.tag.positive {color:var(--tag-positive-color); background-color:var(--tag-positive-bgcolor); border-color:var(--tag-positive-bordercolor);}
.tag.informative {color:var(--tag-informative-color); background-color:var(--tag-informative-bgcolor); border-color:var(--tag-informative-bordercolor);}
.tag.warning {color:var(--tag-warning-color); background-color:var(--tag-warning-bgcolor); border-color:var(--tag-warning-bordercolor);}
.tag.error {color:var(--tag-error-color); background-color:var(--tag-error-bgcolor); border-color:var(--tag-error-bordercolor);}


/* Tableaux
================================================== */
table {width:100%; border-spacing:0; border-radius:0.5rem; border:1px solid var(--dp-body-bordercolor); overflow:hidden;}
table td {padding:var(--margin-small); vertical-align:middle; border-bottom:1px solid var(--dp-body-bordercolor);}
table thead td {font-weight:600; background-color:var(--dp-head-bgcolor);}
table tbody tr:last-of-type > td {border-bottom:0;}

table td.table-cell-kpi {font-size:1.5rem; font-weight:700; line-height:1; text-align:right; width:10%;}
table td.table-cell-wlabel * {display:block; font-weight:600;}
table td.table-cell-wlabel :first-child {font-weight:400;}


/* Tableaux speciaux
================================================== */
.questions-list-table tr td:first-of-type {font-size:3rem; font-weight:700; width:1%;}
.questions-list-table tr td:last-of-type {text-align:right;}

.questions-list-table {background-color:var(--table-question-bgcolor);}
.drawer .questions-list-table {background-color:var(--table-question-drawer-bgcolor);}


/* Videos et medias
================================================== */
.video-group {display:flex; flex-wrap:wrap}
.video-group > * {flex:1 1 10rem;}
.video-player {position:relative; padding-bottom:56.25%; padding-top:0; height:0; background-color:var(--app-tiles-bgcolor); border-radius:0.75rem; backdrop-filter:blur(3px); overflow:hidden;}
.video-player iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:none;}

#statement .video-player {max-width:50%;}


/* Overlay
================================================== */
.overlay {display:flex; align-items:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:10000; width:100%; height:100%; background-color:var(--overlay-bgcolor); color:var(--overlay-content-color);}
.overlay-content {max-width:100%; max-height:100%; margin:0 auto; padding:2rem; background-color:var(--overlay-content-bgcolor); border-radius:0.5rem; border:1px solid var(--overlay-content-bordercolor); overflow-y:auto;}

.overlay.hidden {display:none;}
.overlay-content.width-small {width:30rem;}
.overlay-content.width-medium {width:60rem;}
.overlay-content.width-large {width:90%;}
.overlay-content.width-max {width:100%;}

.overlay-content.overlay-type-confirmation {display:flex; flex-direction:column; align-items:center; gap:var(--margin-medium);}

.overlay-content .overlay-actions {display:flex; justify-content:center; gap:var(--margin-small);}


/* Icones
================================================== */
.svg-icon path {fill:var(--app-color);}


/* Technical Debt
================================================== */
.scenario-placeholder-1 {background: url('../images/interface/placeholder-1.png');}
.scenario-placeholder-2 {background: url('../images/interface/placeholder-2.png');}
.scenario-placeholder-3 {background: url('../images/interface/placeholder-3.png');}

#app.game-environment.game-question-screen [id^=question-hints-drawer-] .drawer-content h3 {display:none;}
#question-solution .drawer-content img {width:100%;}


/* TEMP HACKS
================================================== */
#btn-login-signup {display:none !important;}
#btn-account-create {display:none !important;}

/* IMAGES HINTS
================================================== */
.zoomable-image {max-width: 700px; cursor: pointer; height:auto; transition: all 0.3s ease;}
.zoomable-image.zoomed {max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }