/* =========================================================================
   EasySugu — écran de connexion (maquette « Maquette Apps/loginpage.png »)
   Mise en page de référence : 1586 × 992. Le visuel de gauche est une « scène »
   de 960 × 810 dont tout le contenu est dimensionné en unités --u (1/960 de sa largeur).
   ========================================================================= */
:root {
  --lg-navy: #050d2b;
  --lg-ink: #0b1437;
  --lg-text: #3f4654;
  --lg-muted: #5b6270;
  --lg-green: #005841;
  --lg-green-2: #014c3a;
  --lg-green-btn: #015640;
  --lg-green-deep: #04402f;
  --lg-gold: #df9a17;
  --lg-gold-soft: #f7e6c3;
  --lg-cream: #f9f6f0;
  --lg-line: #dde1e7;
  --lg-panel-w: 628px;
  --lg-card-w: 587px;
  --lg-head-h: 120px;
  --lg-foot-h: 62px;
  --lg-gap: clamp(28px, 3.4vw, 72px); /* respiration entre le visuel et le panneau de connexion */
}

.lg-body {
  margin: 0; min-height: 100vh; background: var(--lg-cream); color: var(--lg-ink);
  font-family: 'Fira Sans', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[dir="rtl"] .lg-body { font-family: 'Cairo', 'Fira Sans', system-ui, sans-serif; }
.lg-page { min-height: 100vh; display: flex; flex-direction: column; }
.lg-main { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--lg-panel-w); direction: ltr; position: relative; }

/* ---------------------------------------------------------------- gauche */
.lg-left {
  position: relative; min-width: 0; display: flex; justify-content: center; /* grand écran : visuel centré dans l'espace libre */
  background:
    radial-gradient(900px 520px at 18% 30%, #fffdf8 0%, rgba(255,253,248,0) 70%),
    linear-gradient(180deg, #f8f6f3 0%, #faf7f1 55%, #f6efe2 100%);
}
.lg-left-inner {
  /* La scène occupe toute la hauteur disponible sans déborder ; centrée dans l'espace
     à gauche (marges égales), jamais moins de --lg-gap au total autour du visuel. */
  --lg-avail: max(calc(100vh - var(--lg-head-h) - var(--lg-foot-h)), 560px);
  width: min(calc(100% - var(--lg-gap)), calc(var(--lg-avail) * 960 / 810));
  display: flex; flex-direction: column;
}
.lg-brand { height: var(--lg-head-h); display: flex; align-items: flex-start; padding: 22px 0 0 6.4%; }
.lg-brand a { display: inline-flex; flex-direction: column; border-radius: 10px; text-decoration: none; }
.lg-brand img { display: block; align-self: flex-start; height: 61px; width: auto; }
.lg-brand .tag { margin: -3px 0 0 93px; color: #1d2333; font-size: 17.5px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
html[dir="rtl"] .lg-brand .tag { margin: -3px 93px 0 0; }

.lg-stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 960 / 810; }
.lg-stage-art {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%); mask-image: linear-gradient(90deg, transparent 0, #000 4%);
  border-radius: 0 28px 28px 0; /* bord droit adouci : le visuel ne touche plus le panneau */
}
.lg-copy { --u: calc(100cqw / 960); position: absolute; left: calc(var(--u) * 58); top: calc(var(--u) * 62); width: calc(var(--u) * 480); }
html[dir="rtl"] .lg-copy { direction: rtl; text-align: right; }
html[dir="rtl"] .lg-feats { width: calc(var(--u) * 352); margin-left: 0; margin-right: auto; }
html[dir="rtl"] .lg-feats small { white-space: normal; }
.lg-copy h1 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: .98; }
.lg-copy h1 .l1 { display: block; color: var(--lg-navy); font-size: calc(var(--u) * 71); }
.lg-copy h1 .l2 { display: block; color: #075a3b; font-size: calc(var(--u) * 79); margin-top: calc(var(--u) * 2); }
.lg-copy h1 .l2 > span { color: var(--lg-gold); }
html[dir="rtl"] .lg-copy h1 .l2 { text-align: right; }
.lg-lead { margin: calc(var(--u) * 24) 0 0; color: #474d58; font-size: calc(var(--u) * 24); line-height: 1.33; font-weight: 400; letter-spacing: -0.01em; width: calc(var(--u) * 500); }
.lg-feats { list-style: none; margin: calc(var(--u) * 26) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 18); width: calc(var(--u) * 420); }
.lg-feats li { display: flex; align-items: center; gap: calc(var(--u) * 19); }
.lg-feats .ico {
  flex: 0 0 auto; width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--u) * 25);
}
.lg-feats .ico.is-green { background: #e3f1e6; color: #0b6a47; }
.lg-feats .ico.is-gold { background: #fde9b9; color: #d48c0f; }
.lg-feats strong { display: block; color: var(--lg-ink); font-weight: 600; font-size: calc(var(--u) * 19.5); line-height: 1.25; letter-spacing: -0.005em; }
.lg-feats small { display: block; color: #4b5260; font-size: calc(var(--u) * 15); line-height: 1.35; white-space: nowrap; margin-top: calc(var(--u) * 3); }

/* ---------------------------------------------------------------- droite (panneau vert) */
.lg-right {
  position: relative; z-index: 1; min-width: 0; padding: 0 41px 26px 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.6'%3E%3Cpath d='M44 6 82 44 44 82 6 44Z'/%3E%3Cpath d='M44 22 66 44 44 66 22 44Z'/%3E%3Cpath d='M44 36 52 44 44 52 36 44Z' fill='%23ffffff' fill-opacity='.05'/%3E%3Cpath d='M0 0 12 12M88 0 76 12M0 88 12 76M88 88 76 76'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 88px 88px,
    radial-gradient(700px 500px at 100% 0%, #0b6a4f 0%, rgba(11,106,79,0) 70%),
    linear-gradient(170deg, #0a5f48 0%, #075240 45%, #054534 100%);
  border-top-left-radius: 70px 150px;
}
.lg-right::before { /* filet doré qui épouse la courbe du panneau */
  content: ""; position: absolute; inset: 0; border-top-left-radius: inherit; pointer-events: none;
  box-shadow: inset 2px 0 0 rgba(223,154,23,.0);
}
.lg-topbar { height: 118px; display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding-left: 52px; direction: ltr; }
.lg-langs {
  display: flex; align-items: center; height: 50px; padding: 0 22px 0 20px; border-radius: 26px; background: #fff;
  box-shadow: 0 8px 22px rgba(0,30,20,.18);
}
.lg-langs .dropdown { display: flex; }
.lg-lang {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 4px; border: 0; background: none; color: #141a33;
  font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1; border-radius: 8px; cursor: pointer;
}
.lg-lang:not(.is-current) { font-weight: 500; color: #2b3044; }
.lg-lang:hover { color: var(--lg-green); }
.lg-lang:focus-visible, .lg-help:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: 3px; }
.lg-lang .bi-chevron-down { font-size: 12px; -webkit-text-stroke: .6px; margin-inline-start: 2px; }
.lg-lang .es-flag, .lg-lang-menu .es-flag { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; display: inline-flex; flex: 0 0 auto; }
.lg-lang .es-flag svg, .lg-lang-menu .es-flag svg, .lg-lang .es-flag img, .lg-lang-menu .es-flag img { width: 100%; height: 100%; object-fit: cover; }
.lg-lang .es-flag--gb, .lg-lang-menu .es-flag--gb { border-radius: 50%; }
.lg-langs .sep { width: 1px; height: 26px; background: #dfe3e8; margin: 0 16px; }
.lg-lang [lang="ar"] { font-family: 'Cairo', sans-serif; font-weight: 600; font-size: 16px; }
.lg-lang-menu { min-width: 210px; padding: 8px; border: 0; border-radius: 14px; box-shadow: 0 18px 40px rgba(4,30,22,.22); }
.lg-lang-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-weight: 500; color: #1d2333; }
.lg-lang-menu .dropdown-item:hover { background: #eef6f1; color: var(--lg-green); }
.lg-lang-menu .dropdown-item.active { background: #e3f1e6; color: var(--lg-green); font-weight: 700; }
.lg-topbar-sep { width: 1px; height: 34px; background: rgba(255,255,255,.28); }
.lg-help { white-space: nowrap; display: inline-flex; align-items: center; gap: 11px; color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; padding: 6px 2px; border-radius: 8px; }
.lg-help i { font-size: 26px; line-height: 1; }
.lg-help:hover { color: #ffe3a6; }

/* ---------------------------------------------------------------- carte */
.lg-card {
  width: var(--lg-card-w); max-width: 100%; margin-left: calc(var(--lg-panel-w) - var(--lg-card-w) - 41px); margin-left: 0;
  background: #fff; border-radius: 22px; padding: 42px 30px 30px 35px;
  box-shadow: 0 30px 60px rgba(0,25,18,.28), 0 2px 6px rgba(0,25,18,.08);
}
html[dir="rtl"] .lg-card { direction: rtl; }
.lg-right { display: flex; flex-direction: column; align-items: flex-start; }
.lg-right .lg-card { align-self: flex-start; }

.lg-first {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: -14px 0 18px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, #fff8e6, #fdeccb); border: 1px solid #f0cf86; color: #6b4300;
}
.lg-first .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--lg-gold); color: #fff; font-size: 18px; }
.lg-first .txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.lg-first small { color: #7a5a1c; }
.lg-first .go { font-size: 22px; color: var(--lg-gold); }

/* Choix de l'instance */
.lg-insts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 37px; padding: 0; border: 0; min-width: 0; }
.lg-inst {
  position: relative; display: flex; flex-direction: column; border-radius: 9px; overflow: hidden; cursor: pointer; background: #fff;
  border: 1.5px solid #e4e7eb; transition: border-color .2s, box-shadow .2s, transform .2s, background-color .2s;
}
.lg-inst input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lg-inst-head { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 16px 12px 11px 13px; min-height: 72px; transition: background .25s, color .25s; }
.lg-inst .radio {
  flex: 0 0 auto; width: 27px; height: 27px; margin-top: 2px; border-radius: 50%; border: 2px solid #c9ced6; background: #fff;
  position: relative; transition: border-color .2s, box-shadow .2s;
}
.lg-inst .radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .2s cubic-bezier(.3,1.6,.6,1); }
.lg-inst .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lg-inst .t strong { padding-inline-end: 34px; font-size: 20.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--lg-ink); }
.lg-inst .t small { white-space: nowrap; font-size: 13.8px; letter-spacing: -0.015em; line-height: 1.35; margin-top: 4px; color: #2f3545; }
.lg-inst .ico { position: absolute; top: 15px; inset-inline-end: 13px; font-size: 27px; line-height: 1; }
.lg-inst.is-prod .ico { color: var(--lg-green); }
.lg-inst.is-training .ico { color: #e2a21f; }
.lg-inst-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 13px 16px 16px; flex: 1; }
.lg-inst .badge-env {
  display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
}
.lg-inst.is-prod .badge-env { background: #e3f6e7; color: #0b5a3d; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.lg-inst.is-training .badge-env { background: #f9eacb; color: #5a3d06; }
.lg-inst .desc { align-self: stretch; font-size: 13.9px; line-height: 1.45; letter-spacing: -0.01em; color: #4e5563; }
.lg-inst .badge-env .flag { margin-inline-start: 6px; color: #a1600a; }
.lg-inst:hover { border-color: #b9c7c1; box-shadow: 0 8px 20px rgba(3,40,28,.08); }
.lg-inst.is-training { border-color: #f0c66f; background: #fffdf6; }
.lg-inst:has(input:focus-visible) { outline: 3px solid rgba(223,154,23,.55); outline-offset: 2px; }

/* état sélectionné : bandeau plein (vert = production, ocre = formation) */
.lg-inst:has(input:checked) .lg-inst-head { color: #fff; }
.lg-inst:has(input:checked) .t strong, .lg-inst:has(input:checked) .t small, .lg-inst:has(input:checked) .ico { color: #fff; }
.lg-inst:has(input:checked) .radio { border: 2.5px solid #fff; background: transparent; color: #fff; }
.lg-inst:has(input:checked) .radio::after { transform: scale(1); }
.lg-inst.is-prod:has(input:checked) { border-color: #dfe3e6; }
.lg-inst.is-prod:has(input:checked) .lg-inst-head { background: linear-gradient(180deg, var(--lg-green) 0%, var(--lg-green-2) 100%); }
.lg-inst.is-training:has(input:checked) { border-color: #e5b14b; box-shadow: 0 10px 26px rgba(160,100,10,.16); }
.lg-inst.is-training:has(input:checked) .lg-inst-head { background: linear-gradient(180deg, #c27a0e 0%, #a5650a 100%); }
.lg-inst.is-prod:not(:has(input:checked)) { border-color: #e4e7eb; }
/* repli sans :has() — classes posées par login.js */
.lg-inst.is-on .lg-inst-head { color: #fff; }

/* Info formation (visible seulement en mode formation) */
.lg-train-info { display: none; margin: -30px 0 22px; }
.lg-form[data-instance="training"] .lg-train-info:not(:empty) { display: block; }
.lg-train-info .warn { display: flex; gap: 9px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff6e2; border: 1px solid #f2d394; color: #6d4704; font-size: 13.5px; line-height: 1.45; }
.lg-train-info .warn code { color: #8a3c00; background: #ffeec9; padding: 1px 5px; border-radius: 5px; }
.lg-demo { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed #e5b14b; background: #fffaf0; text-align: start; cursor: pointer; transition: background .2s; }
.lg-demo:hover { background: #fff3da; }
.lg-demo .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #c27a0e; color: #fff; font-weight: 700; font-size: 13px; }
.lg-demo .tx { flex: 1; display: flex; flex-direction: column; line-height: 1.25; color: #3b2a07; }
.lg-demo .tx small { color: #7b6332; }
.lg-demo .go { font-weight: 700; color: #a5650a; font-size: 14px; }
.lg-demo.done { border-style: solid; background: #f3fbf5; border-color: #8cc9a6; }

/* Champs */
.lg-field { margin-bottom: 16px; }
.lg-field label { display: block; margin: 0 0 8px; font-size: 16.5px; font-weight: 600; color: #08102f; letter-spacing: -0.005em; }
.lg-input { position: relative; display: flex; align-items: center; }
.lg-input input {
  width: 100%; height: 50px; padding: 0 52px 0 53px; border: 1.5px solid var(--lg-line); border-radius: 7px; background: #fff;
  font: inherit; font-size: 16px; color: #111827; outline: none; transition: border-color .18s, box-shadow .18s;
}
.lg-input input::placeholder { color: #737a87; opacity: 1; }
.lg-input input:hover { border-color: #c4cad3; }
.lg-input input:focus { border-color: var(--lg-green); box-shadow: 0 0 0 4px rgba(0,88,65,.12); }
.lg-input .lead-ico { position: absolute; inset-inline-start: 17px; font-size: 22px; color: #4b5260; pointer-events: none; transition: color .18s; }
.lg-input:focus-within .lead-ico { color: var(--lg-green); }
html[dir="rtl"] .lg-input input { padding: 0 53px 0 52px; }
.lg-eye { position: absolute; inset-inline-end: 8px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: #4b5260; font-size: 21px; display: grid; place-items: center; cursor: pointer; }
.lg-eye:hover { color: var(--lg-green); background: #f1f6f3; }
.lg-eye:focus-visible { outline: 2px solid var(--lg-green); }
.lg-input.is-invalid input { border-color: #d64545; box-shadow: 0 0 0 4px rgba(214,69,69,.10); }
.lg-input.is-invalid .lead-ico { color: #c23b3b; }
.lg-err { min-height: 0; font-size: 13.5px; color: #c23b3b; font-weight: 500; }
.lg-err:not(:empty) { margin-top: 7px; }
.lg-caps { margin-top: 7px; font-size: 13px; font-weight: 600; color: #a5650a; }
.lg-field.shake .lg-input { animation: lg-shake .38s; }
@keyframes lg-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 27px; }
.lg-check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; color: #2a3040; user-select: none; }
.lg-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lg-check .box { width: 22px; height: 22px; border-radius: 4px; border: 2px solid #b8bec8; display: grid; place-items: center; color: #fff; font-size: 16px; transition: background .15s, border-color .15s; }
.lg-check .box i { opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s cubic-bezier(.3,1.6,.6,1); -webkit-text-stroke: 1px; }
.lg-check input:checked + .box { background: var(--lg-green); border-color: var(--lg-green); }
.lg-check input:checked + .box i { opacity: 1; transform: none; }
.lg-check input:focus-visible + .box { outline: 3px solid rgba(0,88,65,.3); outline-offset: 2px; }
.lg-forgot { color: #0b5a3d; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lg-forgot:hover { color: var(--lg-gold); }

.lg-submit {
  position: relative; width: 100%; height: 56px; border: 0; border-radius: 8px; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 14px; font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -0.005em;
  background: linear-gradient(180deg, #035d45 0%, var(--lg-green-btn) 50%, #00503c 100%);
  box-shadow: 0 10px 22px rgba(0,80,60,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.lg-submit:hover { filter: brightness(1.08); box-shadow: 0 14px 28px rgba(0,80,60,.32); }
.lg-submit:active { transform: translateY(1px); }
.lg-submit:focus-visible { outline: 3px solid rgba(223,154,23,.7); outline-offset: 3px; }
.lg-submit .arrow { font-size: 22px; -webkit-text-stroke: .5px; transition: transform .2s; }
.lg-submit:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .lg-submit .arrow, html[dir="rtl"] .lg-wa .bi-arrow-right { transform: scaleX(-1); }
.lg-submit .lbl-training { display: none; }
.lg-form[data-instance="training"] .lg-submit { background: linear-gradient(180deg, #c98213 0%, #ad6a0b 100%); box-shadow: 0 10px 22px rgba(150,90,10,.25); }
.lg-form[data-instance="training"] .lg-submit .lbl-prod { display: none; }
.lg-form[data-instance="training"] .lg-submit .lbl-training { display: inline; }
.lg-submit .spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: lg-spin .7s linear infinite; }
.lg-submit.is-busy { pointer-events: none; filter: saturate(.9); }
.lg-submit.is-busy .spin { display: inline-block; }
.lg-submit.is-busy .arrow { display: none; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

.lg-or { display: flex; align-items: center; gap: 22px; margin: 18px 0 18px; color: #4b5260; font-size: 15px; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: #dde1e6; }

.lg-wa {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; border-radius: 8px; border: 1.5px solid #d6e9e1;
  background: #fff; color: #0b3f2e; font-size: 19px; font-weight: 600; text-decoration: none; letter-spacing: -0.005em;
  box-shadow: 0 2px 6px rgba(3,40,28,.05); transition: border-color .2s, box-shadow .2s, background .2s;
}
.lg-wa .wa { color: #25d366; font-size: 27px; line-height: 1; }
.lg-wa .bi-arrow-right { font-size: 19px; -webkit-text-stroke: .4px; transition: transform .2s; }
.lg-wa:hover { border-color: #8fd4b1; background: #f6fcf9; color: #0b3f2e; box-shadow: 0 8px 18px rgba(3,40,28,.08); }
.lg-wa:hover .bi-arrow-right { transform: translateX(4px); }

.lg-secure { margin-top: 24px; text-align: center; }
.lg-secure p { margin: 0; font-size: 14.5px; color: #4b5260; line-height: 1.6; }
.lg-secure p:first-child { color: #1f2a3a; font-size: 15px; }
.lg-secure strong { font-weight: 500; }
.lg-secure .bi-shield-check { color: #0b6a47; font-size: 21px; vertical-align: -3px; margin-inline-end: 6px; }

/* ---------------------------------------------------------------- pied de page */
.lg-footer {
  height: var(--lg-foot-h); flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 57px; background: #fdfbf7; border-top: 1px solid #efe9dd; color: #3b4150; font-size: 14.5px;
}
.lg-copy-r strong { font-weight: 600; color: #1d2333; }
.lg-links { display: flex; align-items: center; }
.lg-links a { color: #2b3142; text-decoration: none; padding: 0 18px; line-height: 1; }
.lg-links a + a { border-inline-start: 1px solid #b6bcc6; }
.lg-links a:hover { color: var(--lg-green); text-decoration: underline; }
.lg-sys { justify-self: end; display: flex; align-items: center; gap: 0; }
.lg-sys .sep { width: 1px; height: 16px; background: #b6bcc6; margin: 0 18px; }
.lg-status { display: inline-flex; align-items: center; gap: 10px; }
.lg-status .dot { width: 11px; height: 11px; border-radius: 50%; background: #3cc46b; box-shadow: 0 0 0 0 rgba(60,196,107,.5); animation: lg-pulse 2.4s infinite; }
.lg-status.is-down .dot { background: #e0483e; animation: none; }
.lg-status.is-offline .dot { background: #e2a21f; animation: none; }
@keyframes lg-pulse { 0% { box-shadow: 0 0 0 0 rgba(60,196,107,.45); } 70% { box-shadow: 0 0 0 7px rgba(60,196,107,0); } 100% { box-shadow: 0 0 0 0 rgba(60,196,107,0); } }

/* Toasts au-dessus du panneau */
.lg-body .es-toasts { z-index: 1080; }

/* ---------------------------------------------------------------- entrée animée */
@media (prefers-reduced-motion: no-preference) {
  .lg-copy > * { animation: lg-rise .7s cubic-bezier(.2,.8,.2,1) both; }
  .lg-copy > *:nth-child(2) { animation-delay: .08s; }
  .lg-copy > *:nth-child(3) { animation-delay: .16s; }
  .lg-stage-art, .lg-art-text { animation: lg-fade 1s ease both; }
  .lg-card { animation: lg-rise .7s .1s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes lg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1440px) {
  :root { --lg-panel-w: 580px; --lg-card-w: 545px; }
  .lg-topbar { gap: 14px; padding-left: 36px; }
  .lg-langs { padding: 0 16px; }
  .lg-langs .sep { margin: 0 11px; }
  .lg-help { font-size: 16px; gap: 8px; }
  .lg-right { padding-right: 32px; }
  .lg-card { padding: 38px 26px 30px 28px; }
  .lg-inst .t strong { font-size: 19px; }
  .lg-inst .t small, .lg-inst .desc { font-size: 13.2px; }
  .lg-inst .t small { letter-spacing: -0.02em; }
  .lg-inst .ico { font-size: 24px; inset-inline-end: 10px; }
}
@media (max-width: 1240px) {
  :root { --lg-panel-w: 540px; --lg-card-w: 510px; }
  .lg-right { padding-right: 26px; }
  .lg-footer { padding: 0 28px; }
  .lg-links a { padding: 0 12px; }
  .lg-help span { display: none; }
  .lg-topbar-sep { display: none; }
}
@media (max-width: 1099.98px) {
  .lg-main { grid-template-columns: 1fr; }
  .lg-left { justify-content: center; }
  .lg-left-inner { width: 100%; margin: 0; }
  .lg-brand { height: auto; justify-content: center; padding: 22px 16px 6px; }
  .lg-brand img { height: 48px; align-self: center; }
  .lg-brand .tag { margin: 2px 0 0; text-align: center; font-size: 14px; white-space: normal; }
  .lg-stage { aspect-ratio: auto; container-type: normal; padding: 6px 20px 28px; }
  .lg-stage-art { display: none; }
  .lg-copy { position: static; width: auto; max-width: 620px; margin: 0 auto; text-align: center; }
  .lg-copy h1 .l1 { font-size: clamp(34px, 7vw, 54px); }
  .lg-copy h1 .l2 { font-size: clamp(38px, 8vw, 60px); text-align: center; }
  .lg-lead { width: auto; font-size: clamp(16px, 2.6vw, 20px); margin-top: 12px; }
  .lg-feats { display: none; }
  .lg-right { align-items: center; padding: 0 16px 32px; border-radius: 36px 36px 0 0; }
  .lg-topbar { height: auto; padding: 18px 0; justify-content: center; flex-wrap: wrap; gap: 14px; }
  .lg-card { width: 100%; max-width: 587px; align-self: center !important; }
  .lg-footer { height: auto; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px; gap: 10px; }
  .lg-sys { justify-self: center; }
}
@media (max-width: 560px) {
  .lg-card { padding: 24px 16px 22px; border-radius: 18px; }
  .lg-insts { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
  .lg-inst-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; padding: 10px 14px 14px; }
  .lg-inst-head { min-height: 0; padding: 13px 14px 10px; }
  .lg-inst .t strong { font-size: 18px; }
  .lg-train-info { margin-top: -16px; }
  .lg-langs { padding: 0 14px; height: 44px; }
  .lg-langs .sep { margin: 0 10px; }
  .lg-lang { font-size: 14.5px; gap: 7px; }
  .lg-help span { display: none; }
  .lg-topbar-sep { display: none; }
  .lg-submit { font-size: 18px; height: 54px; }
  .lg-wa { font-size: 16px; height: 52px; }
  .lg-links a { padding: 0 9px; font-size: 13.5px; }
}

/* ── Textes des cartes dessinées dans l'illustration (login-hero.webp, 960×810) ──
   L'image contient « Ventes du jour », « Stock / 42 produits », « Clients / 318 clients » en français :
   hors français, ces zones sont recouvertes par des pastilles de la couleur de la carte et réécrites traduites.
   Coordonnées en pixels de l'image, via --u (1/960 de la largeur de la scène). */
.lg-art-text { --u: calc(100cqw / 960); position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lg-art-text .p {
  position: absolute; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 2); border-radius: calc(var(--u) * 5);
  font-family: 'Fira Sans', 'Cairo', system-ui, sans-serif; line-height: 1.05; white-space: nowrap; overflow: hidden;
}
.lg-art-text .p1 { left: calc(var(--u) * 809); top: calc(var(--u) * 249); width: calc(var(--u) * 128); height: calc(var(--u) * 25);
  background: #fdfbf7; box-shadow: 0 0 calc(var(--u) * 2) calc(var(--u) * 1) #fdfbf7; }
.lg-art-text .p2 { left: calc(var(--u) * 847); top: calc(var(--u) * 413); width: calc(var(--u) * 92); height: calc(var(--u) * 48);
  padding-right: calc(var(--u) * 17); background: #f9f7f2; box-shadow: 0 0 calc(var(--u) * 2) calc(var(--u) * 1) #f9f7f2; }
/* Chevron de la carte « Stock » (recouvert par la pastille élargie) redessiné en icône */
.lg-art-text .p2::after { content: "\F285"; font-family: bootstrap-icons; position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 28);
  font-size: calc(var(--u) * 12); line-height: 1; color: #1d6b4b; -webkit-text-stroke: calc(var(--u) * .6) #1d6b4b; }
html[dir="rtl"] .lg-art-text .p2::after { content: "\F284"; }
.lg-art-text .p3 { left: calc(var(--u) * 837); top: calc(var(--u) * 493); width: calc(var(--u) * 94); height: calc(var(--u) * 52);
  background: #fbf9f4; box-shadow: 0 0 calc(var(--u) * 2) calc(var(--u) * 1) #fbf9f4; }
.lg-art-text .lbl { font-size: calc(var(--u) * 13.5); color: #343b4a; font-weight: 400; }
.lg-art-text .ttl { font-size: calc(var(--u) * 13); color: var(--lg-navy, #050d2b); font-weight: 700; }
.lg-art-text .val { font-size: calc(var(--u) * 14); color: var(--lg-navy, #050d2b); font-weight: 600; }
html[dir="rtl"] .lg-art-text .p { direction: rtl; text-align: right; font-family: 'Cairo', 'Fira Sans', system-ui, sans-serif; line-height: 1.15; gap: calc(var(--u) * 2); }
@media (max-width: 1099.98px) { .lg-art-text { display: none; } }

/* =========================================================================
   Bordure ornementale verticale (entre la photo et le formulaire)
   Pinacle de Djenné et œuf d'autruche en haut, frise bogolan et « torons »,
   médaillon croix d'Agadez au centre, pendentif en bas. Reflet doré animé.
   ========================================================================= */
:root { --lg-border-w: 46px; }
.lg-main { grid-template-columns: var(--lg-border-w) minmax(0, 1fr) var(--lg-border-w) var(--lg-panel-w); }
.lg-border--start { margin-left: 26px; } /* léger retrait du bord de la fenêtre */
.lg-border {
  position: relative; z-index: 2; width: var(--lg-border-w); min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  /* le panneau vert reste derrière la bordure : la courbe du haut est prolongée par le pinacle */
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(5,69,52,0) 50%);
  filter: drop-shadow(0 10px 18px rgba(2,30,21,.35));
}
.lg-border-cap { flex: 0 0 auto; width: 64px; height: 120px; margin-top: 4px; position: relative; z-index: 2; }
.lg-border-shaft {
  position: relative; flex: 1 1 auto; width: var(--lg-border-w); margin-top: -8px; overflow: hidden;
  background:
    url("../img/illustrations/lg-border-tile.svg") center top / 46px 96px repeat-y,
    linear-gradient(90deg, #01241a 0%, #06503a 22%, #0b6447 50%, #06503a 78%, #01241a 100%);
  box-shadow: inset 0 0 0 1px rgba(231,178,74,.35), inset 0 18px 18px -12px rgba(0,0,0,.55);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.lg-border-sheen {
  position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255,226,150,0) 0%, rgba(255,226,150,.38) 50%, rgba(255,226,150,0) 100%);
  transform: translateY(-240px);
}
.lg-border-medal {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 126px; transform: translate(-50%, -50%); z-index: 3;
  filter: drop-shadow(0 8px 14px rgba(0,25,18,.45)) drop-shadow(0 0 10px rgba(233,180,64,.25));
}
.lg-border-foot { position: absolute; bottom: -2px; left: 50%; width: 64px; height: 70px; transform: translate(-50%, 0); z-index: 2; display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lg-border-sheen { animation: lg-sheen 7s cubic-bezier(.45,0,.55,1) infinite; }
  .lg-border-medal { animation: lg-medal 6s ease-in-out infinite; }
}
@keyframes lg-sheen { 0% { transform: translateY(-240px); } 100% { transform: translateY(calc(100vh + 240px)); } }
@keyframes lg-medal { 0%, 100% { filter: drop-shadow(0 8px 14px rgba(0,25,18,.45)) drop-shadow(0 0 8px rgba(233,180,64,.18)); }
                      50% { filter: drop-shadow(0 8px 14px rgba(0,25,18,.45)) drop-shadow(0 0 18px rgba(233,180,64,.5)); } }
/* le panneau vert démarre derrière la bordure : plus de courbe isolée */
.lg-right { margin-left: calc(var(--lg-border-w) / -2); padding-left: calc(var(--lg-border-w) / 2); }
@media (max-width: 1440px) { :root { --lg-border-w: 42px; } .lg-border-shaft { background-size: 42px 88px, auto; } }
@media (max-width: 1099.98px) {
  .lg-main { grid-template-columns: 1fr; }
  .lg-border { display: none; }
  .lg-right { margin-left: 0; padding-left: 16px; }
}
/* visuel, textes et logo décalés vers la gauche : respiration nette avant la bordure du formulaire */
@media (min-width: 1100px) {
  :root { --lg-art-gap: clamp(34px, 3.6vw, 64px); }
  .lg-left { justify-content: flex-end; padding-right: var(--lg-art-gap); }
  .lg-left-inner { width: min(100%, calc(var(--lg-avail) * 960 / 810)); }
}