/* ============================================================
   Gr33t Trust Center — design system
   Source de vérité : input/DESIGN_SYSTEM.md (identité Gr33t).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- 1. Tokens ---------- */

:root {
  /* — Marque Gr33t — */
  --gr33t-blue:      #2266dd;
  --gr33t-blue-deep: #205cbb;
  --gr33t-cyan:      #20aee2;
  --gr33t-orange:    #ed6d2d;
  --gr33t-pink:      #ef4e78;
  --gr33t-green:     #4dad33;
  --gr33t-teal:      #3e8f98;

  /* — Neutres (froid, teintés blue) — */
  --ink:        #0b1220;
  --ink-2:      #1a2332;
  --ink-3:      #2c3a4f;
  --slate:      #4a5874;
  --slate-2:    #6b7a96;
  --line:       #dfe4ee;
  --line-soft:  #ecf0f7;
  --surface-2:  #f1f4fa;
  --surface-1:  #f7f9fc;
  --surface:    #ffffff;

  /* — Rôles sémantiques M3 — */
  --color-primary:                 var(--gr33t-blue);
  --color-on-primary:              #ffffff;
  --color-primary-container:       #e1ebff;
  --color-on-primary-container:    #0a3a8c;

  --color-secondary:               var(--gr33t-cyan);
  --color-on-secondary:            #ffffff;
  --color-secondary-container:     #d6f0fb;
  --color-on-secondary-container:  #0e5878;

  --color-tertiary:                var(--gr33t-orange);
  --color-on-tertiary:             #ffffff;
  --color-tertiary-container:      #fbe2d2;
  --color-on-tertiary-container:   #6e3110;

  --color-error:                   #ba1a1a;
  --color-on-error:                #ffffff;
  --color-error-container:         #ffdad6;
  --color-on-error-container:      #410002;

  --color-success: var(--gr33t-green);
  --color-warning: var(--gr33t-orange);
  --color-info:    var(--gr33t-blue);
  --color-love:    var(--gr33t-pink);

  --color-surface:               var(--surface);
  --color-surface-low:           var(--surface-1);
  --color-surface-high:          var(--surface-2);
  --color-on-surface:             var(--ink);
  --color-on-surface-variant:     var(--slate);
  --color-outline:                var(--line);
  --color-outline-variant:        var(--line-soft);

  /* — Raccourcis — */
  --fg-1: var(--ink);
  --fg-2: var(--slate);
  --fg-3: var(--slate-2);
  --fg-muted: var(--slate-2);
  --bg:   var(--surface);
  --bg-1: var(--surface-1);
  --bg-2: var(--surface-2);

  /* — Spacing (base 4 px) — */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* — Radii — */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* — Élévation tonale + ombre soft — */
  --elev-1: 0 1px 2px rgba(11,18,32,.04), 0 1px 1px rgba(11,18,32,.03);
  --elev-2: 0 2px 6px rgba(11,18,32,.06), 0 1px 2px rgba(11,18,32,.04);
  --elev-3: 0 8px 22px rgba(11,18,32,.10), 0 2px 6px rgba(11,18,32,.06);
  --elev-4: 0 16px 38px rgba(11,18,32,.14), 0 4px 10px rgba(11,18,32,.08);
  --elev-5: 0 24px 60px rgba(11,18,32,.18), 0 8px 16px rgba(11,18,32,.10);

  /* — Focus — */
  --focus-ring: 0 0 0 3px rgba(34,102,221,.35);

  /* — Motion — */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --dur-4: 500ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-decel:    cubic-bezier(0, 0, 0, 1);
  --ease-accel:    cubic-bezier(.3, 0, 1, 1);
}

/* ---------- 2. Base ---------- */

html { color-scheme: light; }

html, body {
  min-height: 100vh;
  font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg-1);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  font-variant-numeric: lining-nums;
}

body {
  font-size: 15px;
  line-height: 22px;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--gr33t-cyan); color: #fff; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

.mono, code, kbd, samp {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 3. Type scale (M3) ---------- */

.display-lg { font-size: 64px; line-height: 68px; font-weight: 400; letter-spacing: -.03em; }
.display-md { font-size: 48px; line-height: 54px; font-weight: 400; letter-spacing: -.025em; }
.display-sm { font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -.02em; }

.headline-lg { font-size: 32px; line-height: 38px; font-weight: 400; letter-spacing: -.015em; }
.headline-md { font-size: 26px; line-height: 32px; font-weight: 400; letter-spacing: -.01em; }
.headline-sm { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -.005em; }

.title-lg { font-size: 20px; line-height: 26px; font-weight: 500; }
.title-md { font-size: 16px; line-height: 22px; font-weight: 500; }
.title-sm { font-size: 14px; line-height: 20px; font-weight: 500; }

.body-lg { font-size: 17px; line-height: 26px; font-weight: 400; }
.body-md { font-size: 15px; line-height: 22px; font-weight: 400; }
.body-sm { font-size: 13px; line-height: 18px; font-weight: 400; }

.label-lg { font-size: 14px; line-height: 20px; font-weight: 600; }
.label-md { font-size: 12px; line-height: 16px; font-weight: 600; }
.label-sm { font-size: 11px; line-height: 14px; font-weight: 600; }

.tabnums { font-variant-numeric: tabular-nums; }

/* ---------- 4. Material Symbols ---------- */

.icon, .material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  flex-shrink: 0;
}
.icon--18 { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.icon--20 { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.icon--22 { font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon--24 { font-size: 24px; }
.icon--32 { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 40; }
.icon--filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ---------- 5. Layout ---------- */

.shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-1); }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* ---------- 6. Header ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 68px;
}
.brand {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  padding-right: var(--space-8);
  border-right: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 6px 2px;
  transition: color var(--dur-1) var(--ease-standard);
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); font-weight: 600; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Chip de statut (status pill) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--fg-2);
}
.chip--success {
  background: rgba(77,173,51,.10);
  border-color: rgba(77,173,51,.25);
  color: #2d6a1f;
}
.chip--primary {
  background: var(--color-primary-container);
  border-color: transparent;
  color: var(--color-on-primary-container);
}
.chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(77,173,51,.18);
  flex-shrink: 0;
}

/* ---------- 6 bis. Alert banner ---------- */

.alert {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin: var(--space-6) 0 0;
}
.alert[data-shown="true"] { display: flex; }
.alert .icon { flex-shrink: 0; }
.alert--info {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border: 1px solid rgba(34,102,221,.15);
}
.alert--warn {
  background: rgba(237,109,45,.10);
  color: #6e3110;
  border: 1px solid rgba(237,109,45,.25);
}
.alert--error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
  border: 1px solid rgba(186,26,26,.18);
}
.alert__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: inherit;
  opacity: .7;
}
.alert__close:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* ---------- 7. Hero ---------- */

.hero { padding: var(--space-16) 0 var(--space-20); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: var(--space-12);
  align-items: start;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.hero h1 {
  /* display-sm → display-md selon viewport */
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: var(--space-5);
}
.hero h1 .hl { color: var(--color-primary); }

.hero__lede {
  font-size: 17px;
  line-height: 26px;
  color: var(--fg-2);
  max-width: 56ch;
  margin-bottom: var(--space-10);
  text-wrap: pretty;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-10);
  row-gap: var(--space-3);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-2);
  font-weight: 500;
}
.trust-item .icon { color: var(--color-primary); }

/* ---------- 8. Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elev-1);
}

/* Auth card (état anonyme) */
.auth-card { padding: var(--space-6); }
.auth-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.auth-card__head .icon-wrap {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-card__head h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.auth-card__intro {
  font-size: 15px;
  line-height: 22px;
  color: var(--fg-2);
  margin-bottom: var(--space-5);
}
.auth-card__note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-muted);
}

/* Identified card (état authentifié — aplat primary, pas de gradient) */
.identified-card {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary);
  box-shadow: var(--elev-2);
}
.identified-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.identified-card__head .icon-wrap {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.identified-card__head h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.identified-card__intro {
  font-size: 15px;
  line-height: 22px;
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-5);
}
.identified-card__intro strong { color: #fff; font-weight: 600; }
.identified-card__intro .mono { color: #fff; }
.identified-card__note {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  line-height: 18px;
  color: rgba(255,255,255,.8);
}
.identified-card__note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 9. Buttons (M3) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: background var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard);
}
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }

/* Filled (CTA principal) */
.btn--filled {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--filled:hover {
  background: var(--gr33t-blue-deep);
  box-shadow: var(--elev-2);
  color: var(--color-on-primary);
}

/* Filled inverse (sur surface primary) */
.btn--inverse {
  background: var(--color-on-primary);
  color: var(--color-primary);
}
.btn--inverse:hover {
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--elev-3);
}

/* Tonal (action secondaire importante) */
.btn--tonal {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.btn--tonal:hover {
  background: #d2dffd;
  box-shadow: var(--elev-1);
}

/* Outlined (secondaire neutre) */
.btn--outlined {
  background: transparent;
  border: 1px solid var(--color-outline);
  color: var(--ink);
}
.btn--outlined:hover {
  background: var(--bg-1);
  border-color: var(--slate-2);
  color: var(--ink);
}

/* Text */
.btn--text {
  background: transparent;
  color: var(--color-primary);
  height: 36px;
  padding: 0 var(--space-3);
}
.btn--text:hover { background: var(--color-primary-container); }

/* SSO (variante Outlined avec logo) */
.btn-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  height: 48px;
  padding: 0 var(--space-5);
  background: var(--surface);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-standard),
              background var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
.btn-sso + .btn-sso { margin-top: var(--space-2); }
.btn-sso:hover {
  background: var(--bg-1);
  border-color: var(--slate-2);
  box-shadow: var(--elev-1);
}
.btn-sso:active { transform: translateY(1px); }

/* ---------- 10. Sections (vue d'ensemble, pédagogie) ---------- */

.section { padding: var(--space-12) 0; }
.section + .section { padding-top: 0; }

.section__head { margin-bottom: var(--space-8); }

.section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.section h2 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: var(--space-2);
}

.section__lede {
  font-size: 17px;
  line-height: 26px;
  color: var(--fg-2);
  max-width: 70ch;
  text-wrap: pretty;
}

/* Grille de tuiles */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elev-1);
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard);
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--slate-2);
}
.tile:hover { color: var(--ink); }

.tile__eyebrow {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}
.tile__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.tile h3 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: var(--space-2);
}
.tile p {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-2);
}

/* ---------- 11. Footer ---------- */

.site-footer {
  margin-top: auto;
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-muted);
}
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer__links { display: flex; gap: var(--space-5); }

/* ---------- 12. Responsive ---------- */

@media (max-width: 960px) {
  .hero { padding: var(--space-10) 0 var(--space-12); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .container { padding: 0 var(--space-5); }
}

@media (max-width: 560px) {
  .site-header__inner { height: 60px; gap: var(--space-4); }
  .brand { padding-right: 0; border-right: none; }
  .grid-4 { grid-template-columns: 1fr; }
  .trust-row { column-gap: var(--space-6); }
  .header-right .chip span:not(.dot) { display: none; }
  .section { padding: var(--space-10) 0; }
}