From 253188b46df16792cca2c81cb35abd7873cf0b82 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Wed, 15 Apr 2026 12:16:23 +0000
Subject: [PATCH] Autosave: 20260415-121623

---
 css/component.css | 387 ++++++++++++++----------
 css/styles.css    | 742 +++++++++++++++++++++++++++-------------------
 db/auth.php       |  47 ++-
 3 files changed, 713 insertions(+), 463 deletions(-)

diff --git a/css/component.css b/css/component.css
index ad8d6de..3ff59fc 100644
--- a/css/component.css
+++ b/css/component.css
@@ -1,151 +1,236 @@
-/* General styles for the modal */
-
-/* 
-Styles for the html/body for special modal where we want 3d effects
-Note that we need a container wrapping all content on the page for the 
-perspective effects (not including the modals and the overlay).
-*/
-.md-perspective,
-.md-perspective body {
-	height: 100%;
-	overflow: hidden;
-}
-
-.md-perspective body  {
-	background: #d4c6a1;
-	-webkit-perspective: 600px;
-	-moz-perspective: 600px;
-	perspective: 600px;
-}
-
-.container {
-	min-height: 100%;
-}
-
-.md-modal {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	width: 50%;
-	max-width: 1400px;
-	min-width: 1200px;
-	height: auto;
-	z-index: 2000;
-	visibility: hidden;
-	-webkit-backface-visibility: hidden;
-	-moz-backface-visibility: hidden;
-	backface-visibility: hidden;
-	-webkit-transform: translateX(-50%) translateY(-50%);
-	-moz-transform: translateX(-50%) translateY(-50%);
-	-ms-transform: translateX(-50%) translateY(-50%);
-	transform: translateX(-50%) translateY(-50%);
-}
-
-.md-show {
-	visibility: visible;
-}
-
-.md-overlay {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	visibility: hidden;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-	opacity: 0;
-	background: rgba(145,120,30,0.8);
-	-webkit-transition: all 0.3s;
-	-moz-transition: all 0.3s;
-	transition: all 0.3s;
-}
-
-.md-show ~ .md-overlay {
-	opacity: 1;
-	visibility: visible;
-}
-
-/* Content styles */
-.md-content {
-	color: #fff;
-	background: #544c37;
-	position: relative;
-	border-radius: 3px;
-	margin: 0 auto;
-}
-
-.md-content h3 {
-	margin: 0;
-	padding: 0.4em;
-	text-align: center;
-	font-size: 2.4em;
-	font-weight: 300;
-	opacity: 0.8;
-	background: rgba(0,0,0,0.1);
-	border-radius: 3px 3px 0 0;
-}
-
-.md-content > div {
-	padding: 15px 40px 30px;
-	margin: 0;
-	font-weight: 300;
-	font-size: 1.15em;
-}
-
-.md-content > div p {
-	margin: 0;
-	padding: 10px 0;
-	text-align: justify;
-}
-
-.md-content > div ul {
-	margin: 0;
-	padding: 0 0 30px 20px;
-}
-
-.md-content > div ul li {
-	padding: 5px 0;
-}
-
-.md-content button {
-	display: block;
-	margin: 0 auto;
-	font-size: 0.8em;
-}
-
-/* Individual modal styles with animations/transitions */
-
-/* Effect 1: Fade in and scale up */
-.md-effect-1 .md-content {
-	-webkit-transform: scale(0.7);
-	-moz-transform: scale(0.7);
-	-ms-transform: scale(0.7);
-	transform: scale(0.7);
-	opacity: 0;
-	-webkit-transition: all 0.3s;
-	-moz-transition: all 0.3s;
-	transition: all 0.3s;
-}
-
-.md-show.md-effect-1 .md-content {
-	-webkit-transform: scale(1);
-	-moz-transform: scale(1);
-	-ms-transform: scale(1);
-	transform: scale(1);
-	opacity: 1;
-}
-
-@-webkit-keyframes slit {
-	50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
-	100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
-}
-
-@-moz-keyframes slit {
-	50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
-	100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
-}
-
-@keyframes slit {
-	50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
-	100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
-}
\ No newline at end of file
+/* General styles for the modal */
+
+/* 
+Styles for the html/body for special modal where we want 3d effects
+Note that we need a container wrapping all content on the page for the 
+perspective effects (not including the modals and the overlay).
+*/
+.md-perspective,
+.md-perspective body {
+	height: 100%;
+	overflow: hidden;
+}
+
+.md-perspective body  {
+	background: #d4c6a1;
+	-webkit-perspective: 600px;
+	-moz-perspective: 600px;
+	perspective: 600px;
+}
+
+.container {
+	min-height: 100%;
+}
+
+.md-modal {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: min(92vw, 1100px);
+	max-width: calc(100vw - 32px);
+	min-width: 320px;
+	max-height: calc(100vh - 32px);
+	height: auto;
+	overflow-y: auto;
+	z-index: 2000;
+	visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	backface-visibility: hidden;
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	-moz-transform: translateX(-50%) translateY(-50%);
+	-ms-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.md-show {
+	visibility: visible;
+}
+
+.md-overlay {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	visibility: hidden;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	opacity: 0;
+	background: rgba(145,120,30,0.8);
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	transition: all 0.3s;
+}
+
+.md-show ~ .md-overlay {
+	opacity: 1;
+	visibility: visible;
+}
+
+/* Content styles */
+.md-content {
+	color: #fff;
+	background: #544c37;
+	position: relative;
+	border-radius: 3px;
+	margin: 0 auto;
+	max-width: 100%;
+	overflow: hidden;
+}
+
+.md-content img {
+	max-width: 100%;
+	height: auto;
+}
+
+.md-content h3 {
+	margin: 0;
+	padding: 0.4em;
+	text-align: center;
+	font-size: 2.4em;
+	font-weight: 300;
+	opacity: 0.8;
+	background: rgba(0,0,0,0.1);
+	border-radius: 3px 3px 0 0;
+}
+
+.md-content > div {
+	padding: 15px 40px 30px;
+	margin: 0;
+	font-weight: 300;
+	font-size: 1.15em;
+}
+
+.md-content > div p {
+	margin: 0;
+	padding: 10px 0;
+	text-align: justify;
+}
+
+.md-content > div ul {
+	margin: 0;
+	padding: 0 0 30px 20px;
+}
+
+.md-content > div ul li {
+	padding: 5px 0;
+}
+
+.md-content button {
+	display: block;
+	margin: 0 auto;
+	font-size: 0.8em;
+}
+
+/* Individual modal styles with animations/transitions */
+
+/* Effect 1: Fade in and scale up */
+.md-effect-1 .md-content {
+	-webkit-transform: scale(0.7);
+	-moz-transform: scale(0.7);
+	-ms-transform: scale(0.7);
+	transform: scale(0.7);
+	opacity: 0;
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	transition: all 0.3s;
+}
+
+.md-show.md-effect-1 .md-content {
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+	opacity: 1;
+}
+
+@-webkit-keyframes slit {
+	50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
+	100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
+}
+
+@-moz-keyframes slit {
+	50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
+	100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
+}
+
+@keyframes slit {
+	50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
+	100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
+}
+
+@media (max-width: 1280px) {
+	.md-modal {
+		width: min(94vw, 960px);
+		min-width: 0;
+	}
+}
+
+@media (max-width: 900px) {
+	.md-content > div img.float-left,
+	.md-content > div img.float-right {
+		float: none;
+		display: block;
+		margin: 0 auto 16px;
+		max-width: min(100%, 260px);
+	}
+}
+
+@media (max-width: 768px) {
+	.md-modal {
+		width: calc(100vw - 24px);
+		max-width: calc(100vw - 24px);
+		max-height: calc(100vh - 24px);
+	}
+
+	.md-content h3 {
+		position: relative;
+		padding: 0.65em 3.4rem;
+		font-size: 1.5em;
+		line-height: 1.3;
+	}
+
+	.md-content > div {
+		padding: 16px 18px 20px;
+		font-size: 1em;
+	}
+
+	.md-content h3 img.float-left {
+		position: absolute;
+		left: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		float: none;
+	}
+
+	.md-content h3 .frame-icon-close.float-right {
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		float: none;
+	}
+}
+
+@media (max-width: 480px) {
+	.md-modal {
+		width: calc(100vw - 16px);
+		max-width: calc(100vw - 16px);
+		min-width: 0;
+		max-height: calc(100vh - 16px);
+	}
+
+	.md-content h3 {
+		padding: 0.85em 2.8rem;
+		font-size: 1.15em;
+	}
+
+	.md-content > div {
+		padding: 14px 12px 18px;
+		font-size: 0.95em;
+	}
+
+	.md-content > div p {
+		text-align: left;
+	}
+}
diff --git a/css/styles.css b/css/styles.css
index b7fb638..c04f1fb 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,315 +1,323 @@
 [hidden] { display: none !important; }
-@font-face {
-    font-family: 'Electrolize';
-    src: url('../fonts/Electrolize-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: Electrolize, Arial, sans-serif;
-}
-
-html, body {
-    height: 100%;
-}
-
-body {
-    background: #1a1a1a;
-    color: white;
-    min-height: 100vh;
-}
-
-
-
-a {
-	color: #ffffff;
-	text-decoration: none;
-}
-
-a:hover {
-	color: #a29b78 !important;
-	text-decoration: none;
-}
-
-.footer {
-    position: absolute;
-    bottom: 0px;
-	left: 50%;
-	transform: translate(-50%, -50%);
-    width: -50%;
-    height: 50px;
-}
-
-/* Utilitaires texte */
-.txt-s05 { font-size: 5px; }
-.txt-s10 { font-size: 10px; }
-.txt-s12 { font-size: 12px; }
-.txt-s15 { font-size: 15px; }
-.txt-s20 { font-size: 20px; }
-.txt-s22 { font-size: 22px; }
-.txt-s25 { font-size: 25px; }
-.txt-s40 { font-size: 40px; }
-.padding5 { padding: 5px; }
-.padding15 { padding: 15px; }
-.padding25 { padding: 25px; }
-.padding50 { padding: 50px; }
-.padding-left50 { padding-left: 50px !important; }
-.txt-bold { font-weight: bold; }
-.txt-italic { font-style: italic; }
-.txt-justify { text-align: justify; text-justify: inter-word; }
-.txt-center { text-align: center !important; }
-.txt-center input { display: inline-block !important; text-align: center !important; }
-.txt-underline { text-decoration: underline; }
-.float-right { float: right; }
-.float-left { float: left; }
-.txt-or { color: #a29b78; }
-.txt-jaune { color: #fcba03; }
-.v-hidden { visibility: hidden; }
-.small-caps { font-variant-caps: small-caps; }
-
-.ul-style {
-	line-height: 30px;
-	/* padding-left: 50px !important; */
-	/* border-left:  4px solid #a29b78; */
-}
-
-/* Vidéo plein écran en arrière-plan */
-.video-container {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    inset: 0;
-    z-index: -5; /* derrière tout */
-    overflow: hidden;
-}
-
-.video-container iframe {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100vw;
-    height: 100vh;
-    transform: translate(-50%, -50%);
-    border: 0;
-    pointer-events: none; /* la vidéo n’intercepte pas les clics */
-}
-
-/* Ajustements pour conserver le recadrage 16/9 sans bandes */
-@media (min-aspect-ratio: 16/9) {
-    .video-container iframe { height: 56.25vw; }
-}
-@media (max-aspect-ratio: 16/9) {
-    .video-container iframe { width: 177.78vh; }
-}
-
-/* Voile noir par-dessus la vidéo */
-.black-filter {
-    background: rgba(0, 0, 0, 0.7);
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-}
-
-/* Conteneur principal (si besoin de couches au-dessus) */
-.container {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: 0; /* au-dessus de la vidéo */
-}
-
-/* Logos centrés */
-.center-page-bops {
-    position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: auto;
-    z-index: 2;
-    width: 600px;
-    height: 600px;
-}
-
-.center-page-infos {
-    position: absolute;
-    top: 0%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: auto;
-    z-index: 2;
-    width: 600px;
-    height: 200px;
-}
-
-.assets-div-menu {
-    position: fixed;
-    top: 25px;
-    left: 25px;
-    transform: translate(0px, 0px);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: auto;
-	background-color: rgb(0 0 0 / 50%);
-    z-index: 100;
-    width: 300px;
-	display: flex;          /* Active le mode Flexbox */
-	flex-direction: column; /* Aligne les liens les uns sous les autres */
-    align-items: center;    /* Centre verticalement */
-	gap: 2px;
-    justify-content: center;
-	border: solid 3px rgb(155 145 60 / 25%);
-	border-radius: 10px;
-	padding: 5px 0px 5px 0px;
-}
-
-.connexion-div-menu {
-    position: fixed;
-    top: 25px;
-    right: 25px;
-    transform: translate(0px, 0px);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: auto;
-	background-color: rgb(0 0 0 / 50%);
-    z-index: 100;
-    width: 300px;
-    height: 35px;
-    display: flex;          /* Active le mode Flexbox */
-    align-items: center;    /* Centre verticalement */
-    justify-content: center;
-	border: solid 3px rgb(155 145 60 / 25%);
-	border-radius: 10px;
-}
-
-.center-div-menu {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: auto;
-    z-index: 3;
-    width: 1050px;
-    height: 80px;
-    text-align: center;
-}
-
-.center-div-menu-flex {
-    display: flex;          /* Active l'affichage en ligne */
-    justify-content: center; /* Centre les items horizontalement */
-    align-items: center;     /* Centre verticalement */
-    gap: 10px;               /* Espace entre les divs (modifiable) */
-}
-
-.center-div-menu .menu-item {
-    min-height: 40px;    /* hauteur de chaque div */
-    /* background: #ccc; /* juste pour visualiser, tu peux retirer */
-    /* border-radius: 5px; */
-	padding: 5px;
-}
-
-.center-div-menu .menu-item:hover {
-    min-height: 40px;    /* hauteur de chaque div */
-    /* background: #ccc; /* juste pour visualiser, tu peux retirer */
-    /* border-radius: 5px; */
-	border-bottom: 4px solid #a29b78;
-	padding: 5px;
-}
-
-.center-div-menu .menu-item:hover a {
-	color: #a29b78 !important;
-}
-
-.menu-item-we {
-    min-width: 20px;    /* largeur de chaque div (modifiable) */
-    min-height: 40px;    /* hauteur de chaque div */
-	padding: 5px;
-}
-
-.center-page-bops {
-    background-image: url("../img/logo-org.png");
-	z-index: 2;
-    animation: spin-horizontal 5s linear infinite;
-}
-
-/* Animation de rotation horizontale infinie */
-@keyframes spin-horizontal {
-    0% 		{ transform: translate(-50%, -50%) rotateY(0deg); }
-    50%		{ transform: translate(-50%, -50%) rotateY(0deg); }
-    100%	{ transform: translate(-50%, -50%) rotateY(360deg); }
-}
-
-/* Contrôles audio en haut à droite */
-.audio-controls {
-    position: fixed;
-    top: 15px;
-    right: 15px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.6);
-    padding: 6px 10px;
-    border-radius: 8px;
-    backdrop-filter: blur(2px);
-}
-
-.audio-controls button {
-    background: none;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-    color: white;
-    line-height: 1;
-}
-
-.audio-controls input[type="range"] {
-    width: 120px;
-    cursor: pointer;
-    accent-color: #fcba03; /* facultatif si supporté */
-}
-
-.vol-label {
-    font-size: 12px;
-    color: #fff;
-    opacity: 0.85;
-}
-
-/* facultatif si supporté */
-.connexion-champ {
-	height: 30px;
-	background-color: rgb(0 0 0 / 50%);
-	border: solid 0px rgb(155 145 60 / 100%);
-	border-radius: 5px;
-	color: rgb(255 255 255 / 100%);
-}
-
-.connexion-bouton {
-	height: 30px;
-	background-color: rgb(0 0 0 / 50%);
-	border-top: solid 0px rgb(155 145 60 / 100%);
-	border-left: solid 3px rgb(155 145 60 / 100%);
-	border-right: solid 3px rgb(155 145 60 / 100%);
-	border-bottom: solid 0px rgb(155 145 60 / 100%);
-	border-radius: 5px;
-	color: rgb(255 255 255 / 100%);
-	padding: 0px 10px 0px 10px;
-}
-
-.connexion-bouton:hover {
-	background-color: rgb(0 0 0 / 20%);
-	cursor: pointer;
+@font-face {
+    font-family: 'Electrolize';
+    src: url('../fonts/Electrolize-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Electrolize, Arial, sans-serif;
+}
+
+html, body {
+    height: 100%;
+}
+
+body {
+    background: #1a1a1a;
+    color: white;
+    min-height: 100vh;
+}
+
+
+
+a {
+	color: #ffffff;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #a29b78 !important;
+	text-decoration: none;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0px;
+	left: 50%;
+	transform: translate(-50%, -50%);
+    width: -50%;
+    height: 50px;
+}
+
+/* Utilitaires texte */
+.txt-s05 { font-size: 5px; }
+.txt-s10 { font-size: 10px; }
+.txt-s12 { font-size: 12px; }
+.txt-s15 { font-size: 15px; }
+.txt-s20 { font-size: 20px; }
+.txt-s22 { font-size: 22px; }
+.txt-s25 { font-size: 25px; }
+.txt-s40 { font-size: 40px; }
+.padding5 { padding: 5px; }
+.padding15 { padding: 15px; }
+.padding25 { padding: 25px; }
+.padding50 { padding: 50px; }
+.padding-left50 { padding-left: 50px !important; }
+.txt-bold { font-weight: bold; }
+.txt-italic { font-style: italic; }
+.txt-justify { text-align: justify; text-justify: inter-word; }
+.txt-center { text-align: center !important; }
+.txt-center input { display: inline-block !important; text-align: center !important; }
+.txt-underline { text-decoration: underline; }
+.float-right { float: right; }
+.float-left { float: left; }
+.txt-or { color: #a29b78; }
+.txt-jaune { color: #fcba03; }
+.v-hidden { visibility: hidden; }
+.small-caps { font-variant-caps: small-caps; }
+
+.ul-style {
+	line-height: 30px;
+	/* padding-left: 50px !important; */
+	/* border-left:  4px solid #a29b78; */
+}
+
+/* Vidéo plein écran en arrière-plan */
+.video-container {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    inset: 0;
+    z-index: -5; /* derrière tout */
+    overflow: hidden;
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100vw;
+    height: 100vh;
+    transform: translate(-50%, -50%);
+    border: 0;
+    pointer-events: none; /* la vidéo n’intercepte pas les clics */
+}
+
+/* Ajustements pour conserver le recadrage 16/9 sans bandes */
+@media (min-aspect-ratio: 16/9) {
+    .video-container iframe { height: 56.25vw; }
+}
+@media (max-aspect-ratio: 16/9) {
+    .video-container iframe { width: 177.78vh; }
+}
+
+/* Voile noir par-dessus la vidéo */
+.black-filter {
+    background: rgba(0, 0, 0, 0.7);
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+}
+
+/* Conteneur principal (si besoin de couches au-dessus) */
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 0; /* au-dessus de la vidéo */
+}
+
+/* Logos centrés */
+.center-page-bops {
+    position: absolute;
+    top: 35%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto;
+    z-index: 2;
+    width: 600px;
+    height: 600px;
+}
+
+.center-page-infos {
+    position: absolute;
+    top: 0%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto;
+    z-index: 2;
+    width: 600px;
+    height: 200px;
+}
+
+.assets-div-menu {
+    position: fixed;
+    top: 25px;
+    left: 25px;
+    transform: translate(0px, 0px);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto;
+	background-color: rgb(0 0 0 / 50%);
+    z-index: 100;
+    width: min(300px, calc(100vw - 50px));
+    max-width: calc(100vw - 50px);
+	display: flex;          /* Active le mode Flexbox */
+	flex-direction: column; /* Aligne les liens les uns sous les autres */
+    align-items: center;    /* Centre verticalement */
+	gap: 2px;
+    justify-content: center;
+	border: solid 3px rgb(155 145 60 / 25%);
+	border-radius: 10px;
+	padding: 5px 12px;
+	text-align: center;
+}
+
+.connexion-div-menu {
+    position: fixed;
+    top: 25px;
+    right: 25px;
+    transform: translate(0px, 0px);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto;
+	background-color: rgb(0 0 0 / 50%);
+    z-index: 100;
+    width: min(300px, calc(100vw - 50px));
+    max-width: calc(100vw - 50px);
+    min-height: 35px;
+    height: auto;
+    display: flex;          /* Active le mode Flexbox */
+    align-items: center;    /* Centre verticalement */
+    justify-content: center;
+	border: solid 3px rgb(155 145 60 / 25%);
+	border-radius: 10px;
+    padding: 5px 12px;
+    text-align: center;
+}
+
+.center-div-menu {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto;
+    z-index: 3;
+    width: min(1050px, calc(100vw - 40px));
+    min-height: 80px;
+    height: auto;
+    text-align: center;
+}
+
+.center-div-menu-flex {
+    display: flex;          /* Active l'affichage en ligne */
+    justify-content: center; /* Centre les items horizontalement */
+    align-items: center;     /* Centre verticalement */
+    gap: 10px;               /* Espace entre les divs (modifiable) */
+    flex-wrap: wrap;
+}
+
+.center-div-menu .menu-item {
+    min-height: 40px;    /* hauteur de chaque div */
+    /* background: #ccc; /* juste pour visualiser, tu peux retirer */
+    /* border-radius: 5px; */
+	padding: 5px;
+}
+
+.center-div-menu .menu-item:hover {
+    min-height: 40px;    /* hauteur de chaque div */
+    /* background: #ccc; /* juste pour visualiser, tu peux retirer */
+    /* border-radius: 5px; */
+	border-bottom: 4px solid #a29b78;
+	padding: 5px;
+}
+
+.center-div-menu .menu-item:hover a {
+	color: #a29b78 !important;
+}
+
+.menu-item-we {
+    min-width: 20px;    /* largeur de chaque div (modifiable) */
+    min-height: 40px;    /* hauteur de chaque div */
+	padding: 5px;
+}
+
+.center-page-bops {
+    background-image: url("../img/logo-org.png");
+	z-index: 2;
+    animation: spin-horizontal 5s linear infinite;
+}
+
+/* Animation de rotation horizontale infinie */
+@keyframes spin-horizontal {
+    0% 		{ transform: translate(-50%, -50%) rotateY(0deg); }
+    50%		{ transform: translate(-50%, -50%) rotateY(0deg); }
+    100%	{ transform: translate(-50%, -50%) rotateY(360deg); }
+}
+
+/* Contrôles audio en haut à droite */
+.audio-controls {
+    position: fixed;
+    top: 15px;
+    right: 15px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 6px 10px;
+    border-radius: 8px;
+    backdrop-filter: blur(2px);
+}
+
+.audio-controls button {
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: white;
+    line-height: 1;
+}
+
+.audio-controls input[type="range"] {
+    width: 120px;
+    cursor: pointer;
+    accent-color: #fcba03; /* facultatif si supporté */
+}
+
+.vol-label {
+    font-size: 12px;
+    color: #fff;
+    opacity: 0.85;
+}
+
+/* facultatif si supporté */
+.connexion-champ {
+	height: 30px;
+	background-color: rgb(0 0 0 / 50%);
+	border: solid 0px rgb(155 145 60 / 100%);
+	border-radius: 5px;
+	color: rgb(255 255 255 / 100%);
+}
+
+.connexion-bouton {
+	height: 30px;
+	background-color: rgb(0 0 0 / 50%);
+	border-top: solid 0px rgb(155 145 60 / 100%);
+	border-left: solid 3px rgb(155 145 60 / 100%);
+	border-right: solid 3px rgb(155 145 60 / 100%);
+	border-bottom: solid 0px rgb(155 145 60 / 100%);
+	border-radius: 5px;
+	color: rgb(255 255 255 / 100%);
+	padding: 0px 10px 0px 10px;
+}
+
+.connexion-bouton:hover {
+	background-color: rgb(0 0 0 / 20%);
+	cursor: pointer;
 }
 /* Auth / admin helpers */
 .connexion-div-menu {
@@ -356,3 +364,115 @@ a:hover {
 .login-status.is-success {
     color: #9fe29f;
 }
+
+.assets-div-menu a,
+.connexion-div-menu a,
+.connexion-div-menu #accountLabel {
+    max-width: 100%;
+    word-break: break-word;
+}
+
+@media (max-width: 1200px) {
+    .center-page-bops {
+        width: min(48vw, 480px);
+        height: min(48vw, 480px);
+        top: 32%;
+    }
+
+    .center-div-menu {
+        width: min(900px, calc(100vw - 48px));
+    }
+}
+
+@media (max-width: 900px) {
+    .assets-div-menu,
+    .connexion-div-menu {
+        width: auto;
+        max-width: none;
+        left: 16px;
+        right: 16px;
+    }
+
+    .assets-div-menu {
+        top: 16px;
+    }
+
+    .connexion-div-menu {
+        top: auto;
+        bottom: 16px;
+        justify-content: center;
+        min-height: 44px;
+    }
+
+    .center-page-bops {
+        width: min(62vw, 340px);
+        height: min(62vw, 340px);
+        top: 28%;
+    }
+
+    .center-div-menu {
+        width: calc(100vw - 32px);
+        top: 56%;
+    }
+
+    .center-div-menu .padding50 {
+        padding: 24px !important;
+    }
+}
+
+@media (max-width: 640px) {
+    .assets-div-menu {
+        gap: 6px;
+        padding: 10px 12px;
+    }
+
+    .connexion-div-menu {
+        gap: 8px;
+        padding: 8px 12px;
+    }
+
+    .connexion-actions {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .center-page-bops {
+        top: 170px;
+        width: min(68vw, 280px);
+        height: min(68vw, 280px);
+    }
+
+    .center-div-menu {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none;
+        margin: 230px auto 100px;
+        width: calc(100vw - 24px);
+    }
+
+    .center-div-menu .padding50 {
+        padding: 18px !important;
+    }
+
+    .txt-s40 {
+        font-size: clamp(28px, 7vw, 40px);
+    }
+
+    .txt-s22 {
+        font-size: clamp(18px, 4.6vw, 22px);
+    }
+}
+
+@media (max-width: 480px) {
+    .assets-div-menu,
+    .connexion-div-menu {
+        left: 12px;
+        right: 12px;
+    }
+
+    .center-div-menu {
+        width: calc(100vw - 16px);
+        margin-top: 210px;
+    }
+}
diff --git a/db/auth.php b/db/auth.php
index 9ae96c2..b8ebf01 100644
--- a/db/auth.php
+++ b/db/auth.php
@@ -2,6 +2,30 @@
 
 require_once __DIR__ . '/config.php';
 
+function auth_config_value(array $environment_keys, array $constant_keys = []): ?string
+{
+    foreach ($environment_keys as $environment_key) {
+        $value = getenv($environment_key);
+        if ($value !== false) {
+            $value = trim((string) $value);
+            if ($value !== '') {
+                return $value;
+            }
+        }
+    }
+
+    foreach ($constant_keys as $constant_key) {
+        if (defined($constant_key)) {
+            $value = trim((string) constant($constant_key));
+            if ($value !== '') {
+                return $value;
+            }
+        }
+    }
+
+    return null;
+}
+
 function auth_start_session(): void
 {
     if (session_status() !== PHP_SESSION_ACTIVE) {
@@ -33,6 +57,13 @@ function auth_bootstrap(): void
 
     if ($cl_auth_admin_total === 0) {
         [$cl_auth_user, $plain_default_password] = auth_default_admin_credentials();
+
+        if ($cl_auth_user === '' || $plain_default_password === '') {
+            throw new RuntimeException(
+                "Aucun administrateur n'existe et aucun couple DEFAULT_ADMIN_USER / DEFAULT_ADMIN_PASSWORD n'est configuré."
+            );
+        }
+
         $cl_auth_pass = password_hash($plain_default_password, PASSWORD_DEFAULT);
         $cl_auth_right = 'admin';
 
@@ -51,7 +82,21 @@ function auth_bootstrap(): void
 
 function auth_default_admin_credentials(): array
 {
-    return ['admin', 'ReactAdmin!2026'];
+    $cl_auth_user = auth_config_value(
+        ['DEFAULT_ADMIN_USER', 'APP_DEFAULT_ADMIN_USER'],
+        ['DEFAULT_ADMIN_USER', 'APP_DEFAULT_ADMIN_USER']
+    ) ?? 'admin';
+
+    $plain_default_password = auth_config_value(
+        ['DEFAULT_ADMIN_PASSWORD', 'APP_DEFAULT_ADMIN_PASSWORD'],
+        ['DEFAULT_ADMIN_PASSWORD', 'APP_DEFAULT_ADMIN_PASSWORD']
+    );
+
+    if ($plain_default_password === null) {
+        return ['', ''];
+    }
+
+    return [$cl_auth_user, $plain_default_password];
 }
 
 function auth_csrf_token(): string