/* connect.css — page /connect, alignée sur le design system de l'app Mac (« Halo & Matte »).
   Les noms et les valeurs des tokens suivent macos/maquette-claude/css/tokens.css : aucune couleur,
   aucun rayon, aucune durée en dur sous la section :root. Dark-only, comme le Mac. */

:root {
  color-scheme: dark;
  /* Surfaces & texte (HaloMatte.Surface) */
  --surface-base: #000000;  --surface-card: #161619;  --surface-matte: #17171A;  --surface-matte-lift: #202024;
  --surface-card-border: #38383A;  --surface-text: #EBEBF0;  --surface-text-secondary: #9898A3;
  --surface-text-tertiary: #8A8A99;  --surface-text-inverse: #0C0C0E;  --surface-hairline: rgba(255, 255, 255, 0.08);
  --neutral-06: rgba(255, 255, 255, 0.06);  --neutral-12: rgba(255, 255, 255, 0.12);  --neutral-25: rgba(255, 255, 255, 0.25);
  --inverse-10: rgba(0, 0, 0, 0.10);
  /* Sémantique (HaloMatte.Semantic) */
  --semantic-danger: #FF5C4D;  --semantic-danger-soft: rgba(255, 92, 77, 0.14);
  --semantic-success: #30D158;  --semantic-success-soft: rgba(48, 209, 88, 0.16);
  /* Marques : Google = seule icône multicolore ; Claude = pastille en attendant son logo */
  --brand-google-red: #EA4335;  --brand-google-blue: #4285F4;  --brand-google-yellow: #FBBC05;  --brand-google-green: #34A853;
  --tint-claude: #D97757;
  /* Rayons (HaloMatte.Radii) */
  --radius-pill: 999px;  --radius-card: 22px;  --radius-tile: 18px;  --radius-field: 16px;  --radius-control: 12px;
  --radius-icon-tile-lg: 11px;  --radius-icon-tile: 9px;  --radius-kbd: 5px;
  /* Typo (SF Pro système, comme l'app) */
  --font-family: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --font-title: 26px;  --font-title-compact: 24px;  --font-row-label: 17px;  --font-body: 15px;  --font-value: 14px;
  --font-intro: 13.5px;  --font-small: 13px;  --font-caption: 12.5px;  --font-section: 11px;  --font-micro: 10px;
  --weight-medium: 500;  --weight-semibold: 600;  --weight-bold: 700;
  --tracking-tight: -0.4px;  --tracking-section: 1px;
  /* Espaces & dimensions */
  --space-4: 4px;  --space-6: 6px;  --space-8: 8px;  --space-10: 10px;  --space-12: 12px;  --space-14: 14px;
  --space-16: 16px;  --space-18: 18px;  --space-22: 22px;  --space-26: 26px;  --space-32: 32px;  --space-48: 48px;
  --size-button: 48px;  --size-button-sm: 34px;  --size-icon-tile: 30px;  --size-icon-tile-lg: 38px;
  --size-icon-tile-empty: 44px;  --size-logo-tile: 48px;  --size-icon-button: 28px;  --size-sheet-sm: 440px;
  --border-width: 1px;
  /* Mouvement (Motion) */
  --dur-instant: 90ms;  --dur-fast: 150ms;  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --move-xs: 4px;  --move-sm: 8px;  --scale-pressed: 0.97;  --opacity-pressed: 0.85;  --opacity-disabled: 0.5;
}
@media (prefers-reduced-motion: reduce) { :root { --move-xs: 0px; --move-sm: 0px; --scale-pressed: 1; } }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-base); color: var(--surface-text); font-family: var(--font-family);
  font-size: var(--font-body); line-height: 1.35; -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }  /* l'attribut l'emporte sur les display: flex des composants */
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--surface-text); outline-offset: 2px; }
input:focus-visible { outline: none; }  /* le bord blanc du champ suffit */

/* ── Page : une carte centrée, comme une sheet du Mac ── */
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-48) var(--space-16); }
.sheet {
  width: 100%; max-width: var(--size-sheet-sm); display: flex; flex-direction: column;
  padding: var(--space-26); background: var(--surface-card);
  border: var(--border-width) solid var(--surface-card-border); border-radius: var(--radius-card);
}
.foot { margin-top: var(--space-22); display: flex; gap: var(--space-14); font-size: var(--font-caption); color: var(--surface-text-tertiary); }
.foot a { text-decoration: none; color: inherit; }
.foot a:hover { color: var(--surface-text); }

/* ── Titres & textes ── */
.logo { display: block; width: var(--size-logo-tile); height: var(--size-logo-tile); border-radius: var(--radius-control); }
.head { display: flex; align-items: center; gap: var(--space-12); }
.title { margin-top: var(--space-22); font-size: var(--font-title); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.15; text-wrap: balance; }
.intro { margin-top: var(--space-4); font-size: var(--font-intro); line-height: 1.45; color: var(--surface-text-secondary); display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.cap { font-size: var(--font-caption); line-height: 1.45; color: var(--surface-text-tertiary); text-align: center; }
.cap--left { text-align: left; }
.hint { display: flex; align-items: flex-start; gap: var(--space-8); font-size: var(--font-caption); line-height: 1.45; color: var(--surface-text-tertiary); }
.hint .ic { width: 14px; height: 14px; margin-top: 2px; }
.hint b, .line b, .empty__text b, .confirm b { color: var(--surface-text); font-weight: var(--weight-semibold); }
.section { font-size: var(--font-section); font-weight: var(--weight-bold); letter-spacing: var(--tracking-section); text-transform: uppercase; color: var(--surface-text-tertiary); display: flex; justify-content: space-between; align-items: center; }
.mt-10 { margin-top: var(--space-10); }  .mt-12 { margin-top: var(--space-12); }  .mt-14 { margin-top: var(--space-14); }  .mt-22 { margin-top: var(--space-22); }

/* ── Icônes (trait fin, proche des SF Symbols) ── */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .f { fill: currentColor; stroke: none; }
.ic--brand { stroke: none; }

/* ── Boutons : plein = neutre (blanc), fantôme, discret, danger. Jamais de couleur de module. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--size-button); padding: 0 var(--space-22); border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent; background: none; font-size: var(--font-body);
  font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-instant) var(--ease-out), opacity var(--dur-instant) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(var(--scale-pressed)); opacity: var(--opacity-pressed); }
.btn:disabled { opacity: var(--opacity-disabled); cursor: default; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: var(--size-button-sm); padding: 0 var(--space-14); font-size: var(--font-value); }
.btn--primary { background: var(--surface-text); color: var(--surface-text-inverse); }
.btn--ghost { border-color: var(--neutral-12); color: var(--surface-text); }
.btn--ghost:hover:not(:disabled) { background: var(--neutral-06); }
.btn--plain { padding: 0 var(--space-8); color: var(--surface-text-secondary); }
.btn--plain:hover:not(:disabled) { color: var(--surface-text); }
.btn--danger { background: var(--semantic-danger-soft); color: var(--semantic-danger); }
.btn--danger-plain { padding: 0 var(--space-8); color: var(--semantic-danger); }
.btn--danger-plain:hover:not(:disabled) { background: var(--semantic-danger-soft); }
.btn .ic { width: 17px; height: 17px; }
.btn .ic--apple { margin-top: -2px; }
.kbd { display: inline-flex; align-items: center; margin-left: var(--space-4); padding: 1px var(--space-6); border-radius: var(--radius-kbd); background: var(--inverse-10); color: var(--surface-text-inverse); opacity: 0.6; font-size: var(--font-section); font-weight: var(--weight-medium); }
.stack { display: flex; flex-direction: column; gap: var(--space-10); }

/* ── Formulaire de connexion ── */
.or { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-16) 0; font-size: var(--font-caption); color: var(--surface-text-tertiary); }
.or::before, .or::after { content: ""; flex: 1; height: var(--border-width); background: var(--surface-hairline); }
.field {
  display: flex; align-items: center; gap: var(--space-10); width: 100%; padding: var(--space-12) var(--space-16);
  background: var(--surface-matte-lift); border: var(--border-width) solid var(--surface-card-border);
  border-radius: var(--radius-field); font-size: var(--font-body); transition: border-color var(--dur-fast) var(--ease-out);
}
.field:focus-within { border-color: var(--surface-text); }
.field--error, .field--error:focus-within { border-color: var(--semantic-danger); }  /* l'erreur l'emporte sur le focus */
.field .ic { color: var(--surface-text-tertiary); }
.field input { flex: 1; min-width: 0; padding: 0; background: none; border: 0; outline: 0; color: var(--surface-text); }
.field input::placeholder { color: var(--surface-text-tertiary); }
.icon-btn { display: grid; place-items: center; width: var(--size-icon-button); height: var(--size-icon-button); margin: -4px -6px -4px 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--surface-text-tertiary); cursor: pointer; }
.icon-btn:hover { background: var(--neutral-06); color: var(--surface-text); }
.is-busy .stack, .is-busy .or, .is-busy .fields { opacity: var(--opacity-disabled); }
.stack, .or, .fields { transition: opacity var(--dur-fast) var(--ease-out); }
.is-shaking { animation: shake var(--dur-slow) var(--ease-in-out); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }  20% { transform: translateX(calc(var(--move-sm) * -1)); }
  45% { transform: translateX(var(--move-sm)); }  70% { transform: translateX(calc(var(--move-xs) * -1)); }  88% { transform: translateX(var(--move-xs)); }
}
.banner { display: flex; align-items: flex-start; gap: var(--space-10); padding: var(--space-12) var(--space-14); border-radius: var(--radius-control); background: var(--surface-matte); border: var(--border-width) solid var(--surface-card-border); font-size: var(--font-small); line-height: 1.4; color: var(--surface-text-secondary); }
.banner .ic { margin-top: 1px; color: var(--semantic-danger); }
.banner b { color: var(--surface-text); font-weight: var(--weight-semibold); }

/* ── Liste groupée, tuiles, pastilles, badges ── */
.group { background: var(--surface-matte); border: var(--border-width) solid var(--surface-card-border); border-radius: var(--radius-tile); overflow: hidden; }
.group > * + * { border-top: var(--border-width) solid var(--surface-hairline); }
.line { display: flex; align-items: center; gap: var(--space-12); min-height: 52px; padding: var(--space-10) var(--space-14); font-size: var(--font-value); line-height: 1.35; }
.tile { display: grid; place-items: center; flex: none; width: var(--size-icon-tile); height: var(--size-icon-tile); border-radius: var(--radius-icon-tile); background: var(--neutral-06); color: var(--surface-text-secondary); font-size: var(--font-small); font-weight: var(--weight-bold); }
.tile .ic { width: 15px; height: 15px; stroke-width: 2; }
.tile--ok { color: var(--semantic-success); background: var(--semantic-success-soft); }
.tile--no { color: var(--semantic-danger); background: var(--semantic-danger-soft); }
.tile--lg { width: var(--size-icon-tile-empty); height: var(--size-icon-tile-empty); border-radius: var(--radius-control); }
.tile--lg .ic { width: 20px; height: 20px; stroke-width: 1.8; }
.mono { display: grid; place-items: center; flex: none; width: var(--size-logo-tile); height: var(--size-logo-tile); border-radius: var(--radius-control); background: var(--tint-claude); color: #FFFFFF; font-size: 22px; font-weight: var(--weight-bold); overflow: hidden; }
.mono--md { width: var(--size-icon-tile-lg); height: var(--size-icon-tile-lg); border-radius: var(--radius-icon-tile-lg); font-size: var(--font-row-label); }
.mono img { width: 100%; height: 100%; object-fit: cover; }
.pair { display: flex; align-items: center; gap: var(--space-12); }
.pair .ic { width: 18px; height: 18px; color: var(--surface-text-tertiary); }
.badge { display: inline-flex; align-items: center; gap: var(--space-6); padding: 2px var(--space-8); border-radius: var(--radius-pill); border: var(--border-width) solid var(--neutral-25); color: var(--surface-text); font-size: var(--font-micro); font-weight: var(--weight-bold); letter-spacing: var(--tracking-section); }
.badge .ic { width: 10px; height: 10px; }

/* ── Mes connexions ── */
.row { display: flex; align-items: center; gap: var(--space-12); min-height: 64px; padding: var(--space-14) var(--space-18); }
.row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__name { font-size: var(--font-row-label); font-weight: var(--weight-semibold); }
.row__sub { font-size: var(--font-small); color: var(--surface-text-secondary); }
.row__scope { font-size: var(--font-caption); color: var(--surface-text-tertiary); }
.confirm { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-18); background: var(--surface-matte-lift); }
.confirm__text { flex: 1; min-width: 0; font-size: var(--font-value); }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-32) var(--space-22); text-align: center; }
.empty .tile--lg { margin-bottom: var(--space-6); }
.empty__title { font-size: var(--font-row-label); font-weight: var(--weight-semibold); }
.empty__text { max-width: 300px; font-size: var(--font-intro); line-height: 1.45; color: var(--surface-text-secondary); }
.empty .btn { margin-top: var(--space-10); }
.account { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-22); padding-top: var(--space-18); border-top: var(--border-width) solid var(--surface-hairline); font-size: var(--font-small); color: var(--surface-text-secondary); }
.account span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── iPhone (navigateur intégré de l'app Claude) ── */
@media (max-width: 480px) {
  .page { padding: var(--space-32) var(--space-16); }
  .sheet { padding: var(--space-22); }
  .title { margin-top: var(--space-18); font-size: var(--font-title-compact); }
  .kbd { display: none; }
  .field { font-size: 16px; }  /* sous 16 px, Safari iOS zoome sur le champ */
}