/* ============================================================================
   ASTRO13 — système de design « Ruines et constellations »
   Romantique, ombre et lumière, patine post-apocalyptique.
   Contrainte : aucune ressource externe. Polices système, textures en CSS.
   ============================================================================ */

:root{
  /* --- couleurs : la nuit --- */
  --nuit:      #09080e;   /* fond, presque noir bleuté */
  --cendre:    #14111c;   /* surface */
  --cendre-2:  #1d1926;   /* surface élevée */
  --ligne:     #2c2536;   /* filets */
  --ligne-or:  #4a3c22;   /* filets chauds */

  /* --- couleurs : la lumière --- */
  --parchemin: #ece3d6;   /* texte principal */
  --patine:    #a89ea6;   /* texte secondaire */
  --poussiere: #6d6478;   /* texte tertiaire */

  /* --- accents --- */
  --or:        #c9a227;   /* or terni — le Soleil, le signe */
  --or-clair:  #e6c76e;
  --rose:      #c98a94;   /* rose fané — l'ascendant, l'intime */
  --rose-fonce:#8f5560;
  --vert:      #6f8f6a;   /* validation, discret */
  --ambre:     #c08a3e;   /* avertissement */
  --sang:      #a8555f;

  /* --- halos --- */
  --halo-or:   rgba(230,199,110,.13);
  --halo-rose: rgba(201,138,148,.11);

  /* --- typographie --- */
  --serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:  ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* --- élévation --- */
  --ombre-1: 0 1px 2px rgba(0,0,0,.55);
  --ombre-2: 0 8px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --ombre-3: 0 24px 64px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.5);
  --lueur:   0 0 34px var(--halo-or);

  /* --- rythme --- */
  --r: 3px;          /* rayon : presque droit, pierre taillée */
  --r-lg: 5px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--nuit);
  color:var(--parchemin);
  font:17px/1.72 var(--sans);
  padding:0 0 80px;
  position:relative;
  overflow-x:hidden;
}

/* ---- LUMIÈRE : deux sources rasantes, immobiles ---- */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 62% at 18% -8%,  var(--halo-or)   0%, transparent 58%),
    radial-gradient(90%  55% at 96% 12%,  var(--halo-rose) 0%, transparent 55%),
    radial-gradient(140% 90% at 50% 118%, rgba(0,0,0,.6)   0%, transparent 60%);
}
/* ---- POUSSIÈRE : grain SVG, aucune requête réseau ---- */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
}
.wrap{max-width:820px;margin:0 auto;padding:0 18px;position:relative;z-index:2}

/* ============================ NAVIGATION ============================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(to bottom,rgba(9,8,14,.97),rgba(9,8,14,.82));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--ligne);
  margin-bottom:40px;
}
.nav .in{max-width:820px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:8px;min-height:58px;flex-wrap:wrap}
.nav .brand{font:600 20px/1 var(--serif);letter-spacing:.01em;color:var(--parchemin);
  text-decoration:none;margin-right:auto;display:flex;align-items:baseline;gap:2px}
.nav .brand i{font-style:normal;color:var(--or);text-shadow:0 0 18px var(--halo-or)}
.nav a.lk{font:13.5px/1 var(--sans);color:var(--patine);text-decoration:none;
  padding:9px 11px;border-radius:var(--r);white-space:nowrap;transition:color .16s,background .16s}
.nav a.lk:hover{color:var(--parchemin);background:rgba(236,227,214,.05)}
.nav a.lk[aria-current="page"]{color:var(--or)}
@media(max-width:520px){.nav .in{min-height:52px;gap:0}.nav a.lk{padding:8px 7px;font-size:12.5px}}

/* ============================ TYPOGRAPHIE ============================ */
h1,h2,h3,.titre{font-family:var(--serif);font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(30px,6vw,42px);line-height:1.14;margin:0 0 12px}
h1 i{font-style:italic;color:var(--or);text-shadow:0 0 30px var(--halo-or)}
.lede{font-size:17.5px;line-height:1.68;color:var(--patine);margin:0 0 34px;max-width:60ch}
.lede b{color:var(--parchemin);font-weight:600}
.oeil{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.19em;
  color:var(--poussiere);display:block;margin-bottom:14px}
.filet{height:1px;border:0;margin:34px 0;
  background:linear-gradient(to right,transparent,var(--ligne-or) 22%,var(--ligne-or) 78%,transparent)}

/* ============================ SURFACES ============================ */
.card{
  background:linear-gradient(163deg,var(--cendre-2),var(--cendre) 62%);
  border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:26px;margin-bottom:16px;box-shadow:var(--ombre-2);
  position:relative;overflow:hidden;
}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(230,199,110,.28),transparent)}
.card > h2{display:flex;align-items:center;gap:9px;font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.17em;
  color:var(--poussiere);margin:0 0 20px}
.card.clair{background:linear-gradient(163deg,#221c2c,#181422 62%)}

/* ============================ CARTES DES 13 SIGNES ============================ */
.constellations{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px;
}
a.signe{
  display:block;position:relative;overflow:hidden;text-decoration:none;
  background:linear-gradient(168deg,var(--cendre-2),var(--cendre) 70%);
  border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:17px 16px 15px;box-shadow:var(--ombre-1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .22s;
}
a.signe::after{ /* halo qui s'allume au survol */
  content:'';position:absolute;inset:-40% -20% auto;height:150%;
  background:radial-gradient(60% 60% at 50% 0%,var(--halo-or),transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
a.signe:hover,a.signe:focus-visible{
  transform:translateY(-3px);border-color:var(--ligne-or);
  box-shadow:var(--ombre-2),var(--lueur);outline:none;
}
a.signe:hover::after,a.signe:focus-visible::after{opacity:1}
a.signe .nom{font:600 19px/1.2 var(--serif);color:var(--parchemin);display:block;
  position:relative;z-index:1;transition:color .22s}
a.signe:hover .nom{color:var(--or-clair)}
a.signe .lat{font:italic 12px/1 var(--serif);color:var(--poussiere);display:block;margin-top:3px;
  position:relative;z-index:1}
a.signe .dat{font:11px/1.4 var(--mono);color:var(--patine);display:block;margin-top:11px;
  padding-top:9px;border-top:1px solid var(--ligne);position:relative;z-index:1}
a.signe .tag{position:absolute;top:0;right:0;z-index:2;
  font:600 9.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.13em;
  padding:5px 8px;border-radius:0 var(--r-lg) 0 var(--r);}
a.signe.moi{border-color:rgba(201,162,39,.55)}
a.signe.moi .nom{color:var(--or)}
a.signe.moi .tag{background:var(--or);color:#1a1405}
a.signe.asc{border-color:rgba(201,138,148,.5)}
a.signe.asc .nom{color:var(--rose)}
a.signe.asc .tag{background:var(--rose);color:#220f13}
a.signe.rare .lat::after{content:' · rare';color:var(--rose-fonce)}

/* ============================ FORMULAIRE ============================ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:15px}
label{display:block;font:11px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;
  color:var(--poussiere);margin-bottom:7px}
input,select{
  width:100%;background:rgba(9,8,14,.72);color:var(--parchemin);
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:11px 12px;font:15px var(--sans);transition:border-color .18s,box-shadow .18s}
input::placeholder{color:var(--poussiere)}
input:focus,select:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(201,162,39,.13)}
button{
  background:linear-gradient(to bottom,var(--or-clair),var(--or));
  color:#1c1505;border:0;border-radius:var(--r);
  padding:14px 30px;font:600 15px var(--sans);letter-spacing:.02em;cursor:pointer;
  margin-top:22px;box-shadow:var(--ombre-1),0 0 26px var(--halo-or);
  transition:filter .18s,box-shadow .18s}
button:hover{filter:brightness(1.09);box-shadow:var(--ombre-2),0 0 40px var(--halo-or)}
button.fant{background:none;color:var(--patine);border:1px solid var(--ligne);
  box-shadow:none;font-weight:400;font-size:13.5px;padding:14px 18px;margin-left:9px}
button.fant:hover{border-color:var(--ligne-or);color:var(--parchemin);box-shadow:none}
.hidden{display:none}

/* autocomplétion */
.ac{position:relative}
.ac ul{position:absolute;z-index:40;left:0;right:0;top:100%;margin:5px 0 0;padding:5px;
  list-style:none;background:var(--cendre-2);border:1px solid var(--ligne-or);
  border-radius:var(--r-lg);max-height:252px;overflow-y:auto;box-shadow:var(--ombre-3)}
.ac li{padding:9px 10px;border-radius:var(--r);cursor:pointer;font-size:14.5px;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ac li.on,.ac li:hover{background:rgba(201,162,39,.14);color:var(--or-clair)}
.ac li span{color:var(--poussiere);font:11px var(--mono);white-space:nowrap}
.ac ul:empty{display:none}

/* ============================ RÉSULTAT ============================ */
.ciel{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.ciel{grid-template-columns:1fr}}
.ci{background:rgba(9,8,14,.5);border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:19px 21px;position:relative;overflow:hidden}
.ci::before{content:'';position:absolute;inset:-60% -30% auto;height:170%;
  background:radial-gradient(55% 55% at 50% 0%,var(--halo-or),transparent 72%);pointer-events:none}
.ci.b::before{background:radial-gradient(55% 55% at 50% 0%,var(--halo-rose),transparent 72%)}
.ci .k{font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.15em;
  color:var(--poussiere);position:relative}
.ci .v{font:600 34px/1.1 var(--serif);color:var(--or);margin:8px 0 5px;position:relative;
  text-shadow:0 0 30px var(--halo-or)}
.ci.b .v{color:var(--rose);text-shadow:0 0 30px var(--halo-rose)}
.ci .v.nul{font-size:19px;font-style:italic;color:var(--poussiere);text-shadow:none}
.ci .m{font-size:13.5px;color:var(--patine);line-height:1.55;position:relative}
.ci .o{font:12px/1.5 var(--sans);color:var(--poussiere);margin-top:11px;padding-top:10px;
  border-top:1px solid var(--ligne);position:relative}
.saisie{display:flex;flex-wrap:wrap;gap:9px 24px;font-size:14.5px;color:var(--patine)}
.saisie b{color:var(--parchemin);font-weight:600}
.fia1{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne);
  font-size:14px;color:var(--patine);display:flex;gap:11px;align-items:flex-start;line-height:1.6}
.fia1 i{flex:0 0 7px;height:7px;border-radius:50%;margin-top:8px;font-style:normal}
.fia1.ok i{background:var(--vert);box-shadow:0 0 12px rgba(111,143,106,.7)}
.fia1.warn i{background:var(--ambre);box-shadow:0 0 12px rgba(192,138,62,.7)}
.fia1.bad i{background:var(--sang);box-shadow:0 0 12px rgba(168,85,95,.7)}

/* ============================ PORTRAIT ============================ */
.titre{font-size:clamp(23px,4.6vw,31px);line-height:1.24;margin:0 0 10px;font-weight:600}
.titre em{font-style:italic;color:var(--or)}
.titre b{font-weight:600;font-style:italic;color:var(--rose)}
.mots{font:italic 14.5px/1.6 var(--serif);color:var(--or-clair);opacity:.82;margin:0 0 22px}
p.t{font-size:16.5px;line-height:1.78;margin:0 0 16px;color:var(--parchemin)}
p.t:last-child{margin-bottom:0}
h3.s{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.17em;
  color:var(--or);margin:34px 0 16px;padding-top:26px;
  border-top:1px solid var(--ligne)}
h3.s:first-of-type{margin-top:0;padding-top:0;border-top:0}
.fo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;
  border-top:1px solid var(--ligne);padding-top:18px}
@media(max-width:520px){.fo{grid-template-columns:1fr;gap:12px}}
.fo h4{font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.13em;margin:0 0 8px}
.fo div:first-child h4{color:var(--vert)} .fo div:last-child h4{color:var(--rose-fonce)}
.fo ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--patine)}
.fo li{margin-bottom:4px}
.ax{border-left:2px solid var(--ligne);padding:3px 0 3px 16px;margin:0 0 18px}
.ax.a{border-color:var(--vert)} .ax.t{border-color:var(--ambre)}
.ax .n{font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.13em;
  display:block;margin-bottom:5px;color:var(--poussiere)}
.ax.a .n{color:var(--vert)} .ax.t .n{color:var(--ambre)}
.ax p{margin:0;font-size:15.5px;line-height:1.7}
.syn{background:rgba(9,8,14,.5);border:1px solid var(--ligne-or);border-radius:var(--r-lg);
  padding:19px 21px;font-size:15.5px;line-height:1.74;margin:0 0 24px}
.syn .jauge{display:flex;gap:5px;margin-bottom:13px}
.syn .jauge i{flex:1;height:4px;border-radius:2px;background:var(--ligne)}
.syn .jauge i.on{background:var(--or);box-shadow:0 0 10px var(--halo-or)}
.dom{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.dom{grid-template-columns:1fr}}
.dm{background:rgba(9,8,14,.42);border:1px solid var(--ligne);border-radius:var(--r-lg);padding:19px 21px}
.dm h4{font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.15em;
  color:var(--rose);margin:0 0 11px}
.dm p{margin:0;font-size:15.5px;line-height:1.72}
.rec{border:1px dashed var(--ligne-or);border-radius:var(--r-lg);padding:18px 20px}
.rec .av{font-size:13px;color:var(--poussiere);margin:0 0 14px;line-height:1.6;font-style:italic}
.rec p{margin:0;font-size:15.5px;line-height:1.72}

/* ============================ TABLEAUX & DIVERS ============================ */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}
th{font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.11em;color:var(--poussiere)}
td.n,th.n{text-align:right;font-family:var(--mono);white-space:nowrap;color:var(--patine)}
a{color:var(--or)}
a.suite{display:inline-block;margin-top:22px;color:var(--rose);text-decoration:none;
  font-size:15px;border-bottom:1px solid rgba(201,138,148,.32);padding-bottom:2px}
a.suite:hover{border-bottom-color:var(--rose)}
.vide{color:var(--poussiere);font-size:15.5px;text-align:center;padding:32px 12px;line-height:1.7;font-style:italic}
.flag{border-radius:var(--r-lg);padding:14px 16px;font-size:14px;margin:0 0 16px;line-height:1.6}
.flag.warn{background:rgba(192,138,62,.09);border:1px solid rgba(192,138,62,.32)}
.flag.bad{background:rgba(168,85,95,.09);border:1px solid rgba(168,85,95,.32)}
.disc{background:rgba(9,8,14,.5);border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:16px;font-size:13px;color:var(--patine);margin-top:20px;line-height:1.65}
details.tech{margin-top:16px}
details.tech summary{cursor:pointer;color:var(--poussiere);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.12em}
details.tech pre{font:12px/1.65 var(--mono);color:var(--patine);background:rgba(9,8,14,.65);
  padding:14px;border-radius:var(--r);overflow-x:auto;margin:12px 0 0;border:1px solid var(--ligne)}
footer{color:var(--poussiere);font-size:12.5px;margin-top:44px;padding-top:24px;
  border-top:1px solid var(--ligne);line-height:1.8}
.marque{color:var(--patine)}
.marque b{color:var(--or);font-weight:600;letter-spacing:.03em;font-family:var(--serif)}

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

/* ============================ PAGES FICHES & HOROSCOPE ============================ */
header{margin-bottom:30px}
header .k{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.19em;
  color:var(--poussiere);display:block;margin-bottom:14px}
.latin{font:italic 15px/1.5 var(--serif);color:var(--patine);margin:0 0 16px}
.latin code{font-family:var(--mono);font-style:normal;font-size:12.5px;color:var(--poussiere)}
.latin a{color:var(--rose);text-decoration:none;border-bottom:1px solid rgba(201,138,148,.3)}
.txt{font-size:16.5px;line-height:1.78;margin:0;color:var(--parchemin)}
.dim{color:var(--poussiere);font-size:12.5px}
.src{font-size:12.5px;color:var(--poussiere);margin:12px 0 0;font-style:italic}
.card.reel{background:linear-gradient(163deg,#211b2b,#171322 62%);border-color:var(--ligne-or)}
.card.reel p{margin:0 0 14px;font-size:16px;line-height:1.74}
.card.reel p:last-child{margin:0}
.card.todo{border-style:dashed;opacity:.62}
.card.todo li{margin-bottom:7px;font-size:14.5px;color:var(--patine)}
table.lst th{font-size:10.5px}
table.lst a{color:var(--parchemin);text-decoration:none;font-weight:600;font-family:var(--serif);font-size:16px}
table.lst a:hover{color:var(--or)}
.pager{display:flex;justify-content:space-between;gap:14px;margin:28px 0 0;font-size:15px}
.pager a{color:var(--rose);text-decoration:none}
.pager a:hover{color:var(--or)}
.card h3{font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.13em}

/* ============================ PICTOGRAMMES ============================ */
.pic{width:22px;height:22px;flex:0 0 22px;display:block}
.dm h4,h3.s{display:flex;align-items:center;gap:10px}
.dm h4 .pic{color:var(--rose);opacity:.92;
  filter:drop-shadow(0 0 9px var(--halo-rose));transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.dm:hover h4 .pic{transform:translateY(-1px) scale(1.06)}
h3.s .pic{width:19px;height:19px;flex:0 0 19px;color:var(--or);
  filter:drop-shadow(0 0 9px var(--halo-or))}
/* la pastille : le picto posé dans un halo, pour les fiches */
.dm h4{position:relative}
.dm{transition:border-color .22s}
.dm:hover{border-color:var(--ligne-or)}

/* ============================ SCEAUX ============================ */
.sceau{display:block;max-width:100%;height:auto}
/* filigrane derrière les cartes de la grille */
a.signe .sc{position:absolute;top:-14px;right:-16px;width:98px;height:98px;line-height:0;
  color:var(--or);opacity:.13;pointer-events:none;
  transition:opacity .3s cubic-bezier(.2,.8,.3,1),transform .45s cubic-bezier(.2,.8,.3,1)}
a.signe .sc svg{width:98px;height:98px}
a.signe:hover .sc,a.signe:focus-visible .sc{opacity:.34;transform:rotate(-5deg) scale(1.1)}
a.signe.moi .sc{opacity:.24;color:var(--or)}
a.signe.asc .sc{opacity:.22;color:var(--rose)}
a.signe{padding-right:52px}
/* sceau en tête de fiche */
.entete{display:flex;gap:28px;align-items:flex-start}
/* le conteneur du sceau EST l’élément flex : c’est lui qui doit être figé,
   sinon le titre le comprime et l’illustration s’écrase. */
.entete > div:first-child{flex:0 0 136px;width:136px;min-width:136px}
.entete .sc{width:136px;height:136px;color:var(--or);opacity:.92;
  filter:drop-shadow(0 0 26px var(--halo-or))}
/* on impose la largeur, jamais la hauteur : le ratio du viewBox fait le reste */
.entete .sc svg{display:block;width:136px;height:auto}
.entete .txt-e{flex:1 1 auto;min-width:0}
@media(max-width:620px){
  .entete{flex-direction:column-reverse;gap:20px;align-items:center;text-align:center}
  .entete > div:first-child{flex:0 0 auto;width:120px;min-width:120px}
  .entete .sc{width:120px;height:120px}
  .entete .sc svg{width:120px}
  .legende-sceau{width:120px}
}
.legende-sceau{font:italic 11px/1.45 var(--serif);color:var(--poussiere);
  margin:12px 0 0;text-align:center;width:136px}

/* ============================ LA ROUE DES TREIZE ============================ */
.roue-bloc{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
@media(max-width:780px){.roue-bloc{grid-template-columns:1fr;gap:18px}}
.roue{width:100%;height:auto;display:block;overflow:visible}
.roue .tick{stroke:var(--ligne-or);stroke-width:1}
.roue .mois{fill:var(--poussiere);font:10.5px var(--mono);letter-spacing:.06em}
.roue .sect{fill:rgba(201,162,39,.07);stroke:var(--ligne-or);stroke-width:.8;
  transition:fill .22s,stroke .22s}
.roue .secteur{cursor:pointer;outline:none}
.roue .secteur:hover .sect,.roue .secteur:focus-visible .sect,.roue .secteur.on .sect{
  fill:rgba(230,199,110,.22);stroke:var(--or)}
.roue .secteur.on .sect{fill:rgba(230,199,110,.3)}
.roue .nom{fill:var(--parchemin);font:600 13.5px var(--serif);transition:fill .22s}
.roue .nom.pt{font-size:12px;fill:var(--rose)}
.roue .jrs{fill:var(--poussiere);font:10px var(--mono)}
.roue .secteur:hover .nom,.roue .secteur.on .nom{fill:var(--or-clair)}
.roue .rappel{stroke:var(--rose);stroke-width:.9;opacity:.65}
.roue .aig{stroke:var(--rose);stroke-width:1.6;opacity:.9}
.roue .aig-pt{fill:var(--rose)}
.roue .coeur-nom{fill:var(--or);font:600 31px var(--serif);text-shadow:0 0 30px var(--halo-or)}
.roue .coeur-sub{fill:var(--patine);font:12.5px var(--mono)}
.roue-panneau{background:linear-gradient(163deg,var(--cendre-2),var(--cendre) 62%);
  border:1px solid var(--ligne);border-radius:var(--r-lg);padding:24px;box-shadow:var(--ombre-2)}
.pn-lat{font:italic 13px var(--serif);color:var(--poussiere)}
.pn-nom{font:600 27px/1.2 var(--serif);color:var(--or);margin:4px 0 6px}
.pn-dat{font:12.5px var(--mono);color:var(--patine);margin:0 0 16px}
.pn-acc{font-size:15.5px;line-height:1.7;margin:0 0 12px;color:var(--parchemin)}
.pn-mots{font:italic 13.5px var(--serif);color:var(--or-clair);opacity:.8;margin:0 0 18px}
.pn-dl{margin:0;padding-top:16px;border-top:1px solid var(--ligne)}
.pn-dl div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}
.pn-dl dt{color:var(--poussiere);margin:0}
.pn-dl dd{margin:0;color:var(--parchemin);font-family:var(--mono);font-size:12.5px;text-align:right}
.pn-lien{display:inline-block;margin-top:18px;color:var(--rose);text-decoration:none;font-size:14.5px;
  border-bottom:1px solid rgba(201,138,148,.32);padding-bottom:2px}
.pn-lien:hover{border-bottom-color:var(--rose)}
/* barres comparatives */
.barres{display:flex;flex-direction:column;gap:6px}
a.br{display:grid;grid-template-columns:112px 1fr 46px;align-items:center;gap:12px;
  text-decoration:none;padding:5px 8px;border-radius:var(--r);transition:background .18s}
a.br:hover{background:rgba(201,162,39,.09)}
.br-n{font:15px var(--serif);color:var(--parchemin)}
a.br:hover .br-n{color:var(--or)}
.br-b{height:7px;background:rgba(9,8,14,.6);border-radius:4px;overflow:hidden}
.br-b i{display:block;height:100%;background:linear-gradient(to right,var(--or-clair),var(--or));
  box-shadow:0 0 12px var(--halo-or)}
.br-j{font:11.5px var(--mono);color:var(--poussiere);text-align:right}
@media(max-width:520px){a.br{grid-template-columns:92px 1fr 40px;gap:9px}.br-n{font-size:13.5px}}

/* section repliable */
details.pliable{padding:0}
details.pliable > summary{list-style:none;cursor:pointer;padding:22px 26px;
  font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.17em;color:var(--poussiere);
  display:flex;align-items:center;gap:10px;transition:color .18s}
details.pliable > summary::-webkit-details-marker{display:none}
details.pliable > summary::after{content:'';margin-left:auto;width:7px;height:7px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s}
details.pliable[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
details.pliable > summary:hover{color:var(--or)}
details.pliable > *:not(summary){padding:0 26px}
details.pliable > *:last-child{padding-bottom:24px}
details.pliable[open] > summary{color:var(--or);border-bottom:1px solid var(--ligne);margin-bottom:16px}

/* ============================ ILLUSTRATIONS DE FICHE ============================ */
.illu{margin:0 0 16px;position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ligne);box-shadow:var(--ombre-2)}
.illu img{display:block;width:100%;height:auto}
.illu::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(9,8,14,.55) 0%,transparent 34%,transparent 62%,rgba(9,8,14,.72) 100%)}
.illu figcaption{position:absolute;bottom:10px;right:14px;z-index:2;
  font:italic 11px var(--serif);color:var(--patine);opacity:.72}

/* --- 3e lumière : l’ascendant, ajouté à l’affichage sur l’illustration du signe --- */
.illu{--lueur-asc:transparent}
.illu::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 44% at 88% 76%,var(--lueur-asc),transparent 72%);
  opacity:.34;mix-blend-mode:screen}
.illu .sig-asc{position:absolute;left:14px;bottom:10px;z-index:2;
  font:11px var(--mono);color:var(--patine);opacity:.72;letter-spacing:.04em}
.illu .sig-asc i{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--lueur-asc);margin-right:6px;vertical-align:baseline;
  box-shadow:0 0 9px var(--lueur-asc)}

/* --- variante animée de l’illustration --- */
.illu video{display:block;width:100%;height:auto}
.illu .repli{display:none;width:100%;height:auto}
@media (prefers-reduced-motion: reduce){
  .illu video{display:none}
  .illu .repli{display:block}
}

/* ============================ SCEAU ANIMÉ ============================
   Une seule variable pilote la cadence : --tour, la durée d’une révolution
   de l’anneau. Le tracé de la constellation se rejoue à chaque tour, en phase.

   La cadence est PORTÉE PAR LE SIGNE : un tour d’anneau = la durée du séjour
   solaire dans cette constellation, à raison d’UNE SECONDE PAR JOUR. La valeur
   est écrite dans le SVG par sceaux.py, elle n’est pas décidée ici.

       Scorpion     12 s   ·  6 jours   — le plus rapide des 13, planchonné
       Serpentaire  19 s   · 19 jours
       Cancer       21 s   · 21 jours
       Bélier       26 s   · 26 jours
       Taureau      38 s   · 38 jours
       Vierge       45 s   · 45 jours   — posé, il s’installe

   Moyenne 29 s. Chaque signe a son tempo propre, et la rareté du Scorpion
   cesse d’être un chiffre : elle se voit tourner. Plancher à 12 s — à 6 s,
   soit 60°/s, l’anneau devenait agité.

   Tout en opacity, transform et stroke-dashoffset : composité par le GPU,
   aucun recalcul de mise en page, aucun JS, ~2 ko. */
.sceau{--tour:30s}   /* repli si le SVG ne porte pas sa valeur */

@keyframes a13-scintille{
  0%,100%{opacity:var(--o)}
  38%{opacity:calc(var(--o) * .35)}
  62%{opacity:calc(var(--o) * 1.45)}
}
@keyframes a13-annee{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes a13-souffle{ 0%,100%{opacity:.13} 50%{opacity:.30} }
@keyframes a13-eclat{ 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.12)} }

/* Le tracé se dessine, se tient, s’efface, et recommence — une fois par tour
   d’anneau. La constellation se réécrit à chaque révolution. */
@keyframes a13-trace{
  0%   {stroke-dashoffset:100; opacity:0}
  4%   {opacity:.62}
  18%  {stroke-dashoffset:0;   opacity:.62}
  86%  {stroke-dashoffset:0;   opacity:.62}
  96%  {stroke-dashoffset:0;   opacity:0}
  100% {stroke-dashoffset:100; opacity:0}
}

/* L’anneau tourne seul : les étoiles restent fixes, c’est le temps qui passe. */
.sceau .anneau{transform-origin:50% 50%;animation:a13-annee var(--tour) linear infinite}
.sceau .pouss{animation:a13-scintille var(--c,4s) ease-in-out infinite var(--d,0s)}
.sceau .halo{animation:a13-souffle 6s ease-in-out infinite var(--d,0s)}
.sceau .halo.gros{animation-duration:4.2s}
.sceau .eclat{transform-box:fill-box;transform-origin:center;
  animation:a13-eclat 4.2s ease-in-out infinite}

/* Tracé rejoué en boucle, lignes décalées pour qu’elles s’écrivent l’une après l’autre. */
.sceau .trait{stroke-dasharray:100;stroke-dashoffset:100;
  animation:a13-trace var(--tour) ease-in-out infinite}
.sceau .trait:nth-of-type(2){animation-delay:calc(var(--tour) * -.03)}
.sceau .trait:nth-of-type(3){animation-delay:calc(var(--tour) * -.06)}

/* Sur les cartes de la grille : plus court, et relancé au survol. */
/* Sur les cartes de la grille, les 13 tempos coexistent : la grille devient
   une horloge où chaque signe bat à sa propre vitesse. */

@media (prefers-reduced-motion: reduce){
  .sceau .anneau,.sceau .pouss,.sceau .halo,.sceau .eclat,.sceau .trait{animation:none}
  .sceau .trait{stroke-dasharray:none;stroke-dashoffset:0;opacity:.62}
}

/* ============================ VIDÉO DE FICHE ============================
   Même habillage que l’illustration fixe : dégradés haut et bas, lueur de
   l’ascendant, légende. La vidéo ne se charge qu’à l’ouverture de la fiche. */
.illu video{display:block;width:100%;height:auto}
.illu .repli{display:none}
@media (prefers-reduced-motion: reduce){
  .illu video{display:none}
  .illu .repli{display:block;width:100%;height:auto}
}

/* ============================ VIS-À-VIS MÉDIA / TEXTE ============================
   Sur desktop l’illustration fait face au caractère et à l’ascendant, et reste
   visible pendant la lecture. Sur mobile elle repasse simplement au-dessus. */
.duo{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:16px;
  align-items:start;margin-bottom:16px}
.duo-g{position:sticky;top:78px}
.duo-g .illu{margin:0}
.duo-d > .card:last-child{margin-bottom:0}
@media(max-width:820px){
  .duo{grid-template-columns:1fr;gap:0}
  .duo-g{position:static;margin-bottom:16px}
}

/* signe et ascendant confondus : une seule carte, pleine largeur */
.ci.seul{padding:22px 24px}
.ci.seul .v{font-size:38px}
.ci.seul::before{background:radial-gradient(48% 60% at 50% 0%,var(--halo-or),transparent 74%)}

footer a.lg{color:var(--patine);text-decoration:none;border-bottom:1px solid var(--ligne)}
footer a.lg:hover{color:var(--or);border-bottom-color:var(--ligne-or)}

/* ============================ COMPATIBILITÉS ============================
   Pages compat/. Trois couleurs et trois seulement : l’or pour ce qui va de
   soi, le rose pour ce que l’autre apporte, le sang pour ce qui coûte. La
   même triade sert à la barre, aux pastilles et aux blocs de texte, pour que
   le lecteur n’ait à l’apprendre qu’une fois. */

/* --- en-tête : les deux sceaux face à face --- */
.duel{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.duel .dl-x{font:400 30px/1 var(--serif);color:var(--poussiere)}
.duel .sceau{display:block}
@media(max-width:420px){.duel{gap:10px}.duel .sceau{width:96px;height:96px}}

/* --- barre d’onglets --- */
.ong-barre{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;
  border-bottom:1px solid var(--ligne);padding-bottom:8px}
button.ong{font:13.5px/1 var(--sans);color:var(--patine);background:none;
  border:1px solid transparent;border-radius:var(--r);padding:9px 13px;cursor:pointer;
  transition:color .16s,background .16s,border-color .16s}
button.ong:hover{color:var(--parchemin);background:rgba(236,227,214,.05)}
button.ong.on{color:var(--nuit);background:var(--or);border-color:var(--or);font-weight:600}
button.ong:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}

/* --- la barre des trois parts ---
   Palette choisie par mesure, pas par goût. Le couple rose / sang d'origine était
   indiscernable une fois posé côte à côte : deux rouges de même clarté. Séparation
   vérifiée avec le validateur de palette (surface #14111c) :
       or-clair / rose / poussière  ->  ΔE 15,4 en protanopie, 18,9 en vision normale,
       contraste >= 3:1 pour les trois.
   La friction porte en plus une hachure à 45° : la couleur n'est jamais seule à
   distinguer une part, ni à l'impression ni en contraste forcé.
   Et le --sang cesse de signifier « friction » — une friction est un coût, pas une
   condamnation, la règle éditoriale vaut aussi pour la couleur. */
.cbar{display:flex;gap:2px;height:30px;border-radius:var(--r);
  border:1px solid var(--ligne);background:var(--nuit);padding:2px}
.cbar span{display:flex;align-items:center;justify-content:center;
  min-width:0;flex-shrink:1;border-radius:2px;
  font:600 11.5px/1 var(--mono)}
.cbar .pt-r{background:var(--or-clair);color:var(--nuit)}
.cbar .pt-c{background:var(--rose);color:var(--nuit)}
.cbar .pt-f{color:var(--parchemin);background:
  repeating-linear-gradient(45deg,#6d6478 0 5px,#5c5466 5px 10px)}
.cbar span b{font-weight:600;padding:0 2px}
.cbar-lg{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;
  margin:9px 0 18px;font:12px/1 var(--sans);color:var(--poussiere)}
.cbar-lg li{display:flex;align-items:center;gap:6px}
.cbar-lg i{width:11px;height:11px;border-radius:2px;display:inline-block}
.cbar-lg i.pt-r{background:var(--or-clair)}
.cbar-lg i.pt-c{background:var(--rose)}
.cbar-lg i.pt-f{background:repeating-linear-gradient(45deg,#6d6478 0 3px,#5c5466 3px 6px)}
.cbar-lg.hidden{display:none}

/* --- les deux indices ramenés à leur plafond --- */
.idx{display:flex;gap:12px;margin:0 0 12px}
.idx > div{flex:1;background:var(--nuit);border:1px solid var(--ligne);
  border-radius:var(--r);padding:13px 15px}
.idx .v{display:block;font:600 27px/1 var(--serif);color:var(--parchemin)}
.idx > div:first-child .v{color:var(--or-clair)}
.idx > div:last-child .v{color:var(--rose)}
.idx .l{display:block;margin-top:5px;font:11px/1.3 var(--sans);
  text-transform:uppercase;letter-spacing:.13em;color:var(--poussiere)}
@media(max-width:480px){.idx{flex-direction:column}}

/* --- blocs rédactionnels : une bande de couleur, pas un fond teinté --- */
.bl{border-left:3px solid var(--ligne);padding:2px 0 2px 16px;margin:22px 0}
.bl h3{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.17em;
  color:var(--poussiere);margin:0 0 12px}
.bl p{margin:0 0 12px;font-size:15.5px;line-height:1.72;color:var(--parchemin)}
.bl p:last-child{margin-bottom:0}
.bl.acc{border-left-color:var(--or)}
.bl.app{border-left-color:var(--rose)}
.bl.fri{border-left-color:#6d6478}
.bl.rien p{color:var(--patine);font-style:italic}
.bl .eti{display:block;font:600 10px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.15em;color:var(--poussiere);margin-bottom:5px}
.bl .sens{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bl .sens h4{font:600 14px/1.3 var(--serif);color:var(--parchemin);margin:0 0 11px}
.bl .sens .fl{color:var(--rose)}
@media(max-width:640px){.bl .sens{grid-template-columns:1fr;gap:18px}}

/* --- comparatif des quatre domaines, dans la vue générale --- */
.cmp{margin:22px 0 6px}
.cmp-l{margin-bottom:13px}
.cmp-n{display:block;font:12.5px/1 var(--sans);color:var(--patine);margin-bottom:6px}
.cmp .cbar{height:22px}

/* --- pastilles du détail par axe --- */
.pill{display:inline-block;font:600 10px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.11em;padding:4px 8px;border-radius:999px;border:1px solid}
.pill.acc{color:var(--or);border-color:var(--ligne-or);background:rgba(201,162,39,.09)}
.pill.app{color:var(--rose);border-color:var(--rose-fonce);background:rgba(201,138,148,.09)}
.pill.fri{color:#a89ab8;border-color:#4a4358;background:rgba(109,100,120,.16)}

/* --- listes de liens vers les autres couples --- */
.autres{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.autres h4{font:600 14px/1.3 var(--serif);color:var(--parchemin);margin:0 0 8px}
.liens{margin:0;font-size:13.5px;line-height:2}
.liens a{color:var(--patine);text-decoration:none;border-bottom:1px solid var(--ligne);
  padding-bottom:1px;margin-right:9px;white-space:nowrap}
.liens a:hover{color:var(--or-clair);border-bottom-color:var(--ligne-or)}
@media(max-width:640px){.autres{grid-template-columns:1fr}}

/* --- choix d’un couple : deux listes, puis un classement ---
   La matrice 13 x 13 a été retirée. Mesuré sur 390 px : 605 px de tableau dans
   312 px de fenêtre, cinq colonnes sur treize, cellules tactiles de 36 x 30 px.
   Deux listes natives règlent la cible tactile, le clavier et le lecteur d’écran
   d’un seul coup, et tiennent dans n’importe quelle largeur. */
.paire{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.paire label{flex:1 1 190px;display:flex;flex-direction:column;gap:7px;
  font:11px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--poussiere)}
.paire select{font:15px/1.2 var(--sans);color:var(--parchemin);
  background:var(--nuit);border:1px solid var(--ligne);border-radius:var(--r);
  padding:13px 12px;min-height:46px;width:100%;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--poussiere) 50%),
                   linear-gradient(135deg,var(--poussiere) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.paire select:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
a.voir{flex:1 1 190px;display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:13px 18px;border-radius:var(--r);text-decoration:none;
  font:600 14px/1 var(--sans);color:var(--nuit);background:var(--or);
  border:1px solid var(--or);transition:background .16s}
a.voir:hover{background:var(--or-clair)}
a.voir:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

/* --- les deux ordres, offerts au lecteur ---
   Bascule segmentée, pas deux boutons. Repris tel quel de la barre d’onglets, le
   choix actif était en or plein, pleine largeur : le même poids visuel que
   « Lire X et Y », qui est l’action de la page. Deux blocs d’or côte à côte pour
   deux sens différents, c’est une hiérarchie qui ment. Le tri change une vue, il
   ne mène nulle part : il se marque, il ne se crie pas. */
.tri{display:flex;gap:0;margin:0 0 18px;padding:3px;
  background:var(--nuit);border:1px solid var(--ligne);border-radius:var(--r);
  width:100%}
.tri button{flex:1 1 0;min-width:0;min-height:44px;padding:11px 8px;
  font:13px/1.25 var(--sans);color:var(--patine);background:none;
  border:1px solid transparent;border-radius:2px;cursor:pointer;
  transition:color .16s,background .16s}
.tri button:hover{color:var(--parchemin)}
.tri button.on{color:var(--or-clair);background:rgba(201,162,39,.15);
  border-color:var(--ligne-or);font-weight:600}
.tri button:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
@media(max-width:360px){.tri button{font-size:12px;padding:11px 5px}}

/* --- légende du classement ---
   Trois couleurs sans clé, et un chiffre dont le sens change avec le tri : la
   couleur ne doit jamais porter seule une information, le nombre non plus. */
.rg-lg{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 14px;
  font:12px/1.4 var(--sans);color:var(--poussiere)}
.rg-lg .cl{display:flex;align-items:center;gap:6px}
.rg-lg i{width:11px;height:11px;border-radius:2px;display:inline-block;flex:none}
.rg-lg i.pt-r{background:var(--or-clair)}
.rg-lg i.pt-c{background:var(--rose)}
.rg-lg i.pt-f{background:repeating-linear-gradient(45deg,#6d6478 0 3px,#5c5466 3px 6px)}
.rg-lg b{color:var(--patine);font-weight:600}

/* --- le classement des douze autres --- */
ol.rang{list-style:none;counter-reset:r;padding:0;margin:0}
ol.rang li{counter-increment:r;border-bottom:1px solid var(--ligne)}
ol.rang li:last-child{border-bottom:none}
ol.rang a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:
  "n nom i" "n barre barre";gap:4px 12px;align-items:center;
  padding:13px 4px;min-height:44px;text-decoration:none;color:var(--parchemin)}
ol.rang a::before{grid-area:n;content:counter(r);font:600 12px/1 var(--mono);
  color:var(--poussiere);width:20px;text-align:right}
ol.rang a:hover{background:rgba(236,227,214,.04)}
ol.rang a:focus-visible{outline:2px solid var(--or-clair);outline-offset:-2px}
.rg-n{grid-area:nom;font:15.5px/1.2 var(--serif)}
.rg-i{grid-area:i;font:600 13px/1 var(--mono);color:var(--patine)}
ol.rang .cbar{grid-area:barre;height:16px;margin-top:2px}
ol.rang .cbar span{font-size:10px}
@media(max-width:420px){ol.rang .cbar span b{display:none}}

a.lk-retour{font:13.5px/1 var(--sans);color:var(--patine);text-decoration:none}
a.lk-retour:hover{color:var(--or-clair)}

details.pliable > summary{cursor:pointer;font:12.5px/1 var(--sans);color:var(--poussiere);
  padding:10px 0;list-style:revert}
details.pliable > summary:hover{color:var(--patine)}

/* Designation de Bayer : jamais de capitales — δ en majuscule devient Δ,
   qui est une autre lettre. La casse porte du sens en nomenclature stellaire. */
th.bayer{text-transform:none;font-size:12px;letter-spacing:.02em;color:var(--patine)}