:root {
  --paper: #FFFFFF;
  --paper-raised: #FAFAFA;
  --ink: #111111;
  --ink-soft: #555555;
  --ink-faint: #9A9A9A;
  --accent: #2563EB;
  --accent-soft: #EFF4FF;
  --border: #E5E5E5;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --success: #16A34A;
  --success-soft: #F0FDF4;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
  --radius: 10px;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.4rem; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 1em; }

a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

a:hover { text-decoration-color: var(--ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--paper-raised);
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-header nav a,
.site-header nav button {
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.site-header nav a:hover,
.site-header nav button:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

.inline-form { display: inline; }

main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.hero {
  text-align: center;
  padding: 3rem 0;
}

.hero p {
  color: var(--ink-soft);
  font-size: 1.1rem;
}

p.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

/* ---------- Chat preview (home page) ---------- */

.chat-preview {
  border-top: 1px solid var(--border);
}

.chat-preview p {
  color: var(--ink-soft);
}

.chat-preview-messages {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

/* ---------- Landing sections ---------- */

.section {
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}

.feature-grid-section {
  text-align: center;
}

.feature-grid {
  max-width: 900px;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
}

.feature-card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.feature-card-highlight {
  border: 2px solid var(--accent);
}

.feature-card h3 { margin-bottom: 0.5rem; }
.feature-card p { color: var(--ink-soft); margin-bottom: 0; font-size: 0.95rem; }

@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.cta-section {
  text-align: center;
}

.cta-section p { color: var(--ink-soft); }

/* ---------- Forum history (About page) ---------- */

.chapters {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--border);
}

.chapter {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.chapter:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.chapter-year {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

/* ---------- Social proof + FAQ (home page) ---------- */

.social-proof p { color: var(--ink-soft); }

.faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child { border-bottom: none; }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.faq-item p {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
}

/* ---------- Button arrow ---------- */

.btn-arrow {
  transition: transform 200ms ease;
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow {
    transition: none !important;
  }
}

/* ---------- Flash messages ---------- */

.flash-message {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* ---------- Forms ---------- */

form p {
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  width: 100%;
}

textarea { resize: vertical; min-height: 4.5rem; }

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0 0 1.1rem;
}

fieldset legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 0.4rem;
}

fieldset label {
  text-transform: none;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.25rem;
}

.form-error,
.errorlist {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  list-style: none;
  margin: 0 0 1rem;
}

.errorlist li { margin: 0; }

/* ---------- Buttons ---------- */

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
  min-height: 44px;
}

button:hover { background: #1D4ED8; }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn-secondary:hover { background: var(--accent-soft); }

/* Nav buttons (e.g. déconnexion) shouldn't look like primary buttons */
.site-header nav button {
  color: var(--ink-soft);
  background: none;
  border: none;
  min-height: auto;
  padding: 0.5rem 0.75rem;
}

.site-header nav button:hover { background: var(--accent-soft); color: var(--ink); }
.site-header nav button:active { transform: none; }

/* ---------- Chat ---------- */

#messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.message {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--paper-raised);
}

.message-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.message .content { white-space: pre-wrap; }

.message .content p { margin: 0.3rem 0; }

.message .content h1,
.message .content h2,
.message .content h3,
.message .content h4,
.message .content h5,
.message .content h6 {
  margin: 0.6rem 0 0.3rem;
  line-height: 1.3;
}

.message .content ul,
.message .content ol {
  margin: 0.3rem 0;
  padding-left: 1.4rem;
}

.message .content blockquote {
  margin: 0.5rem 0;
  padding: 0.2rem 0.8rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
}

.message .content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.75rem 0;
}

.message .content pre {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.message .content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}

.message .content table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.message .content th,
.message .content td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.message .content th {
  background: var(--paper-raised);
  font-weight: 700;
}

.message-user {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--accent);
}

.message-assistant {
  align-self: flex-start;
}

#send-form {
  flex-shrink: 0;
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

#send-form textarea {
  flex: 1;
  min-height: 3rem;
}

/* ---------- Chat sidebar layout ---------- */

body.chat-layout {
  height: 100vh;
  overflow: hidden;
}

main.chat-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.chat-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.chat-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--paper-raised);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.chat-sidebar-header {
  padding: 1.1rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat-sidebar-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
}

.chat-search-input {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center;
  background-size: 14px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem 0.5rem 2.1rem;
  -webkit-appearance: none;
  appearance: none;
}

.chat-search-input:focus {
  border-color: var(--accent);
  outline: none;
}

.chat-search-input::-webkit-search-decoration,
.chat-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.chat-new-btn {
  width: 100%;
}

.chat-sidebar-list {
  flex: 1;
  padding: 0.25rem 0.6rem 1rem;
}

.chat-sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.75rem 0.5rem 0.35rem;
}

.chat-sidebar-empty {
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 0.5rem;
}

.chat-conversation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0.1rem 0.3rem;
}

.chat-conversation-row:hover,
.chat-conversation-row.active {
  background: var(--accent-soft);
}

.chat-conversation-link {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0.5rem 0.4rem;
  text-decoration: none;
  color: var(--ink);
}

.chat-conversation-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conversation-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.chat-conversation-actions {
  display: flex;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 100ms ease;
}

.chat-conversation-row:hover .chat-conversation-actions {
  opacity: 1;
}

@media (hover: none) {
  .chat-conversation-actions {
    opacity: 1;
  }
}

.chat-icon-btn {
  min-height: 36px;
  min-width: 36px;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  padding: 0.3rem;
  font-size: 0.85rem;
}

.chat-icon-btn:hover { background: var(--paper); color: var(--ink); }
.chat-icon-btn-danger:hover { color: var(--danger); background: var(--danger-soft); }

.chat-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2rem 2.5rem;
}

.chat-content h1 {
  flex-shrink: 0;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.chat-empty-state {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}

.chat-mobile-toggle {
  display: none;
}

.chat-sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .chat-mobile-toggle {
    display: inline-flex;
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 20;
  }

  .chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--shadow);
  }

  .chat-sidebar.open {
    transform: translateX(0);
  }

  .chat-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--ink);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  .chat-sidebar-overlay.visible {
    opacity: 0.35;
    pointer-events: auto;
  }

  .chat-content {
    padding: 3.5rem 1.25rem 2rem;
  }
}

/* ---------- Utility ---------- */

.stack { display: flex; flex-direction: column; gap: 1rem; }
.muted { color: var(--ink-soft); }

@media (max-width: 480px) {
  .site-header { padding: 1rem; }
  main { padding: 1.75rem 1.1rem 3rem; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 2rem;
  text-align: center;
}

.site-footer-note {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- Landing page section system (full-width, alternating rhythm) ---------- */

.section-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4rem 1.5rem;
}

.section-full .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bg-raised { background: var(--paper-raised); }
.bg-tint { background: var(--accent-soft); }

.bg-deep {
  background-image: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
}

.hero-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Both `.bg-deep` and `.hero-pattern` only set `background-image` — on an
   element with both classes, whichever rule appears later in the file
   would otherwise clobber the other's layer entirely. This compound
   selector combines them into one rule with higher specificity than
   either class alone, so it always wins regardless of source order. */
.bg-deep.hero-pattern {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  background-size: 22px 22px, auto;
}

.feature-icon {
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.faq-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-right: 0.5rem;
  vertical-align: -4px;
}

.hero .section-inner {
  max-width: 700px;
  text-align: center;
}

.chat-preview-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 720px) {
  .chat-preview-columns {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
}

.social-proof-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  text-align: left;
}

@media (min-width: 720px) {
  .social-proof-columns { grid-template-columns: 3fr 2fr; }
}

.social-proof-badge {
  padding: 1.5rem;
  border-radius: var(--radius);
}

.social-proof-badge p {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.faq h2 { text-align: center; }

@media (max-width: 480px) {
  .section-full { padding: 2.5rem 1.1rem; }
}

/* Text-color overrides for dark sections — appended last so equal-specificity
   rules like `.hero p` and `.cta-section p` earlier in this file lose the
   cascade to these. */
.bg-deep h1,
.bg-deep h2,
.bg-deep p,
.bg-deep p.eyebrow {
  color: var(--paper);
}

.bg-deep p.eyebrow { opacity: 0.85; }

.bg-deep .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.bg-deep .btn:hover { background: var(--paper-raised); }

/* ---------- Message pages (account / donation confirmations & forms) ---------- */

.message-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 55%);
}

.message-card {
  width: 100%;
  max-width: 400px;
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  text-align: center;
}

.message-card form {
  text-align: left;
  margin-top: 0.5rem;
}

.message-card .btn,
.message-card button[type="submit"] {
  width: 100%;
}

.message-card input:focus,
.message-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Mon compte (wide variant) ---------- */

.message-card-wide {
  max-width: 640px;
  text-align: left;
}

.stat-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.stat-card p:last-child { margin-bottom: 0; }

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 1.5rem 0 0.5rem;
}

.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
  stroke: var(--paper);
}

/* ---------- Receipts table (Mon compte) ---------- */

.receipts-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9rem;
}

.receipts-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.receipts-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.receipts-table tr:last-child td { border-bottom: none; }

.receipts-table form { display: inline; margin: 0 0 0 0.4rem; }

.receipts-table .btn-secondary {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  min-height: auto;
}