/* ===========================================================
   TESTOSTERONE SCIENCE - stylesheet
   DA: revue scientifique / institut de recherche.
   Serif pour les titres (autorite academique), sans-serif pour
   le corps. Bleu nuit + accent ambre. Volontairement different
   du magazine Health Verdict (Inter partout, accents teal/rouge).
   =========================================================== */

:root {
  --navy: #0f2233;
  --navy-light: #1c3a52;
  --amber: #b8791f;
  --amber-dark: #96601a;
  --ink: #16202b;
  --body: #33414f;
  --muted: #6a7887;
  --line: #e2e6ea;
  --bg-soft: #f7f8f9;
  --bg-card: #fafaf9;
  --green: #2f7d52;
  --red: #b3352b;
  --w: 780px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  background: #fff;
}

img { max-width:100%; height:auto; display:block; }
a { color: var(--navy-light); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--amber-dark); }

h1,h2,h3,h4 { font-family: Georgia, "Times New Roman", serif; color: var(--ink); font-weight:700; }

/* ---------- Header ---------- */
.site-header { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:100; }
.header-inner { max-width:1180px; margin:0 auto; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark {
  width:42px; height:42px; flex-shrink:0; border-radius:3px;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-size:21px; font-weight:700;
}
.brand-text { font-family:Georgia,serif; font-size:19px; font-weight:700; color:var(--ink); line-height:1.1; letter-spacing:-0.01em; }
.brand-sub { display:block; font-family:-apple-system,sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.main-nav { display:flex; gap:26px; }
.main-nav a { font-size:14.5px; font-weight:600; color:var(--body); text-decoration:none; }
.main-nav a:hover { color:var(--amber-dark); }

/* ---------- Layout ---------- */
.wrap { max-width:var(--w); margin:0 auto; padding:0 22px; }
.wrap-wide { max-width:1180px; margin:0 auto; padding:0 22px; }

.breadcrumb { font-size:13px; color:var(--muted); padding:20px 0 0; }
.breadcrumb a { color:var(--muted); }
.breadcrumb .sep { margin:0 7px; }

/* ---------- Article ---------- */
.article { max-width:var(--w); margin:0 auto; padding:6px 22px 50px; }
.article h1 { font-size:38px; line-height:1.24; margin:14px 0 18px; letter-spacing:-0.015em; }
.eyebrow { font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-dark); margin-bottom:6px; }
.standfirst { font-size:20px; line-height:1.6; color:var(--muted); margin-bottom:26px; }

.byline { display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:30px; }
.byline-avatar { width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-weight:700; font-size:17px; flex-shrink:0; }
.byline-main { font-size:14.5px; }
.byline-main strong { color:var(--ink); }
.byline-meta { font-size:13px; color:var(--muted); }

.article-body p { margin:0 0 22px; }
.article-body h2 { font-size:27px; line-height:1.32; margin:42px 0 16px; }
.article-body h3 { font-size:21px; line-height:1.4; margin:32px 0 12px; }
.article-body h4 { font-family:-apple-system,sans-serif; font-size:15px; font-weight:700; color:var(--ink); margin:26px 0 10px; letter-spacing:0.02em; }
.article-body ul, .article-body ol { margin:0 0 22px; padding-left:22px; }
.article-body li { margin-bottom:10px; }
.article-body strong { color:var(--ink); }
figure { margin:30px 0; }
figcaption { font-size:13px; color:var(--muted); padding-top:9px; border-top:1px solid var(--line); margin-top:9px; }
sup a, sup { font-size:11.5px; color:var(--amber-dark); text-decoration:none; }

blockquote {
  border-left:3px solid var(--amber); background:var(--bg-soft);
  padding:18px 22px; margin:26px 0; font-size:18px; color:var(--ink);
}

/* Encart "key finding" */
.callout { border:1px solid var(--line); border-left:4px solid var(--navy); background:var(--bg-soft); padding:20px 24px; margin:28px 0; }
.callout-label { font-size:11.5px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--navy); margin-bottom:8px; }
.callout p:last-child { margin-bottom:0; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x:auto; margin:0 0 26px; }
table { width:100%; border-collapse:collapse; font-size:14.5px; }
th, td { border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top; }
th { background:var(--navy); color:#fff; font-weight:600; font-size:13.5px; letter-spacing:0.02em; }
tbody tr:nth-child(even) { background:var(--bg-soft); }
td.yes { color:var(--green); font-weight:600; }
td.no { color:var(--red); font-weight:600; }

/* ---------- Ranking cards ---------- */
.rank-card { border:1px solid var(--line); border-radius:4px; margin:0 0 34px; overflow:hidden; }
.rank-card.is-winner { border-color:var(--amber); border-width:2px; }
.rank-head { display:flex; align-items:center; gap:16px; padding:16px 22px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.rank-card.is-winner .rank-head { background:#fdf7ec; }
.rank-num { width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; font-family:Georgia,serif; font-size:19px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rank-card.is-winner .rank-num { background:var(--amber); }
.rank-title { font-family:Georgia,serif; font-size:21px; font-weight:700; color:var(--ink); line-height:1.25; }
.rank-score { margin-left:auto; text-align:right; flex-shrink:0; }
.rank-score-num { font-family:Georgia,serif; font-size:27px; font-weight:700; color:var(--ink); line-height:1; }
.rank-score-label { font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.rank-body { padding:22px; }
.rank-grid { display:grid; grid-template-columns:220px 1fr; gap:26px; align-items:start; }
.rank-photo { background:var(--bg-card); border:1px solid var(--line); border-radius:3px; }
.rank-verdict { font-size:17.5px; color:var(--ink); font-weight:600; margin-bottom:16px; line-height:1.5; }
.spec-list { list-style:none; padding:0; margin:0 0 18px; font-size:14.5px; }
.spec-list li { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); }
.spec-list li span:first-child { color:var(--muted); }
.spec-list li span:last-child { color:var(--ink); font-weight:600; text-align:right; }
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.pros-cons h5 { font-family:-apple-system,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; }
.pros h5 { color:var(--green); } .cons h5 { color:var(--red); }
.pros-cons ul { list-style:none; padding:0; margin:0; font-size:14.5px; }
.pros-cons li { padding-left:18px; position:relative; margin-bottom:7px; line-height:1.5; }
.pros li::before { content:"+"; position:absolute; left:0; color:var(--green); font-weight:700; }
.cons li::before { content:"\2212"; position:absolute; left:0; color:var(--red); font-weight:700; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; background:var(--amber); color:#fff !important; text-decoration:none !important;
  font-weight:700; font-size:15.5px; padding:14px 28px; border-radius:3px; text-align:center;
  transition:background .15s ease; border:none; cursor:pointer;
}
.btn:hover { background:var(--amber-dark); }
.btn-block { display:block; width:100%; }
.btn-outline { background:transparent; color:var(--navy) !important; border:1px solid var(--line); font-weight:600; }
.btn-outline:hover { background:var(--bg-soft); border-color:var(--muted); }
.btn-note { font-size:12.5px; color:var(--muted); text-align:center; margin-top:9px; }

/* ---------- Homepage ---------- */
.hero { background:var(--navy); color:#fff; padding:62px 22px; }
.hero-inner { max-width:1180px; margin:0 auto; }
.hero h1 { color:#fff; font-size:44px; line-height:1.18; max-width:760px; margin-bottom:18px; letter-spacing:-0.02em; }
.hero p { font-size:19px; color:#b9c6d2; max-width:640px; margin-bottom:26px; }
.hero-stats { display:flex; flex-wrap:wrap; gap:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.15); }
.hero-stat-num { font-family:Georgia,serif; font-size:29px; font-weight:700; color:#fff; }
.hero-stat-label { font-size:12.5px; color:#93a4b4; letter-spacing:0.04em; }

.section { padding:54px 0; }
.section-alt { background:var(--bg-soft); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:28px; flex-wrap:wrap; }
.section-head h2 { font-size:29px; }
.section-head a { font-size:14.5px; font-weight:600; }

.grid { display:grid; gap:28px; }
.grid-3 { grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }

.card { background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:box-shadow .16s ease, transform .16s ease; }
.card:hover { box-shadow:0 6px 22px rgba(15,34,51,.09); transform:translateY(-2px); }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.card-body { padding:19px 21px 22px; }
.card-tag { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-dark); }
.card h3 { font-size:19.5px; line-height:1.35; margin:9px 0 10px; }
.card p { font-size:14.5px; color:var(--muted); line-height:1.6; margin-bottom:12px; }
.card-meta { font-size:12.5px; color:var(--muted); margin-top:auto; }

/* Feature (article vedette) */
.feature { display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; text-decoration:none; color:inherit; }
.feature img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.feature-body { padding:30px 34px 30px 0; }
.feature h2 { font-size:31px; line-height:1.24; margin:10px 0 13px; }
.feature p { color:var(--muted); font-size:16px; margin-bottom:14px; }

/* ---------- Auteurs ---------- */
.author-card { display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); border-radius:4px; padding:22px; background:#fff; }
.author-avatar { width:64px; height:64px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:22px; font-weight:700; flex-shrink:0; }
.author-name { font-family:Georgia,serif; font-size:19px; font-weight:700; color:var(--ink); }
.author-role { font-size:13px; color:var(--amber-dark); font-weight:600; letter-spacing:0.03em; margin-bottom:8px; }
.author-bio { font-size:14.5px; color:var(--muted); line-height:1.65; }

/* ---------- Sources ---------- */
.sources { border-top:1px solid var(--line); margin-top:40px; padding-top:22px; }
.sources h3 { font-size:16px; margin-bottom:14px; }
.sources ol { font-size:13.5px; color:var(--muted); padding-left:20px; }
.sources li { margin-bottom:9px; line-height:1.6; }

.disclosure { font-size:13px; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); padding:13px 17px; border-radius:3px; margin:26px 0; }

/* ---------- Newsletter + footer ---------- */
.newsletter { background:var(--navy); color:#fff; padding:52px 22px; }
.newsletter-inner { max-width:var(--w); margin:0 auto; text-align:center; }
.newsletter h2 { color:#fff; font-size:27px; margin-bottom:11px; }
.newsletter p { color:#b0bfcd; margin-bottom:22px; }
.newsletter-form { display:flex; gap:10px; max-width:470px; margin:0 auto; }
.newsletter-form input { flex:1; border:none; padding:14px 15px; font-size:15px; border-radius:3px; font-family:inherit; }
.newsletter-form button { flex-shrink:0; }

.site-footer { background:#0a1721; color:#8fa1b0; padding:44px 22px 30px; font-size:14px; }
.footer-inner { max-width:1180px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px; margin-bottom:30px; }
.footer-grid h4 { color:#fff; font-family:-apple-system,sans-serif; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:13px; }
.footer-grid a { display:block; color:#8fa1b0; text-decoration:none; margin-bottom:9px; font-size:14px; }
.footer-grid a:hover { color:#fff; }
.footer-legal { border-top:1px solid #1b2c3a; padding-top:20px; font-size:12.5px; line-height:1.7; color:#6c7d8b; }

/* ---------- Responsive ---------- */
@media (max-width:860px) {
  .feature { grid-template-columns:1fr; }
  .feature-body { padding:0 26px 28px; }
  .rank-grid { grid-template-columns:1fr; }
  .rank-photo { max-width:230px; margin:0 auto; }
}
@media (max-width:620px) {
  body { font-size:16.5px; }
  .article h1 { font-size:29px; }
  .hero h1 { font-size:31px; }
  .hero p { font-size:17px; }
  .article-body h2 { font-size:23px; }
  .main-nav { display:none; }
  .pros-cons { grid-template-columns:1fr; }
  .rank-head { flex-wrap:wrap; }
  .rank-score { margin-left:0; text-align:left; }
  .newsletter-form { flex-direction:column; }
  .hero-stats { gap:22px; }
}