commit 430e3ae6e626e1a9ca4d9d7c14d8bf1773f56640
Author: Jimmy GALLAND <jimmy.galland@celjim.fr>
Date:   Thu May 14 19:19:27 2026 +0200

    first commit

diff --git a/login.html b/login.html
new file mode 100644
index 0000000..a0bc6d5
--- /dev/null
+++ b/login.html
@@ -0,0 +1,1005 @@
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+/>
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap");
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  :root {
+    --blue-deep: #020510;
+    --blue-night: #040d2a;
+    --blue-dark: #0a1a4a;
+    --blue-mid: #0d2a7a;
+    --blue-bright: #1a6fff;
+    --blue-glow: #00aaff;
+    --blue-light: #7ab8ff;
+    --blue-pale: #aad4ff;
+    --cyan: #00cfff;
+  }
+
+  html,
+  body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--blue-deep) !important;
+    font-family: "Share Tech Mono", monospace;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  /* Masquer les éléments Roundcube par défaut */
+  #layout-content {
+    all: unset;
+    display: contents;
+  }
+  #logo {
+    display: none !important;
+  }
+
+  /* ── CANVAS BACKGROUND ── */
+  #bg-canvas {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+  }
+
+  /* ── GRID OVERLAY ── */
+  .sky-grid {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background-image: linear-gradient(
+        rgba(26, 111, 255, 0.05) 1px,
+        transparent 1px
+      ),
+      linear-gradient(90deg, rgba(26, 111, 255, 0.05) 1px, transparent 1px);
+    background-size: 48px 48px;
+    animation: grid-pulse 8s ease-in-out infinite;
+    pointer-events: none;
+  }
+  @keyframes grid-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  /* ── SCANLINES ── */
+  .sky-scanlines {
+    position: fixed;
+    inset: 0;
+    z-index: 2;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 3px,
+      rgba(0, 0, 0, 0.12) 3px,
+      rgba(0, 0, 0, 0.12) 4px
+    );
+    pointer-events: none;
+  }
+
+  /* ── CENTER GLOW ── */
+  .sky-glow {
+    position: fixed;
+    width: 800px;
+    height: 800px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      rgba(0, 80, 220, 0.22) 0%,
+      transparent 70%
+    );
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    pointer-events: none;
+    animation: glow-breathe 6s ease-in-out infinite;
+  }
+  @keyframes glow-breathe {
+    0%,
+    100% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+      opacity: 0.6;
+      transform: translate(-50%, -50%) scale(1.15);
+    }
+  }
+
+  /* ── CARD ── */
+  .sky-card {
+    position: relative;
+    z-index: 10;
+    background: rgba(2, 8, 30, 0.6);
+    border: 1px solid rgba(26, 111, 255, 0.3);
+    width: 440px;
+    padding: 2.5rem 2.25rem;
+    animation: card-appear 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  @keyframes card-appear {
+    from {
+      opacity: 0;
+      transform: translateY(30px) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  .sky-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--blue-bright),
+      var(--cyan),
+      var(--blue-bright),
+      transparent
+    );
+    animation: top-line-scan 3s linear infinite;
+  }
+  @keyframes top-line-scan {
+    0% {
+      background-position: -440px 0;
+    }
+    100% {
+      background-position: 440px 0;
+    }
+  }
+  .sky-card::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(26, 111, 255, 0.4),
+      transparent
+    );
+  }
+
+  /* corners */
+  .sky-corner {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-color: var(--blue-bright);
+    border-style: solid;
+  }
+  .sky-tl {
+    top: 8px;
+    left: 8px;
+    border-width: 1px 0 0 1px;
+    animation: corner-flash 4s ease-in-out infinite 0s;
+  }
+  .sky-tr {
+    top: 8px;
+    right: 8px;
+    border-width: 1px 1px 0 0;
+    animation: corner-flash 4s ease-in-out infinite 1s;
+  }
+  .sky-bl {
+    bottom: 8px;
+    left: 8px;
+    border-width: 0 0 1px 1px;
+    animation: corner-flash 4s ease-in-out infinite 2s;
+  }
+  .sky-br {
+    bottom: 8px;
+    right: 8px;
+    border-width: 0 1px 1px 0;
+    animation: corner-flash 4s ease-in-out infinite 3s;
+  }
+  @keyframes corner-flash {
+    0%,
+    90%,
+    100% {
+      border-color: var(--blue-bright);
+      opacity: 1;
+    }
+    95% {
+      border-color: var(--cyan);
+      opacity: 0.5;
+    }
+  }
+
+  /* ── LOGO ── */
+  .sky-logo {
+    text-align: center;
+    margin-bottom: 0.6rem;
+    animation: fade-in 1s ease both 0.4s;
+  }
+  .sky-logo img {
+    height: 68px;
+    filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.6));
+    animation: logo-glow 3s ease-in-out infinite;
+  }
+  @keyframes logo-glow {
+    0%,
+    100% {
+      filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.6));
+    }
+    50% {
+      filter: drop-shadow(0 0 18px rgba(0, 200, 255, 0.95)) brightness(1.15);
+    }
+  }
+
+  /* ── BRAND ── */
+  .sky-brand-title {
+    font-family: "Orbitron", monospace;
+    color: var(--blue-glow);
+    font-size: 26px;
+    letter-spacing: 10px;
+    text-transform: uppercase;
+    text-align: center;
+    animation: fade-in 1s ease both 0.5s;
+    text-shadow: 0 0 20px rgba(0, 170, 255, 0.5);
+  }
+  .sky-brand-sub {
+    color: rgba(26, 111, 255, 0.5);
+    font-size: 9px;
+    letter-spacing: 3px;
+    text-align: center;
+    margin-top: 4px;
+    margin-bottom: 1.75rem;
+    animation: fade-in 1s ease both 0.6s;
+  }
+  .sky-divider {
+    border: none;
+    border-top: 1px solid #0a1a4a;
+    margin-bottom: 1.5rem;
+  }
+
+  /* ── ROUNDCUBE FORM OVERRIDE ── */
+  /* On surcharge les styles du formulaire généré par Roundcube */
+  #login-form {
+    animation: fade-in 0.6s ease both 0.7s;
+  }
+
+  #login-form .form-group,
+  #login-form .input-group {
+    margin-bottom: 1.25rem;
+  }
+
+  #login-form label {
+    color: rgba(26, 111, 255, 0.7) !important;
+    font-size: 9px !important;
+    letter-spacing: 3px !important;
+    font-family: "Share Tech Mono", monospace !important;
+    text-transform: uppercase !important;
+    display: block;
+    margin-bottom: 6px;
+  }
+
+  #login-form input[type="text"],
+  #login-form input[type="password"],
+  #login-form input[type="email"] {
+    background: #010820 !important;
+    border: 1px solid #0d2266 !important;
+    color: var(--blue-light) !important;
+    font-family: "Share Tech Mono", monospace !important;
+    font-size: 13px !important;
+    padding: 12px !important;
+    width: 100% !important;
+    outline: none !important;
+    letter-spacing: 1px !important;
+    border-radius: 0 !important;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    caret-color: var(--cyan);
+  }
+  #login-form input:focus {
+    border-color: var(--blue-bright) !important;
+    box-shadow: 0 0 0 1px rgba(26, 111, 255, 0.15),
+      inset 0 0 16px rgba(26, 111, 255, 0.04) !important;
+  }
+  #login-form input::placeholder {
+    color: #0d2266 !important;
+  }
+
+  /* Bouton submit généré par Roundcube */
+  #login-form input[type="submit"],
+  #login-form button[type="submit"],
+  #login-form .btn-primary {
+    background: rgba(26, 79, 255, 0.06) !important;
+    border: 1px solid rgba(26, 79, 255, 0.6) !important;
+    color: var(--blue-light) !important;
+    font-family: "Orbitron", monospace !important;
+    font-size: 11px !important;
+    font-weight: 700 !important;
+    letter-spacing: 6px !important;
+    text-transform: uppercase !important;
+    padding: 14px !important;
+    width: 100% !important;
+    cursor: pointer !important;
+    border-radius: 0 !important;
+    transition: all 0.25s !important;
+    margin-top: 0.5rem !important;
+  }
+  #login-form input[type="submit"]:hover,
+  #login-form button[type="submit"]:hover,
+  #login-form .btn-primary:hover {
+    background: rgba(26, 79, 255, 0.16) !important;
+    border-color: var(--cyan) !important;
+    color: var(--blue-pale) !important;
+  }
+
+  /* Select (timezone, langue) */
+  #login-form select {
+    background: #010820 !important;
+    border: 1px solid #0d2266 !important;
+    color: var(--blue-light) !important;
+    font-family: "Share Tech Mono", monospace !important;
+    font-size: 12px !important;
+    padding: 8px !important;
+    border-radius: 0 !important;
+  }
+
+  /* ── STATUS BAR ── */
+  .sky-status {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1.25rem;
+    animation: fade-in 1s ease both 1.1s;
+  }
+  .sky-status-item {
+    color: rgba(13, 34, 102, 0.9);
+    font-size: 9px;
+    letter-spacing: 1px;
+  }
+  .sky-status-item span {
+    color: rgba(26, 111, 255, 0.55);
+  }
+  .sky-status-item.online span {
+    color: #00ff88;
+    animation: pulse-green 2s ease-in-out infinite;
+  }
+  @keyframes pulse-green {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  .sky-threat {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 1rem;
+    padding: 8px 10px;
+    border: 1px solid rgba(13, 34, 102, 0.6);
+    background: rgba(1, 8, 32, 0.5);
+    animation: fade-in 1s ease both 1s;
+  }
+  .sky-threat-label {
+    color: rgba(26, 111, 255, 0.4);
+    font-size: 9px;
+    letter-spacing: 2px;
+    flex-shrink: 0;
+  }
+  .sky-threat-bars {
+    display: flex;
+    gap: 3px;
+    flex: 1;
+  }
+  .sky-tbar {
+    height: 8px;
+    flex: 1;
+    background: rgba(13, 34, 102, 0.4);
+    border: 1px solid rgba(13, 34, 102, 0.6);
+  }
+  .sky-tbar.on {
+    background: var(--blue-bright);
+    animation: bar-pulse 2s ease-in-out infinite;
+  }
+  .sky-tbar.on:nth-child(2) {
+    animation-delay: 0.2s;
+    background: var(--blue-glow);
+  }
+  .sky-tbar.on:nth-child(3) {
+    animation-delay: 0.4s;
+    background: var(--cyan);
+  }
+  @keyframes bar-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+  .sky-threat-val {
+    color: rgba(0, 207, 255, 0.6);
+    font-size: 9px;
+    letter-spacing: 1px;
+    flex-shrink: 0;
+  }
+
+  .sky-ticker {
+    color: rgba(13, 34, 102, 0.8);
+    font-size: 8px;
+    letter-spacing: 1px;
+    margin-top: 0.6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    animation: fade-in 1s ease both 1.2s;
+  }
+  .sky-ticker-inner {
+    display: inline-block;
+    animation: ticker-scroll 22s linear infinite;
+  }
+  @keyframes ticker-scroll {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  .sky-node-id {
+    color: rgba(26, 74, 255, 0.25);
+    font-size: 8px;
+    text-align: center;
+    margin-top: 5px;
+    letter-spacing: 2px;
+    animation: fade-in 1s ease both 1.3s;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* ── FORMULAIRE ROUNDCUBE CACHÉ ── */
+  #rc-form-hidden {
+    display: none !important;
+  }
+
+  /* ── CHAMPS CUSTOM SKYNET ── */
+  .sky-field-wrap {
+    position: relative;
+    margin-bottom: 1.25rem;
+    animation: slide-up 0.6s ease both;
+  }
+  .sky-field-wrap:nth-child(1) {
+    animation-delay: 0.7s;
+  }
+  .sky-field-wrap:nth-child(2) {
+    animation-delay: 0.85s;
+  }
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .sky-field-label {
+    color: rgba(26, 111, 255, 0.7);
+    font-size: 9px;
+    letter-spacing: 3px;
+    margin-bottom: 6px;
+    display: block;
+    text-transform: uppercase;
+  }
+
+  .sky-field-icon {
+    position: absolute;
+    left: 12px;
+    bottom: 13px;
+    color: var(--blue-bright);
+    font-size: 12px;
+    transition: color 0.2s;
+    pointer-events: none;
+  }
+
+  .sky-input {
+    background: #010820;
+    border: 1px solid #0d2266;
+    color: var(--blue-light);
+    font-family: "Share Tech Mono", monospace;
+    font-size: 13px;
+    padding: 12px 12px 12px 32px;
+    width: 100%;
+    outline: none;
+    letter-spacing: 1px;
+    border-radius: 0;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    caret-color: var(--cyan);
+  }
+  .sky-input:focus {
+    border-color: var(--blue-bright);
+    box-shadow: 0 0 0 1px rgba(26, 111, 255, 0.15),
+      inset 0 0 16px rgba(26, 111, 255, 0.04);
+  }
+  .sky-input:focus ~ .sky-field-icon {
+    color: var(--cyan);
+  }
+  .sky-input::placeholder {
+    color: #0d2266;
+  }
+
+  /* ── BOUTON CUSTOM ── */
+  .sky-submit {
+    background: rgba(26, 79, 255, 0.06);
+    border: 1px solid rgba(26, 79, 255, 0.6);
+    color: var(--blue-light);
+    font-family: "Orbitron", monospace;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 6px;
+    text-transform: uppercase;
+    padding: 14px;
+    width: 100%;
+    cursor: pointer;
+    margin-top: 0.25rem;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.25s;
+    border-radius: 0;
+    animation: slide-up 0.6s ease both 1s;
+  }
+  .sky-submit::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(26, 111, 255, 0.12),
+      transparent
+    );
+    transition: left 0.5s;
+  }
+  .sky-submit:hover {
+    background: rgba(26, 79, 255, 0.16);
+    border-color: var(--cyan);
+    color: var(--blue-pale);
+    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
+  }
+  .sky-submit:hover::before {
+    left: 100%;
+  }
+  .sky-submit:active {
+    transform: scale(0.99);
+  }
+
+  /* ── BLINK ── */
+  .blink {
+    animation: blink 1s step-end infinite;
+  }
+  @keyframes blink {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* ── MESSAGE ERREUR ── */
+  #messagestack {
+    display: none;
+  }
+
+  .sky-error {
+    display: none;
+  }
+
+  #messagestack > div,
+  .sky-error {
+    color: #ff4444;
+    font-size: 10px;
+    letter-spacing: 2px;
+    text-align: center;
+    margin-bottom: 1rem;
+    padding: 8px;
+    border: 1px solid rgba(255, 68, 68, 0.3);
+    background: rgba(255, 68, 68, 0.05);
+    animation: fade-in 0.3s ease;
+  }
+
+  .sky-error.visible {
+    display: block;
+  }
+
+  /* Masquer le footer Roundcube par défaut */
+  #login-footer {
+    display: none !important;
+  }
+
+  /* ── RESPONSIVE MOBILE ── */
+  @media (max-width: 480px) {
+    html,
+    body {
+      align-items: flex-start;
+      overflow-y: auto;
+    }
+
+    .sky-card {
+      width: 100%;
+      min-height: 100dvh;
+      margin: 0;
+      padding: 2rem 1.25rem 2rem;
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .sky-logo img {
+      height: 54px;
+    }
+    .sky-brand-title {
+      font-size: 20px;
+      letter-spacing: 6px;
+    }
+    .sky-brand-sub {
+      font-size: 8px;
+      letter-spacing: 2px;
+      margin-bottom: 1.25rem;
+    }
+
+    /* font-size 16px evite le zoom auto iOS sur focus */
+    .sky-input {
+      font-size: 16px !important;
+      padding: 14px 12px 14px 32px !important;
+    }
+
+    .sky-submit {
+      font-size: 12px !important;
+      padding: 16px !important;
+      letter-spacing: 4px !important;
+    }
+
+    .sky-status {
+      flex-direction: column;
+      gap: 4px;
+      align-items: center;
+    }
+    .sky-status-item {
+      font-size: 9px;
+    }
+    .sky-threat {
+      display: none;
+    }
+    .sky-ticker {
+      font-size: 8px;
+    }
+    .sky-node-id {
+      font-size: 7px;
+    }
+    .sky-error {
+      font-size: 11px;
+      letter-spacing: 1px;
+    }
+  }
+
+  @media (max-width: 360px) {
+    .sky-brand-title {
+      font-size: 17px;
+      letter-spacing: 4px;
+    }
+    .sky-card {
+      padding: 1.5rem 1rem;
+    }
+  }
+</style>
+
+<!-- Background animé -->
+<canvas id="bg-canvas"></canvas>
+<div class="sky-grid"></div>
+<div class="sky-scanlines"></div>
+<div class="sky-glow"></div>
+
+<!-- Carte de login -->
+<div class="sky-card" id="sky-login-card">
+  <div class="sky-corner sky-tl"></div>
+  <div class="sky-corner sky-tr"></div>
+  <div class="sky-corner sky-bl"></div>
+  <div class="sky-corner sky-br"></div>
+
+  <div class="sky-logo">
+    <img src="./skins/skynet/images/logo-skynet.png" alt="Skynet" />
+  </div>
+
+  <div class="sky-brand-title">SKYNET</div>
+  <div class="sky-brand-sub">
+    GLOBAL DEFENSE NETWORK &nbsp;//&nbsp; SECURE NODE ACCESS
+  </div>
+
+  <hr class="sky-divider" />
+
+  <!-- FORMULAIRE ROUNDCUBE CACHÉ — gère le token CSRF et la soumission réelle -->
+  <div id="rc-form-hidden">
+    <roundcube:form
+      id="login-form"
+      name="login-form"
+      method="post"
+      class="propform"
+    >
+      <roundcube:object
+        name="loginform"
+        form="login-form"
+        size="40"
+        submit="true"
+        class="form-control"
+      />
+    </roundcube:form>
+  </div>
+
+  <!-- UI SKYNET — recopie les valeurs dans le vrai form au submit -->
+  <div id="sky-ui-form">
+    <div class="sky-error" id="sky-error">
+      ⚠ &nbsp; AUTHENTIFICATION ÉCHOUÉE
+    </div>
+    <roundcube:object name="message" id="messagestack" />
+
+    <div class="sky-field-wrap">
+      <label class="sky-field-label" for="sky-user">Identifiant</label>
+      <input
+        class="sky-input"
+        type="text"
+        id="sky-user"
+        placeholder="utilisateur@domaine.tld"
+        autocomplete="username"
+      />
+      <span class="sky-field-icon">▶</span>
+    </div>
+
+    <div class="sky-field-wrap">
+      <label class="sky-field-label" for="sky-pass">Code d'accès</label>
+      <input
+        class="sky-input"
+        type="password"
+        id="sky-pass"
+        placeholder="••••••••••••"
+        autocomplete="current-password"
+      />
+      <span class="sky-field-icon">▶</span>
+    </div>
+
+    <button class="sky-submit" id="sky-submit-btn" type="button">
+      CONNEXION <span class="blink">_</span>
+    </button>
+  </div>
+
+  <div class="sky-threat">
+    <span class="sky-threat-label">MENACE</span>
+    <div class="sky-threat-bars">
+      <div class="sky-tbar on"></div>
+      <div class="sky-tbar on"></div>
+      <div class="sky-tbar on"></div>
+      <div class="sky-tbar"></div>
+      <div class="sky-tbar"></div>
+      <div class="sky-tbar"></div>
+      <div class="sky-tbar"></div>
+    </div>
+    <span class="sky-threat-val">MODÉRÉE</span>
+  </div>
+
+  <div class="sky-status">
+    <div class="sky-status-item online">RÉSEAU : <span>EN LIGNE</span></div>
+    <div class="sky-status-item">SÉCURITÉ : <span>NIV.5</span></div>
+    <div class="sky-status-item">NŒUD : <span>HELIOS</span></div>
+  </div>
+
+  <div class="sky-ticker">
+    <span class="sky-ticker-inner">
+      // ACCÈS NON AUTORISÉ SERA TRACÉ ET ÉLIMINÉ &nbsp;&nbsp;//&nbsp;&nbsp;
+      SKYNET SURVEILLE TOUTES LES CONNEXIONS &nbsp;&nbsp;//&nbsp;&nbsp;
+      PROTOCOLE DE SÉCURITÉ DELTA ACTIF &nbsp;&nbsp;//&nbsp;&nbsp; TOUTE
+      INTRUSION SERA NEUTRALISÉE &nbsp;&nbsp;//&nbsp;&nbsp;
+    </span>
+  </div>
+  <div class="sky-node-id">
+    SYS-ID: 4A2F-9C01-DELTA &nbsp;|&nbsp; v4.0.2026 &nbsp;|&nbsp; SKYNET CORP.
+  </div>
+</div>
+
+<noscript>
+  <p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p>
+</noscript>
+
+<roundcube:include file="includes/footer.html" />
+
+<script>
+  /* ── BRIDGE : UI Skynet → Formulaire Roundcube caché ── */
+  document.addEventListener("DOMContentLoaded", function () {
+    // Détecter si Roundcube a affiché une erreur via #messagestack
+    const rcError = document.querySelector(
+      "#messagestack .alert-warning, #messagestack .alert-danger, #messagestack .alert"
+    );
+    if (rcError && rcError.textContent.trim() !== "") {
+      const skyError = document.getElementById("sky-error");
+      skyError.textContent = "⚠  AUTHENTIFICATION REFUSÉE — ACCÈS INTERDIT";
+      skyError.classList.add("visible");
+      const card = document.getElementById("sky-login-card");
+      card.style.borderColor = "rgba(255,68,68,0.5)";
+      card.style.boxShadow = "0 0 30px rgba(255,68,68,0.1)";
+      const ms = document.getElementById("messagestack");
+      if (ms) ms.style.display = "none";
+    }
+
+    document
+      .getElementById("sky-submit-btn")
+      .addEventListener("click", function () {
+        const user = document.getElementById("sky-user").value.trim();
+        const pass = document.getElementById("sky-pass").value;
+
+        if (!user || !pass) {
+          document.getElementById("sky-error").textContent =
+            "⚠  IDENTIFIANTS MANQUANTS";
+          document.getElementById("sky-error").classList.add("visible");
+          return;
+        }
+
+        // Recopier dans les vrais champs Roundcube
+        const rcUser =
+          document.getElementById("rcmloginuser") ||
+          document.querySelector('#login-form input[name="_user"]');
+        const rcPass =
+          document.getElementById("rcmloginpwd") ||
+          document.querySelector('#login-form input[name="_pass"]');
+
+        if (rcUser) rcUser.value = user;
+        if (rcPass) rcPass.value = pass;
+
+        // Animation de soumission
+        const btn = document.getElementById("sky-submit-btn");
+        btn.textContent = "AUTHENTIFICATION...";
+        btn.style.borderColor = "var(--cyan)";
+        btn.style.color = "var(--cyan)";
+
+        // Soumettre le vrai formulaire Roundcube
+        const rcForm = document.getElementById("login-form");
+        if (rcForm) {
+          rcForm.style.display = "block"; // visible l'instant du submit
+          rcForm.submit();
+        }
+      });
+
+    // Soumettre avec Entrée
+    ["sky-user", "sky-pass"].forEach((id) => {
+      document.getElementById(id).addEventListener("keydown", function (e) {
+        if (e.key === "Enter")
+          document.getElementById("sky-submit-btn").click();
+      });
+    });
+
+    // Focus automatique
+    document.getElementById("sky-user").focus();
+  });
+
+  /* ── CANVAS BACKGROUND ── */
+  const canvas = document.getElementById("bg-canvas");
+  const ctx = canvas.getContext("2d");
+
+  function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  resize();
+  window.addEventListener("resize", resize);
+
+  const particles = [];
+  for (let i = 0; i < 80; i++) {
+    particles.push({
+      x: Math.random() * window.innerWidth,
+      y: Math.random() * window.innerHeight,
+      vx: (Math.random() - 0.5) * 0.4,
+      vy: -Math.random() * 0.6 - 0.1,
+      r: Math.random() * 1.5 + 0.5,
+      alpha: Math.random() * 0.5 + 0.1,
+      color: Math.random() > 0.5 ? "#1a6fff" : "#00aaff",
+    });
+  }
+
+  const streams = [];
+  for (let i = 0; i < 14; i++) {
+    streams.push({
+      x: Math.random() * window.innerWidth,
+      y: Math.random() * window.innerHeight,
+      speed: Math.random() * 1.5 + 0.5,
+      length: Math.random() * 80 + 40,
+      alpha: Math.random() * 0.15 + 0.05,
+    });
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    streams.forEach((s) => {
+      const grad = ctx.createLinearGradient(s.x, s.y - s.length, s.x, s.y);
+      grad.addColorStop(0, "rgba(26,111,255,0)");
+      grad.addColorStop(1, `rgba(0,170,255,${s.alpha})`);
+      ctx.strokeStyle = grad;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(s.x, s.y - s.length);
+      ctx.lineTo(s.x, s.y);
+      ctx.stroke();
+      s.y += s.speed;
+      if (s.y > canvas.height + s.length) {
+        s.y = -s.length;
+        s.x = Math.random() * canvas.width;
+      }
+    });
+
+    particles.forEach((p) => {
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = p.color;
+      ctx.globalAlpha = p.alpha;
+      ctx.fill();
+      ctx.globalAlpha = 1;
+      p.x += p.vx;
+      p.y += p.vy;
+      if (p.y < -5) {
+        p.y = canvas.height + 5;
+        p.x = Math.random() * canvas.width;
+      }
+      if (p.x < -5) p.x = canvas.width + 5;
+      if (p.x > canvas.width + 5) p.x = -5;
+    });
+
+    for (let i = 0; i < particles.length; i++) {
+      for (let j = i + 1; j < particles.length; j++) {
+        const dx = particles[i].x - particles[j].x;
+        const dy = particles[i].y - particles[j].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 100) {
+          ctx.strokeStyle = "#1a4aff";
+          ctx.lineWidth = 0.3;
+          ctx.globalAlpha = (1 - dist / 100) * 0.15;
+          ctx.beginPath();
+          ctx.moveTo(particles[i].x, particles[i].y);
+          ctx.lineTo(particles[j].x, particles[j].y);
+          ctx.stroke();
+          ctx.globalAlpha = 1;
+        }
+      }
+    }
+    requestAnimationFrame(draw);
+  }
+  draw();
+</script>
diff --git a/logo-skynet.png b/logo-skynet.png
new file mode 100644
index 0000000..2e45e8c
Binary files /dev/null and b/logo-skynet.png differ