/* =====================================================================
   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; text-wrap: balance; }   /* tâche 355 : « … ET STAGES » sur deux lignes équilibrées, jamais un mot seul */
/* Page d'un CLUB (formulaire d'adhésion, demande user 10-10-2026) : son logo et son nom en tête, KENDO TAIKAI en signature au pied. */
.logo-block.logo-club .club-logo { max-height: 72px; max-width: 150px; object-fit: contain; flex: none; }
.logo-block.logo-club .nom-club { letter-spacing: .5px; font-size: 24px; text-wrap: balance; }

/* ---------- 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); }
/* Champ refusé par le serveur (aria-invalid) : MIS EN ÉVIDENCE même sans le focus (tâche 671, 10-10-2026). */
.clean-input[aria-invalid="true"] { border-color: var(--aka); background-color: #fff5f6; }
.clean-input[aria-invalid="true"] + .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; }
/* Tâche 247 : l'œil dit ce que fait le clic — œil ouvert (« Afficher »), puis œil barré
   (« Masquer ») ; le texte saisi ne passe jamais sous le bouton. */
.btn-oeil .oeil-voir, .btn-oeil .oeil-cacher { display: flex; }
.btn-oeil .oeil-cacher, .btn-oeil[aria-pressed="true"] .oeil-voir { display: none; }
.btn-oeil[aria-pressed="true"] .oeil-cacher { display: flex; }
.btn-oeil[aria-pressed="true"] { color: var(--kon); }
.input-group.avec-oeil .clean-input { padding-right: 46px; }
.input-group.demi .input-group { min-width: 0; }
/* Liste déroulante au style des champs (tâche 247) : même fond, même bordure, même
   icône à gauche ; chevron dessiné (data:) à droite ; « Votre club… » en gris comme
   un placeholder tant que rien n'est choisi (required + valeur vide = :invalid). */
select.clean-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
select.clean-input:required:invalid { color: #94a3b8; }
select.clean-input option { color: #334155; }
.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: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #64748b;   /* 292 : 2,6 → 4,8:1 */
  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%; flex: 0 0 auto; display: block; }   /* 29-09-2026 : logo rouge rond à fond transparent, sans fond ni anneau ajoutés */
.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; }

/* ---------- FAMILLE DES PAGES PUBLIQUES (tâche 247, 28-09-2026) ----------
   Coque commune : app/lib/coque_publique.php. Textes des pages de message,
   bouton secondaire, fenêtre (dialog natif), création de compte. */
.kt-texte { font-size: 14px; line-height: 1.55; color: var(--text-dark); margin: 0 0 14px; }
.kt-note { font-size: 12.5px; line-height: 1.5; color: var(--text-light); margin: 10px 0 0; }
.kt-texte strong { color: var(--kon); }
.btn-sec {
  padding: 12px 18px; background: #fff; color: var(--kon); border: 2px solid var(--trait); border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-sec:hover { border-color: var(--kon); }
.btn-login.court { width: auto; margin-top: 0; gap: 14px; }
/* Fenêtre (conditions d'utilisation…) : <dialog> natif, modal, fermeture Échap. */
.kt-fenetre {
  border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: min(82vh, 680px);
  box-shadow: 0 25px 60px -15px rgba(0,0,0,.45); color: var(--text-dark); font-family: inherit; background: #fff;
}
.kt-fenetre[open] { display: flex; flex-direction: column; }
.kt-fenetre::backdrop { background: rgba(11,20,48,.55); }
.kt-fenetre-tete { padding: 18px 22px 12px; border-bottom: 1px solid var(--trait); display: flex; align-items: center; gap: 10px; color: var(--kon); }
.kt-fenetre-tete svg { width: 20px; height: 20px; flex: 0 0 auto; }
.kt-fenetre-tete h2 { font-size: 17px; margin: 0; }
.kt-fenetre-corps { padding: 14px 22px; overflow: auto; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; flex: 1 1 auto; }
.kt-fenetre-pied { padding: 12px 22px 16px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--trait); }
/* Création de compte d'organisateur (tâche 115, refaite 247). */
.kt-io-piege { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.kt-io-aide { margin: -6px 2px 10px; font-size: 12px; color: var(--text-light); }
.kt-io-cgu-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 2px 0 4px 2px; }
.kt-io-cgu-ligne .rem { align-items: flex-start; line-height: 1.35; }
.kt-io-cgu-ligne .rem input { margin-top: 1px; flex: 0 0 auto; }
.kt-io-cgu-ligne a { font-size: 12.5px; font-weight: 600; color: var(--kon); text-decoration: none; white-space: nowrap; }
.kt-io-cgu-ligne a:hover, .kt-io-cgu-ligne a:focus-visible { text-decoration: underline; }
.kt-io-oblig { color: var(--aka); }
/* Tâche 605-20 : la phrase « En créant votre compte, vous acceptez… » SOUS le bouton (plus de case à cocher). */
.kt-io-cgu-ligne.kt-io-cgu-phrase { display: block; margin: 8px 2px 4px; font-size: 12.5px; line-height: 1.4; color: var(--text-light); text-align: center; }
.kt-io-cgu-ligne.kt-io-cgu-phrase a { margin-left: 4px; }
/* Formulaire court sans défilement (création de compte) : à 1366 × 768, on resserre
   les marges verticales du volet gauche — le champ garde la taille de la connexion. */
@media screen and (min-width: 1001px) and (max-height: 900px) {
  body.kt-coque-dense.mode-pleine-page .login-panel { padding-top: 30px; padding-bottom: 26px; }
  body.kt-coque-dense .form-desc { margin-bottom: 14px; }
  body.kt-coque-dense .input-group { margin-bottom: 12px; }
  body.kt-coque-dense .btn-login { margin-top: 10px; }
  body.kt-coque-dense .links { margin-top: 10px; }
  body.kt-coque-dense .footer-section { padding-top: 12px; }
}
@media screen and (min-width: 1001px) and (max-width: 1500px) {
  body.kt-coque-dense.mode-pleine-page .login-panel { padding-left: 56px; padding-right: 56px; }
}
/* Long formulaire (formulaire d'inscription public) : la PAGE défile, le volet droit
   reste en place (collant) ; volet gauche plus large pour les champs étiquetés. */
@media screen and (min-width: 1001px) {
  body.kt-coque-long { display: block; height: auto; }
  body.kt-coque-long.mode-pleine-page .console-wrapper { width: 100%; height: auto; min-height: 100vh; overflow: visible; }
  body.kt-coque-long.mode-pleine-page .login-panel { width: 58%; max-width: 860px; min-width: 0; padding: 40px 56px; justify-content: space-between; gap: 18px; }
  body.kt-coque-long .visual-panel { position: sticky; top: 0; height: 100vh; align-self: flex-start; }
  /* 02-10-2026 (user : « le texte à droite est un peu haut ») : le contenu du volet descend sous les
     bandes (tasuki) au lieu de les chevaucher. */
  body.kt-coque-long .visual-panel .client-safe-zone { padding-top: calc(60px + 14vh); }
}
/* Formulaire d'adhésion (10-10-2026, capture du user) : la page défile (kt-coque-long) et, sur grand écran, les champs
   vont deux par deux pour limiter le défilement ; les disciplines s'alignent sur une ligne. */
@media screen and (min-width: 1001px) {
  body.kt-adh .ad-grille { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  body.kt-adh .ad-grille > p { grid-column: 1 / -1; }
  body.kt-adh #ad-disciplines label { display: inline-flex !important; margin: 4px 22px 4px 0 !important; }
  body.kt-adh.mode-pleine-page .login-panel { padding-top: 22px; padding-bottom: 18px; gap: 10px; }
}

/* ---------- 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; }
  body.kt-coque-long .login-panel { gap: 16px; }
}
/* TÉLÉPHONE (tâche 247, demande user) : le volet droit, décoratif, est masqué ; la page
   défile normalement ; les champs côte à côte s'empilent. */
@media screen and (max-width: 700px) {
  .login-page-body .visual-panel { display: none !important; }
  body.login-page-body { padding: 16px 0 !important; }
  body.mode-pleine-page .console-wrapper, .login-page-body .console-wrapper { margin: 0 auto !important; padding-bottom: 0 !important; width: calc(100% - 24px) !important; }
}
@media screen and (max-width: 520px) {
  .input-group.demi { flex-direction: column; gap: 15px; }
  .kt-io-cgu-ligne { flex-direction: column; gap: 6px; }
  .kt-fenetre-pied { flex-direction: column-reverse; }
  .kt-fenetre-pied .btn-login.court, .kt-fenetre-pied .btn-sec { width: 100%; }
}
/* Tâche 463 (passe téléphone, 390 px) : cibles au doigt >= 40 px — œil du mot de passe 30 px,
   « Mot de passe oublié ? » 18 px, case « Rester connecté » 15 px, liens du bas 36 px ; textes de 11 px à 12. */
@media screen and (max-width: 600px) {
  .btn-oeil { width: 40px; height: 40px; }
  .forgot-row a { display: inline-flex; align-items: center; min-height: 40px; }
  .rem { min-height: 40px; }
  .rem input { width: 20px; height: 20px; }
  .links a { display: inline-flex; align-items: center; min-height: 40px; }
  .logo-block .sous, .propulse { font-size: 12px; }
}

/* Tâche 261 : « Présentez votre projet » — zone de texte au style des champs, icône en
   haut à gauche, pied discret (aide à gauche, compteur à droite, ambre s'il manque). */
.input-group.zone-texte .input-icon { top: 16px; transform: none; }
textarea.clean-input { display: block; resize: vertical; min-height: 58px; max-height: 240px; line-height: 1.4; padding-top: 12px; padding-bottom: 10px; }
.kt-io-projet-pied { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; line-height: 1.35; }
.kt-io-compteur { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kt-io-compteur.court { color: #b45309; font-weight: 600; }
/* La zone de texte ajoute une hauteur : sur un écran large, le volet du formulaire
   s'élargit (champs, aide et case des conditions tiennent sur moins de lignes) pour
   que la page reste SANS défilement à 1366 × 768 (mesuré au banc). */
@media screen and (min-width: 1001px) {
  body.kt-coque-dense.mode-pleine-page .login-panel { width: 50%; max-width: 700px; }
}
@media screen and (min-width: 1001px) and (max-height: 900px) {
  body.kt-coque-dense .input-group { margin-bottom: 10px; }
  body.kt-coque-dense .form-desc { margin-bottom: 10px; }
  body.kt-coque-dense textarea.clean-input { min-height: 50px; padding-top: 9px; padding-bottom: 7px; line-height: 1.35; }
  body.kt-coque-dense .kt-io-aide { margin-bottom: 8px; }
}
.links[hidden] { display: none; }

/* Tâche 260 : adresse à confirmer affichée sur la page de confirmation (pas de style en ligne : CSP à nonce). */
.kt-io-adresse{margin:14px 0 18px;font-size:15px;line-height:1.5}

/* Tache 319 (01-10-2026) : les ATOUTS du logiciel dans le volet droit de la connexion
   (dix lignes courtes a icone, deux colonnes en ecran large) et l'aide condensee.
   Tient sans defilement a 1366 x 768 et 1920 x 1080 (mesure au banc). */
.kt-atouts { list-style: none; padding: 0 !important; margin: 4px 0 18px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.kt-atouts li { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.82); }
.kt-atouts li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: #FF8BA0; }
.kt-atouts li b { display: block; color: #fff; font-weight: 700; font-size: 15px; }
.client-html-content .info-box { margin: 14px 0; }
.kt-aide-court { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px !important; line-height: 1.45 !important; margin: 0 !important; opacity: .8 !important; }
.kt-aide-court svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; }
@media screen and (min-width: 1001px) and (max-height: 900px) {
  .client-safe-zone { padding-top: 34px; padding-bottom: 28px; }
  .client-html-content .entete { margin-bottom: 14px; font-size: 17px; }
  .client-html-content h1 { font-size: 28px; margin-bottom: 10px; }
  .client-html-content p { margin-bottom: 14px; }
  .kt-atouts { gap: 7px 24px; margin-bottom: 12px !important; }
  .kt-atouts li { font-size: 13.5px; line-height: 1.3; }
  .kt-atouts li b { font-size: 14.5px; }
}
@media screen and (max-width: 1180px) {
  .kt-atouts { grid-template-columns: minmax(0, 1fr); }
}.kt-atouts, .kt-atouts ~ .info-box, .kt-aide-court { max-width: 860px; }   /* 1920 px : colonnes resserrees, lecture courte */
/* Tache 375 : formulaire public sans JavaScript (le calcul anti-robot invisible ne peut pas se faire). */
.kt-ar-sans-js { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-weight: 600; font-size: 14px; }
/* Tâche 475 (05-10-2026) : « Vous avez déjà vos formulaires et vos contacts ? Ne refaites rien. » — en tête du volet
   des atouts ; sur téléphone (volet masqué), sous le titre du formulaire (.kt-existant-tel). */
.kt-existant { margin: 0 0 16px !important; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26);
  border-left: 5px solid #ee7a2e; color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.45; max-width: 860px; }
.kt-existant b { display: block; color: #fff; font-size: 16.5px; margin-bottom: 2px; }
.kt-existant.kt-existant-tel { display: none; background: #fff7ec; border-color: #f0c89a; border-left-color: #ee7a2e; color: #3d4250; font-size: 13.5px; margin: 6px 0 12px !important; }
.kt-existant.kt-existant-tel b { color: #223a70; font-size: 14.5px; }
@media screen and (max-width: 700px) { .kt-existant.kt-existant-tel { display: block; } }
/* Tâche 577 (09-10-2026) : à 1366 × 768, le volet droit (connexion, création de compte) descendait à 836 px — l'encadré
   du bas sous l'écran (13 atouts depuis la 574). Fenêtre basse (<= 820 px) : tout se resserre, rien n'est retiré. */
@media screen and (min-width: 1001px) and (max-height: 820px) {
  .client-safe-zone { padding-top: 22px; padding-bottom: 16px; }
  .client-html-content .entete { margin-bottom: 8px; font-size: 16px; }
  .client-html-content h1 { font-size: 25px; margin-bottom: 8px; }
  .client-html-content p { font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
  .kt-existant { margin-bottom: 10px !important; padding: 7px 12px; font-size: 14px; line-height: 1.38; }
  .kt-existant b { font-size: 15px; margin-bottom: 0; }
  .kt-atouts { gap: 5px 22px; margin: 2px 0 8px !important; }
  .kt-atouts li { font-size: 13px; line-height: 1.25; gap: 9px; }
  .kt-atouts li b { font-size: 14px; }
  .kt-atouts li svg { width: 18px; height: 18px; }
  .client-html-content .info-box { margin: 8px 0; padding: 9px 12px; font-size: 13px; }
  .kt-aide-court { font-size: 13px !important; line-height: 1.38 !important; }
}
@media screen and (min-width: 1001px) and (max-height: 740px) {   /* 1280 × 720 */
  .client-safe-zone { padding-top: 16px; padding-bottom: 12px; }
  .client-html-content h1 { font-size: 23px; }
  .client-html-content p { font-size: 14px; margin-bottom: 8px; }
  .kt-atouts { gap: 4px 20px; }
}