/* Login page (app/views/pages/login.php). */

/* Slides share one grid cell and hidden ones keep their space, so the panel height stays that
   of the tallest slide instead of jumping on each rotation. */
#login-info .login-slide{grid-area:1/1}
#login-info .login-slide.hidden{display:flex;visibility:hidden}
#login-info > .relative{display:grid}

/* Privacy tile below the login card: same width, white card like the card above. */
.lg-privacy{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 16px;
  background:#fff;border:1px solid #e2e8f0;border-radius:5px}
.lg-privacy-tile{flex:none;width:32px;height:32px;border-radius:5px;background:var(--color-poly-blue);
  display:flex;align-items:center;justify-content:center;color:#fff}
.lg-privacy strong{display:block;font-size:13px;font-weight:600;color:var(--color-poly-navy);margin-bottom:1px}
.lg-privacy p{margin:0;font-size:12px;line-height:1.5;color:#475569}
.lg-privacy a{color:var(--color-poly-blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.lg-privacy a:hover{color:var(--color-poly-navy)}

/* OTP step: one centred grey line "Code reçu à <address>" above the code boxes (long addresses wrap) */
.lg-otp-label { display: block; margin-bottom: .6rem; font-size: .9em; font-weight: 400; line-height: 1.4; color: #94A3B8; text-align: center; overflow-wrap: anywhere; } /* light grey, centred, small gap above the code boxes */
.lg-otp-label b { font-weight: 600; color: inherit; }
.lg-otp-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-top: .75rem; }
.lg-otp-change { margin-left: auto; }
.lg-otp-sent { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .75rem; font-size: .9em; line-height: 1.4; color: #475569; text-align: center; overflow-wrap: anywhere; } /* above the code boxes */
#otp-error { text-align: center; }
/* Link page: twice the code page's gaps around "Link successfully sent to …" (top 1rem → 2rem, bottom .75rem → 1.5rem). */
.lg-link-sent { margin: 2rem 0 1.5rem; }
.lg-link-sent .lg-otp-sent { margin-bottom: 0; }
.lg-otp-sent b { font-weight: 600; color: #1E293B; }
.lg-otp-ok { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: #16A34A; }
.lg-otp-ko { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: #DC2626; }
.lg-otp-sent.lg-mail-failed, .lg-otp-sent.lg-mail-failed b { color: #B91C1C; } /* the sign-in e-mail could not be sent (replaces the "sent to" line) */
.lg-otp-sent[hidden] { display: none; }
.lg-otp-resend { font-size: .75rem; line-height: 1rem; color: #94A3B8; } /* same as "Change address" (text-xs, slate-400) */
.lg-otp-act { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } /* link page: "Send a new link" · "Request an OTP" */
.lg-otp-act:hover, .lg-otp-act:focus-visible { color: var(--color-poly-blue, #009CDD); }
.lg-otp-wait { font-variant-numeric: tabular-nums; color: #94A3B8; }
/* Blocked address: the two ways in (same cards as the access-request e-mail), instead of the form. */
.lg-paths { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.lg-paths-h { font-size: 14px; color: #0f172a; }
.lg-pc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 8px; border: 1px solid; }

.lg-pc-ic { font-size: 24px; line-height: 1; flex: none; }
.lg-pc b { display: block; margin-bottom: 2px; font-size: 13.5px; }
.lg-pc p { margin: 0; font-size: 12.5px; line-height: 1.45; }
/* Button on its own row, centred in the card. */
.lg-pc a.lg-pc-cta { grid-column: 1 / -1; justify-self: center; padding: 6px 14px; border-radius: 6px; color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.lg-pc.is-s { background: #f0f9ff; border-color: #d6ecf8; color: #0f3b57; } .lg-pc.is-s a { background: var(--color-poly-blue); }
.lg-pc.is-r { background: #effaf4; border-color: #c7ecd9; color: #065f46; } .lg-pc.is-r a { background: #059669; }
.lg-pc a:hover { filter: brightness(.92); }
.lg-paths-back { display: block; margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--color-poly-blue); }
.lg-paths-back:hover { text-decoration: underline; }
/* Pending address: amber "in validation" note above the two ways in (blocked = red box). */
.lg-pending { margin-top: 12px; padding: 8px 12px; border-radius: 5px; border: 1px solid #FCD34D; background: #FFFBEB; color: #92400E; font-size: 13px; line-height: 1.5; }

/* The two ways in side by side (heading across both); each card stacked and centred. One column on narrow phones. */
.lg-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.lg-paths-h { grid-column: 1 / -1; }
.lg-pc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; gap: 6px; }
.lg-pc-ic { font-size: 26px; }
@media (max-width: 420px) { .lg-paths { grid-template-columns: minmax(0, 1fr); } }

/* ---- Revamped split login + wizard --------------------------------------- */
/* Centre the login card vertically in the space between header and footer. */
main:has(> .lg-wrap){display:flex;flex-direction:column;justify-content:center}
.lg-wrap{width:100%;max-width:60rem;margin:0 auto;padding:1.5rem 0}
/* Flash messages (layout.php .app-flash) on the login pages: same width as the login card, centred, at every size. */
main:has(> .lg-wrap) > .app-flash{width:100%;max-width:60rem;margin-left:auto;margin-right:auto}
.lg-card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e2e8f0;border-radius:5px;overflow:hidden}
.lg-brand{background:var(--color-poly-navy);color:#fff;padding:1.4rem;display:flex;flex-direction:column;min-height:300px}
.lg-slides{flex:1;align-content:center}
.lg-slide{display:flex;flex-direction:column;gap:.4rem}
.lg-illus{display:flex;align-items:center;justify-content:center;padding:.1rem 0 .7rem}
.lg-illus svg{height:116px;width:auto;max-width:100%}
.lg-advice h2{font-size:15px;font-weight:600;margin:0 0 4px}
.lg-advice p{font-size:12px;line-height:1.5;color:rgba(255,255,255,.82);margin:0}
.lg-dots{display:flex;gap:6px;margin-top:.6rem}
.lg-dot-nav{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);border:0;padding:0;cursor:pointer;transition:all .2s}
.lg-dot-nav.is-on{width:18px;border-radius:3px;background:#fff}
.lg-dot-nav:hover{background:rgba(255,255,255,.75)}
.lg-form{min-width:0;padding:1.25rem 1.6rem;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.lg-title{font-size:18px;font-weight:700;color:var(--color-poly-navy)}
.lg-step{display:flex;flex-direction:column;transition:opacity .2s ease,transform .22s ease}
.lg-step[hidden]{display:none}
/* Wizard step slide: outgoing leaves left, incoming enters from the right (reversed on Back). */
.lg-step.lg-leaving{opacity:0;transform:translateX(-26px)}
.lg-step.lg-leaving.lg-back{transform:translateX(26px)}
.lg-step.lg-entering{opacity:0;transform:translateX(26px)}
.lg-step.lg-entering.lg-back{transform:translateX(-26px)}
@media (prefers-reduced-motion:reduce){.lg-step{transition:opacity .15s ease}.lg-step.lg-leaving,.lg-step.lg-entering{transform:none}}
.lg-h{font-size:20px;font-weight:600;color:var(--color-poly-navy);margin:0}
.lg-emoji{margin-left:7px}
.lg-sub{font-size:13px;color:#64748b;margin:.15rem 0 .9rem}
.lg-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lg-role{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;aspect-ratio:1;padding:10px 6px;border:1.5px solid #e2e8f0;border-radius:9px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;color:#0a5c8f}
.lg-role:hover{border-color:#bfe3f6;background:#f5fbff}
.lg-role.is-on{border-color:var(--color-poly-blue);background:#f5fbff;box-shadow:0 0 0 3px #eaf4fb}
.lg-role-ic{width:28px;height:28px;color:#0a5c8f}
.lg-role.is-on .lg-role-ic{color:var(--color-poly-navy)}
/* "Other" tile: recruiter/admin icons crossfade in sync with the label slot-roll. */
.lg-ic-roll{position:relative;width:28px;height:28px}
.lg-ic-roll>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease}
.lg-ic-admin{opacity:0}
.lg-role.show-admin .lg-ic-recruiter{opacity:0}
.lg-role.show-admin .lg-ic-admin{opacity:1}
/* Third word "Others": its own icon (circle of dots) and the brand light blue, icon and word together. */
.lg-ic-others{opacity:0}
.lg-ic-others .lg-role-ic{color:var(--color-poly-blue,#009CDD)}
.lg-role.show-others .lg-ic-recruiter{opacity:0}
.lg-role.show-others .lg-ic-others{opacity:1}
.lg-role .lg-roll-track>span.lg-roll-others{color:var(--color-poly-blue,#009CDD);font-weight:600}
.lg-role span{font-size:13px;font-weight:500;color:#1f2937}
.lg-role-roll{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.5}
.lg-roll-track{display:flex;flex-direction:column;will-change:transform}
.lg-roll-track>span{display:block;white-space:nowrap;line-height:1.5}
.lg-hint{font-size:11px;color:#94a3b8;text-align:center;margin:.7rem 0 0}
.lg-step-head{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
.lg-back{width:32px;height:32px;flex:none;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lg-back:hover{border-color:var(--color-poly-blue);color:var(--color-poly-navy)}
.lg-back svg{width:20px;height:20px}
.lg-search{display:flex;align-items:center;gap:8px;border:1px solid #cbd5e1;border-radius:7px;padding:0 12px;margin-bottom:12px}
.lg-search svg{width:18px;height:18px;color:#94a3b8;flex:none}
.lg-search input{flex:1;min-width:0;border:0;outline:0;padding:10px 0;font-size:13px;background:transparent}
.lg-schools{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:6.6rem;overflow:auto;padding-right:2px}
.lg-school{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;cursor:pointer;text-align:left;min-width:0}
.lg-school:hover{background:#f5fbff;border-color:#bfe3f6}
.lg-school.is-on{background:#f5fbff;border-color:var(--color-poly-blue);box-shadow:0 0 0 2px #eaf4fb}
.lg-school-dot{width:11px;height:11px;border-radius:50%;flex:none}
.lg-school-name{font-size:12.5px;color:#1f2937;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-school-check{display:none}
.lg-schools-empty{grid-column:1 / -1;font-size:12px;color:#94a3b8;padding:10px;text-align:center}
.lg-step[data-step="school"] .lg-step-head{margin-bottom:.3rem}
.lg-sub-school{margin:.1rem 0 .7rem}
.lg-skip-row{display:flex;justify-content:flex-end;margin-top:8px}
.lg-skip{padding:0;background:none;border:0;color:var(--color-poly-blue);font-size:12px;cursor:pointer}
.lg-skip:hover{text-decoration:underline;color:var(--color-poly-navy)}
.lg-label{display:block;font-size:11px;color:#64748b;margin-bottom:5px}
.lg-variant[hidden]{display:none}
.lg-split{display:flex;align-items:center;border:1px solid #cbd5e1;border-radius:8px;height:42px;padding-right:5px;background:#fff}
.lg-split input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;height:100%;font-size:14px;background:transparent}
.lg-at{display:flex;align-items:center;color:#94a3b8;font-size:14px;padding:0 2px}
.lg-domain{appearance:none;-webkit-appearance:none;outline:0;border:0;border-radius:6px;height:32px;padding:0 28px 0 10px;max-width:62%;font-size:13px;font-weight:500;color:#004a75;cursor:pointer;background:#e6f1fb url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23004A75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 8px center}
.lg-variant[data-variant="free"] input{width:100%;border:1px solid #cbd5e1;border-radius:8px;height:42px;padding:0 12px;font-size:14px;outline:0}
.lg-variant[data-variant="free"] input:focus,.lg-split:focus-within,.lg-search:focus-within{border-color:var(--color-poly-blue)}
.lg-send{display:block;width:100%;margin-top:.9rem;height:40px;background:var(--color-poly-blue);color:#fff;border:0;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer}
.lg-send:hover{background:var(--color-poly-navy)}
.lg-send:disabled,.lg-send:disabled:hover{background:#cbd5e1;color:#eef2f6;cursor:not-allowed}
.lg-use-other{display:block;width:100%;margin-top:10px;padding:0;background:none;border:0;color:var(--color-poly-blue);font-size:12px;text-align:center;cursor:pointer}
.lg-use-other[hidden]{display:none}
.lg-use-other:hover{text-decoration:underline}
.lg-noscript{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.lg-noscript img{border:1px solid #e2e8f0;border-radius:5px}
.lg-noscript-in{border:1px solid #cbd5e1;border-radius:6px;height:38px;padding:0 10px;text-transform:uppercase;letter-spacing:.2em}
/* The brand panel keeps a smaller share of the window as it narrows, so the form stays roomy. */
@media (max-width:900px){ .lg-card{grid-template-columns:44% 56%} }
@media (max-width:760px){ .lg-card{grid-template-columns:38% 62%} }
@media (max-width:640px){
  .lg-wrap{padding:1rem 0}
  .lg-card{grid-template-columns:1fr}
  .lg-brand{min-height:auto;padding:1.1rem 1.2rem}
  .lg-illus{display:none}
  .lg-slides{align-content:start}
  .lg-form{padding:1.4rem 1.2rem}
  .lg-roles{gap:8px}
  .lg-role{padding:6px 4px;gap:6px}
  .lg-role span{font-size:12px}
}