/*
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.9.2
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:#a49dc4;
  --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);
  position:sticky; top:0; z-index:100;
  background:rgba(10,7,21,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.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{ display:flex; align-items:center; gap:20px; }
.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; display:inline-flex; align-items:center; gap:7px; }
.nav-icon{ font-size:14px; line-height:1; opacity:.9; }
.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; }

.nav-search-group{ display:flex; align-items:center; gap:20px; }
.search-widget{ position:relative; flex-shrink:0; }

.search-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:.2s;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"]{ border-color:var(--gold); color:var(--gold); }

.header-search-panel{
  position:absolute; top:calc(100% + 14px); right:0; z-index:50;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:14px; box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
}
.header-search-panel form{ display:flex; gap:8px; }
.header-search-panel input{
  width:170px; background:var(--void); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:9px 16px; font-size:13.5px; font-family:var(--font-body);
}
.header-search-panel input:focus{ outline:none; border-color:var(--gold); }
.header-search-panel button{
  background:none; border:1px solid var(--gold); color:var(--gold); border-radius:999px;
  padding:9px 16px; font-size:13px; font-family:var(--font-body); cursor:pointer; white-space:nowrap; transition:.2s;
}
.header-search-panel button:hover{ background:var(--gold); color:var(--void); }
.search-backdrop{ display:none; }

/* Sélecteur de langue (Polylang) — invisible tant qu'une seule langue est
   configurée ; cb_language_switcher() ne sort alors aucun HTML. */
.cb-lang-switcher{
  display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; flex-shrink:0;
}
.cb-lang-item a{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid transparent;
  color:var(--muted); text-decoration:none; font-size:13px; font-family:var(--font-body);
  transition:.2s;
}
.cb-lang-item a:hover{ color:var(--lavender); border-color:var(--line); }
.cb-lang-item--no-translation a{ opacity:.55; }
.cb-lang-item .fi{ border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.08); flex-shrink:0; }
.cb-lang-label{ display:none; }

@media (min-width:1040px){
  .cb-lang-label{ display:inline; }
}

@media (max-width:800px){
  .cb-lang-switcher{ order:2; border-top:1px solid var(--line); padding:14px 0; width:100%; }
  .cb-lang-label{ display:inline; }

  .primary-nav{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav.is-open{ display:flex; }
  .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; }
  .nav-search-group{ width:auto; }
  .primary-nav{ order:3; flex-basis:100%; }

  /* Sur mobile, l'icône de recherche apparaît en dernière position dans le
     menu déroulant (après le dernier lien). Au clic, la zone de recherche
     s'ouvre en panneau flottant centré à l'écran, par-dessus le menu,
     plutôt que de pousser le reste de la liste. */
  .search-widget{ border-top:1px solid var(--line); padding:14px 0; }
  .header-search-panel{
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    width:88%; max-width:340px; z-index:200;
    background:var(--panel-2); border:1px solid var(--gold); border-radius:16px;
    padding:20px; box-shadow:0 25px 60px -15px rgba(0,0,0,.7);
  }
  .header-search-panel form{ flex-direction:column; gap:12px; }
  .header-search-panel input{ width:auto; padding:12px 16px; }
  .header-search-panel button{ width:100%; padding:12px 16px; text-align:center; }
  .search-backdrop{
    display:none; position:fixed; inset:0; z-index:150;
    background:rgba(6,4,16,.75); backdrop-filter:blur(2px);
  }
  body.cb-search-open .search-backdrop{ display:block; }
}

/* ==========================================================================
   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; } .grid.grid-2{ 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-portrait--gallery{ position:relative; aspect-ratio:1/1; }
.bio-portrait-track{ position:relative; width:100%; height:100%; }
.bio-portrait-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .5s ease;
}
.bio-portrait-slide.is-active{ opacity:1; }
.bio-portrait-slide img{ width:100%; height:100%; object-fit:cover; display:block; background:var(--panel-2); }

.bio-portrait-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(10,8,26,.55); backdrop-filter:blur(3px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity .2s, background .2s;
}
.bio-portrait--gallery:hover .bio-portrait-arrow,
.bio-portrait--gallery:focus-within .bio-portrait-arrow{ opacity:1; }
.bio-portrait-arrow:hover{ background:var(--gold); border-color:var(--gold); color:var(--void-deep); }
.bio-portrait-arrow--prev{ left:10px; }
.bio-portrait-arrow--next{ right:10px; }

.bio-portrait-dots{
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; justify-content:center; gap:6px;
}
.bio-portrait-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,.45); cursor:pointer; transition:.2s;
}
.bio-portrait-dot.is-active{ background:var(--gold); transform:scale(1.25); }

/* Les flèches restent toujours visibles sur mobile : pas de survol tactile. */
@media (hover:none){
  .bio-portrait-arrow{ opacity:1; }
}
.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; }

.social-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.social-links a{
  border:1px solid var(--line); border-radius:999px; padding:7px 16px;
  font-size:13px; color:var(--lavender); text-decoration:none; transition:.2s;
}
.social-links a:hover{ border-color:var(--gold); color:var(--gold); }

/* Page Anniversaires */
.anniv-tabs{ display:flex; flex-wrap:wrap; gap:10px; padding:0 0 24px; border-bottom:1px solid var(--line); margin-bottom:34px; align-items:center; }
.anniv-tabs a{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:999px; padding:9px 20px;
  font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; transition:.2s;
  background:var(--panel);
}
.anniv-tabs a:hover{ border-color:var(--gold); color:var(--gold-bright); }
.anniv-tabs a.active{ border-color:var(--gold); color:var(--void); background:var(--gold-bright); font-weight:600; }

.anniv-search-form{ display:flex; gap:10px; margin-bottom:0; flex:1; min-width:220px; }
.anniv-search-form input{
  flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:9px 18px; font-size:14px; font-family:var(--font-body);
}
.anniv-search-form input:focus{ outline:none; border-color:var(--gold); }
.anniv-search-form .btn{ flex-shrink:0; border:1px solid var(--gold); padding:9px 20px; font-size:13.5px; }
.anniv-search-autocomplete{ flex:1; min-width:160px; max-width:none; }
@media (max-width:900px){ .anniv-search-form{ width:100%; flex-basis:100%; } }
@media (max-width:600px){ .anniv-search-form{ flex-direction:column; } }

.anniv-summary{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:44px 34px; text-align:center;
}
.anniv-summary .eyebrow{ justify-content:center; }
.anniv-summary h1{ font-size:clamp(28px,4.5vw,40px); margin-bottom:16px; }
.anniv-summary p{ max-width:680px; margin:0 auto 30px; color:var(--lavender); line-height:1.7; }
.anniv-summary p strong{ color:var(--gold-bright); font-weight:600; }

.anniv-daynav{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.anniv-daynav a{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:10px 20px; font-size:13px;
  color:var(--muted); text-decoration:none; transition:.2s; background:var(--void);
}
.anniv-daynav a:hover{ border-color:var(--gold); color:var(--gold-bright); }
.anniv-daynav .today{
  border:1px solid var(--gold); border-radius:999px; padding:10px 22px; font-size:13px;
  color:var(--gold-bright); font-weight:600; background:rgba(205,168,107,.1);
}

.section-count{ font-size:15px; font-family:var(--font-body); font-weight:400; color:var(--muted); }

.grid-bday{ display:grid; grid-template-columns:repeat(5, 1fr); gap:22px; margin-top:30px; }
@media (max-width:1100px){ .grid-bday{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:860px){ .grid-bday{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:600px){ .grid-bday{ grid-template-columns:repeat(2, 1fr); gap:14px; } }

.bday-card{ padding-bottom:18px; }
.bday-card .thumb{ position:relative; aspect-ratio:1/1; }
.bday-badge{
  position:absolute; top:10px; right:10px; z-index:2; background:var(--gold-bright); color:var(--void);
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.bday-badge-deces{ background:var(--lavender); }

.bday-body{ padding:16px 18px 20px; }
.bday-name{ font-size:17px; margin-bottom:6px; }
.bday-meta{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:0 0 10px; }
.bday-meta .fi{ border-radius:2px; box-shadow:0 0 0 1px var(--line); vertical-align:middle; }

/* Blocs insérés automatiquement dans le contenu des articles */
.cb-inline-block{
  margin:36px 0; padding:26px 26px 24px;
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
}
.cb-inline-eyebrow{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.cb-inline-block h4{ font-family:var(--font-display); color:var(--gold-bright); font-size:19px; font-weight:600; margin:0 0 16px; }

.cb-today-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:640px){ .cb-today-grid{ grid-template-columns:repeat(2, 1fr); } }
.cb-today-grid .bday-card{ font-size:13px; }
.cb-today-grid .thumb{ aspect-ratio:1/1; }
.cb-today-grid .bday-body{ padding:10px 12px 12px; }
.cb-today-grid .bday-name{ font-size:13.5px; margin-bottom:3px; }
.cb-today-grid .bday-meta{ font-size:11px; margin-bottom:0; }
.cb-today-grid .bday-profession{ display:none; }
.cb-today-grid .bday-badge{ font-size:10px; padding:3px 7px; top:6px; right:6px; }

.cb-inline-link{ display:inline-block; margin-top:16px; color:var(--lavender); text-decoration:none; font-size:13.5px; }
.cb-inline-link:hover{ color:var(--gold); }

.cb-cta-block{ display:flex; gap:20px; align-items:flex-start; border-color:var(--gold); }
.cb-cta-icon{ font-size:32px; line-height:1; flex-shrink:0; }
.cb-cta-text p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0 0 16px; }
@media (max-width:500px){ .cb-cta-block{ flex-direction:column; } }

.cb-related-bio{ padding:20px; border-color:var(--lavender); }
.cb-related-link{ display:flex; gap:18px; align-items:center; text-decoration:none; }
.cb-related-thumb{ width:76px; height:76px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--lavender); }
.cb-related-thumb img{ width:100%; height:100%; object-fit:cover; }
.cb-related-bio h4{ margin:2px 0 8px; }
.cb-related-bio .cb-inline-link{ margin:0; }
.cb-related-title-row{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.cb-related-title-row h4{ margin:2px 0; }
.cb-related-title-row .cb-inline-link{ white-space:nowrap; }
@media (max-width:480px){
  .cb-related-link{ flex-direction:column; text-align:center; }
  .cb-related-title-row{ flex-direction:column; align-items:center; gap:6px; }
}
.bday-nat{ font-size:12px; }
.bday-profession{ font-size:12.5px; color:var(--lavender); margin:0; text-transform:uppercase; letter-spacing:.04em; }

.anniv-jump{ margin:60px 0 90px; text-align:center; }
.anniv-jump form{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.anniv-jump select{
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:9px 12px; font-size:14px;
}
.anniv-jump label{ color:var(--muted); font-size:14px; margin-right:4px; }

/* Page Comparateur */
.comparateur-form{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; margin-top:20px;
}
.comparateur-selects{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:1; justify-content:center; }
.comparateur-selects select{
  background:var(--void); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:12px 16px; font-size:14.5px; min-width:220px; max-width:280px;
}
.comparateur-selects select:focus{ outline:none; border-color:var(--gold); }
.comparateur-vs{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:20px; flex-shrink:0; }
@media (max-width:700px){ .comparateur-form{ flex-direction:column; } .comparateur-selects{ flex-direction:column; width:100%; } .comparateur-selects select{ width:100%; max-width:none; } }

.cb-autocomplete{ position:relative; min-width:220px; max-width:280px; flex:1; }
.cb-autocomplete-input{
  width:100%; background:var(--void); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:12px 16px; font-size:14.5px; font-family:var(--font-body);
}
.cb-autocomplete-input:focus{ outline:none; border-color:var(--gold); }
.cb-suggestions{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  max-height:260px; overflow-y:auto; box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
}
.cb-suggestion-item{ padding:11px 16px; font-size:14px; color:var(--ink); cursor:pointer; }
.cb-suggestion-item:hover{ background:rgba(205,168,107,.12); color:var(--gold-bright); }
@media (max-width:700px){ .cb-autocomplete{ width:100%; max-width:none; } }

.comparateur-seo{ max-width:760px; margin:70px auto 0; padding-bottom:60px; border-top:1px solid var(--line); padding-top:50px; }
.comparateur-seo h2{ margin-top:2em; margin-bottom:.6em; }
.comparateur-seo h2:first-child{ margin-top:0; }
.comparateur-seo h3{ margin-top:1.6em; margin-bottom:.5em; }
.comparateur-seo p{ font-size:15.5px; line-height:1.8; color:var(--ink); }

/* Page Contact */
.contact-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; margin-top:30px; padding-bottom:90px; align-items:start; }
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } }

.contact-form{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; display:flex; flex-direction:column; gap:20px;
}
.contact-field{ display:flex; flex-direction:column; gap:8px; }
.contact-field label{ font-size:13.5px; color:var(--lavender); }
.contact-field input, .contact-field textarea{
  background:var(--void); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:12px 14px; font-size:14.5px; font-family:var(--font-body); resize:vertical;
}
.contact-field input:focus, .contact-field textarea:focus{ outline:none; border-color:var(--gold); }
.contact-form .btn{ align-self:flex-start; border:1px solid var(--gold); cursor:pointer; background:none; font-family:var(--font-body); }
.cb-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.contact-alert{ border-radius:10px; padding:16px 20px; margin-bottom:24px; font-size:14px; }
.contact-alert-ok{ background:rgba(205,168,107,.12); border:1px solid var(--gold); color:var(--gold-bright); }
.contact-alert-ko{ background:rgba(217,110,110,.1); border:1px solid #d96e6e; color:#e79a9a; }

.contact-info-col{ display:flex; flex-direction:column; gap:20px; }
.contact-info-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px;
}
.contact-info-card h3{ margin-bottom:16px; }
.contact-info-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.contact-info-list li{ display:flex; flex-direction:column; gap:3px; font-size:14px; }
.contact-info-list span{ color:var(--muted); font-size:12.5px; }
.contact-info-list a{ color:var(--lavender); text-decoration:none; }
.contact-info-list a:hover{ color:var(--gold); }
.contact-info-note p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.7; }

.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; word-break:break-word; }
.sources a{ color:var(--lavender); text-decoration:underline; }
.sources a:hover{ color:var(--gold); }

.cb-sources ul{ list-style:disc; padding-left:20px; }
.cb-sources li{ margin-bottom:10px; line-height:1.6; }
.cb-source-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--lavender); text-decoration:underline; text-underline-offset:2px;
  font-weight:600;
}
.cb-source-link:hover{ color:var(--gold); }
.cb-source-ext{ flex-shrink:0; opacity:.8; }
.cb-source-title{ color:var(--ink); font-weight:600; }
.cb-source-desc{ color:var(--muted); }

/* Fil d'Ariane */
.breadcrumb{ padding:22px 0 0; font-size:13px; color:var(--muted); }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--lavender); }
.breadcrumb span{ margin:0 6px; color:var(--line); }

/* Colonne d'article, encart "en bref", bloc auteur */
.article-col{ max-width:720px; margin:50px auto 0; font-size:16.5px; line-height:1.8; }
.article-col h2{ margin-top:2.2em; margin-bottom:.6em; }
.article-col h3{ margin-top:1.8em; margin-bottom:.5em; }

.brief-box{
  background:var(--panel); border:1px solid var(--gold); border-left-width:3px;
  border-radius:10px; padding:20px 24px; margin-bottom:36px;
}
.brief-box .kicker{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:8px; }
.brief-box p{ margin:0; color:var(--ink); }

.author-box{
  display:flex; align-items:flex-start; gap:16px; margin-top:60px;
  border-top:1px solid var(--line); padding-top:28px;
}
.author-box img{ border-radius:50%; }
.author-box .name{ color:var(--gold-bright); font-weight:600; margin:0 0 4px; }
.author-box .bio{ color:var(--muted); font-size:14px; margin:0; }

/* FAQ accordéon (natif <details>, sans JS) — classes préfixées "cb-" pour
   éviter toute collision avec un plugin SEO/FAQ qui utiliserait déjà un nom
   générique comme .faq-item. */
.cb-faq-block{ margin-top:56px; }
.cb-faq-block .cb-faq-item{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:0 22px; margin:0 0 14px; overflow:hidden; width:auto;
}
.cb-faq-block .cb-faq-item summary{
  cursor:pointer; list-style:none; padding:18px 0; font-weight:600;
  color:var(--ink); font-size:15px; display:flex; align-items:center; gap:12px;
  background:none; border:0; margin:0;
}
.cb-faq-block .cb-faq-item summary::-webkit-details-marker{ display:none; }
.cb-faq-block .cb-faq-item summary::before{ content:'▶'; color:var(--gold); font-size:11px; transition:transform .2s; flex-shrink:0; }
.cb-faq-block .cb-faq-item[open] summary::before{ transform:rotate(90deg); }
.cb-faq-block .cb-faq-item p{ color:var(--muted); padding:0 0 20px; margin:0; }

/* Distinctions / récompenses */
.awards-list{ list-style:none; margin:0; padding:0; }
.awards-list li{ padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:14.5px; }
.awards-list li:last-child{ border-bottom:0; }
.awards-list .year{ color:var(--gold); font-family:var(--font-display); font-weight:600; margin-right:12px; }

/* Statistiques comparées : barres + radar */
.stats-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; margin-top:30px; }
@media (max-width:860px){ .stats-layout{ grid-template-columns:1fr; } }
.stat-row{ margin-bottom:34px; }
.stat-label{ font-family:var(--font-display); color:var(--gold-bright); font-size:18px; font-weight:600; margin-bottom:12px; }
.stat-bar-line{ display:grid; grid-template-columns:130px 1fr 70px; align-items:center; gap:12px; margin-bottom:8px; }
.who-name{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-bar{ background:var(--panel-2); border-radius:999px; height:10px; overflow:hidden; }
.stat-bar .fill{ height:100%; border-radius:999px; }
.fill-gold{ background:linear-gradient(90deg, #a9834f, var(--gold-bright)); }
.fill-lavender{ background:linear-gradient(90deg, #786fa0, var(--lavender)); }
.stat-value{ font-size:13px; color:var(--ink); text-align:right; }
.stat-phrase{ font-size:13.5px; color:var(--muted); font-style:italic; margin:6px 0 0; }

.radar-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; }
.radar-wrap svg{ width:100%; max-width:280px; height:auto; }
.radar-legend{ display:flex; justify-content:center; gap:20px; margin-top:12px; font-size:12.5px; color:var(--muted); }
.radar-legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* ==========================================================================
   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; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.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; word-break:break-word; }
.compare-table th{ color:var(--gold); font-weight:600; }
.compare-table th:first-child{ width:160px; }
.compare-table td{ color:var(--ink); }
.compare-table tr:hover td{ background:rgba(205,168,107,.04); }

/* Sur mobile : chaque ligne s'empile en bloc, plus de défilement horizontal */
@media (max-width:700px){
  .table-scroll{ overflow-x:visible; }
  .compare-table{ min-width:0; }
  .compare-table thead{ display:none; }
  .compare-table, .compare-table tbody, .compare-table tr{ display:block; width:100%; }
  .compare-table tr{ border-bottom:1px solid var(--line); padding:14px 0; }
  .compare-table tr:last-child{ border-bottom:0; }
  .compare-table th, .compare-table td{
    display:block; width:auto; padding:3px 0; border:0; white-space:normal;
  }
  .compare-table th{ font-size:15px; margin-bottom:6px; }
  .compare-table td::before{
    content: attr(data-label) " : ";
    color:var(--gold); font-weight:600;
  }
}

.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); }

/* Pagination (liens HTML natifs, sans JS) */
.pagination{ margin:20px 0; }
.pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 16px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
  color:var(--muted); text-decoration:none; font-size:14px; transition:.2s;
}
.pagination .page-numbers:hover{ border-color:var(--gold); color:var(--gold-bright); }
.pagination .page-numbers.current{ background:var(--gold-bright); color:var(--void); border-color:var(--gold-bright); font-weight:600; }
.pagination .page-numbers.dots{ border:none; background:none; color:var(--muted); min-width:auto; padding:0 4px; }
.pagination .prev.page-numbers, .pagination .next.page-numbers{ font-weight:500; padding:0 20px; }

/* ==========================================================================
   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:6px; }
.foot-col a{ color:var(--muted); text-decoration:none; font-size:14.5px; display:inline-block; padding:8px 0; min-height:24px; }
.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:var(--muted); 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; }

/* Page 404 */
.notfound-search{ max-width:460px; margin:0 auto; }
.notfound-search-form{
  display:flex; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:6px 6px 6px 22px;
}
.notfound-search-form input{
  flex:1; background:none; border:0; color:var(--ink); font-size:14.5px; font-family:var(--font-body);
}
.notfound-search-form input:focus{ outline:none; }
.notfound-search-form input::placeholder{ color:var(--muted); }
.notfound-search-form button{
  background:var(--gold); border:0; color:var(--void); border-radius:999px;
  padding:11px 24px; font-size:13.5px; font-weight:600; font-family:var(--font-body); cursor:pointer; transition:.2s; white-space:nowrap;
}
.notfound-search-form button:hover{ background:var(--gold-bright); }
@media (max-width:480px){
  .notfound-search-form{ flex-direction:column; border-radius:16px; padding:16px; }
  .notfound-search-form input{ padding:10px 4px; text-align:center; }
}

/* Widget Âge & Horoscope */
.age-widget-trigger-wrap{ text-align:center; margin:0 0 40px; }
.age-widget-trigger{ cursor:pointer; background:none; font-family:var(--font-body); }

.age-widget-backdrop{
  position:fixed; inset:0; z-index:300;
  background:rgba(6,4,16,.8); backdrop-filter:blur(3px);
}
.age-widget-panel{
  position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
  z-index:301; width:92%; max-width:480px; max-height:85vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--gold); border-radius:var(--radius);
  padding:38px 32px 32px; box-shadow:0 30px 70px -15px rgba(0,0,0,.75);
}
.age-widget-panel h2{ font-size:24px; margin-bottom:6px; }
.age-widget-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:.2s; font-size:14px;
}
.age-widget-close:hover{ border-color:var(--gold); color:var(--gold); }

.age-widget-error{ color:#e79a9a; font-size:13px; margin-top:10px; }

.age-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:24px 0 30px; }
.age-grid div{ text-align:center; background:var(--void); border:1px solid var(--line); border-radius:10px; padding:14px 6px; }
.age-grid strong{ display:block; font-family:var(--font-display); font-size:22px; color:var(--gold-bright); line-height:1.2; }
.age-grid span{ display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
@media (max-width:420px){ .age-grid{ grid-template-columns:repeat(3, 1fr); } }

.age-widget-eyebrow-sm{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.age-widget-sign{ border-top:1px solid var(--line); padding-top:20px; margin-bottom:20px; }
.age-widget-sign h3{ font-family:var(--font-display); color:var(--gold-bright); font-size:22px; margin:0 0 6px; }
.age-widget-sign p{ color:var(--muted); font-size:13.5px; margin:0; }

.age-widget-horoscope{ border-top:1px solid var(--line); padding-top:20px; margin-bottom:16px; }
.age-widget-horoscope p{ font-size:13.5px; color:var(--ink); line-height:1.7; margin:0 0 10px; }
.age-widget-horoscope p strong{ color:var(--lavender); }

.age-widget-disclaimer{ font-size:11.5px; color:var(--muted); font-style:italic; margin-bottom:20px; }

/* ==========================================================================
   16. Ad Manager — emplacements publicitaires & bloc « Lire la suite »
   ========================================================================== */

.cb-ad-slot{ max-width:760px; margin:34px auto; }
.cb-ad-slot--header_banner,
.cb-ad-slot--archive_native{ max-width:var(--max-width); padding:0 32px; }
@media (max-width:600px){
  .cb-ad-slot--header_banner,
  .cb-ad-slot--archive_native{ padding:0 20px; }
}
.cb-ad-label{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding-bottom:8px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.cb-ad-slot-inner{ min-height:1px; overflow:hidden; }
.cb-ad-slot-inner img{ margin:0 auto; }

.cb-readmore-group{
  position:relative;
}
.cb-readmore-group .cb-readmore-content{
  max-height:var(--cb-readmore-height, 260px);
  overflow:hidden;
}
.cb-readmore-group.is-expanded .cb-readmore-content{
  max-height:none;
  overflow:visible;
}
.cb-readmore-overlay{
  position:absolute; left:0; right:0; bottom:0; height:150px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:0;
  pointer-events:none;
}
.cb-readmore-group.is-expanded .cb-readmore-overlay{ display:none; }
.cb-readmore-fade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 0%, var(--void) 82%);
  pointer-events:none;
}
.cb-readmore-btn{
  position:relative; pointer-events:auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; margin-bottom:14px;
  border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--void-deep); font-family:var(--font-body); font-weight:700; font-size:14.5px;
  box-shadow:0 8px 24px rgba(205,168,107,.28);
  transition:.2s;
}
.cb-readmore-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(205,168,107,.4); }
.cb-readmore-btn svg{ transition:transform .2s; }
.cb-readmore-btn:hover svg{ transform:translateY(1px); }

/* Chargement différé : pas de cadre tant qu'il n'y a rien à montrer, pour
   éviter tout décalage de mise en page une fois la pub chargée. */
.cb-ad-lazy:empty{ min-height:0; }

/* -------------------------------------------------------------------
   Barre collante en bas d'écran (sticky bottom bar)
   ------------------------------------------------------------------- */
.cb-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border-top:1px solid var(--line);
  padding:12px 52px 12px 18px;
  box-shadow:0 -8px 24px rgba(0,0,0,.35);
  transform:translateY(110%);
  transition:transform .35s ease;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
.cb-sticky-bar.is-visible{ transform:translateY(0); }
.cb-sticky-bar-inner{
  flex:1 1 auto; max-width:var(--max-width); margin:0 auto;
  max-height:90px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.cb-sticky-bar-inner .cb-ad-slot{ margin:0; max-width:none; }
.cb-sticky-bar-close{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; background:var(--panel-2);
  color:var(--muted); cursor:pointer; padding:0; transition:.2s;
}
.cb-sticky-bar-close:hover{ color:var(--gold); border-color:var(--gold); }

@media (max-width:600px){
  .cb-sticky-bar{ padding:10px 46px 10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); gap:8px; }
  .cb-sticky-bar-inner{ max-height:72px; }
  .cb-sticky-bar-close{ width:30px; height:30px; right:8px; }
}