/*
Theme Name: Constellation Bio
Theme URI: https://example.com/constellation-bio
Author: Votre studio
Author URI: https://example.com
Description: Thème éditorial pour sites de biographies et de comparaisons de personnalités. Palette nuit étoilée (indigo, or, lavande), structure pensée pour le SEO, compatible ACF Pro (avec repli natif si absent), et optimisée pour la performance.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: constellation-bio
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --void:#0a0715;
  --void-deep:#060410;
  --panel:#151029;
  --panel-2:#1c1638;
  --line:#2a2350;
  --gold:#cda86b;
  --gold-bright:#e9cd96;
  --lavender:#b3a6d9;
  --ink:#ece7f6;
  --muted:#8b84a8;
  --radius:14px;
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width:1120px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, #201a3f 0%, transparent 60%),
    var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  position:relative;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.screen-reader-text{ position:absolute; left:-9999px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{ max-width:var(--max-width); margin:0 auto; padding:0 32px; }
@media (max-width:600px){ .container{ padding:0 20px; } }

/* Starfield backdrop, reused across pages */
.stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 8%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 22% 22%, #fff 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 34% 6%, #d9d0f0 100%, transparent 0),
    radial-gradient(1px 1px at 48% 30%, #fff 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 62% 12%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 75% 25%, #d9d0f0 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 88% 9%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 6% 45%, #fff 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 93% 48%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 15% 70%, #fff 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 40% 85%, #d9d0f0 100%, transparent 0),
    radial-gradient(1px 1px at 70% 92%, #fff 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 85% 78%, #fff 100%, transparent 0);
  background-repeat:no-repeat;
  animation:cb-twinkle 6s ease-in-out infinite alternate;
}
@keyframes cb-twinkle{ 0%{opacity:.45;} 50%{opacity:1;} 100%{opacity:.55;} }
@media (prefers-reduced-motion: reduce){ .stars{ animation:none; opacity:.8; } }

.wrap{ position:relative; z-index:1; }

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, .font-display{ font-family:var(--font-display); font-weight:600; color:var(--gold-bright); margin:0; }
h1{ font-size:clamp(38px, 6vw, 60px); line-height:1.08; font-style:italic; }
h2{ font-size:clamp(26px, 4vw, 36px); line-height:1.2; }
h3{ font-size:22px; line-height:1.3; color:var(--gold); }
p{ margin:0 0 1em; color:var(--ink); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:18px;
}
.eyebrow::before, .eyebrow::after{ content:''; width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow::after{ background:linear-gradient(90deg, var(--gold), transparent); }
.muted{ color:var(--muted); }
.lavender{ color:var(--lavender); }

/* ==========================================================================
   4. Header / nav
   ========================================================================== */
.site-header{ border-bottom:1px solid var(--line); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:24px 32px; }
.site-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--gold-bright); text-decoration:none; letter-spacing:.02em; }
.site-logo svg{ flex-shrink:0; }
.primary-nav ul{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.primary-nav a{ color:var(--muted); text-decoration:none; font-size:14.5px; transition:color .2s; }
.primary-nav a:hover, .primary-nav .current-menu-item a{ color:var(--lavender); }
.nav-toggle{ display:none; background:none; border:0; color:var(--gold); font-size:22px; cursor:pointer; }
@media (max-width:800px){
  .primary-nav{ display:none; width:100%; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0; }
  .primary-nav li{ border-top:1px solid var(--line); }
  .primary-nav a{ display:block; padding:14px 0; }
  .nav-toggle{ display:block; }
  .site-header .container{ flex-wrap:wrap; }
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{ text-align:center; padding:96px 0 64px; position:relative; }
.hero .glow{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(205,168,107,.16) 0%, transparent 70%);
  pointer-events:none;
}
.hero p.lead{ max-width:620px; margin:22px auto 0; color:var(--lavender); font-size:17px; line-height:1.7; }

.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin:56px 0; }
.divider .dots{ flex:1; max-width:320px; height:1px; background-image:radial-gradient(circle, var(--line) 1px, transparent 1.4px); background-size:8px 1px; background-repeat:repeat-x; }

/* ==========================================================================
   6. Cards (biographie / comparaison)
   ========================================================================== */
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.grid.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:860px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:0 0 26px; overflow:hidden; text-decoration:none; display:block;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(205,168,107,.5); box-shadow:0 18px 40px -20px rgba(205,168,107,.25); }
.card .thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--panel-2); position:relative; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(10,7,21,.85) 100%); }
.card .body{ padding:22px 24px 0; }
.card .kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:block; }
.card h3{ margin-bottom:8px; }
.card .dates{ font-size:13.5px; color:var(--muted); margin-bottom:10px; }
.card p.excerpt{ color:var(--muted); font-size:14.5px; line-height:1.65; margin:0; }
.star-node{ width:9px; height:9px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 0 4px rgba(205,168,107,.14), 0 0 14px rgba(233,205,150,.7); display:inline-block; }

/* ==========================================================================
   7. Single biographie
   ========================================================================== */
.bio-hero{ display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center; padding:60px 0; border-bottom:1px solid var(--line); }
@media (max-width:760px){ .bio-hero{ grid-template-columns:1fr; text-align:center; } }
.bio-portrait{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.bio-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:16px 0 20px; font-size:14px; color:var(--muted); }
.bio-meta strong{ color:var(--lavender); font-weight:500; }
.bio-quote{ font-family:var(--font-display); font-style:italic; color:var(--lavender); font-size:19px; border-left:2px solid var(--gold); padding-left:18px; margin:0; }

.timeline{ position:relative; padding:60px 0; }
.timeline::before{ content:''; position:absolute; left:20px; top:60px; bottom:60px; width:1px; background:linear-gradient(var(--line), var(--gold), var(--line)); }
@media (min-width:760px){ .timeline::before{ left:50%; } }
.timeline-item{ position:relative; padding:0 0 40px 52px; }
@media (min-width:760px){
  .timeline-item{ width:50%; padding:0 44px 44px 0; }
  .timeline-item:nth-child(even){ margin-left:50%; padding:0 0 44px 44px; }
}
.timeline-item .node{ position:absolute; left:15px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 0 5px var(--void), 0 0 14px rgba(233,205,150,.7); }
@media (min-width:760px){
  .timeline-item .node{ left:auto; right:-6px; }
  .timeline-item:nth-child(even) .node{ right:auto; left:-6px; }
}
.timeline-item .year{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--gold); }
.timeline-item h4{ margin:4px 0 6px; color:var(--gold-bright); font-family:var(--font-display); font-size:19px; font-weight:600; }
.timeline-item p{ color:var(--muted); font-size:14.5px; margin:0; }

.sources{ border-top:1px solid var(--line); padding:40px 0; color:var(--muted); font-size:13.5px; }
.sources li{ margin-bottom:6px; }

/* ==========================================================================
   8. Comparaison
   ========================================================================== */
.vs-header{ text-align:center; padding:70px 0 40px; }
.vs-pair{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:26px; }
.vs-pair .who{ text-align:center; }
.vs-pair img{ width:110px; height:110px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); margin:0 auto 10px; }
.vs-badge{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:24px; }

.compare-table{ width:100%; border-collapse:collapse; margin:20px 0 50px; }
.compare-table th, .compare-table td{ padding:16px 18px; border-bottom:1px solid var(--line); text-align:left; font-size:14.5px; vertical-align:top; }
.compare-table th{ color:var(--gold); font-weight:600; width:22%; }
.compare-table td{ color:var(--ink); }
.compare-table tr:hover td{ background:rgba(205,168,107,.04); }

.verdict-block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; margin-bottom:50px; }
.verdict-block h3{ margin-bottom:10px; }

/* ==========================================================================
   9. Archive / filters
   ========================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 44px; }
.filters a{ border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:13.5px; color:var(--muted); text-decoration:none; transition:.2s; }
.filters a:hover, .filters a.active{ border-color:var(--gold); color:var(--gold); }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); padding:64px 0 40px; background:var(--void-deep); margin-top:80px; }
.foot-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; margin-bottom:56px; }
@media (max-width:700px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-col h4{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; font-weight:600; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.foot-col a{ color:var(--muted); text-decoration:none; font-size:14.5px; }
.foot-col a:hover{ color:var(--lavender); }
.foot-divider{ height:1px; background-image:radial-gradient(circle, var(--line) 1px, transparent 1.4px); background-size:8px 1px; background-repeat:repeat-x; margin-bottom:32px; }
.disclaimer{ max-width:680px; margin:0 auto; text-align:center; color:var(--muted); font-size:13px; line-height:1.75; }
.copyright{ text-align:center; color:#5f5878; font-size:12.5px; margin-top:20px; }

/* ==========================================================================
   11. Buttons / links
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; border:1px solid var(--gold); color:var(--gold); text-decoration:none; font-size:14px; transition:.2s; }
.btn:hover{ background:var(--gold); color:var(--void); }
.read-more{ display:inline-flex; align-items:center; gap:6px; color:var(--lavender); text-decoration:none; font-size:13px; }