/* ============================================================
   RegulPilot — charte.css
   Palette 3 : Bleu nuit & or
   À inclure dans toutes les pages : <link rel="stylesheet" href="/charte.css">
   ============================================================ */

:root {
  --bg:           #f6f7fb;
  --surface:      #ffffff;
  --surface-warm: #eef0f8;
  --ink:          #14192e;
  --muted:        #64687a;
  --subtle:       #9698a8;
  --primary:      #2c3e7a;
  --primary-dark: #1e2d5e;
  --primary-soft: #e4e8f6;
  --gold:         #c8a84a;
  --gold-soft:    #faf0d4;
  --gold-border:  #e8d48a;
  --green:        #2a7a5c;
  --green-soft:   #e0f2ec;
  --red:          #c0392b;
  --red-soft:     #fdecea;
  --border:       #d8dcea;
  --border-dark:  #c4c8da;
  --shadow:       0 4px 24px rgba(20,25,46,.08);
  --shadow-lg:    0 16px 48px rgba(20,25,46,.14);
  --radius:       20px;
  --radius-lg:    28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* ── NAV ── */
.rp-nav { position: sticky; top: 0; z-index: 10; background: rgba(246,247,251,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.rp-nav-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.rp-brand { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: var(--ink); }
.rp-brand span { font-weight: 700; letter-spacing: -.02em; }
.rp-brand .pilot { color: var(--primary); }
.rp-nav-right { display: flex; align-items: center; gap: 10px; }

/* ── BOUTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: .92rem; border: 1px solid transparent; cursor: pointer; transition: all .18s ease; white-space: nowrap; font-family: inherit; }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 14px rgba(44,62,122,.28); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--surface); border-color: var(--border-dark); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-warm); border-color: var(--border-dark); transform: translateY(-1px); }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); font-size: .88rem; }
.btn-ghost:hover { color: var(--ink); }
.btn-lg { padding: 13px 26px; font-size: .98rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-danger { background: var(--red-soft); border-color: #f0b0aa; color: var(--red); }
.btn-danger:hover { background: #f8d8d4; }

/* ── FORMULAIRES ── */
.rp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-lg); }
.rp-card h1, .rp-card h2 { letter-spacing: -.04em; font-weight: 700; margin-bottom: 8px; }
.rp-card .sub { color: var(--muted); margin-bottom: 28px; font-size: .95rem; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .87rem; color: var(--ink); margin-bottom: 7px; }
.field .hint { color: var(--subtle); font-size: .8rem; margin-top: 5px; }
input[type="text"], input[type="email"], input[type="password"] { width: 100%; height: 50px; border: 1.5px solid var(--border); border-radius: 14px; padding: 0 16px; font-size: .97rem; font-family: inherit; outline: none; transition: border-color .15s; background: var(--surface-warm); color: var(--ink); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-color: var(--primary); background: white; }
input.error { border-color: var(--red); }

/* ── ALERTES ── */
.alert { border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; font-size: .92rem; }
.alert ul { margin: 6px 0 0 18px; }
.alert ul li { margin-bottom: 3px; }
.alert-error { background: var(--red-soft); border: 1px solid #f0b0aa; color: #8a1c14; }
.alert-success { background: var(--green-soft); border: 1px solid #a0d8c4; color: #1a5c44; }
.alert-warning { background: var(--gold-soft); border: 1px solid var(--gold-border); color: #7a6020; }
.alert-info { background: var(--primary-soft); border: 1px solid var(--border-dark); color: var(--primary-dark); }

/* ── CONDITIONS / CHECKBOX ── */
.conditions { background: var(--surface-warm); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; }
.legal-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .88rem; line-height: 1.55; }
.legal-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.legal-check a { color: var(--primary); font-weight: 600; }
.legal-error { color: var(--red); font-size: .82rem; margin-top: 8px; display: none; }

/* ── DIVIDER ── */
.divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: .82rem; color: var(--subtle); }

/* ── GOOGLE BUTTON ── */
.btn-google { width: 100%; background: white; color: var(--ink); border: 1.5px solid var(--border); border-radius: 14px; padding: 13px; font-size: .9rem; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .2s; }
.btn-google:hover { background: var(--surface-warm); border-color: var(--border-dark); }

/* ── FOOTER ── */
.rp-footer { color: var(--subtle); padding: 24px 0 40px; text-align: center; font-size: .86rem; }
.rp-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.rp-footer a:hover { color: var(--ink); }

/* ── SIRET FEEDBACK ── */
.siret-feedback { margin-top: 8px; padding: 10px 14px; border-radius: 10px; font-size: .88rem; }
.siret-ok { background: var(--green-soft); color: #1a5c44; border: 1px solid #a0d8c4; }
.siret-err { background: var(--red-soft); color: #8a1c14; border: 1px solid #f0b0aa; }
.siret-detail { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.btn-verif { padding: 0 14px; height: 50px; border-radius: 14px; border: 1.5px solid var(--primary); background: white; color: var(--primary); font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0; }
.btn-verif:hover { background: var(--primary-soft); }
.btn-verif:disabled { opacity: .5; cursor: not-allowed; }
.siret-row { display: flex; gap: 8px; }
.siret-row input { flex: 1; min-width: 0; }

/* ── SPINNER ── */
.spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: rp-spin .7s linear infinite; flex-shrink: 0; }
.spinner-blue { border-color: var(--primary-soft); border-top-color: var(--primary); }
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* ── LOGO SVG INLINE (composant réutilisable) ── */
/* Usage : <div class="rp-logo-wrap"><svg class="rp-logo-svg">…</svg><span>Regul<span class="pilot">Pilot</span></span></div> */
.rp-logo-wrap { display: flex; align-items: center; gap: 10px; }
.rp-logo-wrap span { font-weight: 700; letter-spacing: -.02em; font-size: 1.1rem; color: var(--ink); }
.rp-logo-wrap .pilot { color: var(--primary); }