:root {
  --ink: #30262b;
  --muted: #70666c;
  --paper: #fffdfa;
  --soft: #f6f0ec;
  --line: #ded4ce;
  --wine: #85173a;
  --wine-dark: #64102b;
  --teal: #0b7478;
  --teal-soft: #e4f2f1;
  --gold: #b87918;
  --shadow: 0 22px 60px rgba(47, 29, 37, .16);
  --card-shadow: 0 8px 26px rgba(47, 29, 37, .08);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #eee8e4; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 6%, rgba(133, 23, 58, .10), transparent 32rem),
    radial-gradient(circle at 92% 90%, rgba(11, 116, 120, .11), transparent 30rem),
    #f8f5f2;
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--wine); }
button, input, select { font: inherit; }

.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(1.1rem, 4vw, 4rem);
  color: white;
  background: #30272c;
  border-bottom: 4px solid var(--wine);
}

.brand { display: flex; align-items: center; gap: .8rem; color: white; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: var(--wine); font-weight: 800; letter-spacing: -.04em; }
.brand strong, .brand small, .account-name strong, .account-name small { display: block; }
.brand strong { font-size: 1.05rem; }
.brand small { color: #d9ced3; font-size: .78rem; }
.prototype-label { padding: .3rem .65rem; border: 1px solid #76666e; border-radius: 999px; color: #e9dde2; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

.login-shell {
  width: min(1080px, calc(100% - 2rem));
  min-height: calc(100vh - 180px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) 0;
}

.login-intro h1, .welcome h1 { max-width: 650px; margin: .35rem 0 1rem; font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: 1.03; letter-spacing: -.045em; }
.lead { max-width: 650px; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.eyebrow { margin: 0; color: var(--wine); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.benefits { display: grid; gap: .65rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.benefits span { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; margin-right: .55rem; border-radius: 50%; color: var(--teal); background: var(--teal-soft); font-weight: 800; }

.login-card { padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(255,253,250,.96); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: var(--shadow); }
.card-heading h2 { margin: .25rem 0 .35rem; font-size: 2rem; line-height: 1.2; }
.card-heading > p:last-child { margin: 0 0 1.5rem; color: var(--muted); }
.login-card form { display: grid; gap: .55rem; }
.login-card label { font-weight: 700; }
.login-card input { width: 100%; min-height: 48px; padding: .75rem .85rem; color: var(--ink); background: #fff; border: 1px solid #cfc4c8; border-radius: 7px; outline: none; }
.login-card input:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(133,23,58,.12); }
.password-label { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; }
.password-label a { font-size: .9rem; }
.password-field { position: relative; }
.password-field input { padding-right: 6rem; }
.show-password { position: absolute; top: 50%; right: .45rem; transform: translateY(-50%); padding: .4rem .55rem; color: var(--wine); background: transparent; border: 0; cursor: pointer; font-weight: 700; }
.primary-button, .app-button, .account-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 7px; font-weight: 750; text-decoration: none; }
.primary-button { min-height: 50px; margin-top: 1rem; padding: .75rem 1rem; color: #fff; background: var(--wine); border: 0; cursor: pointer; }
.primary-button:hover { background: var(--wine-dark); }
.activation-help { margin: 1.4rem 0 0; padding-top: 1.2rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .9rem; }

.account-menu { display: flex; align-items: center; gap: .65rem; }
.account-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--teal); font-size: .8rem; font-weight: 800; }
.account-name { margin-right: .5rem; }
.account-name small { color: #d9ced3; font-size: .75rem; }
.logout-link { padding: .55rem .75rem; color: var(--ink); background: #fff; border: 1px solid #cfc3c8; border-radius: 7px; text-decoration: none; font-size: .9rem; font-weight: 700; cursor: pointer; }
.logout-link:hover, .logout-link:focus-visible { color: var(--wine); background: #fff7f8; border-color: var(--wine); }

.demo-toolbar { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .55rem 1rem; color: #5b4a1f; background: #fff4cf; border-bottom: 1px solid #ead18a; font-size: .84rem; }
.demo-toolbar > span { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.demo-toolbar select { padding: .3rem .5rem; color: #4b3c18; background: #fffdf4; border: 1px solid #cdae59; border-radius: 5px; }

.portal-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5.5rem) 0; }
.welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; }
.welcome h1 { margin-bottom: .6rem; font-size: clamp(2.5rem, 5vw, 4.4rem); }
.account-button { flex: none; padding: .72rem .95rem; color: var(--wine); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 3px 10px rgba(47,29,37,.05); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.section-heading h2 { margin: .2rem 0 0; font-size: 1.65rem; }
.section-heading > p { max-width: 390px; margin: 0; color: var(--muted); text-align: right; font-size: .9rem; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.app-card { --app-accent: var(--wine); --app-deep: #30282d; --app-soft: #f8e9ed; position: relative; min-height: 300px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 1rem 1.2rem; padding: clamp(1.35rem, 3vw, 2rem); overflow: hidden; background: linear-gradient(145deg, rgba(255,253,250,.98) 58%, var(--app-soft) 145%); border: 1px solid var(--line); border-top: 5px solid var(--app-deep); border-radius: 13px; box-shadow: var(--card-shadow); }
.app-card--stages { --app-accent: #94153d; --app-deep: #30282d; --app-soft: #f5e7ec; }
.app-card--exams, .app-card--examens { --app-accent: #255d77; --app-deep: #183f56; --app-soft: #e8f1f5; }
.app-card--vacataires { --app-accent: #2f765f; --app-deep: #174c3a; --app-soft: #e5f1eb; }
.app-card::before { content: ""; position: absolute; inset: -5px auto 0 0; width: 5px; background: var(--app-accent); }
.app-card::after { content: ""; position: absolute; top: -85px; right: -70px; width: 210px; height: 210px; border: 34px solid color-mix(in srgb, var(--app-accent) 9%, transparent); border-radius: 50%; pointer-events: none; }
.app-card > * { position: relative; z-index: 1; }
.app-icon { width: 64px; height: 64px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--app-deep), var(--app-accent)); border-radius: 13px; box-shadow: 0 7px 18px color-mix(in srgb, var(--app-deep) 22%, transparent); }
.app-card--exams .app-icon, .app-card--examens .app-icon { color: #183f56; background: linear-gradient(145deg, #f5c261, #f0b44b); }
.app-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.app-copy h3 { margin: .55rem 0 .55rem; font-size: 1.45rem; }
.app-copy > p { margin: 0; color: var(--muted); }
.app-copy > .app-kicker { margin-bottom: .55rem; color: var(--app-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status-badge { display: inline-block; padding: .22rem .5rem; color: #22603e; background: #e9f5ed; border-radius: 999px; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.access-detail { margin-top: 1rem !important; font-size: .86rem; font-weight: 700; }
.app-button { grid-column: 1 / -1; min-height: 48px; padding: .7rem 1rem; color: #fff; background: var(--app-deep); box-shadow: inset 4px 0 0 var(--app-accent); }
.app-card--stages .app-button:hover { background: #211b1e; }
.app-card--exams .app-button:hover, .app-card--examens .app-button:hover { background: #102e40; }
.app-card--vacataires .app-button:hover { background: #10382b; }
.app-button span { margin-left: auto; font-size: 1.25rem; }
.future-section { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1.1rem 1.25rem; color: var(--muted); background: rgba(255,255,255,.55); border: 1px dashed #cfc4c8; border-radius: 11px; }
.future-section h2 { margin: 0 0 .15rem; color: var(--ink); font-size: 1rem; }
.future-section p { margin: 0; font-size: .9rem; }
.future-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: var(--wine); background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 1.4rem; }

footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.1rem, 4vw, 4rem); color: #766d72; border-top: 1px solid var(--line); font-size: .82rem; }
footer a { color: inherit; }

.prototype-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; max-width: 360px; padding: .8rem 1rem; color: #fff; background: #30272c; border-radius: 8px; box-shadow: var(--shadow); }

.account-shell, .activation-shell { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; padding: 2.3rem 0 4.5rem; }
.breadcrumb { display: flex; gap: .5rem; margin-bottom: 2rem; color: var(--muted); font-size: .88rem; }
.breadcrumb a { color: var(--wine); }
.account-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.account-heading h1, .activation-heading h1 { margin: .25rem 0 .5rem; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.08; letter-spacing: -.04em; }
.verified-pill, .neutral-pill, .inline-verified { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; font-weight: 750; }
.verified-pill { padding: .5rem .75rem; color: #22603e; background: #e9f5ed; }
.neutral-pill { padding: .3rem .55rem; color: #745116; background: #fff2cf; font-size: .78rem; }
.inline-verified { margin-left: .35rem; padding: .18rem .45rem; color: #22603e; background: #e9f5ed; font-size: .72rem; }
.account-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.settings-card, .activation-card { padding: 1.5rem; background: rgba(255,253,250,.96); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-shadow); }
.settings-card--wide { grid-column: 1 / -1; }
.settings-heading { display: flex; align-items: center; gap: .85rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.settings-heading h2 { margin: 0; font-size: 1.16rem; }
.settings-heading p { margin: .15rem 0 0; color: var(--muted); font-size: .86rem; }
.settings-icon, .line-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; color: var(--wine); background: #f8e9ed; border-radius: 9px; font-size: .8rem; font-weight: 800; }
.line-icon { color: var(--teal); background: var(--teal-soft); font-size: 1.15rem; }
.identity-list { margin: 0 0 1rem; }
.identity-list > div { display: grid; grid-template-columns: minmax(130px, .72fr) 1.28fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #eee7e3; }
.identity-list dt { color: var(--muted); font-size: .86rem; }
.identity-list dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.secondary-button, .text-button { color: var(--wine); background: #fff; border: 1px solid #cdbdc3; border-radius: 7px; cursor: pointer; font-weight: 700; }
.secondary-button { width: 100%; padding: .65rem .8rem; }
.text-button { padding: .45rem .6rem; }
.setting-row { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eee7e3; }
.setting-row:last-child { border-bottom: 0; }
.setting-row p { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }
.access-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.access-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .85rem; background: var(--soft); border-radius: 8px; }
.access-row p { margin: .1rem 0 0; color: var(--muted); font-size: .82rem; }
.access-row a { font-size: .84rem; font-weight: 700; }
.mini-app { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--wine); border-radius: 8px; font-weight: 800; }
.mini-app--examens { background: var(--teal); }
.rights-note, .info-note { margin: 1rem 0 0; padding: .75rem .85rem; color: var(--muted); background: #f4efec; border-radius: 7px; font-size: .82rem; }
.back-to-portal { display: inline-flex; gap: .45rem; margin-top: 1.5rem; font-weight: 700; }

.activation-shell { width: min(960px, calc(100% - 2rem)); }
.activation-heading { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 1.25rem; margin-bottom: 2rem; }
.step-badge { display: grid; place-items: center; width: 62px; height: 62px; color: #fff; background: var(--wine); border-radius: 50%; font-size: 1.4rem; font-weight: 800; line-height: 1; }
.step-badge span { font-size: .58rem; font-weight: 600; }
.activation-form { display: grid; gap: 1rem; }
.identity-list--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.identity-list--compact > div { grid-template-columns: 1fr; gap: .12rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.field { display: grid; align-content: start; gap: .35rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 700; }
.field input { width: 100%; min-height: 46px; padding: .7rem .8rem; color: var(--ink); background: #fff; border: 1px solid #cfc4c8; border-radius: 7px; }
.field input[readonly] { color: var(--muted); background: #f5f1ee; }
.field small { color: var(--muted); font-size: .78rem; }
.password-meter { height: 5px; overflow: hidden; background: #eadfda; border-radius: 999px; }
.password-meter span { display: block; width: 0; height: 100%; background: var(--wine); transition: width .2s ease, background .2s ease; }
.consent { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1.2rem; padding: 1rem; background: var(--teal-soft); border-radius: 8px; }
.consent input { margin-top: .3rem; }
.activation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.activation-actions .primary-button { margin: 0; padding-inline: 1.2rem; }

@media (max-width: 760px) {
  .login-shell, .app-grid { grid-template-columns: 1fr; }
  .login-shell { gap: 2.5rem; padding: 3rem 0; }
  .login-intro h1 { font-size: 2.65rem; }
  .welcome, .section-heading { align-items: flex-start; flex-direction: column; }
  .account-heading { align-items: flex-start; flex-direction: column; }
  .account-layout, .access-list, .form-grid { grid-template-columns: 1fr; }
  .settings-card--wide, .field--wide { grid-column: 1; }
  .section-heading > p { text-align: left; }
  .welcome { margin-bottom: 3rem; }
  .account-name { display: none; }
  .demo-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .topbar { align-items: flex-start; }
  .brand small, .prototype-label, .logout-link { display: none; }
  .app-card { grid-template-columns: 1fr; }
  .app-button { grid-column: 1; }
  footer { align-items: flex-start; flex-direction: column; }
  .activation-heading { grid-template-columns: 1fr; }
  .identity-list > div { grid-template-columns: 1fr; gap: .15rem; }
  .access-row { grid-template-columns: auto 1fr; }
  .access-row a { grid-column: 2; }
  .activation-actions { align-items: stretch; flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-card, .primary-button, .app-button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .app-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(47,29,37,.12); }
}