/* Extrait de constellation.html — sorti du HTML pour etre mis en cache
   independamment de la page. Charge a la meme position, donc
   cascade inchangee. */

:root{
  --cream:#E3E3C4; --c50:rgba(227,227,196,.5); --c20:rgba(227,227,196,.2);
  --w30:rgba(255,255,255,.3); --ink:#050B14;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Afacad',system-ui,sans-serif;color:var(--cream);background:#04070B;touch-action:manipulation}
/* Fond de page : le ciel étoilé du splash, assombri de moitié pour que le
   texte reste lisible. Le voile est un réglage à part, facile à ajuster. */
#pagebg{position:fixed;inset:0;z-index:0;pointer-events:none}
#pagebg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;
  opacity:0;transition:opacity .5s ease}
#pagebg img.ready{opacity:1}
#pagebg .ov{position:absolute;inset:0;background:rgba(0,0,0,.5)}
button{font-family:inherit;color:inherit}
a{color:inherit}
img,video{max-width:100%;display:block}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:calc(14px + var(--st)) 26px 14px;
  background:linear-gradient(180deg,rgba(3,6,10,.96),rgba(3,6,10,.62));
  border-bottom:1px solid var(--c20);backdrop-filter:blur(12px)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--c50);border-radius:999px;padding:9px 16px;font-size:11.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;
  transition:opacity .2s,background .2s;white-space:nowrap}
.back:hover{opacity:1;background:rgba(227,227,196,.08)}
.top .sp{flex:1}
.top .where{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;white-space:nowrap}

/* ---------- la constellation, ciel réel isolé ---------- */
.hero{position:relative;height:min(64vh,620px);min-height:380px;overflow:hidden;
  background:linear-gradient(180deg,#000,#0A1931)}
/* Aucun événement de pointeur : la navigation dans le ciel est donc
   impossible sur cette fiche, comme demandé. */
#sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,11,.55) 0%,transparent 26%,transparent 58%,#04070B 100%)}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:0 26px 30px;text-align:center}
.hero .cat{display:inline-block;padding:3px 12px;border-radius:2000px;background:var(--w30);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:.85}
.hero h1{margin-top:12px;font-size:clamp(34px,7vw,58px);font-weight:700;
  text-transform:uppercase;line-height:1.03}
.hero .latin{margin-top:2px;font-size:16px;font-style:italic;opacity:.55}
.hero .live{position:absolute;left:22px;top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.45}
.hero .live i{width:5px;height:5px;border-radius:50%;background:var(--cream)}

main{position:relative;z-index:1}
.wrap{width:min(1080px,100%);margin:0 auto;padding:0 24px}
.narrow{width:min(700px,100%);margin:0 auto}

/* ---------- onglets ---------- */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:34px 24px 12px;
  position:sticky;top:calc(52px + var(--st));z-index:20;
  background:linear-gradient(180deg,rgba(4,7,11,.9) 45%,rgba(4,7,11,0) 100%);
  backdrop-filter:blur(6px)}
.tab{padding:11px 28px;border-radius:20000px;cursor:pointer;border:1px solid var(--c50);
  background:linear-gradient(180deg,rgba(227,227,196,.02),rgba(227,227,196,.1));
  font-weight:700;font-size:15px;text-transform:uppercase;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s}
.tab:hover{background:linear-gradient(180deg,rgba(227,227,196,.08),rgba(227,227,196,.2))}
.tab.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.pane{display:none;padding-bottom:70px}
.pane.on{display:block}

/* ---------- blocs éditoriaux ---------- */
.b-lead{font-size:clamp(20px,2.4vw,26px);line-height:1.5;padding:44px 0 10px;
  font-weight:400}
.b-lead::first-letter{font-size:2.6em;float:left;line-height:.82;padding:6px 12px 0 0;
  font-weight:700}
.b-text{padding:16px 0}
.b-text h3{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  opacity:.5;margin-bottom:14px}
.b-text p{font-size:17px;line-height:1.72;opacity:.86}
.b-text p + p{margin-top:15px}

.b-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--c20);border-bottom:1px solid var(--c20);margin:40px 0}
.b-stats > div{padding:24px 22px;border-left:1px solid var(--c20)}
.b-stats > div:first-child{border-left:none}
.b-stats .v{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.b-stats .u{font-size:13px;opacity:.55;margin-left:5px;font-weight:400}
.b-stats .l{margin-top:9px;font-size:12.5px;line-height:1.5;opacity:.6}

figure{margin:38px 0}
/* Les schémas gagnent à respirer : ils sortent de la colonne de texte et
   vont jusqu'à 1320 px, centrés. */
figure.wide{width:min(1320px,calc(100vw - 48px));margin-left:50%;
  transform:translateX(-50%);margin-top:52px;margin-bottom:52px}
@media (max-width:820px){ figure.wide{width:calc(100vw - 32px);margin-top:36px;margin-bottom:36px} }
.frame{border:1px solid var(--c20);border-radius:12px;overflow:hidden;background:#020407;
  position:relative}
.frame img,.frame svg{width:100%;height:auto;display:block}
.frame.lit img{mix-blend-mode:screen}
figcaption{margin-top:11px;font-size:13.5px;line-height:1.6;opacity:.62}
figcaption b{font-weight:700;opacity:.85}
figcaption .credit{display:block;margin-top:4px;font-size:11.5px;opacity:.6}
.missing{padding:44px 26px;text-align:center;font-size:13px;line-height:1.7;opacity:.45}
.missing code{font-family:ui-monospace,monospace;font-size:12px}
.missing a{text-decoration:underline}

.b-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:44px 0}
.b-split.rev > .media{order:2}
.b-split h3{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  opacity:.5;margin-bottom:13px}
.b-split p{font-size:16.5px;line-height:1.7;opacity:.86}
.b-split p + p{margin-top:13px}
.b-split figure{margin:0}

.b-quote{margin:48px 0;padding:0 0 0 26px;border-left:2px solid var(--cream)}
.b-quote p{font-size:clamp(21px,2.4vw,27px);line-height:1.45;font-style:italic}
.b-quote .who{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

.b-video{margin:44px 0}
.ratio{position:relative;padding-top:56.25%;border:1px solid var(--c20);border-radius:12px;
  overflow:hidden;background:#020407}
.ratio iframe,.ratio video,.ratio .missing{position:absolute;inset:0;width:100%;height:100%;border:0}
.ratio .missing{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:70px;height:70px;border-radius:50%;border:1px solid var(--cream);
  background:rgba(4,7,11,.55);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s}
.playbtn:hover{background:rgba(227,227,196,.22)}
.playbtn svg{width:24px;height:24px;margin-left:3px}

/* Zones sensibles des schémas : un curseur d'aide et une infobulle qui
   suit le pointeur. Les zones sont des cercles transparents posés dans le
   SVG, plus larges que les points pour rester attrapables au doigt. */
.hot{cursor:help}
.hot:hover circle.halo,.hot:focus circle.halo{opacity:.5}
.hot circle.halo{opacity:0;transition:opacity .18s}
#tip{position:fixed;z-index:60;max-width:290px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--c50);background:rgba(4,8,14,.97);backdrop-filter:blur(8px);
  font-size:13px;line-height:1.5;pointer-events:none;opacity:0;
  transform:translateY(5px);transition:opacity .15s,transform .15s}
#tip.on{opacity:1;transform:translateY(0)}
#tip b{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
#tip .k{display:block;margin-top:6px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.5}

/* Image cliquable : plein ecran avec voile et legende dessous. */
.frame.zoom img{cursor:zoom-in}
#lb{position:fixed;inset:0;z-index:80;display:none;
  background:rgba(2,4,8,.94);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;flex-direction:column;
  gap:18px;padding:38px 24px;opacity:0;transition:opacity .22s}
#lb.on{display:flex}
#lb.vis{opacity:1}
#lb img{max-width:min(1500px,94vw);max-height:76vh;width:auto;height:auto;
  border:1px solid var(--c20);border-radius:10px;background:#020407}
#lb .cap{max-width:760px;text-align:center;font-size:14.5px;line-height:1.6;opacity:.78}
#lb .cap .credit{display:block;margin-top:6px;font-size:12px;opacity:.6}
#lb .close{position:absolute;right:22px;top:calc(18px + var(--st));
  width:44px;height:44px;border-radius:50%;border:1px solid var(--c50);
  background:rgba(227,227,196,.06);cursor:pointer;font-size:20px;line-height:1}
#lb .close:hover{background:rgba(227,227,196,.2)}
#lb .hint{position:absolute;left:0;right:0;bottom:calc(14px + var(--sb));
  text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.35}

/* Redressement : la figure du skyculture est dessinee de biais par rapport
   a l'ecran. On lui applique l'angle valide dans l'outil de verification,
   et on la reduit juste assez pour que ses coins ne soient pas rognes. */
.frame.roll{display:flex;align-items:center;justify-content:center}
.frame.roll img{transition:transform .3s ease}

.b-warn{margin:40px 0;border:1px solid rgba(227,208,138,.45);border-radius:12px;
  padding:20px 22px;background:rgba(227,208,138,.06);font-size:15px;line-height:1.65}
.b-warn h3{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:9px;color:#E3D08A}

.b-links{margin:52px 0 0;border-top:1px solid var(--c20);padding-top:26px}
.b-links h3{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  opacity:.5;margin-bottom:16px}
.lk{display:flex;gap:14px;align-items:baseline;text-decoration:none;padding:13px 0;
  border-bottom:1px solid rgba(227,227,196,.1);transition:opacity .2s}
.lk:hover{opacity:.65}
.lk .kind{flex:none;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--c50);border-radius:2000px;padding:2px 8px;opacity:.8}
.lk .kind.watch{border-color:#E3D08A;color:#E3D08A}
.lk .kind.look{border-color:#9BD9B0;color:#9BD9B0}
.lk .kind.deep{border-color:#A8B8E0;color:#A8B8E0}
.lk .body{flex:1}
.lk .t{font-size:16px;font-weight:700;line-height:1.3}
.lk .n{margin-top:4px;font-size:13.5px;line-height:1.55;opacity:.6}
.lk .src{flex:none;font-size:11px;opacity:.42;text-align:right;max-width:150px}

.cms{border-top:1px solid var(--c20);margin-top:40px;padding:24px 0 0;
  font-size:12.5px;line-height:1.7;opacity:.4}
.soon{text-align:center;padding:70px 20px;font-size:15px;opacity:.5;line-height:1.7}

@media (max-width:760px){
  .wrap{padding:0 16px}
  .b-split{grid-template-columns:1fr;gap:22px}
  .b-split.rev > .media{order:0}
  .b-stats > div{border-left:none;border-top:1px solid var(--c20)}
  .b-stats > div:first-child{border-top:none}
  .top{padding-left:14px;padding-right:14px}
  .top .where{display:none}
  /* Les 3 onglets en flex+wrap classique passaient en 2+1 des qu'ils ne
     tenaient plus sur une ligne (Science + Mythologie, puis Astrologie
     seul, centre en dessous) : pas casse, mais pas voulu non plus. En
     dessous de 760px on les fige a largeur egale sur une seule ligne. */
  .tabs{gap:8px;padding:24px 14px 10px;flex-wrap:nowrap}
  .tab{flex:1 1 0;min-width:0;padding:10px 8px;font-size:12.5px;
    text-align:center;overflow:hidden;text-overflow:ellipsis}
  .lk{flex-wrap:wrap}
  .lk .src{text-align:left;max-width:none}
  .b-lead{font-size:19px}
}
@media (max-width:400px){
  .tab{padding:9px 3px;font-size:10.5px;letter-spacing:-.01em}
}
/* En paysage telephone, le `min-height:380px` du hero (pense pour un
   ecran haut) pouvait a lui seul occuper la quasi-totalite de la
   hauteur visible, reduisant tout le reste — onglets, texte — a du
   contenu qu'il fallait defiler pour meme apercevoir. */
@media (max-height:500px){
  .hero{height:min(52vh,320px);min-height:180px}
  .hero h1{font-size:clamp(26px,6vw,40px)}
  .tabs{padding-top:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= BLOCAGE PAYSAGE MOBILE =================
   Meme logique que sur les autres pages publiques : le paysage sur
   telephone ne laisse pas assez de hauteur pour lire confortablement une
   fiche, malgre le hero deja reduit ci-dessus. `max-height` en paysage
   correspond a la largeur reelle de l'appareil, ce qui distingue un
   telephone (quasiment jamais plus de 560px sur le petit cote) d'une
   tablette, jamais bloquee ici. */
#landscape-lock{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#000 0%,#0A1931 100%);
  padding:40px;text-align:center;
}
.ll-box{max-width:360px}
.ll-icon{width:60px;height:60px;color:var(--cream);margin:0 auto 22px;display:block;
  animation:ll-rotate 2.6s ease-in-out infinite}
@keyframes ll-rotate{0%,15%{transform:rotate(0deg)}50%,65%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
.ll-title{font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.05em;color:var(--cream)}
.ll-sub{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--cream);opacity:.6}
@media (orientation:landscape) and (max-height:560px){
  #landscape-lock{display:flex}
}