/* Thème du Registre RP : dans l'esprit de Final Fantasy XIV (ciel étoilé, grand cristal et cristaux
   élémentaires en orbite, or des titres façon Trajan). Aucun logo ni image du jeu : tout est dessiné
   en CSS et par js/ciel.js.
   Chargé après ilph/ilph.css, qu'il ne modifie pas. Le thème ne s'applique qu'aux pages SANS famille
   (:root:not([data-famille])) et aux cartes sans famille (.ilph-card:not([data-famille])) : les fiches
   et les cartes de famille gardent exactement le style de familles.css, posé sur le kit.
   Seules les variables de :root sont communes (les familles redéfinissent les leurs). */

@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap; src: url("fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Belleza"; font-weight: 400; font-display: swap; src: url("fonts/belleza-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg: #070b18;
  --surface: #0f1630;
  --accent: #7cc3f5;      /* bleu d'éther : liens, sélection, survol */
  --highlight: #e6cc8f;   /* or : titres, étiquettes */
  --or: #e6cc8f;
  --text: #e9edf3;
  --muted: #9198a8;
  --danger: #ff6b6b;
  --field-dark: #1d2a54;
  --hairline: color-mix(in srgb, var(--or) 16%, transparent);
  --hairline-strong: color-mix(in srgb, var(--or) 38%, transparent);
  --fenetre: linear-gradient(to bottom, rgb(22 34 70 / .82), rgb(10 15 34 / .9));

  --font-titre: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-texte: "Belleza", Optima, Candara, "Segoe UI", sans-serif;
}
:root:not([data-famille]) { --font-pixel: var(--font-titre); }   /* étiquettes, boutons, titres de section */

/* ---------- Fond : ciel de nuit, nébuleuses d'éther, étoiles ---------- */

:root:not([data-famille]) body {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  image-rendering: auto;
}
/* Ciel peint une seule fois sur un calque fixe : défiler ne le repeint pas
   (background-attachment: fixed obligeait à repeindre toute la page à chaque défilement) */
:root:not([data-famille]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 78% 0%, rgb(110 190 255 / .24), transparent 70%),
    radial-gradient(ellipse 50% 45% at 10% 25%, rgb(60 200 210 / .09), transparent 70%),
    radial-gradient(ellipse 70% 50% at 90% 70%, rgb(120 90 220 / .11), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgb(70 120 230 / .11), transparent 70%),
    linear-gradient(to bottom, #0b1226, var(--bg) 60%);
}
/* Étoiles fixes : deux couches décalées, quelques-unes dorées. Derrière le contenu (le grain d'ILPH
   qu'elles remplacent est au premier plan : une étoile passait sur les images) */
:root:not([data-famille]) body::after {
  z-index: -1;
  opacity: .8;
  background-image:
    radial-gradient(1px 1px at 30px 40px, rgb(190 225 255 / .9), transparent),
    radial-gradient(1px 1px at 140px 110px, rgb(230 204 143 / .7), transparent),
    radial-gradient(1.5px 1.5px at 220px 200px, rgb(190 225 255 / .85), transparent),
    radial-gradient(1px 1px at 80px 250px, rgb(255 255 255 / .6), transparent),
    radial-gradient(1px 1px at 60px 120px, rgb(255 255 255 / .35), transparent),
    radial-gradient(1px 1px at 170px 30px, rgb(190 225 255 / .4), transparent);
  background-size: 280px 280px, 280px 280px, 280px 280px, 280px 280px, 190px 190px, 190px 190px;
}
#field { display: none; }

/* Ciel animé du haut de page (js/ciel.js), fondu vers le bas ; pas sur les fiches de famille */
#ciel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 560px;
  pointer-events: none; /* le fondu vers le bas est fait dans le canvas (moins coûteux qu'un masque CSS) */
}
:root[data-famille] #ciel { display: none; }

/* ---------- Barres de défilement : fines, sans flèches ---------- */

@supports not selector(::-webkit-scrollbar) {
  :root:not([data-famille]) { scrollbar-color: color-mix(in srgb, var(--or) 35%, var(--surface)) var(--bg); }
}
:root:not([data-famille]) ::-webkit-scrollbar { width: 10px; height: 10px; }
:root:not([data-famille]) ::-webkit-scrollbar-track { background: var(--bg); box-shadow: none; }
:root:not([data-famille]) ::-webkit-scrollbar-thumb {
  border: 2px solid var(--bg);
  border-radius: 5px;
  background: color-mix(in srgb, var(--or) 32%, var(--surface));
  box-shadow: none;
}
:root:not([data-famille]) ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
:root:not([data-famille]) ::-webkit-scrollbar-button { display: none; }

/* ---------- Typographie ---------- */

:root:not([data-famille]) .ilph-label { letter-spacing: .06em; text-transform: none; color: var(--or); }

:root:not([data-famille]) .ilph-eyebrow { font-size: .85rem; font-weight: 600; letter-spacing: .18em; color: var(--or); }
:root:not([data-famille]) .ilph-eyebrow .sep { color: var(--accent); text-shadow: 0 0 8px var(--accent); }

:root:not([data-famille]) .ilph-title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: .05em;
  text-transform: none;
  color: #f4f6fa;
  text-shadow: 0 2px 12px rgb(0 0 0 / .8), 0 0 30px rgb(124 195 245 / .35);
}
:root:not([data-famille]) .ilph-title.is-small { font-size: clamp(1.6rem, 4.6vw, 2.6rem); }
:root:not([data-famille]) .ilph-tagline { font-size: 1.02rem; }
:root:not([data-famille]) #nom { font-family: var(--font-titre); font-weight: 600; letter-spacing: .04em; }
:root:not([data-famille]) #fonction { font-size: 1.05rem; }

/* « ◆ Section [03] ──── » : cristal d'éther, titre doré, filet d'or qui s'efface */
:root:not([data-famille]) .ilph-section-title { font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: none; color: var(--or); }
:root:not([data-famille]) .ilph-section-title::before {
  content: "◆";
  margin-right: -.3rem;
  font-size: .7em;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
}
:root:not([data-famille]) .ilph-section-title::after { background: linear-gradient(to right, var(--hairline-strong), transparent); }
:root:not([data-famille]) .ilph-section-title .n { font-family: var(--font-texte); font-size: .9em; }

:root:not([data-famille]) a:hover { color: #b9e1ff; }
:root:not([data-famille]) kbd { font-family: var(--font-texte); border-radius: 3px; }
:root:not([data-famille]) .ilph-plate { font-size: .8rem; letter-spacing: .04em; text-transform: none; }
:root:not([data-famille]) ::selection { background: color-mix(in srgb, var(--accent) 60%, transparent); color: #fff; }

/* Textes du site, à une taille lisible avec Belleza */
:root:not([data-famille]) .rp-tri { font-size: .9rem; }
:root:not([data-famille]) .rp-vide { font-size: .95rem; }
:root:not([data-famille]) .rp-vide::before { content: "◆ "; font-size: .65em; vertical-align: .15em; }
:root:not([data-famille]) .rp-note { font-size: .85rem; }
:root:not([data-famille]) .rp-dl { font-size: .98rem; }
:root:not([data-famille]) .rp-dl dt { padding-top: .1rem; font-size: .85rem; }
:root:not([data-famille]) .rp-plugin { font-size: .82rem; }
:root:not([data-famille]) .rp-ligne-nom { font-size: .98rem; }
:root:not([data-famille]) .rp-incomplet { font-size: .88rem; }
:root:not([data-famille]) .rp-notes { font-size: .98rem; }
:root:not([data-famille]) .rp-erreur { font-size: .95rem; }
:root:not([data-famille]) .rp-erreur::before { content: none; }
:root:not([data-famille]) .rp-menu-liste { border-radius: 2px; background: var(--surface); box-shadow: 0 12px 30px rgb(0 0 0 / .55); font-size: .95rem; }
:root:not([data-famille]) .rp-menu-titre { font-family: var(--font-titre); font-size: .85rem; }
:root:not([data-famille]) .rp-menu-option[aria-selected="true"] .rp-menu-nom::before { content: "◆ "; font-size: .65em; }
/* Mods : rendu façon Penumbra, en chasse fixe comme dans le jeu */
:root:not([data-famille]) .pm-mod { font-family: var(--font-mono); background: var(--fenetre); }
:root:not([data-famille]) .pm-combo .pm-options { box-shadow: 0 10px 26px rgb(0 0 0 / .55); }
:root:not([data-famille]) .rp-vignette:is(:hover, :focus-visible) .rp-portrait { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / .5), 0 0 0 1px var(--accent); }
:root:not([data-famille]) .rp-identite .rp-portrait,
:root:not([data-famille]) .rp-vignette .rp-portrait,
.ilph-card:not([data-famille]) .rp-portrait { border-color: var(--hairline-strong); background: var(--bg); }

/* ---------- Panneaux et cartes sans famille : verre de nuit, filet doré, petits cristaux aux coins ---------- */

:root:not([data-famille]) .ilph-panel,
.ilph-card:not([data-famille]) {
  --corner: color-mix(in srgb, var(--accent) 70%, transparent);
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  background: var(--fenetre);
  box-shadow: inset 0 0 30px rgb(124 195 245 / .05), 0 10px 30px rgb(0 0 0 / .45);
}
:root:not([data-famille]) .ilph-panel::before, :root:not([data-famille]) .ilph-panel::after,
.ilph-card:not([data-famille])::before, .ilph-card:not([data-famille])::after {
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--corner);
  box-shadow: 0 0 8px var(--corner);
  transform: rotate(45deg);
}
:root:not([data-famille]) .ilph-panel::before, .ilph-card:not([data-famille])::before { top: -4px; left: -4px; }
:root:not([data-famille]) .ilph-panel::after, .ilph-card:not([data-famille])::after { bottom: -4px; right: -4px; }

a.ilph-card:not([data-famille]):is(:hover, :focus-visible) {
  --corner: #b9e1ff;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(to bottom, rgb(30 48 96 / .78), rgb(12 18 40 / .86));
  box-shadow: inset 0 0 34px rgb(124 195 245 / .1), 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 30px rgb(0 0 0 / .5);
}
a.ilph-card:not([data-famille]):is(:hover, :focus-visible) .name { color: #fff; }
.ilph-card:not([data-famille]) .ilph-card-top { font-family: var(--font-titre); font-size: .78rem; letter-spacing: .06em; text-transform: none; }
.ilph-card:not([data-famille]) .ilph-card-foot { border-top: 1px solid var(--hairline); font-size: .85rem; }
.ilph-card:not([data-famille]) .idx { font-family: var(--font-titre); color: var(--or); }
.ilph-card:not([data-famille]) .name { font-family: var(--font-titre); font-weight: 400; font-size: 1.22rem; line-height: 1.25; letter-spacing: .02em; }
.ilph-card:not([data-famille]) .rp-fonction { font-size: .9rem; }
.ilph-card:not([data-famille]) .desc { font-size: .95rem; }

/* ---------- Commandes : contour doré, lumière de cristal au survol ---------- */

:root:not([data-famille]) .ilph-btn {
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  background: rgb(10 16 36 / .6);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--or);
}
:root:not([data-famille]) .ilph-btn:is(:hover:not(:disabled), :focus-visible) {
  transform: none;
  border-color: var(--accent);
  background: rgb(30 60 110 / .55);
  color: #fff;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
:root:not([data-famille]) .ilph-btn.is-small { padding: .32rem .75rem; font-size: .8rem; }
:root:not([data-famille]) .ilph-btn.is-quiet { color: var(--muted); }
:root:not([data-famille]) .ilph-btn.is-quiet:hover:not(:disabled) { color: var(--text); }
:root:not([data-famille]) .ilph-btn kbd { border-color: var(--hairline-strong); }

:root:not([data-famille]) .ilph-prompt::before { content: "◆"; font-size: .6rem; }
:root:not([data-famille]) :is(.ilph-input, .ilph-select) {
  border-radius: 2px;
  background: rgb(6 10 24 / .7);
  font-size: .98rem;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .5);
}
:root:not([data-famille]) :is(.ilph-input, .ilph-select):focus { box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
:root:not([data-famille]) .ilph-chip { border-radius: 2px; font-family: var(--font-texte); font-size: .9rem; background: rgb(10 16 36 / .6); }
:root:not([data-famille]) .ilph-chip:is(.is-active, [aria-pressed="true"]) {
  border-color: var(--accent);
  background: linear-gradient(to bottom, rgb(70 140 210 / .55), rgb(30 70 130 / .55));
  font-weight: 400;
  color: #fff;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---------- Terminal (404) : simple encadré ---------- */

:root:not([data-famille]) .ilph-term { font-family: var(--font-texte); font-size: 1rem; white-space: normal; }

/* ---------- Fiches et cartes de famille : même esprit « fantaisie » que le thème, sans le pixel ----------
   Seule la structure change (coins, survols, ombres, barres de défilement, texte courant) et toujours
   dans les couleurs de la famille (variables de familles.css) : titres, étiquettes, polices de titre,
   fonds, bannières et ornements restent ceux de la famille. */

:root[data-famille] body { font-family: var(--font-texte); font-size: 16px; line-height: 1.55; }
:root[data-famille] :is(.pm-mod, .rp-code) { font-family: var(--font-mono); }   /* codes et Penumbra : comme dans le jeu */
:root[data-famille] .rp-vide::before { content: "◆ "; font-size: .65em; vertical-align: .15em; }

/* Coins : petits losanges aux couleurs de la famille au lieu des équerres pixel */
:root[data-famille] .ilph-panel::before, :root[data-famille] .ilph-panel::after,
.ilph-card[data-famille]::before, .ilph-card[data-famille]::after {
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--corner);
  box-shadow: 0 0 6px var(--corner);
  transform: rotate(45deg);
}
:root[data-famille] .ilph-panel::before, .ilph-card[data-famille]::before { top: -4px; left: -4px; }
:root[data-famille] .ilph-panel::after, .ilph-card[data-famille]::after { bottom: -4px; right: -4px; }

/* Survols : lueur douce de la couleur de la famille au lieu du damier et de l'ombre dure */
a.ilph-card[data-famille]:is(:hover, :focus-visible) {
  --corner: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 30px rgb(0 0 0 / .5);
}
:root[data-famille] .ilph-btn:is(:hover:not(:disabled), :focus-visible) {
  transform: none;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
:root[data-famille] .ilph-btn.is-small:hover:not(:disabled) { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-famille] .rp-vignette:is(:hover, :focus-visible) .rp-portrait { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / .5), 0 0 0 1px var(--accent); }
:root[data-famille] .rp-vignette .rp-portrait { background: var(--bg); }
:root[data-famille] .pm-combo .pm-options { box-shadow: 0 10px 26px rgb(0 0 0 / .55); }

/* Barres de défilement fines, aux couleurs de la famille */
@supports not selector(::-webkit-scrollbar) {
  :root[data-famille] { scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--surface)) var(--bg); }
}
:root[data-famille] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-famille] ::-webkit-scrollbar-track { background: var(--bg); box-shadow: none; }
:root[data-famille] ::-webkit-scrollbar-thumb {
  border: 2px solid var(--bg);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 40%, var(--surface));
  box-shadow: none;
}
:root[data-famille] ::-webkit-scrollbar-button { display: none; }