/* Styles propres à projets/arbre_celebrites/ — graphe amoureux des célébrités.
   Charte partagée : /assets/site.css. Thème sombre (comme l'arbre capétien),
   mais les nœuds encodent le genre : bleu = homme, rose = femme. */
:root{
  --azur:#0E1B3A; --azur2:#142a52; --azur3:#1e3a68; --azur-line:#2a4778;
  --nav-h:64px;
  /* Variables de la charte partagée (site.css) : sans elles, les menus
     déroulants du bandeau — qui utilisent var(--paper)/var(--ink) — seraient
     transparents et illisibles sur ce fond sombre. */
  --ink:#1a1814; --paper:#f5f2eb; --paper-dark:#ede9df; --muted:#7a7060;
  --gold:#C8A35B; --or:#C8A35B; --or-clair:#E7CE8E; --or-vif:#F2DCA0;
  --ivoire:#ECE6D6; --brume:#b9c4dd; --brume2:#8794b4;
  --homme:#4ea1ff; --homme-clair:#8ec5ff;
  --femme:#ff77b7; --femme-clair:#ffb0d6;
  --nb:#b98cff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--azur)}
body{
  background:var(--azur) fixed;
  color:var(--ivoire);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:15px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1300px;margin:0 auto;padding:0 22px 80px}
a{color:var(--or);text-decoration:none}

/* ---- en-tête ---- */
header{padding:52px 0 20px;text-align:center;position:relative}
.hearts{font-size:26px;letter-spacing:.5em;text-indent:.5em;margin-bottom:12px}
.hearts .h-m{color:var(--homme)}
.hearts .h-f{color:var(--femme)}
h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(34px,6vw,60px);
   line-height:1.02;letter-spacing:.01em;color:var(--ivoire)}
h1 em{font-style:italic;color:var(--or-clair)}
.these{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2.3vw,21px);font-style:italic;
   color:var(--brume);max-width:820px;margin:14px auto 0;line-height:1.45}
.these b{color:var(--ivoire);font-weight:600;font-style:normal}

/* ---- barre d'outils ---- */
.tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center;margin:22px 0 12px}
.search{position:relative;flex:0 0 auto}
.search input{width:230px;max-width:52vw;background:rgba(30,58,104,.5);border:1px solid var(--azur-line);
   border-radius:22px;color:var(--ivoire);font-family:'Montserrat';font-size:13px;padding:8px 14px 8px 34px}
.search input:focus{outline:none;border-color:var(--or-clair);background:rgba(30,58,104,.75)}
.search .s-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--brume2);font-size:13px;pointer-events:none}
.search .sugg{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);background:var(--azur2);
   border:1px solid var(--azur-line);border-radius:10px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.5);display:none}
.search .sugg.on{display:block}
.search .sugg button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;
   color:var(--ivoire);font-family:'Montserrat';font-size:13px;padding:8px 12px;cursor:pointer}
.search .sugg button:hover,.search .sugg button.hi{background:rgba(30,58,104,.7)}
.search .sugg .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tgl{font-family:'Montserrat';font-size:11.5px;letter-spacing:.03em;color:var(--brume);
   background:rgba(30,58,104,.42);border:1px solid var(--azur-line);border-radius:20px;padding:7px 13px;cursor:pointer;transition:.16s}
.tgl:hover{color:var(--or-clair);border-color:var(--or)}
.tgl[aria-pressed=true]{color:var(--azur);background:var(--or-clair);border-color:var(--or-clair)}
.tgl:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
.zoom-ctl{display:inline-flex;align-items:center;gap:6px}
.zbtn{min-width:32px;font-size:16px;font-weight:700;padding:4px 9px;line-height:1;border-radius:8px}
#zoomLevel{font-size:11px;color:var(--brume);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}

/* ---- scène du graphe ---- */
.stage{position:relative;background:rgba(20,42,82,.22);
   border:1px solid var(--azur-line);border-radius:14px;overflow:hidden;touch-action:none}
#graph{display:block;width:100%;height:72vh;min-height:460px;cursor:grab}
#graph.drag{cursor:grabbing}
.stage:fullscreen,.stage:-webkit-full-screen{border:none;border-radius:0;background:var(--azur)}
.stage:fullscreen #graph,.stage:-webkit-full-screen #graph{height:100vh}
.legend{position:absolute;left:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px 15px;
   background:rgba(10,19,42,.66);border:1px solid var(--azur-line);border-radius:10px;padding:9px 12px;
   font-size:11px;color:var(--brume);backdrop-filter:blur(3px);max-width:calc(100% - 28px)}
.legend .lg{display:flex;align-items:center;gap:6px}
.legend .lg i{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 auto}
.legend .lg i.ring{box-shadow:0 0 0 2px var(--or-vif)}
.legend .lg span.line{width:20px;height:0;border-top:2px solid var(--brume);display:inline-block}
.legend .lg span.line.dash{border-top-style:dashed}
.hint{position:absolute;right:14px;top:12px;background:rgba(10,19,42,.6);border:1px solid var(--azur-line);
   border-radius:9px;padding:6px 10px;font-size:10.5px;color:var(--brume2);letter-spacing:.02em;max-width:210px}

/* ---- infobulle ---- */
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--azur2);border:1px solid var(--or);
   border-radius:10px;padding:10px 13px;max-width:290px;font-size:12px;color:var(--ivoire);line-height:1.5;
   box-shadow:0 10px 30px rgba(0,0,0,.55);opacity:0;transition:opacity .12s;transform:translate(-50%,-118%)}
.tip.on{opacity:1}
.tip .t-nom{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.1;color:var(--or-clair);margin-bottom:2px}
.tip .t-sub{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brume2);margin-bottom:6px}
.tip .t-rel{font-size:11.5px;color:var(--brume);display:flex;gap:6px;align-items:baseline;margin-top:3px}
.tip .t-rel b{color:var(--ivoire);font-weight:600}
.tip .t-rel .yr{color:var(--brume2);font-size:10.5px;white-space:nowrap}
.tip .t-more{color:var(--brume2);font-size:10.5px;margin-top:5px;font-style:italic}

/* ---- bloc d'infos sous le graphe ---- */
.info{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;align-items:start}
@media(max-width:860px){.info{grid-template-columns:1fr}}
.card{background:rgba(20,42,82,.42);
   border:1px solid var(--azur-line);border-radius:12px;padding:16px 18px}
.card h3{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brume2);font-weight:600;margin-bottom:12px}
.stats{display:flex;flex-wrap:wrap;gap:14px 26px}
.stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1;color:var(--or-vif)}
.stat span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brume2)}
/* panneau « personne sélectionnée » */
#detail .d-empty{color:var(--brume2);font-style:italic;font-size:13px}
.d-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.d-head .d-dot{width:15px;height:15px;border-radius:50%;flex:0 0 auto}
.d-nom{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.1;color:var(--ivoire)}
.d-sub{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--brume2);margin-bottom:10px}
.d-sub .wiki{margin-left:6px;color:var(--or);border-bottom:1px dotted var(--or)}
.rel-list{display:flex;flex-direction:column;gap:2px}
.rel{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid rgba(42,71,120,.4);cursor:pointer;border-radius:6px}
.rel:last-child{border-bottom:none}
.rel:hover{background:rgba(30,58,104,.5)}
.rel .r-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.rel .r-nom{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--ivoire);flex:1;line-height:1.15}
.rel .r-meta{font-size:10.5px;color:var(--brume2);text-align:right;white-space:nowrap}
.rel .r-status{display:inline-block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
   padding:1px 6px;border-radius:9px;border:1px solid var(--azur-line);color:var(--brume);margin-left:4px}
.rel .r-status.married{color:var(--or-vif);border-color:var(--or)}

/* ---- base de données (repli) ---- */
.db{margin-top:22px}
details.db>summary{cursor:pointer;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brume2);
   padding:10px 0;list-style:none;border-top:1px solid var(--azur-line)}
details.db>summary::-webkit-details-marker{display:none}
details.db>summary::before{content:'▸ ';color:var(--or)}
details.db[open]>summary::before{content:'▾ '}
.db-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.db-tbl th{text-align:left;font-weight:600;color:var(--brume2);font-size:10px;letter-spacing:.1em;
   text-transform:uppercase;padding:7px 8px;border-bottom:1px solid var(--azur-line);position:sticky;top:0;background:var(--azur)}
.db-tbl td{padding:6px 8px;border-bottom:1px solid rgba(42,71,120,.34);color:var(--brume);vertical-align:top}
.db-tbl .nm-m{color:var(--homme-clair)}
.db-tbl .nm-f{color:var(--femme-clair)}
.db-tbl .nm-n{color:var(--nb)}
.db-scroll{max-height:460px;overflow:auto;border:1px solid var(--azur-line);border-radius:10px;margin-top:8px}
.db-scroll::-webkit-scrollbar{width:10px;height:10px}
.db-scroll::-webkit-scrollbar-thumb{background:var(--azur3);border-radius:6px}

footer{margin-top:34px;border-top:1px solid var(--azur-line);padding-top:20px;font-size:11.5px;color:var(--brume2);line-height:1.6}
footer b{color:var(--brume)}
footer a{color:var(--or);border-bottom:1px dotted var(--or)}

/* ---- chercheur de chemin ---- */
.finder{margin-top:22px}
.finder-intro{font-size:12.5px;color:var(--brume);margin:-4px 0 12px;line-height:1.45}
.finder-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.finder-row input{flex:1;min-width:150px;background:rgba(30,58,104,.5);border:1px solid var(--azur-line);
   border-radius:22px;color:var(--ivoire);font-family:'Montserrat';font-size:13px;padding:9px 15px}
.finder-row input:focus{outline:none;border-color:var(--or-clair);background:rgba(30,58,104,.75)}
.finder-amp{color:var(--brume2);font-size:16px}
#fgo{background:var(--or-clair);color:var(--azur);border-color:var(--or-clair);font-weight:600;border-radius:22px;padding:9px 20px}
#fgo:hover{background:var(--or-vif)}
.finder-out{margin-top:13px;min-height:4px}
.fmsg{font-size:12.5px;color:var(--brume);font-style:italic}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 3px;line-height:1.9}
.chain .cn{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--azur);background:var(--or-clair);
   border-radius:10px;padding:2px 9px;font-weight:700;margin-right:6px}
.chain .arrow{color:var(--brume2);margin:0 2px}
.chain .via{display:inline-flex;align-items:center;gap:5px;font-family:'Cormorant Garamond',serif;font-size:17px;
   color:var(--ivoire);cursor:pointer;padding:1px 4px;border-radius:5px}
.chain .via:hover{color:var(--or-clair);background:rgba(30,58,104,.5)}
.chain .cdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:640px){
  .wrap{padding:0 12px 56px}
  header{padding:26px 0 12px}
  .hearts{font-size:20px;letter-spacing:.35em}
  #graph{height:66vh;min-height:380px}
  .these{font-size:14.5px}
  .stat b{font-size:25px}
  .hint{display:none}
  .search input{width:160px}
}

/* ── Bandeau : même couleur que le fond de la page (sombre) + texte clair ── */
nav[data-site-nav]{ background:var(--azur); border-bottom:1px solid var(--azur-line); }
nav[data-site-nav] .nav-logo{ color:var(--ivoire); }
nav[data-site-nav] .nav-tab{ color:var(--brume); }
nav[data-site-nav] .nav-tab:hover,
nav[data-site-nav] .nav-item.open .nav-tab{ color:var(--or-clair); }
nav[data-site-nav] .nav-daily-link{ color:var(--brume); }
nav[data-site-nav] .nav-daily-link:hover{ color:var(--or-clair); }
nav[data-site-nav] .account-chip{ color:var(--brume); border-color:var(--azur-line); }
nav[data-site-nav] .account-chip:hover{ color:var(--or-clair); border-color:var(--or-clair); background:rgba(231,206,142,.08); }
nav[data-site-nav] .account-ava{ background:var(--azur3); color:var(--ivoire); }