/* common.css — Éléments partagés jonathanphilippe.fr */

/* ── Fonts ────────────────────────────────── */
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/Lato-Regular.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/Lato-Bold.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:italic; font-weight:400; font-display:swap; src:url(/fonts/Lato-Italic.woff2) format('woff2'); }
@font-face { font-family:'Merriweather'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/Merriweather-Regular.woff2) format('woff2'); }
@font-face { font-family:'Merriweather'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/Merriweather-Bold.woff2) format('woff2'); }

/* ── Variables & Reset ────────────────────── */
:root { --blue:#1a3a3a; --accent:#2a7f7f; --light:#f3f9f9; --text:#333; --gray:#666; --max-w:720px; --font-body:'Lato','Helvetica Neue',Arial,sans-serif; --font-title:'Merriweather',Georgia,serif; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); color:var(--text); line-height:1.7; background:#fff; }
p { margin-bottom:14px; }

/* ── Toggle bar (synthèse ↔ visuel) ───────── */
.toggle-bar { background:var(--blue); padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.toggle-back { font-size:0.82em; color:rgba(255,255,255,0.5); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.toggle-back:hover { color:rgba(255,255,255,0.85); }
.toggle-nav { display:flex; flex:1; justify-content:center; }
.toggle-btn { display:inline-block; padding:14px 20px; font-family:var(--font-body); font-size:0.82em; font-weight:700; letter-spacing:0.04em; color:rgba(255,255,255,0.5); text-decoration:none; border-bottom:3px solid transparent; transition:color 0.2s, border-color 0.2s; }
.toggle-btn:hover { color:rgba(255,255,255,0.85); }
.toggle-btn.active { color:white; border-bottom-color:var(--accent); }
.toggle-site { font-size:0.78em; color:rgba(255,255,255,0.3); flex-shrink:0; }

/* ── Navigation bas de page ───────────────── */
.nav-bas { background:var(--light); padding:32px 24px; }
.nav-bas-inner { max-width:var(--max-w); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.nav-bas a { color:var(--accent); text-decoration:none; font-weight:700; font-size:0.9em; border-bottom:1px solid var(--accent); padding-bottom:2px; }
.nav-bas a:hover { color:var(--blue); border-bottom-color:var(--blue); }

/* ── Section headers (numéro + titre) ─────── */
.section-header { display:flex; align-items:baseline; gap:14px; margin:40px 0 28px; padding-bottom:14px; border-bottom:2px solid var(--accent); }
.section-header:first-child { margin-top:0; }
.section-num { font-family:var(--font-title); font-size:1.8em; font-weight:900; color:var(--accent); line-height:1; flex-shrink:0; }
.section-title { font-family:var(--font-title); font-size:1.3em; font-weight:700; color:var(--blue); margin:0; padding:0; border:none; display:inline; }

/* ── Hero + Stats (partagé synthèses & visuels) ── */
.hero { background:var(--blue); color:white; padding:64px 40px 56px; }
.hero-label { font-size:0.72em; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#3aafaf; margin-bottom:16px; }
.hero h1 { font-family:var(--font-title); font-size:clamp(2em,5vw,3.2em); font-weight:900; line-height:1.1; margin-bottom:16px; }
.hero-claim { font-size:1.1em; font-weight:300; color:rgba(255,255,255,0.7); max-width:480px; }
.hero-claim strong { color:#3aafaf; font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); background:#2a7f7f; }
.stat { padding:36px 28px; border-right:1px solid rgba(255,255,255,0.15); color:white; text-align:center; }
.stat:last-child { border-right:none; }
.stat-num { font-family:var(--font-title); font-size:clamp(2.4em,5vw,3.6em); font-weight:900; line-height:1; display:block; margin-bottom:8px; }
.stat-label { font-size:0.82em; color:rgba(255,255,255,0.8); line-height:1.4; }
@media (max-width:600px) { .stats { grid-template-columns:1fr; } .stat { border-right:none; border-bottom:1px solid rgba(255,255,255,0.15); } .hero { padding:40px 24px; } }

/* ── Footer ───────────────────────────────── */
footer { text-align:center; padding:24px; color:var(--gray); font-size:0.85em; border-top:1px solid #e0e0e0; }
footer a { color:var(--accent); text-decoration:none; }

/* ── Responsive commun ────────────────────── */
@media (max-width:600px) {
  .toggle-bar { flex-direction:column; padding:12px 16px; gap:8px; }
  .toggle-back { order:-1; }
  .toggle-nav { width:100%; justify-content:center; }
  .toggle-site { display:none; }
  .nav-bas-inner { flex-direction:column; align-items:center; gap:12px; }
}