Autosave: 20260415-121623

css/component.css

@@ -26,10 +26,12 @@ perspective effects (not including the modals and the overlay).
 	position: fixed;
 	top: 50%;
 	left: 50%;
-	width: 50%;
+	width: min(92vw, 1100px);
-	max-width: 1400px;
+	max-width: calc(100vw - 32px);
-	min-width: 1200px;
+	min-width: 320px;
+	max-height: calc(100vh - 32px);
 	height: auto;
+	overflow-y: auto;
 	z-index: 2000;
 	visibility: hidden;
 	-webkit-backface-visibility: hidden;
@@ -72,6 +74,13 @@ perspective effects (not including the modals and the overlay).
 	position: relative;
 	border-radius: 3px;
 	margin: 0 auto;
+	max-width: 100%;
+	overflow: hidden;
+}
+
+.md-content img {
+	max-width: 100%;
+	height: auto;
 }
 
 .md-content h3 {
@@ -149,3 +158,79 @@ perspective effects (not including the modals and the overlay).
 	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;
+	}
+}

css/styles.css

@@ -161,7 +161,8 @@ a:hover {
     background-size: auto;
 	background-color: rgb(0 0 0 / 50%);
     z-index: 100;
-    width: 300px;
+    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 */
@@ -169,7 +170,8 @@ a:hover {
     justify-content: center;
 	border: solid 3px rgb(155 145 60 / 25%);
 	border-radius: 10px;
-	padding: 5px 0px 5px 0px;
+	padding: 5px 12px;
+	text-align: center;
 }
 
 .connexion-div-menu {
@@ -182,13 +184,17 @@ a:hover {
     background-size: auto;
 	background-color: rgb(0 0 0 / 50%);
     z-index: 100;
-    width: 300px;
+    width: min(300px, calc(100vw - 50px));
-    height: 35px;
+    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 {
@@ -200,8 +206,9 @@ a:hover {
     background-position: center center;
     background-size: auto;
     z-index: 3;
-    width: 1050px;
+    width: min(1050px, calc(100vw - 40px));
-    height: 80px;
+    min-height: 80px;
+    height: auto;
     text-align: center;
 }
 
@@ -210,6 +217,7 @@ a:hover {
     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 {
@@ -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;
+    }
+}

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