html, body {
            touch-action: pan-x pan-y;
            cursor: default;
        }

        :root {
            --white: white;
            --black: #1a1a1a;
            --gray: #7f7f7f;
            --lightgray: #666666;
            --lightestgray: #e6e6e6;
            --incorrect: #ff1d25;
            --correct: #7ac943;
        }

/* ---- Domaine Text ---- */
@font-face {
    font-family: 'Domaine Text';
    font-style: normal;
    font-weight: 300;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-Light.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: italic;
    font-weight: 300;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-LightItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: normal;
    font-weight: 400;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-Regular.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: italic;
    font-weight: 400;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-RegularItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: normal;
    font-weight: 500;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-Medium.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: italic;
    font-weight: 500;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-MediumItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: normal;
    font-weight: 700;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-Bold.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: italic;
    font-weight: 700;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-BoldItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: normal;
    font-weight: 900;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-Black.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Domaine Text';
    font-style: italic;
    font-weight: 900;
    src: url('https://quizlediamant.pages.dev/fonts/DomaineText-BlackItalic.woff2') format('woff2');
    font-display: block;
}

/* ---- Neue Plak Text ---- */
@font-face {
    font-family: 'Neue Plak Text';
    font-style: normal;
    font-weight: 100;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-Thin.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: italic;
    font-weight: 100;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-ThinItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: normal;
    font-weight: 300;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-Light.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: italic;
    font-weight: 300;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-LightItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: normal;
    font-weight: 400;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-Regular.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: italic;
    font-weight: 400;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-Italic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: normal;
    font-weight: 600;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-SemiBold.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: italic;
    font-weight: 600;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-SemiBoldItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: normal;
    font-weight: 700;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-Bold.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: italic;
    font-weight: 700;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-BoldItalic.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: normal;
    font-weight: 900;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-Black.woff2') format('woff2');
    font-display: block;
}
@font-face {
    font-family: 'Neue Plak Text';
    font-style: italic;
    font-weight: 900;
    src: url('https://quizlediamant.pages.dev/fonts/NeuePlakText-BlackItalic.woff2') format('woff2');
    font-display: block;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: var(--black);
            overflow: hidden;
            -webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: default;
			-webkit-font-smoothing: antialiased;
        }

        .container {
            width: 100%;
            aspect-ratio: 16 / 9;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        .sidebar {
            background-color: var(--black);
            flex: 131;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .sidebar-inner {
            padding: 4.27vw;
            flex: 1;
			display: flex;
            justify-content: space-between;
			flex-direction: column;
        }

        .right-section {
            flex: 829;
            display: flex;
            flex-direction: column;
            background-color: var(--white);
        }

        .header {
            background-color: var(--white);
            flex: 111;
            min-height: 0;
            overflow: visible;
            z-index: 5;
        }

        .header-inner {
            padding: 4.27vw 4.27vw 0 4.27vw;
            height: 100%;
            overflow: visible;
        }

        .header-inner svg,
        .header-inner img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .bottom-section {
            flex: 429;
            display: flex;
        }
        
        .results {
            background-color: var(--white);
            flex: 429;
            overflow:hidden;
        }
        
        .results-inner {
            padding: 4.27vw;
            height: 100%;
            overflow:hidden !important;
        }

        .picture {
            background-color: var(--white);
            flex: 429;
            aspect-ratio: 1;
            overflow:hidden;
        }

        .picture-inner {
            padding: 4.27vw;
            height: 100%;
            overflow:hidden !important;
        }

        .quiz {
            background-color: var(--white);
            flex: 400;
            aspect-ratio: 1658 / 858;
            overflow: hidden;
        }

        .quiz-inner {
            padding: 4.27vw 4.27vw 4.27vw 0;
            height: 100%;
            display: flex;
			flex-direction: column;
        }

		.picturecontainer {
			background: var(--lightestgray);
			height: 100%;
			width: 100%;
			position: relative;
			overflow:hidden;
		}

		.creditphoto {
			font-size: 0.35vw;
			text-transform: uppercase;
			letter-spacing: 20%;
			position: absolute;
			bottom: 2%;
			left: 2%;
			font-family: Neue Plak Text;
			font-weight: 600;
		}
		
		.progress {
			font-size: 1vw;
			color: var(--gray);
			text-transform: uppercase;
			letter-spacing: 15%;
			font-family: Neue Plak Text;
			font-weight: 400;
			margin-bottom: 1.25%;
		}

		.question-text {
			font-size: 2vw;
            color: var(--black);
			letter-spacing: 3%;
			font-family: Domaine Text;
			font-weight: 400;
			line-height: 1.3;
			margin-bottom: 5%;
		}
		
		.question-explain {
			font-size: 1.2vw;
            color: var(--gray);
			letter-spacing: 6%;
			font-family: Domaine Text;
			font-weight: 400;
			line-height: 1.7;
			margin-top: 5%;
			flex-grow: 1;
		}

		.answers-column {
			display: flex;
			flex-direction: column;
			overflow: visible;
		}

		.answer-choice {
			font-family: Domaine Text;
			font-weight: 400;
			background: none;
			text-align: left;
			border: none;
			font-size: 2.5vw;
			letter-spacing: 0.125vw;
			cursor: pointer;
			white-space: nowrap;
			overflow: visible;
			text-overflow: ellipsis;
			display: inline-flex;
			align-items: center;
			height: 4.5vw;
			color: var(--black);
			cursor: default;
		}
		
		.answer-choice-label {
			overflow: hidden;
			white-space: nowrap;
			min-width: 0;
		}

		.questionnumbersvg {
			height: 2.5vw;
			vertical-align: -0.3vw;
			margin-right: 1vw;
			overflow: visible;
		}
		
		hr {
			border: none;
			border-top: 0.25px solid var(--gray);
			margin: 0; /* optional */
		}

		.answer-choice.first svg .n1,
		.answer-choice.second svg .n2,
		.answer-choice.third svg .n3,
		.answer-choice.last svg .n4 {
			fill: var(--lightgray);
		}

		.answer-choice.correct svg .n1,
		.answer-choice.correct svg .n2,
		.answer-choice.correct svg .n3,
		.answer-choice.correct svg .n4,
		.answer-choice.incorrect svg .n1,
		.answer-choice.incorrect svg .n2,
		.answer-choice.incorrect svg .n3,
		.answer-choice.incorrect svg .n4,
		.answer-choice.first svg .n2,
		.answer-choice.first svg .n3,
		.answer-choice.first svg .n4,
		.answer-choice.second svg .n1,
		.answer-choice.second svg .n3,
		.answer-choice.second svg .n4,
		.answer-choice.third svg .n1,
		.answer-choice.third svg .n2,
		.answer-choice.third svg .n4,
		.answer-choice.last svg .n1,
		.answer-choice.last svg .n2,
		.answer-choice.last svg .n3 {
			fill: none;
			opacity: 0;
		}

		.answer-choice svg .nbg {
			fill: var(--lightestgray);
		}

		.answer-choice.correct {
			color: var(--correct) !important;
		}

		.answer-choice.correct svg .nbg {
			fill: var(--correct) !important;
		}

		.answer-choice.correct svg .checkcorrect,
		.answer-choice.incorrect svg .xwrong {
			stroke: var(--white);
			stroke-width: 4;
		}

		.answer-choice.incorrect {
			color: var(--incorrect) !important;
		}

		.answer-choice.incorrect svg .nbg {
			fill: var(--incorrect) !important;
		}
		
/* CORRECT AND INCORECT ANIMATIONS */

		/* 1. Number fades out */
		.answer-choice svg .n1,
		.answer-choice svg .n2,
		.answer-choice svg .n3,
		.answer-choice svg .n4 {
			transition: opacity 0.15s ease;
		}

		/* 2. Background circle + text color fade */
		.answer-choice svg .nbg {
			transition: fill 0.35s ease;
		}
		.answer-choice {
			transition: color 0.35s ease;
		}

		/* 3. Check trace-in */
		.answer-choice svg .checkcorrect path {
			stroke-dasharray: 40;
			stroke-dashoffset: -40; /* was 40 — now traces from the other end */
			transition: stroke-dashoffset 0.4s ease;
			transition-delay: 0.15s;
		}
		.answer-choice svg .xwrong path {
			stroke-dasharray: 32;
			stroke-dashoffset: -32; /* was 32 */
			transition: stroke-dashoffset 0.4s ease;
			transition-delay: 0.15s;
		}

		.answer-choice.correct svg .checkcorrect path {
			stroke-dashoffset: 0;
		}
		.answer-choice.incorrect svg .xwrong path {
			stroke-dashoffset: 0;
		}

/* --------------------- */


/* ARROW BUTTON ANIMATION */


	@keyframes arrowTapRight {
	    0%   { transform: translateX(0); }
	    100% { transform: translateX(20px); }
	}

	/* Rebond façon icône du Dock macOS, mais HORIZONTAL. La flèche est
	   « lancée » vers la droite (le sens où elle pointe), décélère comme
	   sous l'effet de la gravité jusqu'à son point le plus éloigné, puis
	   retombe vers le mot DÉBUTER — qui joue le rôle du mur — où elle
	   « rebondit » et REPART aussitôt (aucune pause au mur). En boucle.
	   Le secret pour que ça ressemble à de la gravité (et non à un ease
	   générique) : deux courbes différentes pour les deux moitiés.
	     • aller  (0 -> apex) : easeOutQuad — départ rapide, décélère
	     • retour (apex -> mur): easeInQuad  — départ lent, accélère
	   Aller et retour durent autant (50 % chacun) → parabole symétrique,
	   et le 100 % (= mur) reboucle instantanément sur le 0 % (= relance).
	   La distance parcourue est 1.5vw ; ajustez-la ci-dessous au besoin. */
	@keyframes arrowDockBounceRight {
	    0%   { transform: translateX(0);     animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
	    50%  { transform: translateX(1.5vw); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
	    100% { transform: translateX(0); }   /* impact contre DÉBUTER -> relance immédiate */
	}

	#btn-qs-fleche,
	#btn-te-fleche {
 	   animation: none; /* nudge is class-triggered, not on load */
	}

	/* La flèche de DÉBUTER rebondit en continu pour inviter au tap. */
	#btn-de-fleche {
	    animation: arrowDockBounceRight 1.5s linear infinite;
	}

	#btn-qs-fleche.arrow-go,
	#btn-te-fleche.arrow-go {
 	   animation: arrowTapRight 0.25s ease-out forwards;
	}

/* --------------------- */


		.loadingscreen {
			background: none;
			flex-grow: 1;
			position: absolute;
			overflow: hidden;
			z-index: 1000;
			inset: 0;
			background-color: var(--black);
			font-size: 2vw;
			color: var(--gray);
			text-transform: uppercase;
			letter-spacing: 10%;
			font-family: Neue Plak Text;
			font-weight: 400;
			align-content: center;
			text-align: center;
			pointer-events: none;
		}
		
		button {
			all: unset;
			background: none;
			border: none;
		}

		.nextquestionbutton,.finishquizbutton  {
			align-self: flex-end;
			padding: 4%;
			background: none;
			border: none;
		}
		
		
		.welcomescreen {
			background: var(--black);
			flex-grow: 1;
			position: absolute;
			overflow: hidden;
			z-index: 500;
			inset: 0;
		}
		
		
		.welcomescreencontent {
			position: relative;
			z-index: 4;
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		
		.welcomescreenitem {
			padding-top: 6vw;
			padding-left: 6vw;
			padding-right: 6vw;
		}
		
		.welcomescreenitem-last {
			padding-bottom: 6vw;
			padding-left: 6vw;
			padding-right: 6vw;
			align-content: end;
		}
		
		
		.welcomescreen video {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			pointer-events: none;
			z-index: -1;
		}
		
		.intro {
			font-size: 1.65vw;
			font-family: Domaine Text;
			font-weight: 400;
			color: var(--white);
			letter-spacing: 8%;
			line-height: 1.7;
			text-rendering: geometricPrecision;
			padding-top: 4vw !important;
		}

.inactivitypopup {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(26, 26, 26, 0.75);
}

.inactivitypopup-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--white);
    padding: 3vw;
    width: 36vw;
}

.inactivitypopup-title {
    font-family: 'Domaine Text';
    font-weight: 400;
    font-size: 2vw;
    color: var(--black);
    letter-spacing: 3%;
    line-height: 1.3;
    margin-bottom: 1.5vw;
}

.inactivitypopup-text {
    font-family: 'Domaine Text';
    font-weight: 400;
    font-size: 1.2vw;
    color: var(--gray);
    letter-spacing: 3%;
    line-height: 1.7;
    margin-bottom: 2vw;
}

.inactivitypopup-buttons {
    display: flex;
    width: 75%;
    gap: 1vw;
}

.inactivitypopup-button {
    flex: 1;
    font-family: 'Neue Plak Text';
    font-weight: 600;
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: 10%;
    padding: 0.55vw 0.7vw 0.85vw;
    cursor: pointer;
}

.inactivitypopup-button-stay {
    background-color: var(--black);
    color: var(--white);
    border: var(--black) 0.15vw solid;
}

.inactivitypopup-button-quit {
    background-color: var(--white);
    color: var(--black);
    border: var(--black) 0.15vw solid;
}




/* ---- Écran de chargement : état d'erreur ---- */
#loadingpercent.loading-error {
    color: var(--incorrect);
}

.loading-error-detail {
    display: inline-block;
    margin-top: 0.6vw;
    max-width: 80%;
    font-size: 0.9vw;
    color: var(--gray);
    letter-spacing: 5%;
    word-break: break-all;
    line-height: 1.4;
}

.loading-refresh-button {
    display: none; /* révélé par JS uniquement en cas d'erreur */
    margin: 2.5vw auto 0;
    pointer-events: auto; /* .loadingscreen est en pointer-events:none */
    cursor: pointer;
    font-family: 'Neue Plak Text';
    font-weight: 600;
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: 10%;
    color: var(--white);
    background-color: transparent;
    border: 0.15vw solid var(--white);
    padding: 0.8vw 1.6vw 1vw;
}

.loading-refresh-button:hover {
    background-color: var(--white);
    color: var(--black);
}