body
{
	background-image: url(https://tablette.epistemes-formation.fr/2026/L2C/IMG/Background_1.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}


/* clignotement discret + halo */
@keyframes cartesBlink 
{
	0%, 100% { background-color: #6e6e6e; transform: scale(0.85); border: solid 0.2em white; }
	50%      { background-color: #dddddd; transform: scale(0.9); border: solid 0.2em white; }
}

.btn_menu.cartes-blink,
.options.btn_menu.cartes-blink 
{
	animation: cartesBlink 1.5s infinite;
}



@keyframes blinkDocs 
{
	0%, 100% { background-color: #6e6e6e; transform: scale(0.85); border: solid 0.2em white; }
	50%      { background-color: #dddddd; transform: scale(0.9); border: solid 0.2em white; }
}

.btn_menu.docs-blink ,
.options.btn_menu.docs-blink 
{
	animation: blinkDocs 1.5s infinite;
}

label 
{
	font-size: 0.9rem;
}

.small_nav_part
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 3em;
	height: 5em !important;
	margin-left: 0em !important;
	margin-bottom: -1em;
}

.white-text 
{
	text-align: center;
}

.card-content 
{
	color: aliceblue;
}


:root {
--bg: #0f1115; /* fond sombre élégant */
--card: #151923;
--muted: #8a94a6;
--text: #e6eaf2;
--accent: #d27700; /* accent bleu doux par défaut */
--accent-2: #fff20a; /* second accent (succès) */
--danger: #ff6b6b; /* erreur */
--radius: 16px;
}

html, body 
{
	height: 100%;
	margin: 0;
	/*background: radial-gradient(1200px 800px at 10% 10%, #1a2030 0%, var(--bg) 60%), var(--bg);*/
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

#toast-container
{
	top: 1em;
	min-width: 80%;
	max-width: 90%;
	height: fit-content;
	display: flex;
	justify-content: center;
	z-index: 1;
	left: 62.5%;
	position: fixed;
	transform: translate(-50%, 0%);
	align-items: center;
	flex-direction: column;
	gap: 1em;
}

.toast 
{
	width: fit-content;
	margin: 0;
	padding: 1.5em 1em;
	color: #002041;
	font-weight: 600;
	background-color: #ffffff;
	border-radius: 1em;
	max-width: 90%;
}

.toast_juste 
{
	border: solid 4px #46bd1a;
	background-color: #d1e9d1 !important;
}

.toast_partiel
{
	border: solid 4px #d58000;
	background-color: #ecdcae !important;
}

.toast_faux 
{
	border: solid 4px #d52a00;
	background-color: #ecc4c4 !important;
}


.modal .modal-content 
{
	color: #000000de;
}

#progressText 
{
	text-align: center;
}

#timeText
{
	text-align: center;
}

#pdfDownload 
{
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	color: black !important;
}

#pdfNext, #pdfPrev
{
	color: black !important;
}

.wrap 
{
	position: absolute;
	top: 0vh;
	left: 0%;
	right: 0%;
	margin-left: auto;
	margin-right: auto;
	/*background-color: color(srgb 0 0 0 / 0.5);*/
}

.card
{
	background: linear-gradient(180deg, rgb(20 20 60), rgb(20 20 20));
	border: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 10px 40px rgba(0,0,0,0.35);
	border-radius: var(--radius);
	overflow: clip;
}

header.module 
{
	display: flex;
	align-items: flex-end;
	height: 15vh;
	top: 0vh;
	position: absolute;
	width: 25%;
	margin-left: 0%;
	justify-content: center;
	font-size: 1.5em;
	background: linear-gradient(180deg, #192a1682 0%, #3f68394d 100%);
	padding-bottom: 1em;
	filter: contrast(200%);
}

.title 
{
	font-size: 2.2em;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.meta 
{
	font-size: 1em;
	color: white;
	display: flex;
	gap: 14px;
	align-items: center;
}

#fullscreen_icon 
{
	font-size: 2.1em !important;
	cursor: pointer;
}

#fullscreen_icon:hover 
{
	color: #fff00a;
}


.is-ok input.select-dropdown {background-color: #56a42b !important; color: white !important;}
.is-ko input.select-dropdown {background-color: #c62828 !important; color: white !important;}
.is-partial input.select-dropdown {background-color: #ef6c00 !important; color: white !important;}
.is-empty input.select-dropdown {background-color: #9e9e9e !important; color: white !important;}

/* QCM */
label.choice.is-ok span  { color: #00a000; font-weight: 600; }
label.choice.is-ko span  { color: #c00000; font-weight: 600; }

/* optionnel : un léger fond pour mieux voir */
label.choice.is-ok { border-radius: 6px; padding: 0em 0em; }
label.choice.is-ko { border-radius: 6px; padding: 0em 0em; }

.select-locked 
{
	pointer-events: none;
}
.select-locked input.select-dropdown 
{
	pointer-events: none;
}


.bar 
{
	width: 25%;
	margin-left: 0%;
	top: 15vh;
	position: absolute;
	height: 2vh;
	background: #303030d1;
}

.bar > div 
{
	height: 100%;
	max-width: 100%;
	background: linear-gradient(90deg, #c46a1a, #feac61);
	width: 0%;
	transition: width 280ms ease;
}

main.stage 
{
	display: grid;
	align-items: start;
	justify-items: center;
	justify-content: center;
	align-content: space-around;
	width: 75%;
	margin-left: 25%;
	outline: none;
}

.menu_module 
{
	z-index: 10;
	position: absolute;
	width: 25%;
	height: 68vh;
	margin-top: 17vh;
	margin-bottom: 0;
	display: flex;
	justify-content: space-around;
	background: linear-gradient(180deg, #3f68394d 0%, #3f68394d 100%);
	align-items: center;
	filter: contrast(200%);
}

.liste-qcu-row 
{
	margin-bottom: 0.5em;
	padding-bottom: 1em;
	border-bottom: double #002041;
}

.ranking-draggable-item 
{
	user-select: none;
}

.ranking-draggable-item.dragging 
{
	opacity: 0.5;
}

.ranking-draggable-item.drag-over 
{
	outline: 4px dashed #fbee00;
}

.ranking-draggable-item.choice 
{
	border: double 4px #ffffff63;
}

.choices.ranking 
{
	font-size: 0.5em;
}

.options.btn_menu 
{
	margin: 0 !important;
	width: 100% !important;
	display: flex;
	justify-content: space-evenly;
	transition: 0.15s;
	color: #f6ea0d;
	background-color: #6e6e6e;
	padding: 0.3em 0em 0em 0em;
	height: fit-content;
	font-weight: 600;
	flex-direction: row;
	padding: 0.5em 0.5em;
	filter: contrast(50%) !important;
}

.options.btn_menu:hover
{
	/*color: #000000;*/
	background: linear-gradient(180deg, rgb(255 173 99) 0%, rgb(238 140 29) 60%, rgb(196 106 26) 100%);
	transition: 0.15s;
	transform: scale(1.05);
}

.liste_btn_module 
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 1em;
	margin-bottom: 0;
}

[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after 
{
	border: 2px solid #002041;
}

.media 
{
	display: grid;
	place-items: center;
	background: #0d111a;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: calc(var(--radius) - 6px);
	overflow: hidden;
}
.feedback 
{
	font-size: 0.7em;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.06);
	background: rgba(255,255,255,0.03);
	display: none;
}
.feedback.ok 
{
	color: #fef00a;
	border-color: rgb(254 239 9);
	display: block;
}
.feedback.ko 
{
	color: #ff8b8b;
	border-color: rgb(255 51 51 / 70%);
	display: block;
}

footer.nav
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 15vh;
	top: 85vh;
	position: absolute;
	width: 25%;
	background: linear-gradient(180deg, #3f68394d 0%, #192a1682 100%);
	filter: contrast(200%);
}

.logo_bouton 
{
	width: auto;
	font-size: 3em;
}

.btns 
{
	display: flex;
	width: 75%;
	margin-left: 25%;
	padding-top: 0em;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	padding: 0em 0.8em 0.5em 0.8em;
	height: 0;
}

button 
{
	appearance: none;
	border: 2px solid rgb(255 255 255);
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	color: black;
	font-weight: 700;
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: transform 120ms ease, background 150ms ease, opacity 120ms ease;
}
button:focus
{
	color: black;
	background-color: #fff00a;
}
button:hover 
{
	/*transform: scale(1.0) !important;*/
	background: linear-gradient(180deg, rgb(255 173 99) 0%, rgb(238 140 29) 60%, rgb(196 106 26) 100%);
	color: black;
}

button:disabled 
{ 
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	background: grey;
}

button.disabled:hover 
{
	background: grey;
}

.primary 
{ 
	border-color: #ffffff;
	background: linear-gradient(270deg, rgb(0 87 176), rgb(0 32 65));
	color: #ffffff;
	font-weight: 900;
	font-size: 1.2em;
	transform: scale(1.1) !important;
	transition: 0.25s;
	margin-top: 2em;
	z-index: 10;
}
.primary:hover
{
	transform: scale(1.1) !important;
	transition: 0.25s;
	background: linear-gradient(90deg, rgb(0 87 176), rgb(0 32 65));
	color: #ffffff;
}


.summary 
{
	background: #101524;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 14px;
	display: grid;
	gap: 8px;
}
.mono 
{ 
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
}


canvas#unity-canvas
{
	width: 83vw !important;
	height: 80vh !important;
}

.question 
{
	font-size: 1.5em;
	margin-bottom: 1em;
	width: 90%;
	margin-left: 0%;
	text-align: justify;
	margin-left: 0%;
}

.quiz 
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	font-size: 1.5em;
	padding: 1em 1em;
	background-color: #ffffff7d;
	border: 2px solid #002041;
	border-radius: 0.3em;
	max-width: 65vw;
	width: fit-content;
	min-width: 74vw;
	/* margin: 0.2em 0em; */
	min-height: 99vh;
	margin-top: 0.5vh;
	max-height: 99vh;
	justify-content: center;
	position: fixed;
	color: #002041;
	font-weight: 600;
}

.raw-text-step 
{
	text-align: center;
	padding: 0px 12vw;
	color: #002041;
}

.rawtext-block p 
{
	color: #002041 !important;
}

.choices 
{
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	max-width: 100%;
	width: 80%;
	overflow-y: auto;
	padding: 0.3em;
}

label.choice 
{
	min-width: 10vw;
}

.liste-qcu-row .question 
{
	color: #002041;
}

.choices::-webkit-scrollbar 
{
	width: 10px; /* Largeur de la barre de défilement */
}

.choices::-webkit-scrollbar-thumb 
{
	background-color: #00a000; /* Couleur de la poignée */
	border-radius: 5px; /* Bordure arrondie pour la poignée */
}

.choices::-webkit-scrollbar-track 
{
	background-color: rgb(215 215 215);
	border: 1px solid #002041;
	border-radius: 5px;
}

.choice span 
{
	color: rgb(0 32 65);
	font-size: 1.7em !important;
	font-weight: 600;
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after 
{
	background-color: #faa24e;
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after 
{
	border: 2px solid #002041;
}

[type="checkbox"]:checked+span:not(.lever):before 
{
	border-right: 4px solid rgb(0 32 65);
	border-bottom: 4px solid rgb(0 32 65);
}

/* ========================================================================== */
/* RESTAURATION VISUELLE APRÈS VALIDATION                                     */
/* Réponses choisies : vert si attendu, rouge si non attendu                  */
/* ========================================================================== */

/* Ligne restaurée : pas de gros fond */
.liste-qcu-row.restored-row
{
	background: transparent !important;
	border-left: none !important;
	border-radius: 0 !important;
	padding-left: 0 !important;
}

/* On garde l’intitulé normal */
.liste-qcu-row.restored-row .question
{
	color: #002041 !important;
	font-weight: 600 !important;
}

/* Réponses non choisies : légèrement grisées */
.liste-qcu-row.restored-row label.choice span
{
	color: rgba(100,100,100,0.7) !important;
	opacity: 1 !important;
	font-weight: 600 !important;
}

/* Réponse choisie attendue */
.liste-qcu-row.restored-row label.choice.restored-selected.is-expected span
{
	color: #00a000 !important;
	font-weight: 800 !important;
	border-radius: 6px;
}

/* Réponse choisie non attendue */
.liste-qcu-row.restored-row label.choice.restored-selected.is-unexpected span
{
	color: #c00000 !important;
	font-weight: 800 !important;
	border-radius: 6px;
}

/* Coche discrète avant la réponse choisie attendue */
.liste-qcu-row.restored-row label.choice.restored-selected.is-expected span::after
{
	/*content: "✓ ";*/
	color: #fbee00;
	background-color: rgb(0 126 0);
	border-color: #00ff00;
	font-weight: 900;
}

/* Croix discrète avant la réponse choisie non attendue */
.liste-qcu-row.restored-row label.choice.restored-selected.is-unexpected span::after
{
	/*content: "✕ ";*/
	background-color: rgb(126 0 0);
	border-color: #ff0000;
	color: #ff5a5a;
	font-weight: 900;
}

/* ========================================================================== */
/* QCU OPTIONS : version cartes                                               */
/* ========================================================================== */

.qcu-options-card.restored-selected.is-expected
{
	background: rgba(0,160,0,0.08) !important;
	border-color: rgba(0,160,0,0.45) !important;
	box-shadow: none !important;
}

.qcu-options-card.restored-selected.is-expected .qcu-options-text
{
	color: #00a000 !important;
	font-weight: 800 !important;
}

.qcu-options-card.restored-selected.is-unexpected
{
	background: rgba(192,0,0,0.08) !important;
	border-color: rgba(192,0,0,0.45) !important;
	box-shadow: none !important;
}

.qcu-options-card.restored-selected.is-unexpected .qcu-options-text
{
	color: #c00000 !important;
	font-weight: 800 !important;
}

/* Badge conservé sobre */
.qcu-options-card.restored-selected .qcu-options-badge
{
	background: transparent !important;
	/*border-color: rgba(251,238,0,0.65) !important;
	color: #fbee00 !important;*/
}

.is-unexpected .qcu-options-badge 
{
	color: #c00000 !important;
	border-color: #c00000 !important;
}

.is-expected .qcu-options-badge 
{
	color: #00a000 !important;
	border-color: #00a000 !important;
}

/* ========================================================================== */
/* QCU OPTIONS — Question comparative avec deux cartes par situation          */
/* ========================================================================== */

.qcu-options-quiz
{
	width: 74.5vw !important;
	min-width: 74.5vw !important;
	max-width: 74.5vw !important;
	height: 99vh !important;
	min-height: 99vh !important;
	max-height: 99vh !important;
	padding: 0.9em 1em !important;
	background-color: #ffffff7d;
	border: 2px solid #002041;
}

.qcu-options-question
{
	width: 96% !important;
	margin: 0 0 0.8em 0 !important;

	font-size: 1.35em !important;
	line-height: 1.35;
	text-align: left !important;
	color: #002041;
}

.qcu-options-form
{
	width: 96%;
	flex: 1 1 auto;

	display: flex;
	flex-direction: column;
	gap: 0.8em;

	overflow-y: auto;
	padding: 0.2em 0.7em 0.4em 0.2em;
	box-sizing: border-box;
}


.qcu-options-form::-webkit-scrollbar
{
	width: 9px;
}

.qcu-options-form::-webkit-scrollbar-thumb
{
	background-color: #00a000;
	border-radius: 5px;
}

.qcu-options-form::-webkit-scrollbar-track
{
	background-color: rgb(215 215 215);
	border: 1px solid #002041;
	border-radius: 5px;
}

.qcu-options-row
{
	width: 100%;
	padding: 0.85em;
	box-sizing: border-box;
	background: rgb(255 255 255 / 50%);
	border: 2px solid #002041;
	border-radius: 0.75em;
}

.qcu-options-situation
{
	margin-bottom: 0.65em;
	color: #002041;
	font-size: 1.2em;
	font-weight: 800;
	line-height: 1.25;
}

.qcu-options-choices
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.2em;
}

.qcu-options-card
{
	position: relative;

	display: grid;
	grid-template-columns: 2.2em 1fr;
	align-items: center;
	gap: 0em;

	min-height: 4.3em;
	padding: 0.3em;
	box-sizing: border-box;

	background: rgb(255 255 255);
	border: 2px solid rgb(0 32 65);
	border-radius: 0.7em;

	cursor: pointer;
	transition: 0.18s ease;
}

.qcu-options-card:hover
{
	background: rgb(0 32 65 / 10%);
	border: 2px solid rgb(250 164 78);
	transform: translateY(-1px);
}

.qcu-options-card.selected
{
	box-shadow: 0 0 5px 4px rgba(0, 32, 65, 0.22);
	background: linear-gradient(270deg, rgb(0 87 176), rgb(0 32 65));
	border-color: #ffffff;
}

.qcu-options-card.locked
{
	cursor: default;
}

.qcu-options-card.locked:hover
{
	transform: none;
}

.qcu-options-radio
{
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.qcu-options-badge
{
	width: 2em;
	height: 2em;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.75);

	color: #ffffff;
	font-weight: 900;
	font-size: 0.95em;
}

.qcu-options-card.selected .qcu-options-badge
{
	background: #111111;
	border-color: #ffffff;
	color: #fbee00;
}

.qcu-options-text
{
	color: rgb(0 32 65);
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.28;
}

.qcu-options-card.selected .qcu-options-text
{
	color: #ffffff;
	font-weight: 900;
}

.qcu-options-actions
{
	width: 100%;
	flex: 0 0 auto;

	display: flex;
	justify-content: center;
	align-items: center;

	padding-top: 0.7em;
}

.qcu-options-actions .primary
{
	margin-top: 0 !important;
}

/* Adaptation écrans moyens */
@media screen and (min-width : 993px) and (max-width : 1560px)
{
	.qcu-options-quiz
	{
		width: 74vw !important;
		min-width: 74vw !important;
		max-width: 74vw !important;
		height: 99vh !important;
		min-height: 99vh !important;
		max-height: 99vh !important;
		padding: 0.9em 1em !important;
	}

	.qcu-options-question
	{
		font-size: 1.2em !important;
	}

	.qcu-options-situation
	{
		font-size: 1.05em;
	}

	.qcu-options-text
	{
		font-size: 0.82em;
	}
}

/* Adaptation mobile / tablette étroite */
@media screen and (max-width : 992px)
{
	.qcu-options-quiz
	{
		width: 78vw !important;
		min-width: 78vw !important;
		max-width: 78vw !important;
		height: 100vh !important;
		min-height: 100vh !important;
		max-height: 100vh !important;
		padding: 0.8em !important;
	}

	.qcu-options-question
	{
		font-size: 1em !important;
	}

	.qcu-options-choices
	{
		grid-template-columns: 1fr;
	}

	.qcu-options-card
	{
		min-height: 3.5em;
	}

	.qcu-options-situation
	{
		font-size: 1em;
	}

	.qcu-options-text
	{
		font-size: 0.85em;
	}
}

/* -------------------------------------------- Drag & Drop exercise --------------------------------------------*/
.dragdrop 
{
	display: grid;
	width: 75vw;
	padding: 0em 0.5em;
}

.dd-wrap
{
	width: 75%;
	margin-left: 12.5%;
	padding: 1em;
	background-color: #111111a8;
	border: 2px solid #fbee00;
	border-radius: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
}

.dd-layout 
{ 
	display: flex;
	gap: 0.5em;
	width: 100%;
	flex-direction: column;
	justify-content: center;
}
.dd-bank, .dd-targets 
{ 
	background: #0d111a; 
	border: 1px solid rgba(255,255,255,0.08); 
	border-radius: 12px; 
	padding: 10px; 
	min-height: 140px; 
}

.dd-bank 
{
	display: flex;
	gap: 0.3em;
	padding: 0.2em !important;
	/*overflow-y: auto;*/
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 14em;
	min-height: 2.5em !important;
}

.dd-bank .dd-item 
{
	/*max-width: 19%;*/
	width: stretch;
	max-width: 20%;
}

.img_display 
{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
}
.dd-item 
{
	background: #ffffff;
	color: #002041;
	border: 2px solid rgb(0 32 65);
	text-align: center;
	display: flex;
	border-radius: 0.4em;
	padding: 0.4em 0.2em;
	cursor: grab;
	user-select: none;
	font-size: 0.9em;
	align-items: center;
	height: 2.5em;
	min-width: 5em;
	width: stretch;
	justify-content: center;
	transition: 0.2s;
}

.dd-item { /*touch-action: none;*/ }      /* empêche le délai/scroll lors du drag */
.dd-ghost { opacity: 0.9; }          /* optionnel */
.dd-over { outline: 2px solid rgba(255,255,255,.6); } /* feedback */
.dd-bank, .dd-slot-hole { /*touch-action: none;*/ }

/* _________________________ Correction Scroll Drag & Drop _________________________ */
.dd-item
{
	touch-action: pan-y;
}

.selection-drop-touch-ghost
{
	position: fixed !important;
	z-index: 99999 !important;
	pointer-events: none !important;
	margin: 0 !important;

	display: flex !important;
	align-items: center;
	justify-content: flex-start;

	box-sizing: border-box !important;
	padding: 0.65em 0.75em;

	height: auto !important;
	min-height: 3.2em;
	max-height: none !important;

	white-space: normal !important;
	overflow: visible !important;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;

	font-size: 0.92em;
	line-height: 1.3;
	text-align: left;

	transition: none !important;
	animation: none !important;
	transform-origin: 0 0;
	will-change: transform;
}

.dd-bank,
.dd-slot-hole
{
	touch-action: pan-y;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* _________________________ Correction Drag & Drop _________________________ */
.dd-slot-hole.correct {
	border: 3px solid #2e7d32 !important;
	background: rgba(46,125,50,0.08);
}

.dd-slot-hole.incorrect {
	border: 3px solid #c62828 !important;
	background: rgba(198,40,40,0.08);
}

.dd-slot-hole { position: relative; }

.dd-slot-hole.expected::after{
	content: attr(data-expected);
	position:absolute;
	left:6px;
	top:6px;
	max-width: calc(100% - 12px);
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.1;
	background: rgba(46,125,50,0.12);
	border: 2px dashed rgba(46,125,50,0.8);
	color: #fff;
	opacity: .95;
	pointer-events:none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dd-slot { position: relative; }

.dd-slot.expected 
{
		padding-bottom: 2em;
}

.dd-slot.expected::after 
{
		content: attr(data-expected);
		position: absolute;
		left: 2.5%;
		text-align: center;
		bottom: 3px;
		width: 100%;
		max-width: 95%;
		padding: 0.2em 0.1em;
		border-radius: 1em;
		font-size: 12px;
		line-height: 1.1;
		background: rgb(116 255 123 / 30%);
		border: 2px solid rgba(46, 125, 50, 1);
		color: #f6ea0d;
		pointer-events: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}

/* Si tu veux différencier slot occupé vs vide */
.dd-slot-hole.expected.filled::after{
	top:auto;
	bottom:6px;
}

.dd-bank-hidden
{
	display:none !important;
}

/* _________________________ Correction Drag & Drop _________________________ */


.dd-item.dragging 
{ 
	opacity: 0.6; 
}
.dd-targets
{
	display: flex;
	gap: 0.3em;
	flex-direction: row;
	padding: 0.5em !important;
	max-height: 70vh;
	overflow-y: auto;
	justify-content: center;
}

.dd-slot 
{
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgb(251 238 0 / 33%);
	border-radius: 12px;
	padding: 8px;
	display: grid;
	gap: 6px;
	width: stretch;
	align-content: space-between;
	height: 100%;
}
.dd-slot-label 
{
	font-size: 1em;
	color: white;
	text-align: center;
}
.dd-slot-hole 
{  
	background: rgb(110 110 110);
	border: 1px solid rgb(251 238 0 / 50%);
	border-radius: 10px; 
	display: flex; align-items: center; justify-content: center;
	padding: 6px; 
	height: fit-content;
	min-height: 2.5em;
}

.dd-slot-hole.filled 
{ 
	background: rgba(111,227,193,0.08); border-color: rgba(111,227,193,0.35); 
}


.dd-slot-media 
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0.5em;
}

.dd-slot-img 
{
	max-width: 220px;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 0.7em;
	border: solid 1px white;
	pointer-events: none;
}



[data-dropzone].dd-over 
{ 
	outline: 2px dashed #f2cf07;
	outline-offset: 0px; 
}
.dd-actions 
{ 
	display: flex; 
	gap: 10px; 
	align-items: center; 
	justify-content: center;
}

.dd-item--img 
{
	display: grid;
	grid-template-rows: auto 1fr;
	align-items: start;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 8px;
	background: #fff;
	max-width: 15em;
	min-height: fit-content;
	align-items: end;
}

.dd-item--img .dd-thumb 
{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	user-select: none;
	pointer-events: none;
}

.dd-item--img .dd-caption 
{
	font-size: .9rem;
	text-align: center;
	color: #444;
}

/* -------------------------------------------- Drag & Drop exercise --------------------------------------------*/

.main_module 
{
	height: 100vh;
	max-height: 100vh;
	overflow-y: auto;
}

.media 
{
	height: auto;
}

span.badge.new 
{
	background-color: #001932;
}

.modal.modal-fixed-footer .modal-content 
{
	background-color: #f6f4f2;
}

.modal .modal-footer 
{
	background-color: #1c1f49;
}
.modal .modal-footer .btn-flat 
{
	color: white;
	font-size: 1.2em;
	font-weight: 700;
}

.btn_menu 
{
	font-size: 1.5em;
	display: flex;
	align-items: center;
	height: 2.5em;
	padding: 0.5em 1em;
}

.carte 
{
	padding: 0 0.35rem !important;
	text-align: center;
}

.carte .card 
{
	height: fit-content;
	margin-bottom: 1em;
}

span.badge 
{
	padding: 0.1em 0.3em !important;
	line-height: 0px;
	display: flex !important;
	align-items: center;
	justify-content: space-evenly;
	gap: 1.3em;
	padding: 1em 0.5em !important;
}

#modalDocs 
{
	background-color: #1c1f49;
	top: 5% !important;
}

#modalGallery 
{
	max-height: 80vh;
	height: 80vh;
	top: 5% !important;
}

li.collection-item 
{
	color: #1c1f49;
	font-weight: 700;
}

/* ====================== SELECT (menus déroulants) ====================== */

.select-exo 
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 98%;
	background-color: #111111a8;
	border: 2px solid #fbee00;
	border-radius: 1em;
	padding: 1em;
	margin: 1em 0em;
}

.select-exo .input-field 
{
	margin-top: 0.2em;
	margin-bottom: 0em;
	width: 50% !important;
	min-height: 10em;
	background-color: #6e6e6e;
	width: 50% !important;
	display: flex;
	align-items: center;
	flex-direction: column;
	border-right: solid 2px #111111a8;
	justify-content: space-around;
	gap: 1em;
}

.select-exo .dropdown-trigger 
{
	width: 100% !important;
}

.select-wrapper
{
	width: 100%;
}

.select-wrapper .caret 
{
	z-index: 1;
	fill: rgb(0 0 0 / 87%);
}

.select-wrapper input.select-dropdown 
{
	font-size: 0.8em;
	padding: 0em 0em 0em 0.3em;
	background-color: #ffffff;
	border-bottom: 0px solid !important;
	margin: 1em 0 1em 0;
	z-index: 1;
}



[type="checkbox"]+span:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after 
{
	border: 2px solid rgb(0 32 65);
}

label span 
{
	color: #000000;
	font-size: 1em;
}

.label-select 
{
	font-size: 1.1em !important;
	color: #ffed00 !important;
	font-weight: 100;
}

.custom_column 
{
	text-align: center;
}

#muteBtn
{
	cursor: pointer;
	font-size: 1.5em !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid white;
	border-radius: 1em;
	padding: 0.1em;
}

.volume_icon 
{
	font-size: 1em !important;
}

.module-fullscreen-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5em;
	height: 3.5em;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: rgba(48,48,48,0.9);
	color: #ffffff;
}

.module-fullscreen-btn .material-icons
{
	font-size: 2.5em;
}

.module-fullscreen-overlay
{
	position: fixed;
	inset: 0;
	z-index: 30000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	background: rgba(0,0,0,0.96);

	visibility: hidden;
}

.module-fullscreen-overlay button
{
	min-width: 15em;
	padding: 1em 1.4em;
	font-size: 1.1em;
}

#fullscreenBtn 
{
	padding: 10px 10px;
	border: 4px solid;
	background: unset;
	color: unset;
}

label.label-select
{
	position: initial !important;
	font-weight: 600;
}

/* griser le pseudo-placeholder */
.select-dropdown.is-placeholder::placeholder { color:black; opacity: 1; }


.Module_Titre_Doc, .grey-text
{
	color: #000000de !important;
}

.collection .collection-item 
{
	color: #fef104;
}

.collapsible-header
{
	background-color: #1c1c1c !important;
	color: white;
	font-size: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

#galleryBadge 
{
	color: #ffed00 !important;
	background-color: #000000de !important;
}

#galleryMain
{
	justify-content: center;
}

#Titre_Cartes 
{
	font-size: 3em;
	color: #3487af;
	font-style: italic;
	text-decoration: underline;
}

[type="radio"]:disabled+span 
{
	color: rgb(255 255 255 / 50%);
}

#globalImageEl 
{
	height: 75vh !important;
}

/* ========================================================================== */
/* EXERCICE SELECTION_DROP — PLAN DE GESTION DES DÉCHETS                     */
/* ========================================================================== */

/* Conteneur général : uniquement pour le nouveau type d'exercice */
.selection-drop 
{
	width: 75vw;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
}

.selection-drop .dd-item.dragging 
{ 
	opacity: 1; 
}

/* Carte principale de la question */
.selection-drop .dd-wrap
{
	margin: 0 auto !important;
	box-sizing: border-box;
	background-color: #ffffff7d;
	border: 2px solid #002041;
	border-radius: 0.5em;
	gap: 1em;
	display: flex;
	justify-content: center;
	min-width: 74.5vw;
	min-height: 99vh;
	font-weight: 500;
	color: #002041;
}

/* Énoncé plus lisible */
.selection-drop .question
{
	width: 100%;
	margin: 0 0 0.5em 0;
	font-size: 1.25em;
	line-height: 1.4;
	text-align: left;
}

/* Mise en page en deux colonnes : propositions / document */
.selection-drop .dd-layout
{
	display: grid;
	grid-template-columns: minmax(360px, 47%) minmax(390px, 53%);
	gap: 1em;
	width: 100%;
	height: min(65vh, 620px);
	margin: 0;
	padding: 0;
}

/* Colonne de gauche : banque des propositions */
.selection-drop .dd-bank
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.25em;
	width: 100%;
	max-width: none;
	min-height: 0 !important;
	max-height: none;
	height: 100%;
	overflow-y: auto;
	padding: 0.8em !important;
	box-sizing: border-box;
	background: rgb(255 255 255 / 50%);
	border: 3px solid #002041;
	border-radius: 0.5em;
}

/* Titre de la colonne gauche */
.selection-drop .dd-bank > .question 
{
	flex: 0 0 auto;
	margin: 0 0 0.4em 0;
	padding-bottom: 0.6em;
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	color: #002041;
	border-bottom: 1px solid rgb(0 32 65);
}

/* Propositions : affichage vertical et texte lisible */
.selection-drop .dd-bank .dd-item,
.selection-drop .selection-drop-hole .dd-item
{
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: auto;
	min-height: 3.2em;
	padding: 0.65em 0.75em;
	box-sizing: border-box;
	font-size: 0.92em;
	line-height: 1.3;
	text-align: left;
	justify-content: flex-start;
	border-radius: 0.55em;
}

/* Survol des propositions */
.selection-drop .dd-item:hover
{
	transform: scale(1.02);
	box-shadow: 0 3px 10px rgba(0,0,0,0.28);
	transition: 0.2s;
}

/* Colonne de droite : document cible */
.selection-drop .dd-targets
{
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	padding: 0 !important;
	overflow: hidden;
	background: transparent;
	border: none;
}

/* Carte représentant le document */
.selection-drop .selection-drop-slot
{
	width: 100%;
	height: 100%;
	padding: 0.75em;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.65em;
	background: rgb(255 255 255 / 50%);
	border: 3px solid rgba(0, 32, 65, 1);
	border-radius: 12px;
}

/* Titre du document cible */
.selection-drop .selection-drop-slot .dd-slot-label
{
	flex: 0 0 auto;
	padding-bottom: 0.6em;
	font-size: 1em;
	font-weight: 700;
	color: #002041;
	border-bottom: 1px solid rgb(0 32 65);
}

/* Zone de dépôt : les éléments sélectionnés s'empilent verticalement */
.selection-drop .selection-drop-hole
{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.25em;
	width: 100%;
	min-height: 0 !important;
	height: auto !important;
	padding: 0.7em;
	box-sizing: border-box;
	overflow-y: auto;
	background: rgba(110,110,110,0.38);
	border: 2px dashed rgba(0, 32, 65, 1);
	border-radius: 10px;
}

/* Mise en évidence lorsque l'utilisateur dépose un élément */
.selection-drop .selection-drop-hole.dd-over
{
	background: rgba(251,238,0,0.10);
	border-color: #fbee00;
	outline: none;
}

/* Bouton de validation */
.selection-drop .dd-actions
{
	flex: 0 0 auto;
	margin-top: 0.25em;
}

.selection-drop .dd-actions .primary
{
	margin-top: 0;
	min-width: 9em;
}

/* Barres de défilement des deux colonnes */
.selection-drop .dd-bank::-webkit-scrollbar,
.selection-drop .selection-drop-hole::-webkit-scrollbar
{
	width: 8px;
}

.selection-drop .dd-bank::-webkit-scrollbar-thumb,
.selection-drop .selection-drop-hole::-webkit-scrollbar-thumb
{
	background-color: #00a000;
	border-radius: 5px;
}

.selection-drop .dd-bank::-webkit-scrollbar-track,
.selection-drop .selection-drop-hole::-webkit-scrollbar-track
{
	background-color: rgb(215 215 215);
	border: 1px solid #002041;
	border-radius: 5px;
}

.selection-drop-floating-ghost
{
	position: fixed;
	z-index: 99999;
	pointer-events: none;

	padding: 0.9em 1.1em;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	background-color: #ffe500;
	background-image: none;
	color: #000000;

	border: 3px solid #111111;
	border-radius: 0.65em;

	font-size: 1em;
	line-height: 1.35;

	box-shadow:	0 12px 22px rgba(0, 0, 0, 0.55);

	opacity: 0.7;
	transform: none;
}

/* Élément d'origine pendant qu'il est transporté */
.selection-drop .dd-item.dragging
{
	opacity: 0.75;
	border: 2px dashed #fbee00;
	background: rgba(125, 125, 125, 0.5);
	color: rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

/* Adaptation pour écrans plus étroits */
@media screen and (max-width: 1100px)
{
	.selection-drop-drag-ghost
	{
		width: min(300px, 48vw);
		padding: 0.6em 0.75em;
		font-size: 0.82em;
	}

	.selection-drop
	{
		width: 80vw;
		padding: 0.4em;
	}

	.selection-drop .dd-wrap
	{
		width: 100% !important;
		padding: 0.7em;
	}

	.selection-drop .question
	{
		font-size: 1em;
	}

	.selection-drop .dd-layout
	{
		display: flex;
		flex-direction: row;
		height: 72vh;
		gap: 0.6em;
	}

	.selection-drop .dd-bank
	{
		height: stretch;
	}

	.selection-drop .dd-targets
	{
		height: stretch;
	}

	.selection-drop .dd-bank .dd-item,
	.selection-drop .selection-drop-hole .dd-item
	{
		font-size: 0.8em;
		min-height: 2.8em;
	}
}

/* ========================================================================== */
/* INDICATION DE DÉFILEMENT DES QUESTIONS                                    */
/* ========================================================================== */

.questions-scroll-shell
{
	/*position: relative;*/

	flex: 1 1 auto;
	min-height: 0;

	box-sizing: border-box;

	display: flex;
	align-items: center;
}

/*
 * On cible uniquement la liste principale,
 * pas les groupes de réponses internes.
 */
.questions-scroll-shell > .question-scroll-content
{
	width: 100%;
	height: 100%;
	max-height: 60vh;
	min-height: 0;

	flex: 1 1 auto;

	overflow-y: auto !important;
	overflow-x: hidden !important;

	padding: 1em 1em 1em 3em !important;

	box-sizing: border-box;
	scroll-behavior: smooth;
		
}

.questions-scroll-shell.scroll-shell-standard
{
	width: 100%;
}

.questions-scroll-shell.scroll-shell-wide
{
	width: 96%;
}

.questions-scroll-shell.scroll-shell-full
{
	width: 100%;
}

.scroll-shell-wide.questions-scroll-shell > .question-scroll-content {
	width: 100%;
	height: 85%;
	max-height: 85%;
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 0em 1em 0em 0em !important;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

.question-scroll-arrow
{
	position: absolute;
	right: 1em;
	bottom: 5em;
	z-index: 30;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 2.7em;
	height: 2.7em;
	margin: 0;
	padding: 0 !important;

	color: #ffffff !important;

	background:
		rgba(
			0,
			32,
			65,
			0.92
		) !important;

	border:
		2px solid
		rgba(
			255,
			255,
			255,
			0.90
		) !important;

	border-radius: 50%;

	box-shadow:
		0 4px 12px
		rgba(
			0,
			0,
			0,
			0.30
		),
		0 0 0 4px
		rgba(
			250,
			164,
			78,
			0.22
		);

	cursor: pointer;

	opacity: 1;
	visibility: visible;

	transition:
		opacity 180ms ease,
		visibility 180ms ease,
		transform 180ms ease;
}

.question-scroll-arrow .material-icons
{
	color: #ffffff !important;
	font-size: 2em;
	line-height: 1;

	animation:
		questionScrollArrowMove
		1.1s ease-in-out
		infinite;
}

@keyframes questionScrollArrowMove
{
	0%,
	100%
	{
		transform:
			translateY(-0.12em);
	}

	50%
	{
		transform:
			translateY(0.18em);
	}
}

.question-scroll-arrow.is-hidden
{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform:
		translateY(0.7em);
}

.BIG_IMG 
{
	font-size: 2em;
	margin-top: 0.2em;
}



.question-scroll-arrow:hover 
	{
		background:	rgba(0,32,65,0.92) !important;
		transform: scale(1);
	}

.questions-scroll-shell::after
{
	/*content: "";

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;

	height: 3.8em;

	background:
		linear-gradient(
			to bottom,
			rgba(220, 241, 250, 0),
			rgba(220, 241, 250, 0.88)
		);

	pointer-events: none;

	transition:
		opacity 180ms ease,
		visibility 180ms ease;*/
}

.questions-scroll-shell.is-at-bottom::after
{
	opacity: 0;
	visibility: hidden;
}



/* SMALL SCREEN */
@media screen and (min-width : 100px) and (max-width : 600px) 
{
	
}
/* MEDIUM SCREEN */
@media screen and (min-width : 601px) and (max-width : 992px) 
{

	.module-fullscreen-overlay
	{

		visibility: visible;
	}

	h2 
	{
		font-size: 2.56rem;
		line-height: 110%;
		margin: 2.3733333333rem 0 1.424rem 0;
	}

	.questions-scroll-shell.scroll-shell-wide
	{
		width: 90%;
		margin-left: -6%;
	}

	.module-fullscreen-btn
	{
		width: 3em;
		height: 3em;
	}

	.module-fullscreen-btn .material-icons
	{
		font-size: 2em;
	}

	.rawtext-block p
	{
		font-size: 1em !important;
		padding: 0em 2em;
	}

	.selection-drop .dd-layout
	{
		display: flex;
		flex-direction: row;
		align-items: stretch;
		height: 65vh;
		gap: 0.6em;
	}

	.selection-drop .dd-bank,
	.selection-drop .dd-targets
	{
		height: 96%;
		min-height: 0;
		box-sizing: border-box;
	}

	.selection-drop .selection-drop-slot
	{
		height: 100%;
		min-height: 0;
		box-sizing: border-box;
	}

	.selection-drop .selection-drop-slot
	{
		gap: 0em;
	}

	button:hover 
	{
		/*background: linear-gradient(90deg, var(--accent), var(--accent-2));*/
		color: white;
	}

	#toast-container
	{
		top: 1em;
		min-width: 80%;
		max-width: 90%;
		height: fit-content;
		display: flex;
		justify-content: center;
		z-index: 1;
		left: 60%;
		position: fixed;
		transform: translate(-50%, 0%);
		align-items: center;
	}

	.toast 
	{
		padding: 0.5em 0.5em;
		text-align: center;
		max-height: 90vh;
		overflow: auto;
		border-radius: 0;
	}

	.choice span
	{
		color: white;
		font-size: 1.2em !important;
		font-weight: 600;
		color: rgb(0 32 65);
	}

	.choices
	{
		gap: 0.5em;
		max-width: 90%;
		min-width: 80%;
		overflow-y: auto;
		min-height: auto;
		max-height: 50vh;
	}

	.choices::-webkit-scrollbar 
	{
		width: 5px; /* Largeur de la barre de défilement */
	}

	.choices::-webkit-scrollbar-thumb 
	{
		background-color: #00a000; /* Couleur de la poignée */
		border-radius: 5px; /* Bordure arrondie pour la poignée */
	}

	.choices::-webkit-scrollbar-track 
	{
		background-color: rgb(215 215 215);
		border: 1px solid #002041;
		border-radius: 5px;
	}

	.primary 
	{
		font-size: 1em;
		padding: 0.3em 0.5em;
	}
	.quiz
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5em;
		font-size: 1em;
		padding: 1em 0.5em;
		border-radius: 0em;
		max-width: 80vw;
		width: 80vw;
		min-width: 80vw !important;
		max-height: 100vh !important;
		height: 100vh;
		position: fixed;
		justify-content: space-evenly;
		margin: 0;
	}

	.select-exo .input-field 
	{
		gap: 0em;
		min-height: 12em;
		justify-content: space-evenly !important;
	}

	label.label-select
	{
		text-align: center;
	}

	#fond_banniere
	{
		transform: scale(0.2) !important;
		position: absolute !important;
		top: -7em !important;
		left: -12.2em !important;
	}
	#logo_banniere 
	{
		transform: scale(0.2) !important;
		position: absolute !important;
		top: -5.4em !important;
		left: -7em !important;
	}

	.liste_btn_module 
	{
		gap: 0.3em;
		margin: 0 !important;
		margin-top: 0em !important;
	}
	.options.btn_menu 
	{
		height: fit-content;
		padding: 0.3em;
	}

	.logo_bouton
	{
		width: 25%;
		font-size: 2.2em;
	}

	main.stage
	{
		/*width: 80%;
		margin-left: 20%;*/
		width: 80%;
		margin-left: 20%;
		/* padding-left: 1%; */
		/* padding-right: 1%; */
	}

	header.module
	{
		width: 20%;
	}

	.menu_module
	{
		z-index: 10;
		position: absolute;
		width: 20%;
		height: 58vh;
		margin-top: 22vh;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	header.module
	{
		display: flex;
		align-items: center;
	}

	.dragdrop 
	{
		width: 80vw;
		padding: 0em;
	}

	.selection-drop .dd-wrap 
	{
		gap: 0.1em;
		min-height: 100vh;
		max-height: 100vh;
		border-radius: 0em;
	}

	.bar
	{
		width: 20%;
		margin-left: 0%;
		top: 20vh;
		position: absolute;
		height: 2vh;
		background: #303030d1;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}

	.meta
	{
		font-size: 1em;
	}

	.watermark 
	{
		width: 100% !important;
		font-size: 0.7em;
		z-index: 12 !important;
		left: 0 !important;
		transform: none !important;
		margin-bottom: 0 !important;
	}

	header.module 
	{
		font-size: 1em;
	}

	.btn_menu 
	{
		font-size: 1em !important;
	}

	.btn_menu.slide_btn
	{
		height: 2em !important;
		min-width: 2em;
		margin-top: -1.3em !important;
		font-size: 1.2em !important;
		border-radius: 0.3em;
	}

	#muteBtn
	{
		font-size: 2em !important;
	}

	footer.nav 
	{
		height: 20vh !important;
		top: 80vh;
		position: absolute;
		width: 20%;
		z-index: 11;
	}

	body 
	{
		background-size: auto;
	}
	.small_nav_part 
	{
		margin-top: 0em;
		margin-bottom: 0em;
	}
	.bouttons_actions 
	{
		position: fixed;
		top: 5%;
		width: 100%;
		text-align: center;
	}
	.fullscreen-mode .main_module 
	{ 
		height: 100vh;
		max-height: 100vh;
		overflow-y: auto;
	}
	
	i.medium {
		font-size: 2.5rem;
	}

	.dd-bank 
	{
		max-height: 70vh;
		margin-bottom: 0.4em;
		padding: 0.3em;
	}
	.dd-targets 
	{
		height: stretch;
		max-height: fit-content;
		padding: 0.1em !important;
		gap: 0.2em;
	}

	.dd-slot 
	{
		overflow-y: auto;
		gap: 0px;
		width: initial;
		padding: 0.3em !important;
		overflow-x: hidden;
	}

	.dd-slot-label 
	{
		font-size: 0.85em;
		padding: 0.3em;
	}

	.dd-slot-hole 
	{
		margin: 0.2em;
		padding: 0.3em !important;
	}

	.dd-wrap 
	{
		width: 100% !important;
		height: 100vh !important;
		margin-left: 0% !important;
		margin-top: 0em;
		margin-bottom: 0em;
		height: -webkit-fill-available;
		background-color: #111111a8;
		border: 2px solid #fbee00;
		border-radius: 0em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		gap: 0em;
		padding: 0em;
	}

	.dd-item--img
	{
		align-items: center;
		height: fit-content;
		min-height: 5em;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0.1em;
		gap: 0px;
	}

	.dd-slot .dd-item.dd-item--img
	{
		height: 10em;
	}

	.dd-layout
	{
		margin-bottom: 0;
		gap: 0em;
		height: fit-content;
		padding: 0em 0.1em;
	}

	header.module
	{
		height: 20vh;
		padding: 0.2em 1.5em;
	}

	.wrap 
	{
		top: 0vh;
		left: 0%;
		right: 0%;
	}

	.main_module
	{
		height: 100vh;
		max-height: 100vh;
		overflow-y: auto;
	}

	footer.nav
	{
		height: 14vh;
	}

	.fullscreen-mode #footer_module 
	{
		height: 10vh;
	}
	.title 
	{
		font-size: 1.2em;
		font-weight: 600;
		letter-spacing: 0.2px;
	}
	.btns 
	{
		display: flex;
		justify-content: space-between;
		width: 80% !important;
		margin-left: 20% !important;
		padding-top: 0em;
		align-items: center;
		gap: 0.3em;
		flex-direction: row;
		padding: 0em 0.3em 0.7em 0.3em;
	}
	.btn_menu
	{
		font-size: 1.2em;
		display: flex;
		align-items: center;
		height: 3em;
		padding: 0.5em 1em;
	}

	/*.slide_btn 
	{
		height: fit-content !important;
		width: fit-content;
		padding: 0.5em 0.6em 0.7em 0.6em;
		align-items: center;
		justify-content: center !important;
		border-radius: 1em !important;
	}*/

	#galleryPreview 
	{
		max-height: 75vh !important;
	}

	.question
	{
		font-size: 1em;
		width: 98%;
		margin-bottom: 0em;
	}

	.primary 
	{
		margin-top: 0em;
		border-radius: 0.5em;
	}

	label.choice 
	{
		font-size: 0.7em;
	}

	#pdfPreviewWrap
	{
		height: -webkit-fill-available;
	}
	#globalImageEl 
	{
		height: 130vh !important;
	}
}

@media screen and (max-width: 992px)
{
	.selection-drop .dd-bank,
	.selection-drop .selection-drop-hole
	{
		overflow-y: auto !important;
		overflow-x: hidden;
		touch-action: pan-y !important;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-gutter: stable;
	}

	.selection-drop .dd-item
	{
		touch-action: pan-y !important;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}

	.selection-drop .dd-item::after
	{
		content: "›";
		flex: 0 0 auto;
		margin-left: auto;
		padding-left: 0.6em;
		font-size: 1.4em;
		font-weight: 900;
	}

	.selection-drop .selection-drop-hole .dd-item::after
	{
		content: "‹";
	}

	.selection-drop .dd-item
	{
		touch-action: pan-y !important;
		transition: transform 90ms ease, box-shadow 90ms ease, opacity 90ms ease;
		will-change: transform;
	}

	.selection-drop .dd-item
	{
		touch-action: pan-y !important;
		user-select: none;
		-webkit-user-select: none;
	}

	.selection-drop .dd-item.touch-dragging
	{
		opacity: 0.25;
	}

	.selection-drop-touch-ghost
	{
		position: fixed;
		z-index: 99999;
		margin: 0;
		box-sizing: border-box;
		pointer-events: none;
		opacity: 0.95;
		transform: scale(1.03);
		background-color: #ffe500;
		background-image: none;
		color: #000000;
		border: 3px solid #111111;
		border-radius: 0.55em;
		box-shadow: 0 8px 22px rgba(0,0,0,0.45);
	}

	.selection-drop .dd-bank.dd-over,
	.selection-drop .selection-drop-hole.dd-over
	{
		background-color: rgba(251,238,0,0.16) !important;
		border-color: #fbee00 !important;
		box-shadow: inset 0 0 0 3px rgba(251,238,0,0.3);
	}
}

/* TALL-MEDIUM SCREEN */
@media screen and (min-width : 993px) and (max-width : 1560px) 
{

	button.btn_menu.slide_btn
	{
		border-radius: 0.3em;
		padding: 0.1em 0.4em 0.1em 0.4em;
	}

	.choice span 
	{
		/*color: white;*/
		font-size: 1.35em !important;
		font-weight: 600;
	}

	.choices 
	{
		max-width: 98.5%;
	}

	.dd-wrap 
	{
		width: 100% !important;
		margin-left: 5% !important;
	}

	.question
	{
		font-size: 1.5em;
		width: 90%;
	}
	.quiz
	{
		font-size: 1em;
		max-height: 97vh;
		max-width: 73vw;
	}

	.small_nav_part
	{
		height: 9em !important;
		margin-left: 0em !important;
		margin-top: 0em;
		font-size: 0.6em;
	}
	.bouttons_actions 
	{
		position: fixed;
		top: 5%;
		width: 100%;
		text-align: center;
	}
	.fullscreen-mode #header_module 
	{
		height: 10vh;
	}
	.fullscreen-mode .main_module 
	{ 
		height: 80vh;
		max-height: 80vh;
	}

	.menu_module 
	{
		align-items: center;
	}

	.liste_btn_module 
	{
		gap: 1em;
	}

	.options.btn_menu 
	{
		gap: 0.5em;
		font-size: 1.5em;
	}

	.nav_row 
	{
		max-height: 10vh !important;
	}

	nav a.sidenav-trigger, nav a.sidenav-trigger i 
	{
		height: 32px !important;
		line-height: 50px !important;
	}

	.title 
	{
		font-size: 1.2em;
		font-weight: 600;
		letter-spacing: 0.2px;
	}
	.btns 
	{
		display: flex;
		justify-content: space-between;
		width: 75%;
		padding-top: 0em;
		align-items: center;
	}
	.btn_menu
	{
		font-size: 1.2em !important;
		display: flex;
		align-items: center;
		height: 2em;
		padding: 0.5em 1em;
	}
	#globalImageEl 
	{
		height: 75vh !important;
	}
}