/* ==========================================================================
   SyndiGest — Système de design v2
   --------------------------------------------------------------------------
   Direction : rigueur "Linear" (une seule famille typographique, densité
   maîtrisée, contraste net) + clarté "Stripe/Attio" (fond clair dominant,
   respiration généreuse, sérieux immédiat). Une seule section réellement
   sombre (le hero) porte tout le contraste fort, pour un effet net plutôt
   que dilué sur toute la page.

   Signature : le "cachet" — un anneau qui évoque le tampon des quittances
   du logiciel — n'apparaît plus que dans un seul endroit fort (le badge de
   confiance "Achat unique") plutôt que répété sur chaque icône, pour rester
   un vrai signal plutôt qu'une décoration systématique.
   ========================================================================== */

:root {
  /* Couleurs — alignées sur le vrai logiciel : navette marine + doré comme
     couleur d'action principale (barre latérale, boutons "Ajouter" /
     "Sauvegarder" de l'app), vert réservé aux statuts positifs ("Payé"),
     exactement comme dans l'application elle-même. */
  --ink: #0F1B2E;            /* marine de la barre latérale de l'app */
  --ink-soft: #1B2A42;
  --paper: #F8F6F1;          /* chaud mais plus discret qu'un parchemin — reste "logiciel" */
  --paper-raised: #FFFFFF;
  --slate: #5B6472;
  --slate-light: #98A0AB;
  --line: #E9E4D9;
  --line-dark: rgba(250,247,240,0.12);

  --gold: #B8912F;           /* couleur d'action principale de l'app réelle */
  --gold-dark: #94721F;
  --gold-tint: #F6EFDC;

  --seal: #1F7A52;           /* vert — réservé aux statuts "payé"/positifs, comme dans l'app */
  --seal-dark: #145C3D;
  --seal-tint: #E7F3EC;

  --brass: #B8912F;          /* alias historique — même valeur que --gold */
  --brass-tint: #F6EFDC;

  --danger: #B23A2E;
  --danger-tint: #F7E6E3;

  /* Une seule famille, différenciée par la graisse — approche Linear */
  --font-sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 1.85rem);
  --step-3: clamp(1.85rem, 1.4rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 3.8rem);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --container: 1180px;
  --shadow-card: 0 1px 2px rgba(31,27,18,0.05), 0 6px 18px rgba(31,27,18,0.06);
  --shadow-raised: 0 2px 6px rgba(31,27,18,0.06), 0 24px 48px -12px rgba(31,27,18,0.16);
}

/* --------------------------------------------------------------------------
   Reset minimal
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-sans); font-weight: 700; line-height: 1.12;
  margin: 0 0 0.5em; letter-spacing: -0.022em;
}
p { margin: 0 0 1em; color: var(--slate); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark p { color: rgba(250,250,248,0.68); }
.section--raised { background: var(--paper-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gold-dark); font-weight: 500; margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: 0.6; display: inline-block; }

.h1 { font-size: var(--step-4); font-weight: 800; }
.h2 { font-size: var(--step-3); font-weight: 800; }
.h3 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); color: var(--slate); max-width: 620px; font-weight: 400; line-height: 1.55; }
.section--dark .lede { color: rgba(250,250,248,0.72); }

/* --------------------------------------------------------------------------
   Boutons — pleins pour l'action principale, contour fin pour le secondaire
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-s); font-weight: 600;
  font-size: 0.94rem; border: 1px solid transparent; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  letter-spacing: -0.006em;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--gold); color: #fff; box-shadow: 0 1px 2px rgba(10,15,26,0.08), 0 1px 0 rgba(255,255,255,0.06) inset; }
.btn-primary:hover { background: var(--gold-dark); box-shadow: var(--shadow-card); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); }
.section--dark .btn-secondary, .hero .btn-secondary, .pricing-custom .btn-secondary { color: var(--paper); border-color: var(--line-dark); }
.section--dark .btn-secondary:hover, .hero .btn-secondary:hover, .pricing-custom .btn-secondary:hover { border-color: var(--paper); }
.btn-ghost { color: var(--gold-dark); font-weight: 600; padding: 8px 0; }
.btn-ghost:hover { color: var(--gold-dark); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   En-tête du site
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Barre utilitaire au-dessus du header — coordonnées à gauche, réseaux à droite
   -------------------------------------------------------------------------- */
.site-topbar { background: var(--ink); color: rgba(250,247,240,0.75); font-size: 0.82rem; }
.site-topbar__inner { max-width: var(--container); margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-topbar__info { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-topbar__info a, .site-topbar__info span { color: inherit; }
.site-topbar__info a:hover { color: var(--gold); }
.site-topbar__socials { display: flex; align-items: center; gap: 14px; }
.site-topbar__socials a { display: flex; color: rgba(250,247,240,0.7); transition: color .12s ease; }
.site-topbar__socials a:hover { color: var(--gold); }
.site-topbar__socials svg { width: 15px; height: 15px; }
@media (max-width: 720px) { .site-topbar__inner { justify-content: center; text-align: center; } .site-topbar__info { justify-content: center; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,248,0.85); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; max-width: var(--container); margin: 0 auto; }
.site-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 800; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }
.site-logo img { height: 30px; width: auto; }
.primary-nav ul { display: flex; gap: 6px; align-items: center; }
.primary-nav a { font-weight: 500; font-size: 0.92rem; color: var(--slate); padding: 8px 14px; border-radius: 8px; transition: all .12s ease; }
.primary-nav a:hover { color: var(--ink); background: var(--gold-tint); }
.primary-nav a.is-active, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a {
  color: #fff; background: var(--gold); font-weight: 800;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: none; padding: 8px; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 5px 0; }

@media (max-width: 880px) {
  .primary-nav { position: fixed; inset: 68px 0 0 0; background: var(--paper); transform: translateY(-110%); transition: transform .25s ease; overflow-y: auto; padding: 24px; }
  .primary-nav.is-open { transform: translateY(0); }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .primary-nav a { display: block; padding: 14px 4px; width: 100%; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav-toggle { display: block; }
  .header-actions .btn-secondary { display: none; }
}

/* --------------------------------------------------------------------------
   Hero — le seul bloc réellement sombre du site
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding: 100px 0 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 22% 15%, black 15%, transparent 72%);
  pointer-events: none;
}
.hero__inner { position: relative; text-align: center; max-width: 780px; margin: 0 auto; display: block; }
.hero__eyebrow { color: var(--brass); justify-content: center; }
.hero h1 { font-size: var(--step-4); max-width: 680px; margin-left: auto; margin-right: auto; }
.hero .lede { color: rgba(250,250,248,0.7); margin: 0 auto 30px; max-width: 560px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }

.hero__trust {
  display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
  padding-top: 26px; padding-bottom: 8px; border-top: 1px solid var(--line-dark);
}
.hero__trust-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hero__trust-item strong { color: var(--paper); font-size: 0.92rem; font-weight: 600; }
.hero__trust-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--brass); display: flex; align-items: center; justify-content: center; color: var(--brass); flex-shrink: 0; position: relative; }
.hero__trust-icon::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(166,128,46,0.4); }
.hero__trust-icon svg { width: 12px; height: 12px; }
@media (max-width: 780px) { .hero__trust { gap: 22px; } .hero__trust-item strong { font-size: 0.82rem; } }

/* Une seule capture centrée, plus large que le texte au-dessus */
.hero__shot { position: relative; max-width: 980px; margin: 48px auto 0; }
.hero__shot-frame {
  border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-raised); background: var(--ink-soft); text-align: left;
}
.device-bar { display: flex; gap: 6px; padding: 12px 16px; background: rgba(250,247,240,0.04); border-bottom: 1px solid var(--line-dark); }
.device-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(250,247,240,0.18); }
.hero__shot-frame img, .hero__shot-frame .app-mockup { width: 100%; display: block; }
#hshot-dashboard:checked ~ .hero__shot-tabs label[data-for="dashboard"],
#hshot-residences:checked ~ .hero__shot-tabs label[data-for="residences"],
#hshot-recouvrement:checked ~ .hero__shot-tabs label[data-for="recouvrement"],
#hshot-quittances:checked ~ .hero__shot-tabs label[data-for="quittances"],
#hshot-documents:checked ~ .hero__shot-tabs label[data-for="documents"] {
  background: var(--gold); border-color: var(--gold); color: #fff;
}

@media (max-width: 960px) {
  .hero__trust { gap: 22px; }
}

/* --------------------------------------------------------------------------
   Maquette d'interface (remplace le placeholder tant qu'il n'y a pas de
   vraies captures) — fenêtre d'app stylisée avec barre + navigation + cartes,
   pour donner un aperçu crédible du produit sans jamais prétendre être une
   vraie capture d'écran (voir la légende toujours affichée avec).
   -------------------------------------------------------------------------- */
.app-mockup { display: block; width: 100%; aspect-ratio: 16/10.4; background: var(--ink-soft); }
.app-mockup__label {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(250,250,248,0.55); background: rgba(10,15,26,0.55); border: 1px solid var(--line-dark);
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.screen-frame .app-mockup__label { color: var(--slate-light); background: rgba(255,255,255,0.85); border-color: var(--line); }

/* --------------------------------------------------------------------------
   Icônes de catégorie — carrés discrets teintés (approche Attio/Stripe),
   plus l'anneau "cachet" réservé uniquement au badge de confiance du hero.
   -------------------------------------------------------------------------- */
.icon-tile, .seal-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--gold-tint); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 18px;
}
.icon-tile svg, .seal-icon svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Grilles de cartes
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 30px; box-shadow: var(--shadow-card); transition: box-shadow .15s ease, border-color .15s ease;
}
.card:hover { border-color: #D8D5CD; box-shadow: var(--shadow-raised); }
.card h3 { font-size: 1.1rem; margin-bottom: 8px; font-weight: 700; }
.card p { font-size: 0.92rem; }
.card p:last-child { margin-bottom: 0; }

.problem-card { padding: 24px 26px; border: 1px solid var(--line); background: var(--paper-raised); border-radius: var(--radius-m); border-left: 2.5px solid var(--danger); }
.problem-card h4 { font-weight: 700; margin: 0 0 6px; font-size: 0.96rem; color: var(--ink); }
.problem-card p { margin: 0; font-size: 0.88rem; }

.arrow-divider { display: flex; align-items: center; justify-content: center; margin: 44px 0; color: var(--gold-dark); font-family: var(--font-mono); font-size: 0.8rem; gap: 12px; }
.arrow-divider::before, .arrow-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.feature-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.feature-item:last-child { border-bottom: none; }
.feature-item__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 9px; flex-shrink: 0; }
.feature-item h4 { margin: 0 0 4px; font-weight: 700; font-size: 0.98rem; }
.feature-item p { margin: 0; font-size: 0.88rem; }

.category-block { padding: 40px 0; border-top: 1px solid var(--line); }
.category-block:first-of-type { border-top: none; padding-top: 0; }
.category-block__head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.category-block__index { font-family: var(--font-mono); color: var(--slate-light); font-size: 0.85rem; }
.category-block .icon-tile, .category-block .seal-icon { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Avant / Après — storytelling
   -------------------------------------------------------------------------- */
.chaos-layout { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .chaos-layout { grid-template-columns: 1fr; } }
.chaos-list { margin-top: 28px; }
.chaos-list li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.chaos-list li:last-child { border-bottom: none; }
.chaos-list strong { color: var(--slate-light); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; flex-shrink: 0; }
.chaos-list span { color: var(--slate); }
.chaos-layout__art { max-width: 420px; margin: 0 auto; }
.chaos-layout__art svg { width: 100%; height: auto; }

.chaos-arrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 40px 0; text-align: center; }
.chaos-arrow span { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold-dark); font-weight: 500; background: var(--gold-tint); padding: 10px 20px; border-radius: 999px; }

.after-card { background: var(--ink); color: var(--paper); border-radius: var(--radius-l); padding: 40px 44px; text-align: center; }
.after-card__badge { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); border: 1px solid var(--gold); padding: 5px 14px; border-radius: 999px; margin-bottom: 18px; }
.after-card__text { color: rgba(250,247,240,0.82); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }


/* --------------------------------------------------------------------------
   Confiance — liste élégante plutôt que des cartes répétitives
   -------------------------------------------------------------------------- */
.trust-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .trust-layout { grid-template-columns: 1fr; } }
.trust-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
@media (max-width: 560px) { .trust-checklist { grid-template-columns: 1fr; } }
.trust-checklist li {
  display: flex; align-items: center; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid var(--line-dark); font-size: 0.98rem; color: var(--paper); font-weight: 500;
}
.trust-checklist li::before {
  content: "✓"; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--seal-tint); color: var(--seal-dark); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}


.how-step { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); }
.how-step:last-child { border-bottom: none; }
.how-step--reverse { direction: rtl; }
.how-step--reverse > * { direction: ltr; }
@media (max-width: 860px) { .how-step, .how-step--reverse { grid-template-columns: 1fr; direction: ltr; } }
.how-step__num { font-family: var(--font-mono); color: var(--gold); font-size: 0.85rem; display: block; margin-bottom: 14px; }
.how-step__text h3 { font-size: 1.4rem; margin-bottom: 10px; }
.how-step__text p { font-size: 0.98rem; }
.how-step__frame { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-raised); background: var(--paper-raised); }
.how-step__frame .device-bar { background: #F1EDE0; border-bottom: 1px solid var(--line); }
.how-step__frame .device-bar span { background: #DED7C2; }
.how-step__frame img, .how-step__frame .app-mockup { width: 100%; display: block; }

.benefit-row { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.benefit-row:last-child { border-bottom: none; }
.benefit-row__mark { font-family: var(--font-mono); color: var(--brass); font-size: 0.8rem; padding-top: 4px; min-width: 32px; }
.benefit-row h4 { font-size: 1rem; margin-bottom: 4px; font-weight: 700; }
.benefit-row p { margin: 0; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Galerie de captures
   -------------------------------------------------------------------------- */
.screens-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .screens-gallery { grid-template-columns: 1fr; } }
.screen-frame { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: var(--paper-raised); }
.screen-frame__bar { display: flex; gap: 6px; padding: 10px 12px; background: #F1EFEA; border-bottom: 1px solid var(--line); }
.screen-frame__bar span { width: 8px; height: 8px; border-radius: 50%; background: #D8D5CD; }
.screen-frame .app-mockup { position: relative; aspect-ratio: 4/3; }
.screen-frame figcaption { padding: 13px 16px; font-size: 0.83rem; color: var(--slate); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plan-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 34px 28px; display: flex; flex-direction: column; position: relative;
}
.plan-card--featured { border: 1.5px solid var(--ink); box-shadow: var(--shadow-raised); }
.plan-card__badge {
  position: absolute; top: -12px; left: 28px; background: var(--ink); color: var(--paper);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.plan-card__name { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.plan-card__tagline { font-size: 0.86rem; color: var(--slate); margin-bottom: 24px; min-height: 40px; }
.plan-card__price { font-weight: 800; font-size: 2.2rem; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.02em; }
.plan-card__price small { font-weight: 500; font-size: 0.92rem; color: var(--slate); }
.plan-card__price-note { font-size: 0.75rem; color: var(--slate-light); margin-bottom: 26px; font-family: var(--font-mono); }
.plan-card__features { margin-bottom: 28px; flex-grow: 1; }
.plan-card__features li { display: flex; gap: 10px; padding: 7px 0; font-size: 0.89rem; align-items: flex-start; color: var(--ink); }
.plan-card__features li::before { content: "✓"; color: var(--seal); font-weight: 700; flex-shrink: 0; }

.pricing-custom {
  margin-top: 56px; text-align: center; padding: 48px 44px; border-radius: var(--radius-l);
  background: var(--ink); color: var(--paper);
}
.pricing-custom h3 { color: var(--paper); }
.pricing-custom p { color: rgba(250,250,248,0.7); max-width: 520px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Processus (virement)
   -------------------------------------------------------------------------- */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } }
.process-step { counter-increment: step; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper-raised); }
.process-step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); color: var(--brass); font-size: 0.8rem; display: block; margin-bottom: 10px; }
.process-step h4 { font-size: 0.94rem; margin-bottom: 6px; font-weight: 700; }
.process-step p { font-size: 0.84rem; margin: 0; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; font-size: 0.87rem; margin-bottom: 6px; }
.form-field .hint { font-size: 0.76rem; color: var(--slate-light); margin-top: 4px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font-family: var(--font-sans); font-size: 0.92rem; background: #fff; color: var(--ink);
  transition: border-color .12s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); outline: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 38px; box-shadow: var(--shadow-card); }
.form-notice { padding: 13px 16px; border-radius: var(--radius-s); font-size: 0.88rem; margin-bottom: 22px; }
.form-notice--success { background: var(--seal-tint); color: var(--seal-dark); border: 1px solid var(--seal); }
.form-notice--error { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); }

.bank-details { background: var(--ink); color: var(--paper); border-radius: var(--radius-m); padding: 26px 28px; margin: 0; flex: 1; }
.bank-details-block { display: flex; gap: 20px; align-items: stretch; margin: 22px 0; flex-wrap: wrap; }
.bank-qr { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; }
.bank-details dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-family: var(--font-mono); font-size: 0.88rem; }
.bank-details dt { color: rgba(250,250,248,0.5); }
.bank-details dd { margin: 0; color: var(--paper); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-list { max-width: 740px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: 20px 4px; cursor: pointer; font-weight: 600; font-size: 0.98rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--gold-dark); font-size: 1.2rem; flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item__body { padding: 0 4px 20px; color: var(--slate); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } }
.post-card__thumb { aspect-ratio: 16/10; border-radius: var(--radius-m); overflow: hidden; margin-bottom: 16px; background: var(--line); border: 1px solid var(--line); }
.post-card__thumb-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F1EFEA, #E8E6E1); color: var(--slate-light);
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__cat { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-dark); margin-bottom: 8px; display: block; }
.post-card h3 { font-size: 1.06rem; margin-bottom: 8px; font-weight: 700; }
.post-card__meta { font-size: 0.78rem; color: var(--slate-light); }

.single-article { max-width: 720px; margin: 0 auto; }
.single-article__meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate-light); margin-bottom: 24px; }
.single-article__body h2 { font-size: 1.4rem; margin-top: 2em; font-weight: 700; }
.single-article__body h3 { font-size: 1.15rem; margin-top: 1.6em; font-weight: 700; }
.single-article__body p, .single-article__body li { color: var(--ink); font-size: 1rem; }
.single-article__body ul, .single-article__body ol { margin: 1em 0; padding-left: 1.4em; list-style: disc; }
.single-article__sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.83rem; color: var(--slate-light); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(250,250,248,0.65); padding: 76px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h5 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass); margin-bottom: 16px; font-weight: 500; }
.footer-grid li { padding: 6px 0; font-size: 0.88rem; }
.footer-grid a:hover { color: var(--paper); }
.footer-brand { font-weight: 800; color: var(--paper); font-size: 1.1rem; margin-bottom: 10px; letter-spacing: -0.01em; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.78rem; }
.footer-socials { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.footer-socials a { width: 40px !important; height: 40px !important; border-radius: 50%; border: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: center; color: rgba(250,247,240,0.75); transition: all .12s ease; flex-shrink: 0; overflow: hidden; }
.footer-socials a:hover { color: var(--paper); border-color: var(--gold); background: rgba(184,145,47,0.14); }
.footer-socials svg { width: 20px !important; height: 20px !important; max-width: 20px; max-height: 20px; display: block; }

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */
.text-center { text-align: center; margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; background: var(--seal-tint); color: var(--seal-dark);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em;
}
.badge--placeholder { background: var(--brass-tint); color: #7A5F20; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: #fff; padding: 12px 18px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   Page Support — guide illustré, reprend fidèlement le système visuel du
   guide d'utilisation fourni (Fraunces + Manrope, parchemin, laiton, cartes
   d'action avec badges "plaque de porte"). Isolé sous .guide-page pour ne
   jamais affecter le reste du site.
   ========================================================================== */
.guide-page {
  --g-bg: #F6F4EF;
  --g-surface: #FFFFFF;
  --g-ink: #1D2733;
  --g-ink-soft: #5B6672;
  --g-accent: #A87C3F;
  --g-accent-deep: #8A6530;
  --g-accent-soft: #F0E4CF;
  --g-success: #3F7A5B;
  --g-success-soft: #E3F0E9;
  --g-danger: #B54C3B;
  --g-danger-soft: #F6E5E1;
  --g-border: #E4DFD3;
  --g-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --g-font-body: 'Manrope', 'Segoe UI', Arial, sans-serif;
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: var(--g-font-body);
  padding: 72px 0;
}
.guide-page h1, .guide-page h2, .guide-page h3 { font-family: var(--g-font-display); color: var(--g-ink); font-weight: 700; }
.guide-page p { color: var(--g-ink-soft); }
.guide-page .breadcrumb, .guide-page .eyebrow { font-family: var(--g-font-body); }
.guide-page .eyebrow { color: var(--g-accent-deep); }
.guide-page .eyebrow::before { background: var(--g-accent-deep); }
.guide-page .lede { color: var(--g-ink-soft); }

.guide-page .g-section-head { display: flex; align-items: baseline; gap: 14px; margin: 64px 0 8px; }
.guide-page .g-section-head:first-of-type { margin-top: 0; }
.guide-page .g-section-head h2 { font-size: 1.7rem; margin: 0; }
.guide-page .g-section-intro { color: var(--g-ink-soft); margin: 6px 0 32px; max-width: 680px; }

/* Étapes "plaque de porte" */
.guide-page ol.g-steps { list-style: none; margin: 0; padding: 0; counter-reset: gstep; }
.guide-page ol.g-steps > li { position: relative; padding: 4px 0 4px 62px; margin-bottom: 22px; counter-increment: gstep; }
.guide-page ol.g-steps > li::before {
  content: counter(gstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 9px;
  background: var(--g-surface); border: 2px solid var(--g-accent-deep); color: var(--g-accent-deep);
  font-family: var(--g-font-display); font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center;
}
.guide-page ol.g-steps > li h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.guide-page ol.g-steps > li p { margin: 0; }

/* Cartes d'action visuelles */
.guide-page .g-action-card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 16px; padding: 26px 28px 28px; margin-bottom: 30px; }
.guide-page .g-action-card:nth-child(even) { background: #FBFAF7; }
.guide-page .g-action-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.guide-page .g-action-num { font-family: var(--g-font-display); font-weight: 700; font-size: 0.85rem; color: var(--g-accent-deep); background: var(--g-accent-soft); border-radius: 7px; padding: 3px 9px; flex-shrink: 0; }
.guide-page .g-action-head h3 { font-size: 1.28rem; margin: 0; }
.guide-page .g-eyebrow-label { font-family: var(--g-font-body); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g-accent-deep); margin: 20px 0 10px; }
.guide-page .g-action-image { border: 1px solid var(--g-border); border-radius: 12px; overflow: hidden; background: var(--g-bg); box-shadow: 0 6px 18px rgba(29,39,51,.08); }
.guide-page .g-action-image img { display: block; width: 100%; height: auto; }
.guide-page .g-action-columns { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: start; margin-top: 4px; }
@media (max-width: 760px) { .guide-page .g-action-columns { grid-template-columns: 1fr; } }

.guide-page ol.g-ac-steps { list-style: none; margin: 0; padding: 0; counter-reset: gacstep; }
.guide-page ol.g-ac-steps li { position: relative; padding: 2px 0 2px 40px; margin-bottom: 12px; counter-increment: gacstep; font-size: 0.94rem; color: var(--g-ink); }
.guide-page ol.g-ac-steps li::before {
  content: counter(gacstep); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 7px;
  background: var(--g-accent-soft); color: var(--g-accent-deep); border: 1.5px solid var(--g-border);
  font-family: var(--g-font-display); font-weight: 700; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}

.guide-page .g-callout { border-radius: 12px; padding: 18px 20px; margin: 16px 0 0; border: 1px solid; display: flex; gap: 14px; }
.guide-page .g-callout .g-callout-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.guide-page .g-callout-body h4 { margin: 0 0 4px; font-family: var(--g-font-body); font-weight: 800; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; }
.guide-page .g-callout-body p { margin: 0; font-size: 0.93rem; }
.guide-page .g-callout--conseil { background: var(--g-success-soft); border-color: #CFE3D7; }
.guide-page .g-callout--conseil h4 { color: var(--g-success); }
.guide-page .g-callout--attention { background: var(--g-danger-soft); border-color: #E7C9C1; }
.guide-page .g-callout--attention h4 { color: var(--g-danger); }

.guide-page .g-quickstart { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 16px; padding: 28px 30px; margin-top: 40px; }
.guide-page .g-quickstart__label { font-family: var(--g-font-body); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-accent-deep); }
.guide-page .g-quickstart__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 860px) { .guide-page .g-quickstart__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .guide-page .g-quickstart__grid { grid-template-columns: 1fr; } }
.guide-page .g-quickstart__item { display: flex; gap: 12px; }
.guide-page .g-quickstart__num { font-family: var(--g-font-display); font-weight: 700; color: var(--g-accent); font-size: 0.95rem; flex-shrink: 0; }
.guide-page .g-quickstart__item strong { display: block; font-size: 0.92rem; color: var(--g-ink); margin-bottom: 3px; }
.guide-page .g-quickstart__item p { margin: 0; font-size: 0.82rem; color: var(--g-ink-soft); line-height: 1.5; }

.guide-page .faq-item summary { color: var(--g-ink); }
.guide-page .faq-item summary::after { color: var(--g-accent-deep); }
.guide-page .faq-item__body p { color: var(--g-ink-soft); }
.guide-page .faq-list { max-width: 760px; margin: 0 auto; }