/* auger-kantor.fr — éléments communs (10/2026), repris de ameisen.fr et adaptés aux couleurs de Julie.
   Les couleurs (--primary…) sont définies dans chaque page. */

/* ── Menu ── */
.site-nav { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--border, #e5e7eb); box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.site-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 54px; gap: 8px; }
.site-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.site-nav-links a { padding: 7px 13px; text-decoration: none; color: var(--text-light, #6b7280); font-size: .88em; font-weight: 500; border-radius: 6px; transition: all .2s; white-space: nowrap; }
.site-nav-links a:hover, .site-nav-links a.active { background: var(--bg-secondary, #f9fafb); color: var(--primary); }
.site-nav-links a.active { font-weight: 600; }
.site-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-nav-lang { display: flex; gap: 2px; background: var(--bg-secondary, #f9fafb); border-radius: 6px; padding: 3px; }
.site-nav-lang a { padding: 4px 10px; text-decoration: none; color: var(--text-light, #6b7280); border-radius: 4px; font-size: .82em; font-weight: 600; transition: all .2s; }
.site-nav-lang a.active { background: var(--primary); color: #fff; }
.site-nav-cta { background: var(--primary); color: #fff; padding: 7px 16px; border-radius: 20px; text-decoration: none; font-size: .85em; font-weight: 600; transition: background .2s; white-space: nowrap; }
.site-nav-cta:hover { background: var(--primary-dark); }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-light, #6b7280); margin-left: 4px; }
.hamburger:hover { color: var(--primary); }
@media (max-width: 768px) {
    .site-nav-links { display: none; position: fixed; top: 54px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border, #e5e7eb); flex-direction: column; align-items: flex-start; padding: 10px 20px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.1); gap: 2px; z-index: 999; }
    .site-nav-links.open { display: flex; }
    .site-nav-links a { width: 100%; padding: 11px 14px; font-size: .95em; }
    .hamburger { display: flex; }
    .site-nav-cta { font-size: .8em; padding: 6px 12px; }
}
html { scroll-padding-top: 64px; }

/* ── Barre de confiance ── */
.trust-bar { background: var(--bg-secondary, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); padding: 14px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.88em; color: var(--text, #1f2937); white-space: nowrap; }
.trust-item svg { width: 17px; height: 17px; fill: var(--primary); flex-shrink: 0; }
.trust-item strong { color: var(--primary-dark); }
@media (max-width: 480px) { .trust-item { font-size: 0.82em; white-space: normal; } }

/* ── Étapes « Comment ça marche » ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 24px; }
.step { text-align: center; padding: 24px 16px; }
.step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.4em; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.step-title { font-weight: 600; margin-bottom: 8px; text-align: center; }
.step-text { color: var(--text-light, #6b7280); font-size: 0.9em; text-align: center; }

/* ── Cartes (interprétation) ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 20px; }
.card { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 20px; background: #fff; }
.card-title { font-weight: 600; color: var(--primary-dark); margin-bottom: 8px; text-align: left; }
.card-text { color: var(--text-light, #6b7280); font-size: .93em; text-align: left; }
.section-intro { color: var(--text-light, #6b7280); margin-top: 12px; }