/* tokens */
:root {
  --color-text: #E6DEF5;
  --color-surface: #1B1131;
  --color-surface-alt: #F6F4FB;
  --color-border: #393248;
  --color-text-muted: #9C94AB;
  --radius-card: .75rem;
  --shadow-card: 0 0 0 1px rgba(212, 175, 55, .18);
  --font-heading: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --color-sur-secondary: #E6DEF5;
  --color-sur-primary: #130C22;
  --focus-ring: #D4AF37;
  --color-primary: #D4AF37;
  --color-secondary: #2A1B4D;
  --color-bg: #130C22;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@supports not selector(:focus-visible) {
  :focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
}

/* lib-orc-archive — les tirages passes d'un signe, par mois. */
.aso__lib-orc-archive {
  max-width: var(--orc-large);
  margin: 0 auto;
}

.aso__lib-orc-archive__titre {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--orc-texte-fort);
  text-align: center;
}

/* LA NOTE N'EST PAS UNE MENTION LEGALE : elle dit ce que sont ces pages, et elle est
   posee AVANT la liste pour qu'on la lise avant de cliquer, pas apres. */
.aso__lib-orc-archive__note {
  max-width: var(--orc-lecture);
  margin: 0 auto var(--orc-ecart-large);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--orc-voile);
  text-align: center;
}

.aso__lib-orc-archive__mois {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--orc-ecart);
}

.aso__lib-orc-archive__bloc {
  padding: var(--orc-ecart);
  border: 1px solid var(--orc-bordure);
  border-radius: var(--orc-rayon);
  background: var(--orc-surface);
}

.aso__lib-orc-archive__mois-titre {
  margin: 0 0 .75rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orc-or);
}

/* Une grille de quantiemes, pas une liste a puces : sept colonnes rappellent la semaine
   sans qu'on ait a poser un vrai calendrier — lequel supposerait de connaitre le jour
   de depart du mois, donc du JavaScript ou du Python de mise en page. */
.aso__lib-orc-archive__jours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aso__lib-orc-archive__jour { margin: 0; }

.aso__lib-orc-archive__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border-radius: calc(var(--orc-rayon) * .6);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--orc-texte);
  text-decoration: none;
  transition: background-color var(--orc-transition), color var(--orc-transition);
}

.aso__lib-orc-archive__lien:hover {
  background: var(--orc-or-voile);
  color: var(--orc-or);
}

/* lib-orc-attributs — les quatre accessoires du genre.

   GRILLE INTRINSEQUE : quatre cases sur grand ecran, deux sur tablette, une sur
   telephone, sans une seule media query. */
.aso__lib-orc-attributs {
  max-width: var(--orc-lecture);
  margin: calc(var(--orc-ecart) * 2) auto 0;
}

.aso__lib-orc-attributs__titre {
  margin: 0 0 var(--orc-ecart);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orc-or);
  text-align: center;
}

.aso__lib-orc-attributs__titre:empty { display: none; }

.aso__lib-orc-attributs__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .75rem;
  margin: 0;
}

.aso__lib-orc-attributs__case {
  padding: var(--orc-ecart) 1rem;
  border: 1px solid var(--orc-bordure);
  border-radius: var(--orc-rayon);
  background: var(--orc-surface);
  text-align: center;
}

.aso__lib-orc-attributs__label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orc-voile);
}

.aso__lib-orc-attributs__valeur {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .5rem 0 0;
}

/* LA VALEUR EST EN CHASSE FIXE. Un code HTTP et une balise sont du code : les servir
   dans la police de texte les ferait lire comme des mots, et toute la collision du
   theme tient a ce qu'on voie qu'il s'agit d'objets de metier. */
.aso__lib-orc-attributs__mot {
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--orc-texte-fort);
  overflow-wrap: anywhere;
}

/* Hier, demain, l'archive : la valeur est alors un lien. Sans cette regle il sortirait
   dans le bleu du navigateur, illisible sur la nuit. */
.aso__lib-orc-attributs__mot a {
  color: var(--orc-or);
  text-decoration: underline;
  text-decoration-color: var(--orc-or-trait);
  text-underline-offset: .2em;
}

.aso__lib-orc-attributs__mot a:hover { text-decoration-color: currentColor; }

.aso__lib-orc-attributs__sens {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--orc-texte);
}

.aso__lib-orc-attributs__sens:empty { display: none; }

/* lib-orc-aveu — l'endroit ou l'editeur explique le procede.

   IL SE POSE DANS UNE BANDE CLAIRE (lib-orc-bande--jour), qui a redefini les tokens de
   texte. Cette partielle n'a donc AUCUNE couleur a elle : elle lit ce que la bande lui
   donne, et c'est le changement de fond qui fait basculer le registre a l'oeil.

   POURQUOI UN FILET D'ACCENT A GAUCHE. C'est le seul ornement du bloc, et il dit la
   seule chose qu'il faut dire : ce paragraphe-ci n'est pas du meme ordre que le reste de
   la page. */
.aso__lib-orc-aveu {
  max-width: var(--orc-lecture);
  margin: 0 auto;
  padding-left: var(--orc-ecart);
  border-left: 3px solid var(--orc-or);
}

.aso__lib-orc-aveu__titre {
  margin: 0 0 .75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-aveu__corps {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--orc-texte);
}

/* LA SOURCE SE LIT, ELLE NE SE DEVINE PAS. Un aveu qui nomme un procede sans dire d'ou
   il sort demande qu'on le croie sur parole — exactement ce que le reste du site fait
   pour rire, et qu'on cesse de faire ici. */
.aso__lib-orc-aveu__source {
  margin: var(--orc-ecart) 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--orc-voile);
}

.aso__lib-orc-aveu__source:empty { display: none; }

/* =================================================================================
   lib-orc-bande — la bande pleine largeur, ET la couche de tokens du theme oracle.

   POURQUOI LES TOKENS SONT ICI. Une partielle n'est livree que si son marqueur
   `<prefixe>__lib-orc-bande` apparait dans le HTML construit (build_network.py:5030).
   Les tokens doivent donc vivre dans une brique presente sur toute page — et dans ce
   theme, toute page est une suite de bandes.

   POURQUOI L'ECHELLE EST DERIVEE ET NON POSEE — la divergence avec `tribune`.
   `tribune` declare des valeurs exactes parce qu'il copiait une identite au pixel.
   `oracle` n'a rien a copier : il habille un genre. Il derive donc tout par color-mix()
   depuis les tokens du site, comme `agence`, ce qui garantit que deux oracles du parc ne
   se ressemblent pas sans qu'on touche a une ligne de CSS.
   ================================================================================= */

/* LES RUPTURES S'ECRIVENT EN REM, comme dans tout le depot : une rupture en rem suit la
   taille de police choisie par le lecteur, une rupture en px l'ignore. 48rem = 768 px,
   64rem = 1024 px a la taille par defaut. */

/* « :root, .lib-orc-bande » et non la bande seule : l'entete et le pied vivent hors de
   la sequence de bandes et perdraient toute l'echelle. La declaration reste AUSSI sur la
   bande, sans quoi les tokens de texte, calcules une fois sur :root, figeraient les
   valeurs du fond principal et sortiraient illisibles dans une bande d'une autre teinte. */
:root,
.aso__lib-orc-bande {

  /* --- la nuit, et ses trois profondeurs --------------------------------------
     Un site d'oracle est sombre. Ce n'est pas un gout : c'est ce qui fait qu'une
     surface doree se lit comme une lueur et non comme un aplat. Les trois valeurs
     descendent depuis le fond declare par le site. */
  --orc-nuit: var(--color-bg);
  --orc-nuit-douce: color-mix(in srgb, var(--color-bg) 88%, var(--color-sur-secondary, #fff));
  --orc-nuit-profonde: color-mix(in srgb, var(--color-bg) 82%, #000);

  /* --- l'or : l'accent, et rien d'autre ----------------------------------------
     Il ne sert QUE ce qui compte : la date du jour, le signe choisi, le chiffre. Un
     or partout est un or qui ne dit plus rien. */
  --orc-or: var(--color-primary);
  --orc-or-clair: color-mix(in srgb, var(--color-primary) 62%, var(--color-bg));
  --orc-or-voile: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --orc-or-trait: color-mix(in srgb, var(--color-primary) 38%, transparent);

  /* --- le texte : trois niveaux ------------------------------------------------- */
  --orc-lune: var(--color-text);
  --orc-brume: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --orc-voile: color-mix(in srgb, var(--color-text) 48%, var(--color-bg));

  /* --- matiere ------------------------------------------------------------------- */
  --orc-surface: color-mix(in srgb, var(--color-bg) 92%, var(--color-text));
  --orc-surface-haute: color-mix(in srgb, var(--color-bg) 86%, var(--color-text));
  --orc-trait: color-mix(in srgb, var(--color-text) 16%, transparent);

  /* --- rythme -------------------------------------------------------------------- */
  --orc-pas: clamp(3rem, 2rem + 4vw, 5rem);
  --orc-pas-haut: clamp(5rem, 3.5rem + 6vw, 8rem);
  --orc-gouttiere: 1rem;
  --orc-ecart: 1.5rem;
  --orc-ecart-large: 2rem;

  /* --- largeurs ------------------------------------------------------------------ */
  --orc-large: 68rem;
  --orc-lecture: 44rem;
  --orc-etroit: 34rem;

  /* --- formes -------------------------------------------------------------------- */
  --orc-rayon: var(--radius-card);
  --orc-rayon-carte: calc(var(--radius-card) * 2);
  --orc-rayon-rond: 9999px;

  /* --- elevation : une lueur, pas une ombre --------------------------------------
     Sur un fond de nuit, une ombre noire ne se voit pas. Ce qui detache une carte,
     c'est un halo dore tres faible — l'inverse de ce qu'on ferait sur fond clair. */
  --orc-lueur: 0 0 0 1px var(--orc-trait);
  --orc-lueur-haute: 0 0 0 1px var(--orc-or-trait),
                     0 1.25rem 3rem color-mix(in srgb, var(--color-primary) 12%, transparent);

  /* --- mouvement ------------------------------------------------------------------ */
  --orc-transition: 180ms cubic-bezier(.4, 0, .2, 1);

  /* --- ce que les briques lisent, et que chaque fond redefinit --------------------- */
  --orc-fond: var(--orc-nuit);
  --orc-texte: var(--orc-brume);
  --orc-texte-fort: var(--orc-lune);
  --orc-bordure: var(--orc-trait);
}

.aso__lib-orc-bande {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
  position: relative;
  background: var(--orc-fond);
  color: var(--orc-texte);
}

.aso__lib-orc-bande__inner {
  max-width: var(--orc-large);
  margin: 0 auto;
  padding-block: var(--orc-pas);
  padding-inline: var(--orc-gouttiere);
}

/* La largeur passe par un ATTRIBUT et jamais par une classe : prefixer_classes tourne au
   chargement du gabarit, avant que la donnee ne soit resolue, donc une classe venue d'une
   donnee sortirait nue et ne rencontrerait jamais son selecteur. */
.aso__lib-orc-bande__inner[data-largeur="lecture"] { max-width: var(--orc-lecture); }
.aso__lib-orc-bande__inner[data-largeur="etroit"]  { max-width: var(--orc-etroit); }

/* --- les fonds -------------------------------------------------------------------- */

.aso__lib-orc-bande--profonde {
  --orc-fond: var(--orc-nuit-profonde);
}

.aso__lib-orc-bande--douce {
  --orc-fond: var(--orc-nuit-douce);
}

/* LA VOUTE : le fond du haut de page. Deux lueurs radiales tres larges, l'une doree en
   haut, l'autre froide en bas — c'est ce qui donne l'impression de profondeur sans
   poser une seule image. Rien d'autre du theme ne porte de degrade. */
.aso__lib-orc-bande--voute {
  --orc-fond: var(--orc-nuit-profonde);
  background:
    radial-gradient(70rem 32rem at 50% -18%,
                    color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 64%),
    radial-gradient(48rem 24rem at 12% 108%,
                    color-mix(in srgb, var(--color-secondary) 46%, transparent), transparent 58%),
    var(--orc-nuit-profonde);
}

/* L'AVEU : la seule bande claire du theme, et elle est la pour une raison.
   Quand l'editeur explique le procede — voir lib-orc-aveu — la page doit CHANGER DE
   REGISTRE a l'oeil. Garder la nuit reviendrait a murmurer l'aveu dans le decor qu'il
   denonce ; le lecteur ne verrait pas qu'on a cesse de jouer. */
.aso__lib-orc-bande--jour {
  --orc-fond: var(--color-surface-alt, #f6f4fb);
  --orc-texte: color-mix(in srgb, #1a1526 82%, transparent);
  --orc-texte-fort: #14101f;
  --orc-bordure: color-mix(in srgb, #14101f 14%, transparent);
  --orc-surface: #fff;
  --orc-surface-haute: #fff;
}

/* lib-orc-cartes — les douze tirages du jour.

   GRILLE INTRINSEQUE : quatre cartes sur grand ecran, deux sur tablette, une sur
   telephone, sans media query. */
.aso__lib-orc-cartes {
  max-width: var(--orc-large);
  margin: 0 auto;
}

.aso__lib-orc-cartes__titre {
  margin: 0 0 var(--orc-ecart);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orc-or);
  text-align: center;
}

.aso__lib-orc-cartes__titre:empty { display: none; }

.aso__lib-orc-cartes__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aso__lib-orc-cartes__carte { margin: 0; }

.aso__lib-orc-cartes__lien {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: var(--orc-ecart) 1rem;
  border: 1px solid var(--orc-bordure);
  border-radius: var(--orc-rayon);
  background: var(--orc-surface);
  color: var(--orc-texte);
  text-decoration: none;
  transition: border-color var(--orc-transition), background-color var(--orc-transition);
}

.aso__lib-orc-cartes__lien:hover {
  border-color: var(--orc-or-trait);
  background: var(--orc-surface-haute);
}

.aso__lib-orc-cartes__tete {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.aso__lib-orc-cartes__glyphe {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--orc-or);
}

.aso__lib-orc-cartes__nom {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-cartes__periode {
  font-size: .75rem;
  color: var(--orc-voile);
}

.aso__lib-orc-cartes__etoiles {
  font-size: .95rem;
  letter-spacing: .15em;
  color: var(--orc-or);
}

.aso__lib-orc-cartes__phrase {
  font-size: .9rem;
  line-height: 1.55;
}

/* lib-orc-domaines — le ciel, maison par maison.

   GRILLE INTRINSEQUE : trois cartes sur grand ecran, deux sur tablette, une sur
   telephone, sans une seule media query. */
.aso__lib-orc-domaines {
  max-width: var(--orc-large);
  margin: calc(var(--orc-ecart) * 2) auto 0;
}

.aso__lib-orc-domaines__titre {
  margin: 0 0 var(--orc-ecart);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orc-or);
  text-align: center;
}

.aso__lib-orc-domaines__titre:empty { display: none; }

.aso__lib-orc-domaines__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: .75rem;
}

.aso__lib-orc-domaines__carte {
  padding: var(--orc-ecart) 1.1rem;
  border: 1px solid var(--orc-bordure);
  border-radius: var(--orc-rayon);
  background: var(--orc-surface);
}

.aso__lib-orc-domaines__nom {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-domaines__maison {
  margin: .15rem 0 0;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orc-voile);
}

.aso__lib-orc-domaines__etoiles {
  margin: .5rem 0 0;
  font-size: 1rem;
  letter-spacing: .15em;
  color: var(--orc-or);
}

.aso__lib-orc-domaines__texte {
  margin: .6rem 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--orc-texte);
}

/* lib-orc-entete — la barre de tete, volontairement NON fixe (voir la brique). */
.aso__lib-orc-entete {
  border-bottom: 1px solid var(--orc-trait);
  background: var(--orc-nuit-profonde);
}

.aso__lib-orc-entete__rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--orc-ecart);
  max-width: var(--orc-large);
  margin: 0 auto;
  padding: .9rem var(--orc-gouttiere);
}

.aso__lib-orc-entete__marque {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  color: var(--orc-lune);
  text-decoration: none;
}

.aso__lib-orc-entete__nom {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--orc-or);
}

.aso__lib-orc-entete__baseline {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orc-voile);
}

.aso__lib-orc-entete__baseline:empty { display: none; }

.aso__lib-orc-entete__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aso__lib-orc-entete__entree { margin: 0; }

.aso__lib-orc-entete__lien,
.aso__lib-orc-entete__ici {
  font-size: .9rem;
  color: var(--orc-brume);
  text-decoration: none;
  transition: color var(--orc-transition);
}

.aso__lib-orc-entete__lien:hover { color: var(--orc-or); }

.aso__lib-orc-entete__ici { display: none; color: var(--orc-or); font-weight: 700; }

.aso__lib-orc-entete__entree[data-courant="oui"] .aso__lib-orc-entete__lien { display: none; }

.aso__lib-orc-entete__entree[data-courant="oui"] .aso__lib-orc-entete__ici { display: inline; }

/* lib-orc-faq — questions et reponses, visibles. */
.aso__lib-orc-faq {
  max-width: var(--orc-lecture);
  margin: 0 auto;
}

.aso__lib-orc-faq__titre {
  margin: 0 0 var(--orc-ecart);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-faq__item + .aso__lib-orc-faq__item {
  margin-top: calc(var(--orc-ecart) * 1.25);
}

.aso__lib-orc-faq__question {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-faq__reponse {
  margin: .4rem 0 0;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--orc-texte);
}

/* LE LIEN PREND LE TEXTE FORT, PAS L'OR. Une FAQ se pose aussi bien sur la nuit que sur
   la bande claire, ou l'or ne se lit plus ; le trait dore sous le mot suffit a le
   signaler, et le texte fort reste lisible sur les deux fonds. */
.aso__lib-orc-faq__reponse a {
  color: var(--orc-texte-fort);
  text-decoration: underline;
  text-decoration-color: var(--orc-or);
  text-underline-offset: .2em;
}

.aso__lib-orc-faq__reponse a:hover { text-decoration-thickness: 2px; }

/* lib-orc-listes — a faire / a eviter.

   Deux colonnes sur grand ecran, une sur telephone, sans media query. Le sens de la
   liste se lit au trait de gauche, en or pour « a faire », en voile pour « a eviter » :
   aucune couleur de plus que celles du theme. */
.aso__lib-orc-listes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: .75rem;
  max-width: var(--orc-large);
  margin: calc(var(--orc-ecart) * 2) auto 0;
}

.aso__lib-orc-listes__colonne {
  padding: var(--orc-ecart) 1.1rem;
  border: 1px solid var(--orc-bordure);
  border-left: 3px solid var(--orc-or);
  border-radius: var(--orc-rayon);
  background: var(--orc-surface);
}

.aso__lib-orc-listes__colonne[data-sens="non"] { border-left-color: var(--orc-voile); }

.aso__lib-orc-listes__titre {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-listes__liste {
  margin: 0;
  padding-left: 1.1rem;
}

.aso__lib-orc-listes__liste > li {
  margin: .35rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--orc-texte);
}

/* lib-orc-mesure — un indicateur du jour.

   LE <meter> EST HABILLE, PAS REMPLACE. Les navigateurs le dessinent chacun a leur
   facon ; on neutralise donc son apparence native et on peint la jauge nous-memes, mais
   l'element reste un <meter> : sa valeur et ses bornes restent dans le HTML, donc
   annoncees par un lecteur d'ecran et lisibles sans CSS. */
.aso__lib-orc-mesure {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.aso__lib-orc-mesure__label {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orc-voile);
}

.aso__lib-orc-mesure__jauge {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: .4rem;
  border: 0;
  border-radius: var(--orc-rayon-rond);
  background: var(--orc-or-voile);
}

.aso__lib-orc-mesure__jauge::-webkit-meter-bar {
  border: 0;
  border-radius: var(--orc-rayon-rond);
  background: var(--orc-or-voile);
}

.aso__lib-orc-mesure__jauge::-webkit-meter-optimum-value {
  border-radius: var(--orc-rayon-rond);
  background: var(--orc-or);
}

.aso__lib-orc-mesure__jauge::-moz-meter-bar {
  border-radius: var(--orc-rayon-rond);
  background: var(--orc-or);
}

.aso__lib-orc-mesure__valeur {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--orc-texte-fort);
}

/* lib-orc-pied — le pied, qui porte la roue.

   CE N'EST PAS UN DOUBLON DE L'ENTETE : la roue n'y est pas. Un lecteur qui finit sa
   lecture du jour doit pouvoir passer a un autre signe sans remonter la page. */
.aso__lib-orc-pied {
  border-top: 1px solid var(--orc-trait);
  background: var(--orc-nuit-profonde);
}

.aso__lib-orc-pied__roue {
  max-width: var(--orc-large);
  margin: 0 auto;
  padding: var(--orc-pas) var(--orc-gouttiere) 0;
}

.aso__lib-orc-pied__roue:empty { display: none; }

.aso__lib-orc-pied__bas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  max-width: var(--orc-large);
  margin: 0 auto;
  padding: var(--orc-pas) var(--orc-gouttiere);
  text-align: center;
}

.aso__lib-orc-pied__marque {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orc-or);
}

.aso__lib-orc-pied__phrase {
  margin: 0;
  font-size: .9rem;
  color: var(--orc-voile);
}

.aso__lib-orc-pied__phrase:empty { display: none; }

.aso__lib-orc-pied__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.aso__lib-orc-pied__mention {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--orc-voile);
}

/* lib-orc-roue — la grille des douze signes, navigation principale du site.

   GRILLE INTRINSEQUE, ZERO MEDIA QUERY. repeat(auto-fit, minmax(...)) fait passer la
   roue de 2 colonnes sur telephone a 6 sur grand ecran sans qu'on nomme une seule
   largeur. C'est l'idiome du depot, et ici il a une raison de plus : le nombre de signes
   n'est pas une constante du theme. */
.aso__lib-orc-roue {
  margin: 0;
}

.aso__lib-orc-roue__titre {
  margin: 0 0 var(--orc-ecart);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--orc-texte-fort);
  text-align: center;
}

.aso__lib-orc-roue__titre:empty { display: none; }

.aso__lib-orc-roue__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* lib-orc-signe — une entree de la roue.

   LA CIBLE EST LA CARTE ENTIERE, pas le mot. Sur telephone, une entree de navigation
   qui fait la hauteur d'une ligne de texte se rate une fois sur trois. Ici la surface
   sensible fait toute la tuile, glyphe et periode compris. */
.aso__lib-orc-signe {
  margin: 0;
}

.aso__lib-orc-signe__lien,
.aso__lib-orc-signe__ici {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .85rem .5rem;
  border: 1px solid var(--orc-bordure);
  border-radius: var(--orc-rayon);
  background: var(--orc-surface);
  color: var(--orc-texte);
  text-decoration: none;
  transition: border-color var(--orc-transition), background-color var(--orc-transition);
}

.aso__lib-orc-signe__lien:hover {
  border-color: var(--orc-or-trait);
  background: var(--orc-surface-haute);
}

.aso__lib-orc-signe__glyphe {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--orc-or);
}

.aso__lib-orc-signe__nom {
  font-weight: 700;
  font-size: .95rem;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-signe__periode {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--orc-voile);
  text-align: center;
}

.aso__lib-orc-signe__periode:empty { display: none; }

/* La page courante : rendue en mention, jamais en lien. Elle se distingue par l'or et
   non par une couleur de plus — l'accent du theme sert exactement a ca. */
.aso__lib-orc-signe__ici { display: none; }

.aso__lib-orc-signe[data-courant="oui"] .aso__lib-orc-signe__lien { display: none; }

.aso__lib-orc-signe[data-courant="oui"] .aso__lib-orc-signe__ici {
  display: flex;
  border-color: var(--orc-or);
  background: var(--orc-or-voile);
}

/* lib-orc-tirage — la lecture du jour.

   ELLE TIENT DANS UNE COLONNE ETROITE, et c'est la seule decision de mise en page qui
   compte ici : une lecture qu'on parcourt des yeux en diagonale ne resonne pas. La
   longueur de ligne est ramenee a une lecture confortable, le corps est genereux, et
   rien ne vient a cote distraire. */
.aso__lib-orc-tirage {
  max-width: var(--orc-lecture);
  margin: 0 auto;
}

.aso__lib-orc-tirage__tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-bottom: var(--orc-ecart-large);
  text-align: center;
}

.aso__lib-orc-tirage__glyphe {
  font-size: 3rem;
  line-height: 1;
  color: var(--orc-or);
}

.aso__lib-orc-tirage__signe {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--orc-texte-fort);
}

/* LA DATE EST CE QUI FAIT REVENIR. Elle est donc traitee comme une information, pas
   comme une mention : capitales espacees, couleur d'accent, posee sous le titre. */
.aso__lib-orc-tirage__date {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orc-or);
}

.aso__lib-orc-tirage__chapo {
  margin: 0 0 var(--orc-ecart);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--orc-texte-fort);
  text-align: center;
}

.aso__lib-orc-tirage__corps {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--orc-texte);
}

.aso__lib-orc-tirage__corps a {
  color: var(--orc-or);
  text-decoration: underline;
  text-decoration-color: var(--orc-or-trait);
  text-underline-offset: .2em;
}

.aso__lib-orc-tirage__corps a:hover { text-decoration-color: currentColor; }

.aso__lib-orc-tirage__mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--orc-ecart);
  margin: var(--orc-ecart-large) 0 0;
  padding: var(--orc-ecart);
  border: 1px solid var(--orc-bordure);
  border-radius: var(--orc-rayon-carte);
  background: var(--orc-surface);
  list-style: none;
}

.aso__lib-orc-tirage__mesures:empty { display: none; }

/* lib-orc-titre — le titre d'une page sans tirage.

   IL LIT LES TOKENS DE SA BANDE et ne pose aucune couleur a lui : pose sur la bande
   claire de l'aveu, il doit basculer avec elle. Une couleur en dur ici ferait un titre
   clair sur fond clair le jour ou quelqu'un le deplace. */
.aso__lib-orc-titre {
  max-width: var(--orc-lecture);
  margin: 0 auto var(--orc-ecart-large);
  text-align: center;
}

.aso__lib-orc-titre__surtitre {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orc-or);
}

.aso__lib-orc-titre__surtitre:empty { display: none; }

.aso__lib-orc-titre__mot {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--orc-texte-fort);
}

.aso__lib-orc-titre__chapo {
  margin: .75rem 0 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--orc-texte);
}

.aso__lib-orc-titre__chapo:empty { display: none; }

/* lib-orc-voisins — les autres signes du meme jour, en pastilles. */
.aso__lib-orc-voisins {
  max-width: var(--orc-large);
  margin: calc(var(--orc-ecart) * 2) auto 0;
  text-align: center;
}

.aso__lib-orc-voisins__titre {
  margin: 0 0 var(--orc-ecart);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orc-or);
}

.aso__lib-orc-voisins__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aso__lib-orc-voisins__liste a {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid var(--orc-bordure);
  border-radius: 999px;
  background: var(--orc-surface);
  color: var(--orc-texte-fort);
  font-size: .88rem;
  text-decoration: none;
  transition: border-color var(--orc-transition), background-color var(--orc-transition);
}

.aso__lib-orc-voisins__liste a:hover {
  border-color: var(--orc-or-trait);
  background: var(--orc-surface-haute);
}


/* Astro SEO — feuille locale.
   Tout l’habillage vient du theme `oracle`. Ce qui vit ici ne doit etre
   que le socle de page : remise a zero, boite, rythme du corps.
   Les classes s’y ecrivent PREFIXEES A LA MAIN (`.aso__…`) : le prefixage
   automatique ne touche que les partielles du theme, pas cette feuille. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}