/* ============================================================
   site.css — Styles globaux partagés
   David Ameisen — Traducteur assermenté
   ============================================================ */

/* ── Variables ── */
:root {
    --primary:      #4a7c8c;
    --primary-dark: #36606d;
    --text:         #1f2937;
    --text-light:   #6b7280;
    --bg:           #ffffff;
    --bg-secondary: #f9fafb;
    --border:       #e5e7eb;
}

/* ── Reset & base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); }
a { cursor: pointer; }
h1 { font-size: 2.2em; font-weight: 700; margin-bottom: 16px; line-height: 1.25; }
@media (max-width: 768px) { h1 { font-size: 1.7em; } }

/* ── Navigation ── */
.site-nav { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--border); 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); 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); 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); border-radius: 6px; padding: 3px; }
.site-nav-lang a { padding: 4px 10px; text-decoration: none; color: var(--text-light); 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); 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); 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; }
}

/* ── Legacy language toggle (hidden, used for JS) ── */
.language-toggle { position: fixed; top: 20px; right: 20px; z-index: 1000; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 8px; display: flex; gap: 4px; }
.language-toggle a { padding: 8px 16px; text-decoration: none; color: var(--text); border-radius: 6px; transition: all .3s; font-weight: 500; font-size: 14px; }
.language-toggle a:hover { background: var(--bg-secondary); }
.language-toggle a.active { background: var(--primary); color: white; }

/* ── Site header / hero ── */
header, .site-header { background: linear-gradient(135deg, #4a7c8c 0%, #6b9aaa 100%); color: white; text-align: center; }
.site-header { padding: 60px 20px 50px; }
.site-header a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-header a:hover { color: white; }
.header-content { max-width: 860px; margin: 0 auto; }
.profile-image { width: 130px; height: 130px; border-radius: 50%; border: 4px solid white; margin: 0 auto 18px; display: block; box-shadow: 0 6px 20px rgba(0,0,0,0.2); object-fit: cover; }
.profile-name { font-size: 2em; font-weight: 700; margin-bottom: 8px; }
.profile-subtitle-text { font-size: 1.1em; opacity: 0.93; margin-bottom: 4px; }
.profile-credentials { font-size: 0.9em; opacity: 0.83; line-height: 1.8; margin-bottom: 28px; }
.header-divider { width: 50px; height: 1px; background: rgba(255,255,255,0.3); margin: 0 auto 24px; }
.post-meta { font-size: 0.9em; opacity: 0.85; }
.breadcrumb { font-size: 0.88em; opacity: 0.85; margin-bottom: 20px; }
.breadcrumb span { opacity: 0.6; margin: 0 6px; }

/* ── Trust bar ── */
.trust-bar { background: white; padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .88em; color: var(--text-light); }
.trust-item svg { width: 17px; height: 17px; fill: var(--primary); flex-shrink: 0; }

/* ── Contact bar ── */
.contact-bar-std { background: #fff; border-bottom: 1px solid var(--border); padding: 14px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 30px; }
.contact-bar-std a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: .9em; font-weight: 500; transition: color .2s; }
.contact-bar-std a:hover { color: var(--primary); }
.contact-bar-std svg { width: 18px; height: 18px; fill: var(--primary); flex-shrink: 0; }
@media (max-width: 600px) { .contact-bar-std { gap: 12px 20px; font-size: .82em; } }

/* ── Sticky CTA ── */
.sticky-cta { position: fixed; bottom: 24px; left: 24px; z-index: 999; background: var(--primary); color: white; text-decoration: none; padding: 14px 22px; border-radius: 50px; font-weight: 600; font-size: .95em; box-shadow: 0 4px 16px rgba(74,124,140,.45); display: flex; align-items: center; gap: 8px; transition: background .2s, transform .2s; }
.sticky-cta:hover { background: var(--primary-dark); transform: translateY(-2px); }
.sticky-cta svg { width: 18px; height: 18px; fill: white; }
.grecaptcha-badge { visibility: hidden !important; }
@media (max-width: 768px) { .sticky-cta { display: none; } }