/* ── Auth & compte — feuille dédiée ──────────────────────────
   Sert les pages login / register / mot de passe oublié / réinitialisation
   / compte. Ne dépend que de design-system.css (tokens). Volontairement
   indépendante de app.css et fiches.css : ces pages n'ont pas besoin de
   la galerie, des fiches d'analyse ni de leurs ~1250 lignes de CSS. */

body.auth-body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Écran scindé (login / register / mot de passe) ─────────────────── */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: var(--text);
  color: var(--bg);
  overflow: hidden;
}
.auth-aside::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto auto;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(224,168,74,.35), transparent 70%);
  pointer-events: none;
}
.auth-aside::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -15%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 70%, rgba(20,90,46,.28), transparent 70%);
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-d);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: inherit;
  text-decoration: none;
}
.auth-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-right: 9px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
}
.auth-home-brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 28px;
  color: var(--text);
  font: 700 18px var(--font-d);
  letter-spacing: -.3px;
  text-decoration: none;
}
.auth-home-brand .auth-logo-mark { width: 27px; height: 27px; border-radius: 6px; background: var(--text); color: var(--warn-border); font-size: 14px; }

.auth-aside-body { position: relative; z-index: 1; max-width: 420px; }
.auth-aside-eyebrow {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245,243,238,.55);
  margin-bottom: 14px;
}
.auth-aside-title {
  font-family: var(--font-d);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 24px;
}
.auth-aside-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-aside-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245,243,238,.82);
}
.auth-aside-points li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: #e0a84a;
}

.auth-aside-foot {
  position: relative;
  z-index: 1;
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245,243,238,.4);
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.auth-card { width: 100%; max-width: 380px; }
.auth-register-shell .auth-card { max-width: 560px; }

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.auth-back:hover { color: var(--text); }

.auth-card-head { margin-bottom: 28px; }
.auth-eyebrow {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.auth-title {
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.auth-subtitle { font-size: 14px; color: var(--text-2); line-height: 1.5; }

/* ── Alertes ──────────────────────────────────────────────────────── */
.auth-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}
.auth-alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.auth-alert-success { background: var(--go-bg); border-color: var(--go-border); color: var(--go); }

/* ── Formulaire ───────────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 18px; }

.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.auth-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: 14px var(--font);
  transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(22,21,15,.08);
}
.auth-password-control { position: relative; }
.auth-password-control input { padding-right: 44px; }
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 1px;
  display: grid;
  place-items: center;
  width: 42px;
  height: calc(100% - 2px);
  padding: 0;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible { color: var(--text); }
.auth-password-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; }
.auth-password-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.auth-password-icon-hide,
.auth-password-toggle[aria-pressed="true"] .auth-password-icon-show { display: none; }
.auth-password-toggle[aria-pressed="true"] .auth-password-icon-hide { display: block; }
.auth-field small { font-size: 12px; color: var(--muted); line-height: 1.5; }

.auth-register-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.auth-inline-link { font-size: 12px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.auth-inline-link:hover { color: var(--text); }

.auth-submit {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  border: 1px solid var(--text);
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.auth-submit:hover { background: var(--ink-hover, #2a2820); }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-submit-link { display: block; text-align: center; text-decoration: none; }

.auth-plugin-download {
  padding: 14px;
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.auth-plugin-download p { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.auth-plugin-download strong { color: var(--text); }
.auth-plugin-download a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #e0a84a;
  text-underline-offset: 3px;
}
.auth-plugin-download a:hover { color: var(--text-2); }

.auth-footer { margin-top: 24px; font-size: 13px; color: var(--text-2); text-align: center; }
.auth-footer a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.auth-footer a:hover { color: var(--text); }

/* ── État "succès" plein cadre (email envoyé, mot de passe changé) ──── */
.auth-result-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--go-bg);
  border: 1px solid var(--go-border);
  color: var(--go);
  font-size: 20px;
}

/* ── Compte (page connectée, hors écran scindé) ──────────────────────── */
.account-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.account-eyebrow {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.account-title { font-family: var(--font-d); font-size: 28px; font-weight: 700; }

/* ── Upgrade contextuel et préparation de souscription ─────────────── */
.upgrade-shell { width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 30px 0 72px; }
.upgrade-return { display: inline-flex; margin-bottom: 34px; }
.upgrade-hero { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.upgrade-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 17px; border: 1px solid var(--accent); border-radius: 50%; background: rgba(224,168,74,.12); color: var(--warn); font: 700 20px var(--font-d); }
.upgrade-hero h1,.subscription-card h1 { margin: 8px 0 13px; font: 700 clamp(30px,4vw,44px)/1.08 var(--font-d); letter-spacing: -.025em; }
.upgrade-hero>p,.subscription-card>p { color: var(--text-2); font-size: 14px; line-height: 1.65; }
.upgrade-context { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 9px 13px; border: 1px solid var(--go-border); border-radius: 30px; background: var(--go-bg); color: var(--go); font-size: 11px; }
.upgrade-pricing { padding-top: 28px; border-top: 1px solid var(--border); }
.upgrade-pricing-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.upgrade-pricing-head h2 { font: 600 23px var(--font-d); }
.upgrade-plan-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.upgrade-billing { display: flex; flex: 0 0 auto; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); }
.toggle-badge { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 10px; background: var(--go-bg); color: var(--go); font: 700 10px var(--font-m); }
.upgrade-billing legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.upgrade-billing input { position: absolute; opacity: 0; pointer-events: none; }
.upgrade-billing label { min-width: 88px; padding: 8px 12px; border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; cursor: pointer; }
.upgrade-billing input:focus-visible+label { outline: 2px solid var(--accent); outline-offset: 2px; }
.upgrade-billing input:checked+label { background: var(--text); color: var(--bg); box-shadow: 0 2px 8px rgba(22,21,15,.14); }
.upgrade-plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 16px; }
.upgrade-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 25px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.upgrade-plan.is-featured { border-color: var(--text); box-shadow: 0 14px 34px rgba(22,21,15,.1); }
.upgrade-plan-badge { position: absolute; top: -12px; right: 18px; padding: 5px 10px; border-radius: 20px; background: #e9673f; color: #fff; font: 700 9px var(--font-m); letter-spacing: .08em; text-transform: uppercase; }
.upgrade-plan h3 { font: 700 23px var(--font-d); }
.upgrade-plan-description { min-height: 38px; margin: 7px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.upgrade-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.upgrade-price strong { font: 700 31px var(--font-d); }
.upgrade-price span { color: var(--muted); font-size: 10px; }
.upgrade-price-annual,.upgrade-action-annual { display: none; }
.upgrade-pricing:has(#upgrade-annual:checked) .upgrade-price-monthly,.upgrade-pricing:has(#upgrade-annual:checked) .upgrade-action-monthly { display: none; }
.upgrade-pricing:has(#upgrade-annual:checked) .upgrade-price-annual { display: flex; }
.upgrade-pricing:has(#upgrade-annual:checked) .upgrade-action-annual { display: inline-flex; }
.upgrade-plan ul { flex: 1; margin: 0 0 22px; padding: 0; list-style: none; }
.upgrade-plan li { padding: 8px 0; border-top: 1px solid var(--border); color: var(--text-2); font-size: 11px; }
.upgrade-plan li::before { content: "✓"; margin-right: 8px; color: var(--go); font-weight: 700; }
.upgrade-plan-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border-radius: 5px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }
.upgrade-plan-action:hover { opacity: .88; }
.upgrade-reassurance { margin-top: 18px; color: var(--muted); font-size: 10px; text-align: center; }
.upgrade-no-plan { max-width: 620px; margin: 0 auto; padding: 25px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); text-align: center; }
.upgrade-no-plan h2 { margin-bottom: 8px; font: 600 20px var(--font-d); }
.upgrade-no-plan p { margin-bottom: 15px; color: var(--muted); font-size: 12px; }
.upgrade-no-plan a { color: var(--text); font-size: 12px; font-weight: 700; }
.quota-options { margin-bottom: 38px; }
.quota-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.quota-option-disabled { border-style: dashed; background: var(--surface2); }
.quota-option-disabled .upgrade-plan-badge { background: var(--muted); color: var(--surface); }
.upgrade-plan-action:disabled { background: var(--border-hi); color: var(--muted); cursor: not-allowed; opacity: 1; }
.subscription-shell { max-width: 720px; }
.subscription-card { padding: clamp(25px,5vw,44px); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 18px 48px rgba(22,21,15,.08); text-align: center; }
.subscription-card dl { margin: 28px 0; border: 1px solid var(--border); border-radius: 6px; text-align: left; }
.subscription-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.subscription-card dl div:last-child { border-bottom: 0; }
.subscription-card dt { color: var(--muted); font-size: 11px; }
.subscription-card dd { margin: 0; font-size: 12px; }
.subscription-coming { margin-bottom: 24px; padding: 17px; border: 1px solid var(--go-border); border-radius: 6px; background: var(--go-bg); color: var(--go); text-align: left; }
.subscription-coming strong { font-size: 12px; }
.subscription-coming p { margin-top: 6px; font-size: 11px; line-height: 1.55; }
.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--go-bg);
  border: 1px solid var(--go-border);
  color: var(--go);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.account-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.account-section { margin-bottom: 24px; }
.account-section-title {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.account-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.account-row:last-child { border-bottom: none; }
.account-row-label { color: var(--text-2); }
.account-row-value { font-weight: 600; color: var(--text); }

.account-profile-panel { padding: 0 18px; overflow: visible; }
.account-profile-field {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.account-profile-field label { display: block; margin-bottom: 4px; color: var(--text); font-size: 13px; font-weight: 600; }
.account-profile-field small { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.account-profile-field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); font: 13px var(--font);
}
.account-profile-field input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(22,21,15,.08); }
.account-save-status { padding: 12px 0; color: var(--muted); font-size: 11px; text-align: right; }
.account-save-status.is-success { color: var(--go); }
.account-save-status.is-error { color: var(--danger); }
.email-receivers-panel { overflow: hidden; }
.mailbox-overview { padding: 18px; border-bottom: 1px solid var(--border); }
.mailbox-overview div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mailbox-overview p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mailbox-status { padding: 4px 8px; border-radius: 20px; background: var(--surface2); color: var(--text-2); font-size: 10px; font-weight: 700; }
.mailbox-status-ready { background: var(--go-bg); color: var(--go); }
.mailbox-status-retrying,.mailbox-status-manual_action,.mailbox-status-failed { background: var(--danger-bg); color: var(--danger); }
.mailbox-notice,.mailbox-feedback { margin: 12px 18px 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 4px; background: rgba(224,168,74,.1); color: var(--text-2); font-size: 12px; }
.mailbox-feedback.is-success { border-color: var(--go-border); background: var(--go-bg); color: var(--go); }
.mailbox-feedback.is-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.email-receiver-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.email-receiver-copy { min-width: 0; }
.email-receiver-copy strong,.email-receiver-copy small { display: block; overflow-wrap: anywhere; }
.email-receiver-label { display: block; margin-bottom: 4px; color: var(--muted); font: 9px var(--font-m); letter-spacing: .08em; text-transform: uppercase; }
.email-receiver-copy strong { font-size: 13px; }
.email-receiver-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.receiver-switch { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 11px; cursor: pointer; }
.receiver-create { padding: 8px 11px; border: 1px solid var(--text); border-radius: 4px; background: var(--text); color: var(--bg); font: 600 11px var(--font); cursor: pointer; }
.email-receiver-controls { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.email-receiver-actions { display: flex; gap: 7px; }
.email-receiver-switches { display: grid; justify-items: end; gap: 7px; }
.receiver-switch-analysis { color: var(--warn); }
.auto-analysis-dialog { position: fixed; inset: 0; margin: auto; width: min(560px,calc(100% - 32px)); padding: 0; border: 1px solid var(--border-hi); border-radius: 7px; background: var(--surface); box-shadow: 0 24px 70px rgba(22,21,15,.3); }
.auto-analysis-dialog::backdrop { background: rgba(22,21,15,.55); }
.auto-analysis-dialog-content { padding: 26px; }
.auto-analysis-dialog h2 { margin: 7px 0 12px; font: 600 24px var(--font-d); }
.auto-analysis-dialog p,.auto-analysis-dialog li { color: var(--text-2); font-size: 12px; line-height: 1.6; }
.auto-analysis-dialog ul { margin: 14px 0; padding-left: 20px; }
.auto-analysis-plan-warning { padding: 12px; border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn)!important; }
.auto-analysis-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.receiver-action { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--border-hi); border-radius: 4px; background: var(--surface); color: var(--text-2); font: 600 11px var(--font); text-decoration: none; cursor: pointer; transition: .15s ease; }
.receiver-action:hover { border-color: var(--text); color: var(--text); }
.receiver-action-primary { border-color: var(--text); background: var(--text); color: var(--bg); }
.receiver-action-primary:hover { color: var(--bg); opacity: .86; }
.receiver-action.is-copied { border-color: var(--go-border); background: var(--go-bg); color: var(--go); }
.mailbox-shell { max-width: 980px; }
.mailbox-intro { max-width: 650px; margin-top: 9px; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.mailbox-refresh-form { flex: 0 0 auto; }
.mailbox-refresh-form button { cursor: pointer; font: inherit; }
.mailbox-tabs { display: flex; gap: 7px; margin-bottom: 14px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.mailbox-tab { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; min-width: 140px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); text-decoration: none; }
.mailbox-tab span { font-size: 12px; font-weight: 700; }
.mailbox-tab small { max-width: 190px; overflow: hidden; color: var(--muted); font: 9px var(--font-m); text-overflow: ellipsis; }
.mailbox-tab:hover { border-color: var(--border-hi); color: var(--text); }
.mailbox-tab.is-active { border-color: var(--text); background: var(--text); color: var(--bg); box-shadow: 0 6px 16px rgba(22,21,15,.13); }
.mailbox-tab.is-active small { color: rgba(245,243,238,.64); }
.mailbox-panel { overflow: hidden; }
.mailbox-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.mailbox-panel-heading div { min-width: 0; }
.mailbox-panel-heading span,.mailbox-panel-heading strong { display: block; }
.mailbox-panel-heading span { margin-bottom: 3px; color: var(--muted); font: 9px var(--font-m); letter-spacing: .08em; text-transform: uppercase; }
.mailbox-panel-heading strong { overflow-wrap: anywhere; font-size: 13px; }
.mailbox-panel-heading small { color: var(--muted); font-size: 10px; }
.mail-message { display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.mail-message:last-child { border-bottom: 0; }
.mail-message:hover { background: rgba(237,234,227,.55); }
.mail-message-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--surface2); color: var(--text-2); }
.mail-message-main { min-width: 0; }
.mail-message h2 { overflow: hidden; margin-bottom: 4px; font: 600 14px var(--font); text-overflow: ellipsis; white-space: nowrap; }
.mail-message-title { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mail-message-title:hover,.mail-message-title:focus { color: #8a6217; text-decoration: underline; }
.mail-message p,.mail-message small { display: block; overflow: hidden; color: var(--text-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mail-message small { margin-top: 3px; color: var(--muted); }
.mail-message time { color: var(--muted); font: 10px var(--font-m); white-space: nowrap; }
.mail-message-treated { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 10px; white-space: nowrap; }
.mail-message-treated input { width: 15px; height: 15px; margin: 0; accent-color: var(--go); }
.mail-message-process button { min-width: 72px; padding: 7px 11px; border: 1px solid var(--text); border-radius: 4px; background: var(--text); color: var(--bg); font: 600 10px var(--font); cursor: pointer; }
.mail-message-process button:hover { opacity: .86; }
.mail-message-actions { display: grid; justify-items: end; gap: 7px; }
.mail-message-delete { padding: 5px 8px; border: 1px solid #c98f86; border-radius: 3px; background: #fff7f5; color: #8b3025; font: 600 10px var(--font); cursor: pointer; }
.mail-message-dialog { position: fixed; inset: 0; margin: auto; width: min(820px,calc(100% - 32px)); height: min(720px,calc(100% - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--border-hi); border-radius: 7px; background: var(--surface); box-shadow: 0 24px 70px rgba(22,21,15,.3); }
.mail-message-dialog::backdrop { background: rgba(22,21,15,.55); }
.mail-message-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
.mail-message-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.mail-message-dialog header div { min-width: 0; }
.mail-message-dialog header span { color: var(--muted); font: 9px var(--font-m); letter-spacing: .08em; text-transform: uppercase; }
.mail-message-dialog header h2 { margin: 3px 0; overflow: visible; font: 600 17px var(--font-d); white-space: normal; }
.mail-message-dialog header p { overflow: hidden; color: var(--text-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-close { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--border-hi); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 21px; line-height: 1; cursor: pointer; }
.mail-message-dialog iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.mail-delete-dialog { position: fixed; inset: 0; margin: auto; width: min(460px,calc(100% - 32px)); padding: 24px; border: 1px solid var(--border-hi); border-radius: 7px; background: var(--surface); box-shadow: 0 24px 70px rgba(22,21,15,.3); }
.mail-delete-dialog::backdrop { background: rgba(22,21,15,.55); }
.mail-delete-dialog h2 { margin-bottom: 9px; font: 600 22px var(--font-d); }
.mail-delete-dialog p { color: var(--text-2); font-size: 12px; line-height: 1.6; }
.mail-wait-dialog { position: fixed; inset: 0; margin: auto; width: min(430px,calc(100% - 32px)); padding: 30px 28px; border: 1px solid var(--border-hi); border-radius: 7px; background: var(--surface); text-align: center; box-shadow: 0 24px 70px rgba(22,21,15,.3); }
.mail-wait-dialog::backdrop { background: rgba(22,21,15,.65); }
.mail-wait-dialog h2 { margin: 17px 0 8px; font: 600 22px var(--font-d); }
.mail-wait-dialog p { color: var(--text-2); font-size: 12px; line-height: 1.6; }
.mail-wait-spinner { width: 38px; height: 38px; margin: 0 auto; border: 3px solid var(--border); border-top-color: var(--text); border-radius: 50%; animation: mail-wait-spin .8s linear infinite; }
@keyframes mail-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mail-wait-spinner { animation-duration: 1.8s; } }
.mail-delete-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.mail-message-delete-confirm { padding: 9px 12px; }
.mailbox-empty { padding: 58px 24px; text-align: center; }
.mailbox-empty>span { display: grid; width: 48px; height: 48px; margin: 0 auto 14px; place-items: center; border-radius: 50%; background: var(--surface2); color: var(--text-2); font-size: 20px; }
.mailbox-empty h2 { margin-bottom: 7px; font: 600 17px var(--font-d); }
.mailbox-empty p { color: var(--muted); font-size: 12px; }
.mailbox-empty a { display: inline-block; margin-top: 14px; color: var(--text); font-size: 12px; font-weight: 700; }
.primary-mode-form { padding: 18px; }
.primary-mode-form label,.primary-mode-form small { display: block; }
.primary-mode-form label { margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.primary-mode-form select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font: 13px var(--font); }
.primary-mode-form small { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.profile-location-grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.profile-city-field { position: relative; }
.city-suggestions {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px;
  overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
  box-shadow: 0 12px 28px rgba(22,21,15,.12);
}
.city-suggestions:empty { display: none; }
.city-suggestions button { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: 13px var(--font); text-align: left; cursor: pointer; }
.city-suggestions button:hover, .city-suggestions button:focus { background: var(--surface2); outline: none; }
.money-input { position: relative; }
.money-input input { padding-right: 40px; }
.money-input span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--muted); font-weight: 600; }

/* ── Onboarding investisseur ─────────────────────────────────────── */
.onboarding-shell { min-height: 100vh; background: var(--bg); }
.onboarding-header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 32px; background: var(--text); }
.onboarding-progress-label { color: rgba(245,243,238,.65); font: 11px var(--font-m); letter-spacing: .04em; }
.onboarding-progress-label strong { color: var(--bg); }
.onboarding-card { width: min(680px, calc(100% - 40px)); margin: 64px auto; }
.onboarding-required { margin-bottom: 24px; padding: 14px 16px; border: 1px solid var(--accent, #e0a84a); border-radius: 5px; background: rgba(224,168,74,.1); color: var(--text-2); font-size: 13px; line-height: 1.55; }
.onboarding-required strong { color: var(--text); }
.onboarding-progress { height: 3px; margin-bottom: 38px; overflow: hidden; background: var(--border); }
.onboarding-progress span { display: block; height: 100%; background: #e0a84a; transition: width .25s ease; }
.onboarding-step { display: none; min-height: 330px; }
.onboarding-step.is-active { display: block; }
.onboarding-kicker { margin-bottom: 12px; color: var(--muted); font: 10px var(--font-m); letter-spacing: .14em; text-transform: uppercase; }
.onboarding-step h1 { max-width: 620px; margin-bottom: 18px; font-family: var(--font-d); font-size: clamp(27px, 4vw, 38px); line-height: 1.18; letter-spacing: -.02em; }
.onboarding-why { margin-bottom: 30px; padding-left: 16px; border-left: 2px solid #e0a84a; color: var(--text-2); font-size: 14px; line-height: 1.65; }
.onboarding-why strong { display: block; color: var(--text); }
.onboarding-step .auth-field input { background: var(--surface); }
.profile-money-field { max-width: 340px; }
.profile-hint { color: var(--muted); font-size: 12px; }
.profile-message { min-height: 22px; margin-bottom: 8px; font-size: 12px; }
.profile-message.is-error { color: var(--danger); }
.profile-message.is-success { color: var(--go); }
.onboarding-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 22px; border-top: 1px solid var(--border); }
.onboarding-actions .auth-submit { width: auto; min-width: 180px; margin: 0; padding-inline: 24px; }
.onboarding-back { padding: 11px 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-2); font-weight: 600; cursor: pointer; }
.onboarding-skip { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 22px; }
.onboarding-skip button { border: 0; background: none; color: var(--text-2); font: 12px var(--font); text-decoration: underline; cursor: pointer; }
.onboarding-skip small { color: var(--muted); font-size: 10px; }

.account-logout {
  display: inline-flex;
  margin-top: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.account-logout:hover { border-color: var(--danger-border); color: var(--danger); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { padding: 32px 20px; }
}

@media (min-width: 901px) and (min-height: 900px) {
  .auth-main { padding-block: 36px; }
  .auth-home-brand { margin-bottom: 20px; }
  .auth-card-head { margin-bottom: 20px; }
  .auth-form { gap: 14px; }
  .auth-plugin-download { margin-top: 16px; }
  .auth-footer { margin-top: 18px; }
}

@media (max-width: 480px) {
  .auth-register-grid { grid-template-columns: 1fr; }
  .account-shell { padding: 24px 16px 48px; }
  .account-header { flex-direction: column; align-items: flex-start; }
  .account-row { flex-wrap: wrap; }
  .account-profile-field { grid-template-columns: 1fr; gap: 10px; }
  .mailbox-overview div,.email-receiver-card { align-items: flex-start; }
  .email-receiver-card { grid-template-columns: 1fr; }
  .email-receiver-controls { width: 100%; align-items: stretch; }
  .email-receiver-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .receiver-action { justify-content: center; }
  .mail-message { grid-template-columns: 34px minmax(0,1fr) auto; }
  .mail-message-treated { grid-column: 2; }
  .mail-message-actions { grid-column: 3; grid-row: 1 / span 2; }
  .mailbox-panel-heading { align-items: flex-start; flex-direction: column; }
  .onboarding-header { padding: 0 20px; }
  .onboarding-card { margin: 36px auto; }
  .onboarding-step { min-height: 390px; }
  .onboarding-actions { justify-content: stretch; }
  .onboarding-actions .auth-submit { flex: 1; min-width: 0; }
}
.onboarding-email-card{display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:center;padding:22px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}
.onboarding-email-card>span,.onboarding-email-card>small{color:var(--muted);font-size:12px}.onboarding-email-card>strong{grid-column:1;font:600 16px var(--font-m);overflow-wrap:anywhere}.onboarding-email-card .onboarding-copy{grid-column:2;grid-row:1/3}.onboarding-email-card.is-pending{border-style:dashed}.onboarding-copy,.onboarding-inline-actions a,.onboarding-plugin-help{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);font-weight:600;text-decoration:none;cursor:pointer}
.portal-guide{display:grid;grid-template-columns:minmax(220px,.85fr) 1.15fr;gap:28px;align-items:center}.portal-illustration{padding:18px;border:1px solid var(--border);border-radius:6px;background:var(--surface);text-align:center}.portal-browser{display:flex;gap:5px;margin:-18px -18px 18px;padding:9px;background:var(--text)}.portal-browser i{width:7px;height:7px;border-radius:50%;background:#f5f3ee80}.portal-illustration>span{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;text-align:left}.portal-field{padding:10px;border:1px solid var(--border);background:#fff;color:var(--muted);font:11px var(--font-m);text-align:left}.portal-arrow{margin:9px;color:#e0a84a;font-size:20px}.portal-illustration>strong{font-size:12px}.portal-guide ol{display:grid;gap:16px;margin:0;padding:0;list-style:none;counter-reset:guide}.portal-guide li{position:relative;padding-left:40px;counter-increment:guide}.portal-guide li:before{content:counter(guide);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e0a84a;color:var(--text);font-weight:700}.portal-guide li strong,.portal-guide li span{display:block}.portal-guide li span{margin-top:4px;color:var(--text-2);font-size:12px;line-height:1.5}.onboarding-readonly{display:flex;gap:14px;margin-top:24px;padding:15px 17px;border-left:3px solid #e0a84a;background:rgba(224,168,74,.1)}.onboarding-readonly strong{flex:none}.onboarding-readonly span{color:var(--text-2);font-size:12px;line-height:1.5}.onboarding-inline-actions{display:flex;gap:10px;margin-top:18px}.extension-guide{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:20px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}.extension-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:var(--text);color:#e0a84a;font:700 24px var(--font-d)}.extension-guide strong,.extension-guide span{display:block}.extension-guide span{margin-top:4px;color:var(--text-2);font-size:12px}.extension-guide .auth-submit{width:auto;margin:0;text-decoration:none}.onboarding-plugin-help{margin-top:14px}
@media(max-width:680px){.portal-guide{grid-template-columns:1fr}.onboarding-email-card,.extension-guide{grid-template-columns:1fr}.onboarding-email-card .onboarding-copy{grid-column:1;grid-row:auto}.onboarding-inline-actions,.onboarding-readonly{flex-direction:column}.extension-guide .auth-submit{width:100%}}

/* Centre de messagerie unifié */
.account-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.gallery-return { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 12px; border:1px solid var(--border-hi); border-radius:4px; background:var(--surface); color:var(--text); font-size:11px; font-weight:700; text-decoration:none; white-space:nowrap; transition:border-color .15s,transform .15s; }
.gallery-return:hover { border-color:var(--text); transform:translateY(-1px); }
.mailbox-page-header { align-items:center; }
.mailbox-management { margin-bottom:34px; }
.mailbox-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:13px; }
.mailbox-section-heading h2 { margin-bottom:7px; font:600 21px var(--font-d); }
.mailbox-section-heading p { max-width:720px; color:var(--text-2); font-size:12px; line-height:1.55; }
.mailbox-section-heading .account-eyebrow { margin-bottom:6px; }
.mailbox-section-heading>.mailbox-status { flex:none; margin-top:18px; }
.primary-receiver-panel .email-receiver-card { border-bottom:1px solid var(--border); }
.receiver-benefit { max-width:520px; margin:0 0 7px; color:var(--text-2); font-size:11px; line-height:1.45; }
.secondary-value { display:flex; gap:11px; margin:0 0 12px; padding:12px 14px; border-left:3px solid #e0a84a; background:rgba(224,168,74,.1); color:var(--text-2); font-size:11px; line-height:1.5; }
.secondary-value>span { color:#8a6217; font-size:15px; }
.secondary-value strong { color:var(--text); }
.mailbox-inbox { padding-top:6px; }
.mailbox-inbox-heading { align-items:flex-end; margin-bottom:15px; }
.mailbox-inbox>.mailbox-feedback { margin:0 0 12px; }
.mailbox-inbox .mailbox-tabs { margin-top:0; }

@media (max-width:680px) {
  .upgrade-shell { width: min(100% - 28px,1120px); padding-top: 20px; }
  .upgrade-pricing-head { align-items: stretch; flex-direction: column; }
  .upgrade-plan-controls { flex-direction: column; }
  .upgrade-billing { align-self: stretch; }
  .upgrade-billing label { flex: 1; }
  .upgrade-plan-description { min-height: 0; }
  .quota-option-grid { grid-template-columns: 1fr; }
  .account-header-actions,.mailbox-section-heading,.mailbox-inbox-heading { width:100%; align-items:stretch; flex-direction:column; }
  .account-header-actions { justify-content:flex-start; }
  .gallery-return { width:100%; }
  .mailbox-section-heading>.mailbox-status { align-self:flex-start; margin-top:0; }
  .mailbox-inbox-heading .mailbox-refresh-form,.mailbox-inbox-heading .receiver-action { width:100%; }
}

/* Sélection du plan à l'inscription */
.auth-register-fields{display:flex;flex-direction:column;gap:18px;min-width:0;margin:0;padding:0;border:0}.auth-register-fields:disabled{opacity:.45}.auth-selected-plan{display:flex;flex-direction:column;gap:9px}.auth-selected-plan-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.auth-selected-plan-head h3{color:var(--text-2);font-size:12px}.auth-selected-plan-head button{border:0;background:transparent;color:var(--text);cursor:pointer;font:600 11px var(--font);text-decoration:underline;text-decoration-color:#e0a84a;text-underline-offset:3px}.auth-selected-plan-card{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:13px 15px;border:1px solid var(--text);border-radius:6px;background:var(--surface)}.auth-selected-plan-card strong{font-size:15px}.auth-selected-plan-card span{font-weight:700}.auth-selected-plan-card small{grid-column:1/-1;color:var(--muted)}.auth-selected-plan-card .price-annual,.auth-selected-plan-card.is-annual .price-monthly{display:none}.auth-selected-plan-card.is-annual .price-annual{display:inline}.auth-selected-plan>small{color:var(--muted);font-size:11px}.auth-no-plan{padding:16px;border:1px dashed var(--border);border-radius:6px;background:var(--surface);text-align:center}.auth-no-plan p{margin-bottom:11px;color:var(--muted);font-size:12px}.auth-plan-choose{padding:10px 16px;border:1px solid var(--text);border-radius:4px;background:var(--text);color:var(--bg);cursor:pointer;font-weight:700}
.auth-plan-dialog{width:min(1180px,calc(100% - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;border:0;border-radius:14px;background:var(--bg);box-shadow:0 28px 80px rgba(22,21,15,.3)}.auth-plan-dialog::backdrop{background:rgba(16,42,45,.72)}.auth-plan-dialog-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-bottom:1px solid var(--border);background:var(--bg)}.auth-plan-dialog-head span{color:var(--muted);font:600 9px var(--font-m);letter-spacing:.12em;text-transform:uppercase}.auth-plan-dialog-head h2{margin-top:5px;font:700 clamp(22px,3vw,32px) var(--font-d)}.auth-plan-dialog-close{display:grid;flex:none;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;font-size:25px}.auth-plan-controls{display:flex;justify-content:space-between;gap:20px;padding:22px 28px 8px}.auth-plan-controls fieldset{display:flex;padding:3px;border:1px solid var(--border);border-radius:30px;background:var(--surface)}.auth-plan-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.auth-plan-controls input{position:absolute;opacity:0;pointer-events:none}.auth-plan-controls label{min-width:105px;padding:8px 13px;border-radius:25px;color:var(--muted);cursor:pointer;font-size:11px;font-weight:700;text-align:center}.auth-plan-controls input:checked+label{background:var(--text);color:var(--bg)}.auth-plan-controls input:focus-visible+label{outline:2px solid #e0a84a;outline-offset:2px}.auth-plan-catalog{padding:18px 28px 30px}.auth-plan-catalog[hidden]{display:none}.auth-plan-catalog .pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.auth-plan-catalog .plan{position:relative;display:flex;flex-direction:column;min-width:0;padding:23px 20px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}.auth-plan-catalog .plan.is-featured{border:2px solid var(--text);box-shadow:0 14px 35px rgba(22,21,15,.1)}.auth-plan-catalog .plan-badge{position:absolute;top:-12px;left:17px;padding:5px 9px;border-radius:20px;background:#e9673f;color:#fff;font:700 8px var(--font-m);text-transform:uppercase}.auth-plan-catalog h3{font:700 19px var(--font-d)}.auth-plan-catalog .plan-price{margin:10px 0 5px;font:700 27px var(--font-d)}.auth-plan-catalog .plan-price small{color:var(--muted);font:500 10px var(--font)}.auth-plan-catalog .price-annual{display:none}.auth-plan-dialog.is-annual .price-monthly{display:none}.auth-plan-dialog.is-annual .price-annual{display:inline}.auth-plan-catalog .plan-desc{min-height:34px;margin:8px 0;color:var(--muted);font-size:11px}.auth-plan-catalog ul{flex:1;margin:0 0 17px;padding:0;list-style:none}.auth-plan-catalog li{padding:7px 0;border-top:1px solid var(--border);font-size:10px;line-height:1.45}.auth-plan-catalog li:before{content:'✓';margin-right:7px;color:var(--go)}.auth-plan-catalog .btn{width:100%;padding:10px;border:1px solid var(--text);border-radius:5px;background:var(--text);color:var(--bg);cursor:pointer;font-weight:700}body:has(.auth-plan-dialog[open]){overflow:hidden}
@media(max-width:760px){.auth-plan-controls{align-items:stretch;flex-direction:column}.auth-plan-controls fieldset{width:100%}.auth-plan-controls label{flex:1;min-width:0}.auth-plan-catalog .pricing-grid{grid-template-columns:1fr}.auth-plan-dialog-head,.auth-plan-controls,.auth-plan-catalog{padding-left:18px;padding-right:18px}}
.auth-selected-plan-card[hidden],.auth-no-plan[hidden],[data-change-plan][hidden]{display:none}