/* ============================================================
   MATERIAL 3 — Site Personnel Jean-Charles Lantheaume
   ============================================================ */

:root {
  /* Couleurs — thème clair (seed: #1565C0 blue) */
  --md-primary:                #1A5CA8;
  --md-on-primary:             #FFFFFF;
  --md-primary-container:      #D6E3FF;
  --md-on-primary-container:   #001B3E;
  --md-secondary:              #565E71;
  --md-on-secondary:           #FFFFFF;
  --md-secondary-container:    #DAE2F9;
  --md-on-secondary-container: #131C2C;
  --md-tertiary:               #715573;
  --md-on-tertiary:            #FFFFFF;
  --md-tertiary-container:     #FBD7FC;
  --md-on-tertiary-container:  #29132C;
  --md-error:                  #BA1A1A;
  --md-on-error:               #FFFFFF;
  --md-error-container:        #FFDAD6;
  --md-on-error-container:     #410002;
  --md-background:             #FAFCFF;
  --md-on-background:          #1A1C1E;
  --md-surface:                #FAFCFF;
  --md-on-surface:             #1A1C1E;
  --md-surface-variant:        #E1E2EC;
  --md-on-surface-variant:     #44474F;
  --md-outline:                #74777F;
  --md-outline-variant:        #C4C6D0;
  --md-surface-1:              #EEF2FB;
  --md-surface-2:              #E8EEFA;

  /* Typographie */
  --md-font: 'Roboto', sans-serif;

  /* Formes (border-radius) */
  --shape-xs:   4px;
  --shape-sm:   8px;
  --shape-md:   12px;
  --shape-lg:   16px;
  --shape-xl:   28px;
  --shape-full: 9999px;

  /* Élévations */
  --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);

  /* Layout */
  --app-bar-height:  64px;
  --drawer-width:    280px;
  --page-padding:    24px;
  --content-max:     1200px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--md-font); background: var(--md-background); color: var(--md-on-background); min-height: 100vh; overflow-x: hidden; }
a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; user-select: none; vertical-align: middle; }

/* ---- Typographie ---- */
.display-large  { font-size: 57px; font-weight: 400; line-height: 1.12; letter-spacing: -.25px; }
.display-medium { font-size: 45px; font-weight: 400; line-height: 1.16; }
.display-small  { font-size: 36px; font-weight: 400; line-height: 1.22; }
.headline-large  { font-size: 32px; font-weight: 400; line-height: 1.25; }
.headline-medium { font-size: 28px; font-weight: 400; line-height: 1.29; }
.headline-small  { font-size: 24px; font-weight: 400; line-height: 1.33; }
.title-large   { font-size: 22px; font-weight: 400; line-height: 1.27; }
.title-medium  { font-size: 16px; font-weight: 500; line-height: 1.5;  letter-spacing: .15px; }
.title-small   { font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: .1px; }
.body-large    { font-size: 16px; font-weight: 400; line-height: 1.5;  letter-spacing: .5px; }
.body-medium   { font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: .25px; }
.body-small    { font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: .4px; }
.label-large   { font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: .1px; }

/* ---- Top App Bar ---- */
.top-app-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--app-bar-height);
  background: var(--md-surface);
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 4px;
  z-index: 100;
  box-shadow: var(--elev-2);
  transition: box-shadow 200ms;
}
.app-title {
  flex: 1; font-size: 22px; font-weight: 500;
  color: var(--md-on-surface); padding-left: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-bar-actions { display: flex; align-items: center; }
.lang-switch {
  font-size: 13px; font-weight: 700;
  color: var(--md-on-surface-variant);
  padding: 6px 14px; border-radius: var(--shape-full);
  letter-spacing: .5px; transition: background 150ms;
}
.lang-switch:hover { background: var(--md-surface-variant); text-decoration: none; }

/* ---- Icon Button ---- */
.icon-button {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 150ms; flex-shrink: 0;
}
.icon-button:hover  { background: rgba(0,0,0,.08); }
.icon-button:active { background: rgba(0,0,0,.12); }

/* ---- Navigation Drawer ---- */
.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 250ms;
}
.nav-scrim.open { opacity: 1; pointer-events: all; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--drawer-width);
  background: var(--md-surface);
  z-index: 300;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(.2,0,0,1);
  box-shadow: var(--elev-3);
  border-radius: var(--shape-xl) 0 0 var(--shape-xl);
  overflow: hidden;
}
.nav-drawer.open { transform: translateX(0); }

.nav-header {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 20px 20px;
  background: var(--md-primary-container);
  flex-shrink: 0;
}
.nav-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.nav-user-info { display: flex; flex-direction: column; min-width: 0; }
.nav-user-name  { font-size: 16px; font-weight: 500; color: var(--md-on-primary-container); }
.nav-user-email { font-size: 12px; color: var(--md-on-primary-container); opacity: .8; }

.nav-list { list-style: none; padding: 12px 0; flex: 1; overflow-y: auto; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  color: var(--md-on-surface-variant);
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  border-radius: var(--shape-full) 0 0 var(--shape-full);
  margin-left: 12px;
  transition: background 150ms, color 150ms;
  cursor: pointer; width: 100%; text-align: left; border: none; background: transparent; font-family: var(--md-font);
}
.nav-item:hover { background: rgba(0,0,0,.05); color: var(--md-on-surface); text-decoration: none; }
.nav-item.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.nav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* Submenu */
.nav-chevron { margin-left: auto; font-size: 20px; transition: transform 250ms; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-submenu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
.nav-group.open .nav-submenu { max-height: 300px; }
.nav-subitem { padding-left: 52px; font-size: 13px; }

/* Modules à venir */
.nav-item-soon { opacity: .45; cursor: default; pointer-events: none; }
.nav-badge-soon {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .5px;
  background: var(--md-surface-variant); color: var(--md-on-surface-variant);
  padding: 2px 6px; border-radius: var(--shape-full);
}

.nav-footer { padding: 8px 0 24px; border-top: 1px solid var(--md-outline-variant); flex-shrink: 0; }
.nav-item-logout { color: var(--md-error); }
.nav-item-logout:hover { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ---- Main Content ---- */
.main-content { padding-top: calc(var(--app-bar-height) + 24px); min-height: 100vh; }
.page-container { max-width: var(--content-max); margin: 0 auto; padding: var(--page-padding); }
.page-header { margin-bottom: 32px; }
.page-header h2 { color: var(--md-on-background); }
.page-header p  { color: var(--md-on-surface-variant); margin-top: 8px; }

/* ---- Cards ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.card {
  background: var(--md-surface); border-radius: var(--shape-lg);
  padding: 24px; position: relative;
}
.card-elevated { box-shadow: var(--elev-1); transition: box-shadow 200ms, transform 200ms; }
.card-elevated:hover { box-shadow: var(--elev-2); }

.card-link {
  display: flex; align-items: center; gap: 16px;
  color: var(--md-on-surface); cursor: pointer;
}
.card-link:hover { background: var(--md-surface-1); transform: translateY(-2px); text-decoration: none; }

.card-icon {
  width: 56px; height: 56px; border-radius: var(--shape-lg);
  background: var(--md-primary-container);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-icon .material-symbols-outlined { font-size: 28px; color: var(--md-primary); }
.card-content { flex: 1; }
.card-content h3 { color: var(--md-on-surface); margin-bottom: 4px; }
.card-content p  { color: var(--md-on-surface-variant); }
.card-arrow { color: var(--md-on-surface-variant); flex-shrink: 0; }

/* ---- Hub Retraite ---- */
.retraite-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.retraite-hub-card { padding: 20px 24px; }

.coming-soon-card {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 56px; gap: 16px; color: var(--md-on-surface-variant);
}
.coming-soon-icon { font-size: 64px; color: var(--md-outline); }

/* ---- Bouton rempli ---- */
.btn-filled {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--shape-full); border: none;
  background: var(--md-primary); color: var(--md-on-primary);
  font-family: var(--md-font); font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; transition: box-shadow 200ms, opacity 150ms; text-decoration: none;
}
.btn-filled:hover  { box-shadow: var(--elev-1); opacity: .92; color: var(--md-on-primary); text-decoration: none; }
.btn-filled:active { box-shadow: none; opacity: .88; }
.btn-large { padding: 14px 32px; font-size: 15px; width: 100%; margin-top: 8px; }
.btn-tonal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--shape-full); border: none;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-family: var(--md-font); font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; transition: box-shadow 200ms, opacity 150ms; text-decoration: none;
}
.btn-tonal:hover  { box-shadow: var(--elev-1); opacity: .92; text-decoration: none; }
.btn-tonal:active { box-shadow: none; opacity: .88; }
.btn-tonal:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Champs de saisie ---- */
.text-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.text-field label { font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); }
.text-field-inner {
  display: flex; align-items: center;
  background: var(--md-surface-variant);
  border-radius: var(--shape-sm) var(--shape-sm) 0 0;
  border-bottom: 2px solid var(--md-outline);
  transition: border-color 200ms;
}
.text-field-inner:focus-within { border-color: var(--md-primary); }
.field-icon { color: var(--md-on-surface-variant); padding: 12px 12px 12px 16px; font-size: 20px; flex-shrink: 0; }
.text-field input {
  flex: 1; padding: 14px 16px 14px 0; border: none; background: transparent;
  font-family: var(--md-font); font-size: 16px; color: var(--md-on-surface); outline: none;
}
.text-field input::placeholder { color: var(--md-on-surface-variant); opacity: .6; }
.pw-toggle {
  padding: 12px; border: none; background: transparent;
  color: var(--md-on-surface-variant); cursor: pointer;
  border-radius: 50%; display: flex; align-items: center;
  transition: background 150ms;
}
.pw-toggle:hover { background: rgba(0,0,0,.06); }

/* ---- Page Connexion ---- */
body.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--md-background);
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
  background: var(--md-surface); border-radius: var(--shape-xl);
  padding: 40px 32px; box-shadow: var(--elev-2); text-align: center;
}
.login-logo { margin-bottom: 20px; }
.login-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; margin: 0 auto; box-shadow: var(--elev-1);
}
.login-card h1    { font-size: 24px; color: var(--md-on-surface); margin-bottom: 4px; }
.login-subtitle   { color: var(--md-on-surface-variant); margin-bottom: 28px; }
.login-form       { text-align: left; }

.error-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--md-error-container);
  color: var(--md-on-error-container); border-radius: var(--shape-sm);
  font-size: 14px; margin-bottom: 16px; text-align: left;
}
.error-banner .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

.login-lang {
  margin-top: 24px; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  font-size: 12px; color: var(--md-on-surface-variant);
}
.login-lang a       { color: var(--md-on-surface-variant); font-weight: 500; }
.login-lang a.active { color: var(--md-primary); font-weight: 700; }
.login-lang a:hover  { color: var(--md-primary); text-decoration: none; }

/* ---- Passkey divider (page login) ---- */
.passkey-divider-section { margin-top: 16px; }
.passkey-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; color: var(--md-on-surface-variant); font-size: 13px;
}
.passkey-divider::before,
.passkey-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--md-outline-variant);
}

/* ---- Passkeys page ---- */
.passkeys-container { max-width: 560px; }
.passkeys-card {
  padding: 24px; margin-bottom: 24px;
}
.passkey-name-field { margin: 16px 0; }
.passkeys-list { display: flex; flex-direction: column; gap: 8px; }
.passkeys-empty { color: var(--md-on-surface-variant); padding: 16px 0; }
.passkey-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--shape-md);
  background: var(--md-surface-1); border: 1px solid var(--md-outline-variant);
}
.passkey-icon { color: var(--md-primary); font-size: 28px; flex-shrink: 0; }
.passkey-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.passkey-info .body-small { color: var(--md-on-surface-variant); }
.delete-passkey { color: var(--md-error); }

.success-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #C8E6C9; /* green container approx */
  color: #1B5E20; border-radius: var(--shape-sm);
  font-size: 14px; margin-bottom: 16px;
}
.success-banner .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

/* ---- Page Retraite ---- */
.retraite-page { max-width: 1000px; }
.retraite-synthese { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); margin-bottom: 24px; }
.stat-card { text-align: center; padding: 20px 16px; }
.stat-icon { font-size: 30px; margin-bottom: 8px; }
.stat-value { margin-bottom: 4px; line-height: 1.1; }
.stat-denom { font-size: 0.55em; color: var(--md-on-surface-variant); font-weight: 400; }
.stat-label { font-weight: 500; margin-bottom: 4px; }
.stat-note { color: var(--md-on-surface-variant); line-height: 1.5; }
.stat-card-success { border: 2px solid #2e7d32; }
.stat-card-success .stat-value { color: #2e7d32; }

/* ---- Graphiques ---- */
.charts-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 24px; }
.chart-card { padding: 20px 20px 16px; }
.chart-card-wide { }
.chart-title { margin-bottom: 2px; }
.chart-subtitle { color: var(--md-on-surface-variant); margin-bottom: 16px; }
.chart-container { position: relative; }
.chart-container-bar  { height: 280px; }
.chart-container-donut { height: 200px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--md-on-surface-variant); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ---- Progress card ---- */
.progress-card { padding: 20px 24px; margin-bottom: 24px; }
.progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.progress-header .title-large { margin: 0; }
.progress-subtitle { font-size: 13px; font-weight: 400; color: var(--md-on-surface-variant); }
.progress-badge { background: var(--md-surface-variant); color: var(--md-on-surface-variant); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: var(--shape-full); white-space: nowrap; }
.progress-badge-ok { background: #e8f5e9; color: #2e7d32; }
.progress-bar-track { height: 10px; background: var(--md-surface-variant); border-radius: var(--shape-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--md-primary); transition: width 1s ease; }
.progress-stacked { display: flex; }
.progress-fill-fr { background: var(--md-primary); border-radius: 4px 0 0 4px; }
.progress-fill-es { background: #E53935; border-radius: 0 4px 4px 0; }
.progress-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.progress-note { color: var(--md-on-surface-variant); margin-top: 8px; }
.progress-note-ok { color: #2e7d32; font-weight: 500; }

/* ── Simulateur interactif ── */
.simulateur-section { margin-bottom: 40px; }
.simulateur-header { margin-bottom: 16px; }
.simulateur-note { color: var(--md-on-surface-variant); font-size: 13px; }

.simulateur-card {
    padding: 28px 24px;
    transition: border-color .3s, background .3s;
    border: 2px solid var(--md-outline-variant);
}
.simulateur-card.sim-taux-plein {
    border-color: #2e7d32;
    background: linear-gradient(135deg, #f9fbe7 0%, #fff 60%);
}

/* Slider */
.sim-slider-zone { margin-bottom: 28px; }
.sim-slider-labels {
    display: flex; justify-content: space-between;
    margin-bottom: 8px;
}
.sim-slider-tick {
    font-size: 12px; color: var(--md-on-surface-variant);
    cursor: pointer; padding: 2px 4px; border-radius: 4px;
    transition: color .15s, background .15s; user-select: none;
    min-width: 28px; text-align: center;
}
.sim-slider-tick:hover { color: var(--md-primary); background: var(--md-primary-container); }
.sim-slider-tick.active { color: var(--md-primary); font-weight: 700; }

.sim-slider-track {
    position: relative; height: 6px;
    background: var(--md-surface-variant); border-radius: 3px;
    cursor: pointer; margin: 0 14px;
}
.sim-slider-fill {
    position: absolute; left: 0; top: 0; height: 100%;
    background: var(--md-primary); border-radius: 3px;
    pointer-events: none; transition: width .1s;
}
.sim-slider-thumb {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 28px; height: 28px; background: var(--md-primary);
    border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: grab; transition: left .1s, transform .1s;
    outline: none;
}
.sim-slider-thumb:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); }
.sim-slider-thumb:focus-visible { box-shadow: 0 0 0 4px rgba(103,80,164,.3); }
.sim-thumb-label {
    font-size: 11px; font-weight: 700; color: #fff; pointer-events: none;
}
.sim-slider-bounds {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--md-on-surface-variant); margin-top: 6px; padding: 0 14px;
}

/* En-tête résultat */
.sim-result-header {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.sim-age-display {
    display: flex; align-items: baseline; gap: 6px;
}
.sim-age-valeur {
    font-size: 56px; font-weight: 700; line-height: 1;
    color: var(--md-primary); transition: color .3s;
}
.sim-taux-plein .sim-age-valeur { color: #2e7d32; }
.sim-age-label { font-size: 20px; color: var(--md-on-surface-variant); }
.sim-depart-info { display: flex; flex-direction: column; gap: 4px; }
.sim-date { font-size: 14px; color: var(--md-on-surface-variant); }
.sim-restant { font-size: 13px; color: var(--md-on-surface-variant); font-style: italic; }
.sim-badge { font-size: 13px; font-weight: 700; color: var(--md-on-surface-variant); }
.sim-badge-ok { color: #2e7d32; background: #dcedc8; padding: 2px 10px; border-radius: 12px; }

/* Montants brut/net */
.sim-montants {
    display: flex; align-items: center; gap: 16px;
    background: rgba(0,0,0,.04); border-radius: var(--shape-md);
    padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.sim-taux-plein .sim-montants { background: rgba(46,125,50,.07); }
.sim-montant-bloc { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 120px; }
.sim-montant-val {
    font-size: 28px; font-weight: 700; line-height: 1.1;
    color: var(--md-on-surface); transition: all .2s;
}
.sim-montant-net-bloc .sim-montant-val { color: #2e7d32; }
.sim-montant-lbl { font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px; }
.sim-montant-sub { font-size: 11px; color: var(--md-on-surface-variant); }
.sim-montant-fleche { font-size: 24px; color: var(--md-on-surface-variant); flex-shrink: 0; }

/* Détail par pays */
.sim-pays-grid {
    display: flex; align-items: stretch; gap: 8px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.sim-pays-card {
    flex: 1; min-width: 100px;
    background: var(--md-surface-1); border-radius: var(--shape-md);
    padding: 14px 12px; display: flex; flex-direction: column;
    align-items: center; gap: 4px; text-align: center;
    border: 1px solid var(--md-outline-variant);
}
.sim-pays-plus {
    flex: 0; min-width: unset; padding: 0 4px; font-size: 22px;
    color: var(--md-on-surface-variant); background: none; border: none;
    align-self: center;
}
.sim-pays-fr { border-color: #1976D2; }
.sim-pays-es { border-color: #E53935; }
.sim-pays-comp { border-color: #FF8F00; }
.sim-pays-flag { font-size: 22px; }
.sim-pays-nom { font-size: 12px; color: var(--md-on-surface-variant); }
.sim-pays-brut { font-size: 16px; font-weight: 600; }
.sim-pays-arrow { font-size: 11px; color: var(--md-on-surface-variant); }
.sim-pays-net { font-size: 14px; font-weight: 700; color: #2e7d32; }

/* Méta repliable */
.sim-meta-toggle {
    font-size: 12px; color: var(--md-on-surface-variant); cursor: pointer;
    border-top: 1px dashed var(--md-outline-variant); padding-top: 10px;
}
.sim-meta-toggle summary { list-style: none; user-select: none; font-weight: 500; }
.sim-meta-toggle summary::after { content: ' ▸'; }
.sim-meta-toggle[open] summary::after { content: ' ▾'; }
.sim-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin-top: 10px;
}
.sim-meta-grid > div {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--md-surface-variant); border-radius: 6px; padding: 8px 10px;
}
.sim-meta-grid span { font-size: 11px; color: var(--md-on-surface-variant); }
.sim-meta-grid strong { font-size: 13px; color: var(--md-on-surface); }

/* ---- Scénarios ---- */
.scenarios-header { margin: 32px 0 6px; }
.scenarios-note { color: var(--md-on-surface-variant); margin-bottom: 16px; font-size: 13px; }
.scenarios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 32px; }

.scenario-card {
    padding: 18px 18px 14px; position: relative;
    border: 2px solid var(--md-outline-variant);
    display: flex; flex-direction: column; gap: 12px;
}
.scenario-taux-plein { border-color: var(--md-primary); }
.scenario-recommande { border-color: #2e7d32; background: #f9fbe7; }

.scenario-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    color: var(--md-primary); background: var(--md-primary-container);
    padding: 3px 10px; border-radius: var(--shape-full); align-self: flex-start;
}
.scenario-badge-recommande { color: #2e7d32; background: #dcedc8; }

/* En-tête : âge + date */
.scenario-top { display: flex; justify-content: space-between; align-items: flex-start; }
.scenario-age { font-size: 32px; font-weight: 700; color: var(--md-primary); line-height: 1; }
.scenario-recommande .scenario-age { color: #2e7d32; }
.scenario-date-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 4px; }
.scenario-date { font-size: 13px; color: var(--md-on-surface-variant); }
.scenario-restant { font-size: 12px; color: var(--md-on-surface-variant); font-style: italic; }

/* Brut / Net côte à côte */
.scenario-montants {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,.04); border-radius: var(--shape-md); padding: 12px 14px;
}
.scenario-recommande .scenario-montants { background: rgba(46,125,50,.07); }
.scenario-montant-bloc { display: flex; flex-direction: column; align-items: center; flex: 1; }
.scenario-montant-valeur { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--md-on-surface); }
.scenario-montant-net .scenario-montant-valeur { color: #2e7d32; }
.scenario-montant-label { font-size: 11px; color: var(--md-on-surface-variant); margin-top: 2px; }
.scenario-montant-sep { font-size: 18px; color: var(--md-on-surface-variant); flex-shrink: 0; }
.scenario-comp-note { font-size: 11px; color: var(--md-on-surface-variant); text-align: center; margin-top: -6px; }

/* Détail FR / ES */
.scenario-pays-detail {
    border-top: 1px solid var(--md-outline-variant);
    padding-top: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.scenario-pays-ligne {
    display: grid;
    grid-template-columns: 22px 1fr auto 16px auto;
    align-items: center; gap: 4px;
    font-size: 13px;
}
.scenario-pays-flag { font-size: 16px; }
.scenario-pays-nom { color: var(--md-on-surface-variant); }
.scenario-pays-brut { font-weight: 600; text-align: right; }
.scenario-pays-arrow { color: var(--md-on-surface-variant); text-align: center; font-size: 11px; }
.scenario-pays-net { color: #2e7d32; font-weight: 700; white-space: nowrap; }

/* Détails calcul (repliables) */
.scenario-details-toggle {
    font-size: 12px; color: var(--md-on-surface-variant); cursor: pointer;
    border-top: 1px dashed var(--md-outline-variant); padding-top: 8px; margin-top: -4px;
}
.scenario-details-toggle summary { list-style: none; user-select: none; }
.scenario-details-toggle summary::after { content: ' ▸'; }
.scenario-details-toggle[open] summary::after { content: ' ▾'; }
.scenario-meta { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.scenario-ligne-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--md-on-surface-variant); }
.scenario-ligne-meta strong { color: var(--md-on-surface); }

/* ---- Complémentaires ---- */
.complementaire-card { padding: 24px; margin-bottom: 32px; }
.complementaire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.complementaire-item { background: var(--md-surface-1); border-radius: var(--shape-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.complementaire-total { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant); font-size: 14px; color: var(--md-on-surface-variant); }
.complementaire-total strong { color: var(--md-on-surface); font-size: 16px; }

/* ---- Timeline ---- */
.timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; padding-left: 20px; border-left: 2px solid var(--md-outline-variant); }
.timeline-item { display: flex; gap: 16px; padding: 8px 0; position: relative; }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; margin-left: -27px; border: 2px solid var(--md-surface); }
.timeline-content { display: flex; flex-direction: column; gap: 2px; }
.timeline-dates { color: var(--md-on-surface-variant); }
.timeline-regime { color: var(--md-on-surface-variant); }
.timeline-pluriactivite { color: #F57C00; font-weight: 500; }

/* ---- Panneau de Correction ---- */
.correction-section { margin-bottom: 40px; }
.correction-section .title-large { margin-bottom: 16px; }
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.correction-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: var(--md-surface); border-radius: var(--shape-md);
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.correction-table thead th {
    background: var(--md-surface-variant); color: var(--md-on-surface-variant);
    padding: 10px 12px; text-align: left; font-weight: 500; white-space: nowrap;
}
.correction-table tbody tr:nth-child(even) { background: rgba(0,0,0,.02); }
.correction-table tbody td { padding: 6px 8px; vertical-align: middle; }
.correction-input, .correction-select, .correction-input-date,
.correction-input-year, .correction-input-trim, .correction-input-num {
    border: 1px solid var(--md-outline); border-radius: 4px;
    padding: 4px 8px; font-size: 13px; background: var(--md-surface);
    color: var(--md-on-surface); transition: border-color .2s;
}
.correction-input { width: 140px; }
.correction-notes { width: 200px; }
.correction-input-date { width: 130px; }
.correction-input-year { width: 68px; }
.correction-input-trim { width: 50px; }
.correction-input-num  { width: 110px; }
.correction-select { min-width: 90px; }
.correction-input:focus, .correction-select:focus,
.correction-input-date:focus, .correction-input-num:focus {
    outline: none; border-color: var(--md-primary);
}
.correction-btn {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--md-primary); border-radius: 50%; display: flex; align-items: center;
    transition: background .2s;
}
.correction-btn:hover { background: rgba(var(--md-primary-rgb, 103,80,164),.12); }
.audit-table .audit-old { color: #c62828; }
.audit-table .audit-new { color: #2e7d32; }
.success-banner {
    display: flex; align-items: center; gap: 12px;
    background: #e8f5e9; color: #2e7d32;
    border-radius: var(--shape-md); padding: 14px 20px; margin-bottom: 24px;
}

/* ---- Aide contextuelle ---- */
.help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--md-surface-variant); color: var(--md-on-surface-variant);
    border: 1px solid var(--md-outline-variant); cursor: pointer;
    font-size: 10px; font-weight: 700; line-height: 1;
    vertical-align: middle; margin-left: 4px;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.help-btn:hover, .help-btn:focus-visible {
    background: var(--md-primary); color: #fff; border-color: var(--md-primary); outline: none;
}
.aide-dialog {
    border: none; border-radius: var(--shape-lg); padding: 0;
    max-width: 500px; width: calc(100% - 48px);
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
    background: var(--md-surface); color: var(--md-on-surface);
}
.aide-dialog::backdrop { background: rgba(0,0,0,.45); }
.aide-dialog-inner { padding: 24px; }
.aide-dialog-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.aide-dialog-title { font-size: 17px; font-weight: 600; color: var(--md-on-surface); margin: 0; }
.aide-dialog-close {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--md-on-surface-variant); border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; transition: background .15s;
}
.aide-dialog-close:hover { background: var(--md-surface-variant); }
.aide-dialog-body {
    font-size: 14px; line-height: 1.65; color: var(--md-on-surface-variant);
}
.aide-dialog-body strong { color: var(--md-on-surface); }
.aide-dialog-body p { margin: 0 0 10px; }
.aide-dialog-body p:last-child { margin-bottom: 0; }
.aide-formule {
    background: var(--md-surface-variant); border-radius: var(--shape-sm);
    padding: 8px 12px; margin: 8px 0; font-family: monospace; font-size: 12.5px;
    color: var(--md-on-surface); display: block; white-space: pre-wrap;
    border-left: 3px solid var(--md-primary);
}
.aide-dialog-footer {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant);
    display: flex; justify-content: flex-end;
}
.aide-dialog-footer a {
    font-size: 13px; color: var(--md-primary); text-decoration: none; font-weight: 500;
}
.aide-dialog-footer a:hover { text-decoration: underline; }

/* ---- Page Aide ---- */
.aide-page .page-header { margin-bottom: 8px; }
.aide-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.aide-nav a {
    background: var(--md-surface-1); border: 1px solid var(--md-outline-variant);
    border-radius: 20px; padding: 6px 14px; font-size: 13px;
    color: var(--md-on-surface-variant); text-decoration: none; transition: background .15s;
}
.aide-nav a:hover { background: var(--md-surface-variant); color: var(--md-on-surface); }
.aide-section { margin-bottom: 40px; scroll-margin-top: 20px; }
.aide-section-anchor { font-size: 20px; font-weight: 600; color: var(--md-on-surface); margin: 0 0 4px; }
.aide-section-subtitle { font-size: 13px; color: var(--md-on-surface-variant); margin: 0 0 16px; }
.aide-section-divider { border: none; border-top: 2px solid var(--md-primary); margin: 0 0 16px; width: 40px; }
.aide-card {
    background: var(--md-surface); border-radius: var(--shape-md);
    border: 1px solid var(--md-outline-variant); padding: 20px; margin-bottom: 16px;
}
.aide-card-title { font-size: 15px; font-weight: 600; color: var(--md-on-surface); margin: 0 0 10px; }
.aide-card-body { font-size: 14px; line-height: 1.65; color: var(--md-on-surface-variant); }
.aide-card-body strong { color: var(--md-on-surface); }
.aide-card-body p { margin: 0 0 10px; }
.aide-card-body p:last-child { margin-bottom: 0; }
.aide-formule-block {
    background: var(--md-surface-variant); border-radius: var(--shape-sm);
    padding: 10px 14px; margin: 10px 0; font-family: monospace; font-size: 13px;
    color: var(--md-on-surface); white-space: pre-wrap; border-left: 3px solid var(--md-primary);
}
.aide-example {
    background: #e8f5e9; border-radius: var(--shape-sm);
    padding: 10px 14px; margin: 10px 0; font-size: 13px; color: #1b5e20;
    border-left: 3px solid #43A047;
}
.aide-warning {
    background: #fff8e1; border-radius: var(--shape-sm);
    padding: 10px 14px; margin: 10px 0; font-size: 13px; color: #e65100;
    border-left: 3px solid #FF8F00;
}
.aide-deux-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .aide-deux-cols { grid-template-columns: 1fr; } }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  :root { --page-padding: 16px; }
  .display-small { font-size: 28px; }
  .login-card { padding: 32px 20px; border-radius: var(--shape-lg); }
  .coming-soon-card { padding: 40px 24px; }
  .charts-grid { grid-template-columns: 1fr; }
  .chart-container-bar { height: 240px; }
  .chart-container-donut { height: 180px; }
  .sim-age-valeur { font-size: 42px; }
  .sim-montant-val { font-size: 22px; }
  .sim-montants { gap: 10px; padding: 12px 14px; }
  .sim-pays-grid { gap: 4px; }
  .sim-pays-card { padding: 10px 8px; }
  .sim-pays-brut { font-size: 14px; }
  .sim-meta-grid { grid-template-columns: 1fr 1fr; }
  .scenarios-grid { grid-template-columns: 1fr 1fr; }
  .scenario-montant-valeur { font-size: 18px; }
  .scenario-pays-ligne { grid-template-columns: 20px 1fr auto 12px auto; font-size: 12px; }
  .progress-header { flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  :root { --page-padding: 32px; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* ============================================================
   PAGE IMPORT PDF
   ============================================================ */

.import-upload-card { max-width: 720px; }

/* Sélecteur de type */
.import-type-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.import-type-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 2px solid var(--md-outline-variant);
  border-radius: var(--shape-md);
  cursor: pointer;
  flex: 1;
  min-width: 200px;
  transition: border-color .2s, background .2s;
}
.import-type-option:has(input:checked) {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
}
.import-type-option input { display: none; }
.import-type-flag { font-size: 28px; }
.import-type-label { font-size: 14px; font-weight: 500; line-height: 1.4; }
.import-type-label small { font-weight: 400; color: var(--md-on-surface-variant); }

/* Zone de dépôt */
.import-file-zone {
  border: 2px dashed var(--md-outline-variant);
  border-radius: var(--shape-lg);
  padding: 36px 24px;
  text-align: center;
  transition: border-color .2s, background .2s;
  margin-bottom: 20px;
}
.import-file-zone.drag-over,
.import-file-zone.has-file {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
}
.import-file-icon {
  font-size: 48px;
  color: var(--md-on-surface-variant);
  display: block;
  margin-bottom: 8px;
}
.import-file-btn { margin-top: 12px; cursor: pointer; }
.import-file-name {
  margin-top: 10px;
  color: var(--md-primary);
  font-weight: 500;
}

/* Spinner */
.import-spinner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 20px 0;
}
.spinner-ring {
  width: 28px; height: 28px;
  border: 3px solid var(--md-outline-variant);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Actions */
.import-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Validation */
.import-validate-header { margin-bottom: 20px; }
.import-raw-toggle {
  margin-top: 12px;
  font-size: 12px;
}
.import-raw-toggle summary {
  cursor: pointer;
  color: var(--md-on-surface-variant);
  padding: 4px 0;
}
.import-raw-text {
  background: var(--md-surface-variant);
  border-radius: var(--shape-sm);
  padding: 12px;
  font-size: 11px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 8px;
}

/* Tableau import */
.import-table td { vertical-align: middle; }
.import-table .correction-input-num { width: 72px; }

/* Avertissement */
.import-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--md-tertiary-container);
  border-radius: var(--shape-md);
  margin-top: 16px;
}