/* =====================================================================
   KENDO TAIKAI — écran de CONNEXION, patron QALITEL « pleine page »
   =====================================================================
   VENDORISÉ (jamais importé) depuis qca_dev/app/donnees/css/login.css le
   13-09-2026, sur demande user : « un écran de type QALITEL, pleine page ».
   Classes reprises telles quelles (.console-wrapper .login-panel
   .header-section .form-title .form-desc .input-group .input-icon
   .clean-input .btn-login .footer-section .visual-panel .brand-overlay
   .client-safe-zone .client-html-content .info-box .login-alert,
   body.mode-pleine-page, @media max-width:1000px), couleurs ramenées au
   nuancier TAIKAI : primaire = kon-iro #223A70, accent = beni #BC002D.
   ZÉRO ressource externe : police système, icônes SVG en ligne.
   Indépendant de app.css (cet écran ne charge ni DevExtreme ni app.js).
   Validé par le user le 13-09-2026 (« pas mal ») : deux volets, logo du
   club géant sous le voile marine, champs .clean-input. Pied = le club
   auteur (pas de signature éditeur : « propulsé par Philippe PIERRE du
   Kendo Club de Montivilliers »).
   ===================================================================== */
:root {
  --kon: #223a70;            /* kon-iro — primaire */
  --kon-fonce: #182a52;
  --aka: #bc002d;            /* beni-iro — accent */
  --primary: var(--kon);
  --text-dark: #1e293b;
  --text-light: #64748b;
  --bg-input: #f8fafc;
  --trait: #f1f5f9;
  --papier: #f6f6f3;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.login-page-body {
  font-family: var(--kt-sans, system-ui, sans-serif);
  color: var(--text-dark); background: var(--papier);
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
:focus-visible { outline: 3px solid var(--aka); outline-offset: 2px; }
/* Libellés présents pour les lecteurs d'écran, invisibles à l'écran (les champs portent un placeholder). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Coque ---------- */
.console-wrapper { display: flex; width: 960px; height: 600px; background: #fff; border-radius: 24px; box-shadow: 0 25px 60px -15px rgba(0,0,0,.25); overflow: hidden; position: relative; z-index: 10; }
.login-panel { width: 380px; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; z-index: 20; }
body.mode-pleine-page { background-color: #fff; background-image: none; padding: 0; }
body.mode-pleine-page .console-wrapper { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
body.mode-pleine-page .login-panel { width: 40%; min-width: 450px; max-width: 600px; padding: 60px 80px; }

/* ---------- Volet gauche : en-tête ---------- */
.header-section { margin-top: 10px; text-align: left; min-height: 60px; display: flex; flex-direction: column; justify-content: center; }
.logo-block { display: flex; align-items: center; gap: 14px; }
.logo-block .kanji {
  font-size: 22px; line-height: 1; letter-spacing: 2px; color: #fff; background: var(--aka);
  border-radius: 8px; padding: 10px 9px 11px; font-family: var(--kt-kanji, "Yu Mincho", serif); flex: 0 0 auto;
}
.logo-block .nom { font-size: 22px; font-weight: 800; letter-spacing: 3px; color: var(--kon); line-height: 1.1; }
/* Édition « lite » (SQLite, monoposte — user 14-09-2026) : suffixe en minuscules, graisse légère, beni. */
.logo-block .nom .lite { font-size: 17px; font-weight: 300; letter-spacing: 1px; color: #BC002D; text-transform: lowercase; }
.logo-block .sous { font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }

/* ---------- Volet gauche : formulaire ---------- */
.form-section { width: 100%; padding: 10px 0; }
.form-title { font-size: 20px; font-weight: 700; color: var(--text-dark); text-align: left; margin-bottom: 5px; }
.form-desc { font-size: 13px; color: var(--text-light); text-align: left; margin-bottom: 25px; }
#login-attente { font-size: 13px; color: var(--text-light); padding: 8px 0; }
.input-group { position: relative; margin-bottom: 15px; width: 100%; }
.input-group.demi { display: flex; gap: 12px; }
.input-group.demi .input-group { margin-bottom: 0; flex: 1; }
.input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; transition: .3s; pointer-events: none; z-index: 2; width: 16px; height: 16px; }
.clean-input {
  width: 100%; padding: 14px 14px 14px 45px; border: 2px solid var(--trait); border-radius: 10px;
  background-color: var(--bg-input); font-size: 14px; font-weight: 500; color: #334155; font-family: inherit; transition: all .2s ease;
}
.clean-input:focus { border-color: var(--aka); background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.05); outline: none; }
.clean-input:focus + .input-icon { color: var(--aka); }
.clean-input::placeholder { color: #94a3b8; font-weight: 500; }
/* Œil « voir le mot de passe » : un vrai bouton (clavier), à droite du champ. */
.btn-oeil {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #94a3b8; z-index: 10;
  background: none; border: 0; padding: 6px; border-radius: 6px; display: flex; align-items: center;
}
.btn-oeil:hover { color: var(--kon); background: var(--trait); }
.btn-oeil svg { width: 18px; height: 18px; }
.btn-login {
  width: 100%; padding: 14px 20px; margin-top: 15px; background-color: var(--kon); color: #fff; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s ease; display: flex; justify-content: space-between; align-items: center; font-family: inherit;
}
.btn-login:hover { background-color: #2f4b8f; transform: translateY(-2px); }
.btn-login:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-login svg { width: 16px; height: 16px; }
.login-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 18px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; animation: login-alert-in .25s ease-out; }
.login-alert[hidden] { display: none; }
.login-alert svg { width: 16px; height: 16px; flex-shrink: 0; }
.login-alert.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.login-alert.warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
/* Bandeaux .err / .msg du modèle qlogigramme (css/login.css, vendorisé 13-09-2026) : .err = la
   même chose que .login-alert.error ; .msg = le bandeau VERT (« un lien vient d'être envoyé »). */
.err, .login-alert.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.msg, .login-alert.msg { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
@keyframes login-alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Identifiant = e-mail, mot de passe oublié, rester connecté (modèle qlogigramme
   css/login.css : .forgot-row, .rem, .links — vendorisés, couleurs TAIKAI) ---------- */
/* Le lien d'oubli vit SOUS le champ mot de passe, à droite (motif standard). */
.forgot-row { display: flex; justify-content: flex-end; margin: -6px 2px 6px; font-size: 12.5px; }
.forgot-row a { color: var(--kon); opacity: .8; text-decoration: none; font-weight: 600; }
.forgot-row a:hover, .forgot-row a:focus-visible { opacity: 1; text-decoration: underline; }
/* « Rester connecté » : case + libellé, cliquables d'un bloc. */
.rem { display: flex; align-items: center; gap: 8px; color: var(--text-light); font-size: 13px; cursor: pointer; user-select: none; margin: 2px 0 2px 2px; }
.rem input { width: 15px; height: 15px; margin: 0; accent-color: var(--kon); cursor: pointer; }
/* ---------- Robustesse INDICATIVE du mot de passe (tâche 109, 23-09-2026) ----------
   Sous le champ « nouveau mot de passe » : une jauge de trois crans et un texte.
   Elle RENSEIGNE (faible / moyen / bon) et n'empêche jamais l'enregistrement —
   d'où des couleurs de repère, jamais le rouge d'erreur de la page (.login-alert). */
.mdp-force { margin: -6px 2px 10px; font-size: 12px; color: var(--text-light); }
.mdp-force .jauge { height: 5px; border-radius: 3px; background: var(--trait); overflow: hidden; margin-bottom: 5px; }
.mdp-force .jauge i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--kon); transition: width .18s ease, background-color .18s ease; }
.mdp-force[data-niveau="1"] .jauge i { background: #c98a12; }
.mdp-force[data-niveau="2"] .jauge i { background: #2f7d5b; }
.mdp-force[data-niveau="3"] .jauge i { background: var(--kon); }

/* Liens secondaires sous le bouton fort (« Se connecter » depuis les panneaux oublié / nouveau mot de passe). */
.links { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13px; }
.links a { color: var(--kon); text-decoration: none; font-weight: 600; }
.links a:hover, .links a:focus-visible { text-decoration: underline; }

/* ---------- Volet gauche : pied — « PROPULSÉ PAR » (famille), puis le club auteur comme la
   pastille de la barre latérale de l'application (logo rond 44 px à gauche, deux lignes à droite),
   le tout centré. Texte exact demandé par le user (13-09-2026). ---------- */
.footer-section { border-top: 1px solid var(--trait); padding-top: 16px; width: 100%; text-align: center; }
.propulse { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #94a3b8; margin-bottom: 8px; }
.signature-club { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.signature-club img { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--trait); object-fit: cover; flex: 0 0 auto; }
.signature-club .t1 { font-size: 13px; font-weight: 700; color: var(--kon); letter-spacing: .3px; line-height: 1.3; }
.signature-club .t2 { font-size: 12px; color: var(--text-light); line-height: 1.3; }

/* ---------- Volet droit ---------- */
/* VISUEL GÉNÉRIQUE DU PRODUIT — décision user 13-09-2026 19:05 : « le logo Kendo Montivilliers
   à droite, ça ne va pas du tout : comment les autres clubs vont-ils s'identifier ? ». Le logo du
   club auteur n'apparaît QUE dans la signature « PROPULSÉ PAR » ; ici, rien qui appartienne à un
   club : dégradé kon (patron qlogigramme transposé), un HINOMARU — grand disque beni débordant à
   droite, symbole du kendo et du Japon — et le filigrane 剣道大会. Aucune image bitmap. */
.visual-panel {
  flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(152deg, #0b1430 0%, #182a52 46%, #223a70 100%);
  display: flex; align-items: center; justify-content: center;
}
.visual-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(1000px 520px at 80% 6%, rgba(188,0,45,.22), transparent 60%),
              radial-gradient(760px 520px at 6% 104%, rgba(90,120,200,.28), transparent 60%);
}
/* Le hinomaru n'est pas un disque plat (mesuré « moche », 13-09 19:20) : un HALO beni très doux
   en haut à droite, et un ANNEAU fin qui en dessine le contour — la lumière, pas la tache. */
.visual-panel .hinomaru {
  position: absolute; top: -18%; right: -14%; width: 62%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(188,0,45,.55) 0%, rgba(188,0,45,.22) 42%, rgba(188,0,45,0) 70%);
  z-index: 0; pointer-events: none;
}
.visual-panel .hinomaru::after {
  content: ""; position: absolute; inset: 21%; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}
/* TASUKI : les deux rubans (aka / shiro) couvrent tout le volet, derrière le texte. */
/* Les deux tasuki = découpes PNG de la photo (décision user 20:55) : rouge en haut à droite sur le
   halo, blanc plus petit et plus discret en haut à gauche ; ombre portée pour les décoller du fond. */
.visual-panel .tasuki { position: absolute; z-index: 0; pointer-events: none; user-select: none; height: auto; }
.visual-panel .tk-aka   { right: 13%; top: -1%; width: 11%; max-width: 120px; opacity: .92; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.visual-panel .tk-shiro { left: 6%;   top: -4%; width: 7%;  max-width: 80px;  opacity: .55; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
/* Le PRODUIT en filigrane : un tableau final (8 → 1) tracé en traits fins, le vainqueur marqué
   d'un point beni — patron qlogigramme « on montre le produit », sans capture bitmap. */
.visual-panel .tableau-fond {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: 84%; max-width: 900px; height: auto;
  z-index: 0; pointer-events: none; opacity: .55;
}
/* Filigrane discret : les quatre kanji à la verticale, collés à droite, blanc à 7 %. */
.visual-panel .filigrane {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; user-select: none;
  font-family: var(--kt-kanji, "Yu Mincho", serif); font-size: 120px; line-height: 1; color: #fff; opacity: .045;
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 4px;
  white-space: nowrap;   /* UNE colonne, lue de haut en bas (tategaki) : sans ceci, l'absolu à top:50 %
                            n'a que la moitié du volet et rejette 会 dans une 2e colonne (vu 13-09 19:36) */
}
.client-safe-zone { position: relative; z-index: 2; width: 100%; max-height: 100%; padding: 60px; color: #fff; overflow-y: auto; scrollbar-width: thin; scrollbar-color: hsla(0,0%,100%,.3) rgba(0,0,0,0); }
.client-html-content .entete { opacity: .8; font-size: 20px; margin-bottom: 30px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
.client-html-content .entete svg { width: 22px; height: 22px; }
.client-html-content h1 { font-size: 32px; font-weight: 800; margin: 0 0 20px; line-height: 1.1; color: #fff; }
.client-html-content p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; opacity: .95; color: #fff; }
.client-html-content ul { padding-left: 20px; margin-bottom: 20px; }
.client-html-content li { margin-bottom: 5px; color: #fff; }
.info-box { background: hsla(0,0%,100%,.15); border-left: 4px solid #fff; padding: 15px; border-radius: 6px; margin: 25px 0; font-size: 14px; color: #fff; }
.info-box[hidden] { display: none; }

/* ---------- Empilé (< 1000 px) : bloc @media repris de login.css ---------- */
@media screen and (max-width: 1000px) {
  body.login-page-body {
    overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100vh; width: 100%; padding: 40px 0 !important;
    position: relative; align-items: flex-start; justify-content: flex-start; display: flex;
    background-image: linear-gradient(160deg, var(--kon-fonce) 0%, var(--kon) 100%) !important; background-attachment: fixed; background-color: var(--kon) !important;
  }
  body.mode-pleine-page .console-wrapper, .login-page-body .console-wrapper {
    display: flex; flex-direction: column; width: calc(100% - 30px) !important; height: auto; max-width: 450px;
    margin: 15px auto 40px !important; background: #fff; border-radius: 24px !important; box-shadow: 0 15px 35px rgba(0,0,0,.3) !important;
    position: relative; padding: 0; overflow: auto; padding-bottom: 40px !important;
  }
  body.mode-pleine-page .login-panel, .login-page-body .login-panel {
    width: 100% !important; max-width: 600px !important; padding: 35px 25px !important; flex: none; display: flex; flex-direction: column;
    justify-content: space-between; background: #fff; z-index: 20; min-width: unset !important;
  }
  .login-page-body .visual-panel { width: 100% !important; display: block !important; background-color: var(--kon); position: relative; min-height: 0; }
  .login-page-body .visual-panel .hinomaru { width: 90%; top: -30%; right: -30%; }
  .login-page-body .visual-panel .tableau-fond { width: 70%; }
  .login-page-body .client-safe-zone { padding: 35px 25px; max-height: none !important; overflow: visible !important; }
  .login-page-body .clean-input { font-size: 16px !important; }
  .visual-panel .filigrane { font-size: 90px; right: 12px; }
  .footer-section { margin-top: 26px; }
}