/* Grisloup, thème commun du site (graphite sombre + argent froid).
Repris de la feuille de donjons.grisloup.com, dont il ne garde que les blocs
réellement utilisés par les quatre pages d'ici : ni vidéos, ni chapitres
illustrés, ni formulaire, ni grille de captures.
La différence de teinte n'est pas cosmétique. Le site d'un jeu médiéval porte
l'or ; celui de la structure qui l'édite porte l'argent du logo, même
grammaire, deux registres, et on ne les confond pas d'un coup d'oeil.
---- Le procédé, une fois pour toutes -----------------------------------
Les filets argentés ne sont pas des `border-color` unies : une bordure unie
sur fond sombre fait un cadre plat et gris. Ici la bordure est un DÉGRADÉ,
obtenu en superposant deux fonds sur deux boîtes différentes :
background: linear-gradient(fond, fond) padding-box, <- l'intérieur
linear-gradient(argent, transparent) border-box; <- le filet
avec `border: 1px solid transparent` pour laisser voir la seconde couche.
Le filet est alors clair sur un bord et s'éteint sur l'autre : c'est ce qui
imite un chant métallique pris dans la lumière, plutôt qu'un trait dessiné. */
:root {
--bg: #0e1013;
--bg2: #14171b;
--card: #181c21;
--card2: #1e242b;
--ink: #e8ecf1;
--muted: #97a1ad;
--accent: #b8c4d0;
--accent-hi: #dbe4ed; /* argent le plus clair : reflets */
--accent-soft: rgba(184, 196, 208, .28);
--line: rgba(184, 196, 208, .14);
--danger: #c0483a;
--maxw: 1080px;
/* Le filet argenté, décliné en trois intensités. Une seule définition, pour
que tous les cadres du site attrapent la lumière du même côté. */
--sheen: linear-gradient(150deg, rgba(219,228,237,.42), rgba(184,196,208,.10) 42%,
rgba(184,196,208,.06) 62%, rgba(219,228,237,.26));
--sheen-soft: linear-gradient(150deg, rgba(219,228,237,.26), rgba(184,196,208,.06) 45%,
rgba(184,196,208,.04) 65%, rgba(219,228,237,.16));
/* Une carte est dix fois plus large qu'un badge. Sur un bouton, l'oeil ne voit
que les deux extremites du degrade, les valeurs hautes, et le filet parait
franc ; sur une carte, ce sont les longs cotes qui dominent, c'est-a-dire le
creux du degrade, et le filet s'eteint. Celui-ci ne descend donc jamais bas :
il module la lumiere sans jamais l'eteindre, pour que les trois pavés
brillent comme les boutons qui les suivent. */
--sheen-card: linear-gradient(150deg, rgba(238,245,252,.70), rgba(214,226,238,.46) 35%,
rgba(214,226,238,.42) 65%, rgba(238,245,252,.62));
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ---- Police des titres : Manrope, HEBERGEE ICI ---------------------------
Elle etait chargee depuis Google Fonts, ce qui envoyait l'adresse IP de chaque
visiteur a Google a chaque page : l'exact contraire de ce que disent les mentions
legales (aucune donnee chez un tiers), et une pratique jugee contraire au RGPD
(LG Muenchen, 20 janvier 2022). La licence SIL OFL 1.1 autorise cet hebergement ;
son texte est a cote des fichiers (assets/fonts/OFL-Manrope.txt).
Police VARIABLE : un seul fichier par jeu de caracteres couvre les graisses 500 a
700. Deux jeux suffisent aux huit langues du site (latin, latin etendu). La version
est dans le nom du fichier : il peut donc etre garde en cache indefiniment. */
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/assets/fonts/manrope-v20-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/assets/fonts/manrope-v20-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* Les deux halos sont ceux de ddust, à l'opacité près : l'argent est bien plus
clair que l'or, et les mêmes valeurs (.07 / .05) baveraient en voile gris. */
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(1200px 600px at 80% -10%, rgba(184,196,208,.05), transparent 60%),
radial-gradient(900px 500px at 0% 100%, rgba(184,196,208,.035), transparent 60%),
var(--bg);
color: var(--ink);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
line-height: 1.65;
}
h1, h2, h3 { font-family: "Manrope", system-ui, sans-serif; letter-spacing: .04em; font-weight: 600; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--accent); margin: 2.2em 0 .5em; }
h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
a:hover { color: var(--accent-hi); }
img { max-width: 100%; height: auto; }
.muted { color: var(--muted); }
/* Un trait qui s'éteint sous chaque titre de section : la ponctuation la plus
discrète qui soit, et elle suffit à donner du rythme à une page de texte. */
main h2::after {
content: ""; display: block; width: 56px; height: 1px; margin-top: .55em;
background: linear-gradient(90deg, var(--accent), transparent);
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* ---- Barre de navigation --------------------------------------------- */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(14, 16, 19, .92);
backdrop-filter: blur(6px);
}
/* Filet du bas en dégradé plutôt qu'une bordure unie : il s'allume au centre,
là où l'oeil arrive, et disparaît aux marges au lieu de barrer l'écran. */
.topbar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,196,208,.40) 25%,
rgba(184,196,208,.40) 75%, transparent);
}
.topbar .wrap {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img {
height: 44px; width: auto; border-radius: 7px;
box-shadow: 0 0 0 1px rgba(219,228,237,.30), 0 2px 10px rgba(0,0,0,.5);
}
#site-nav { display: flex; gap: 4px 14px; flex-wrap: wrap; flex: 1; }
#site-nav a {
text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem;
padding: 6px 2px; border-bottom: 2px solid transparent;
}
#site-nav a:hover { color: var(--ink); }
#site-nav a.current { color: var(--accent); border-bottom-color: var(--accent); }
/* Sept langues, pas trois : le sélecteur est deux fois plus long que celui de
ddust. D'où des puces plus serrées, qui passent à la ligne au lieu de pousser
la navigation hors de l'écran. */
#lang-switch { display: flex; gap: 4px; flex-wrap: wrap; font-size: .78rem; }
#lang-switch a, #lang-switch span {
text-decoration: none; color: var(--muted); padding: 2px 7px;
border: 1px solid transparent; border-radius: 6px; letter-spacing: .06em;
}
#lang-switch a:hover { color: var(--ink); border-color: var(--accent-soft); }
#lang-switch .current {
color: var(--accent-hi);
background: linear-gradient(rgba(184,196,208,.07), rgba(184,196,208,.02)) padding-box,
var(--sheen) border-box;
border-color: transparent;
}
/* ---- Héros ------------------------------------------------------------ */
.hero { text-align: center; padding: 48px 0 12px; }
/* Anneau argenté au ras de l'image + halo froid : la bannière est posée sur la
page comme une plaque, elle n'y flotte pas. */
.hero .banner {
max-width: 640px; width: 100%; border-radius: 16px;
box-shadow: 0 0 0 1px rgba(219,228,237,.34),
0 0 40px rgba(184,196,208,.06),
0 18px 70px rgba(0,0,0,.62);
}
.hero p.lead { font-size: 1.15rem; color: var(--ink); max-width: 640px; margin: 22px auto 8px; }
.hero p.sub { color: var(--muted); max-width: 640px; margin: 0 auto 26px; }
.hero h1 { margin-top: .8em; }
/* Le trait sous les h2 n'a rien à faire sous un titre de page centré. */
.hero h1::after, .hero h2::after { content: none; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 18px 0 8px; }
.btn {
display: inline-block; text-decoration: none; font-weight: 700;
border-radius: 10px; padding: 13px 22px;
/* Métal poli : dégradé vertical + liseré blanc en haut de la boîte, qui fait
le reflet. Un aplat de la même couleur paraît en plastique. */
background: linear-gradient(180deg, #dbe4ed, #a7b5c3);
color: #10141a; border: 1px solid rgba(219,228,237,.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 22px rgba(0,0,0,.45);
}
.btn:hover { background: linear-gradient(180deg, #eaf1f8, #b9c6d3); color: #10141a; }
.btn.outline {
color: var(--accent); border-color: transparent;
background: linear-gradient(rgba(184,196,208,.05), rgba(184,196,208,.015)) padding-box,
var(--sheen) border-box;
box-shadow: none;
}
.btn.outline:hover {
color: var(--accent-hi);
background: linear-gradient(rgba(184,196,208,.12), rgba(184,196,208,.05)) padding-box,
var(--sheen) border-box;
}
.badge {
display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--accent); border-radius: 999px; padding: 5px 15px;
border: 1px solid transparent;
background: linear-gradient(rgba(184,196,208,.05), rgba(184,196,208,.015)) padding-box,
var(--sheen) border-box;
}
/* ---- Cartes et grilles ------------------------------------------------ */
/* ⚠ LE FOND DOIT RESTER OPAQUE. Les deux couches se superposent sur DEUX boites :
le fond sur la padding-box, le filet sur la border-box, c'est-a-dire sur la
carte ENTIERE, filet compris. Un fond translucide (comme celui d'un bouton
`outline`) laisse donc voir le degrade a travers toute la carte, et le pave
part en plaque d'argent. Sur un bouton ca ne se voit pas : il est petit et son
degrade est faible. Ici, le fond opaque masque tout sauf le pixel du bord -
et c'est ce pixel-la, monte en luminosite, qui donne le filet. */
.card {
border: 1px solid transparent; border-radius: 14px; padding: 22px 24px;
background: linear-gradient(165deg, var(--card2), var(--card)) padding-box,
var(--sheen-card) border-box;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 40px rgba(0,0,0,.45);
}
.grid { display: grid; gap: 18px; margin: 24px 0; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card h3 {
margin-top: 0; color: #f4f8fc; font-size: 1.1rem; letter-spacing: .05em;
}
.card h3::after { content: none; }
.card p:last-child { margin-bottom: 0; }
/* ---- Catalogue : une fiche par application ---------------------------- */
/* `center` et non `flex-start` : une capture de telephone fait trois fois la
hauteur du paragraphe qu'elle illustre. Alignes en haut, les deux laissent un
vide sous le texte, et la fiche parait inachevee. */
.app { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; margin: 34px 0 0; }
.app > .txt { flex: 1 1 300px; min-width: 260px; }
.app > .media { flex: 0 0 auto; }
/* Même anneau que la bannière : les captures sont des objets posés sur la page. */
.app .shot {
width: min(280px, 62vw); border-radius: 18px; display: block;
box-shadow: 0 0 0 1px rgba(219,228,237,.30), 0 16px 60px rgba(0,0,0,.6);
}
.app-head { display: flex; gap: 16px; align-items: center; margin-bottom: 4px; }
.app-head img {
width: 64px; height: 64px; border-radius: 15px; flex: 0 0 auto;
box-shadow: 0 0 0 1px rgba(219,228,237,.34), 0 6px 22px rgba(0,0,0,.55);
}
.app-head h2 { margin: 0; color: #f4f8fc; }
.app-head h2::after { content: none; }
/* L'en-tete d'une fiche devenu LIEN : icone et nom dans un cadre, et tout le cadre
se touche. Meme filet argente que les cartes (cf. `.card`, fond opaque pour la
meme raison). `inline-flex` : le cadre epouse l'icone et le titre au lieu de
barrer toute la colonne. */
.app-card {
display: inline-flex; padding: 12px 22px 12px 12px; margin-bottom: 14px;
text-decoration: none; color: inherit; cursor: pointer;
border: 1px solid transparent; border-radius: 20px;
background: linear-gradient(165deg, var(--card2), var(--card)) padding-box,
var(--sheen-card) border-box;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 40px rgba(0,0,0,.45);
transition: transform .15s ease, box-shadow .15s ease;
}
.app-card:hover, .app-card:focus-visible {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--accent-soft),
0 14px 44px rgba(0,0,0,.55);
}
.app-card:hover h2, .app-card:focus-visible h2,
.app-card:hover h3, .app-card:focus-visible h3 { color: var(--accent-hi); }
/* Le meme cadre, a l'echelle d'une entree de la frise des news : icone de 40 px
au lieu de 64, titre en h3. Toutes les proportions suivent le rapport 40/64. */
/* `flex` + `fit-content` et non `inline-flex` : dans la frise, la date qui precede est
un `span` EN LIGNE, et un cadre en ligne venait se ranger a cote d'elle au lieu de
passer dessous. Le cadre garde la largeur de son contenu. */
.app-card-sm { display: flex; width: fit-content; gap: 11px; padding: 8px 15px 8px 8px;
margin: 8px 0 10px; border-radius: 14px; }
.app-card-sm img { width: 40px; height: 40px; border-radius: 10px; }
.timeline .app-card-sm h3 { margin: 0; color: #f4f8fc; }
/* ---- Hall of Fame ----------------------------------------------------- */
/* `dense` : les tuiles larges laissent des trous derriere elles, et sans ce mot
la grille les garde beants. Avec, les tuiles suivantes remontent les combler -
c'est ce qui fait le patchwork plutot qu'un tableau troue. */
.fame {
display: grid; grid-auto-flow: dense; gap: 16px; margin: 34px 0 0;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.fame-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 20px 12px; text-decoration: none;
border: 1px solid transparent; border-radius: 14px;
background: linear-gradient(165deg, var(--card2), var(--card)) padding-box,
var(--sheen-card) border-box;
box-shadow: 0 8px 30px rgba(0,0,0,.45);
transition: transform .18s ease, box-shadow .18s ease;
}
.fame-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
/* `contain` et pas `cover` : un logo recadre n'est plus le logo. Les vignettes
carrees des chaines YouTube remplissent la boite, les marques transparentes
flottent dessus, et c'est tres bien, un mur de logos n'est pas uniforme. */
.fame-tile img { width: 84px; height: 84px; object-fit: contain; border-radius: 12px; }
.fame-tile span {
color: var(--muted); font-size: .85rem; line-height: 1.3; text-align: center;
}
.fame-tile:hover span { color: var(--accent-hi); }
.fame-tile.wide { grid-column: span 2; }
.fame-tile.wide img { width: 104px; height: 104px; }
/* La mention sous le mur : discrete, mais lisible. */
.fame-note {
margin: 34px auto 0; max-width: 720px; text-align: center;
color: var(--muted); font-size: .72rem; line-height: 1.5; opacity: .8;
}
.fame-note a { color: inherit; }
@media (max-width: 520px) {
/* Deux colonnes au plus : une tuile large en occuperait la totalite et
casserait le patchwork en une simple pile. */
.fame { grid-template-columns: repeat(2, 1fr); }
.fame-tile.wide { grid-column: span 1; }
.fame-tile.wide img { width: 84px; height: 84px; }
}
/* ---- Texte long (page « à propos ») ----------------------------------- */
/* Une colonne bornée : au-delà de ~70 caractères par ligne, l'oeil perd la ligne
suivante en revenant à la marge. La page « à propos » est la seule du site qui
se lise d'un bout à l'autre, c'est la seule qui en a besoin. */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2:first-of-type { margin-top: 1.2em; }
.prose blockquote {
margin: 26px 0; padding: 2px 0 2px 18px;
border-left: 2px solid var(--accent-soft); color: var(--ink); font-size: 1.05rem;
}
.divider {
border: 0; height: 1px; margin: 40px auto; max-width: 420px;
background: linear-gradient(90deg, transparent, rgba(219,228,237,.45), transparent);
}
/* ---- Frise des actualités --------------------------------------------- */
/* Même frise que la roadmap de ddust : une colonne d'événements datés, puce
pleine pour ce qui est acquis, puce éteinte pour ce qui ne l'est pas encore. */
.timeline { list-style: none; margin: 30px 0; padding: 0; position: relative; }
.timeline::before {
content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
background: linear-gradient(rgba(219,228,237,.45), rgba(184,196,208,.10) 60%, transparent);
}
.timeline li { position: relative; padding: 0 0 30px 44px; }
/* Bille d'argent : le dégradé radial décentré donne le point de lumière, le
double anneau (fond puis argent) la détache du filet vertical. */
.timeline li::before {
content: ""; position: absolute; left: 3px; top: 7px; width: 14px; height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #f2f6fa, #9fadbb 62%, #6d7987);
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(219,228,237,.45),
0 0 14px rgba(184,196,208,.35);
}
.timeline li.future::before {
background: #232930;
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(151,161,173,.32), none;
}
.timeline .when {
font-family: "Manrope", system-ui, sans-serif; font-size: .8rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.timeline li.future .when { color: var(--muted); }
.timeline h3 { margin: 2px 0 6px; }
.timeline h3::after { content: none; }
.timeline p { color: var(--muted); margin: 0 0 .6em; max-width: 640px; }
/* Deux indices alignes plutot que noyes dans un paragraphe. La puce prend
l'argent : c'est le seul endroit du site ou une liste apparait. */
.timeline ul.hints { margin: 0 0 .6em; padding-left: 1.15em; max-width: 640px; color: var(--muted); }
/* ⚠ Ces sont IMBRIQUES dans les de la frise : sans remise a zero, ils
heritent de la bille d'argent et du retrait de 44px de leur parent. Chaque
indice se retrouvait alors avec deux puces et une demi-ligne de vide. */
.timeline ul.hints li { position: static; padding: 0; margin: .3em 0; }
.timeline ul.hints li::before { content: none; }
.timeline ul.hints li::marker { color: var(--accent); }
.timeline p:last-child { margin-bottom: 0; }
/* ---- Mentions légales -------------------------------------------------- */
/* `separate` et non `collapse` : une bordure fusionnée ignore le border-radius,
et le cadre argenté du tableau perdrait ses coins. Les séparations internes
sont donc portées par les cellules, une seule par ligne. */
table.data {
width: 100%; margin: 14px 0 24px; font-size: .95rem;
border-collapse: separate; border-spacing: 0;
border: 1px solid transparent; border-radius: 12px; overflow: hidden;
background: linear-gradient(165deg, var(--card2), var(--card)) padding-box,
var(--sheen-soft) border-box;
}
table.data th, table.data td {
padding: 10px 14px; text-align: left; vertical-align: top;
border-bottom: 1px solid var(--line);
}
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }
table.data th {
color: var(--accent); background: rgba(184,196,208,.05); width: 34%;
font-family: "Manrope", system-ui, sans-serif; font-size: .85rem;
letter-spacing: .05em; font-weight: 600;
border-right: 1px solid var(--line);
}
.notice {
border: 1px solid transparent; border-left: 2px solid var(--accent);
background: linear-gradient(rgba(184,196,208,.06), rgba(184,196,208,.02)) padding-box,
var(--sheen-soft) border-box;
padding: 12px 16px; border-radius: 8px; margin: 18px 0;
}
/* ---- Pied de page ------------------------------------------------------ */
main { padding-bottom: 40px; }
#site-footer {
margin-top: 40px; padding: 26px 0 36px; color: var(--muted); font-size: .9rem;
position: relative;
}
#site-footer::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,196,208,.30) 25%,
rgba(184,196,208,.30) 75%, transparent);
}
#site-footer .wrap { display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: center; }
#site-footer a { color: var(--muted); }
#site-footer a:hover { color: var(--accent); }
#site-footer .badge { font-size: .7rem; padding: 3px 12px; }
/* ---- Mobile : bannière pleine largeur, menu sous la bannière ----------- */
@media (max-width: 760px) {
/* Le header empilé est trop haut pour rester collé en haut : on le libère. */
.topbar { position: static; }
.topbar .wrap {
flex-direction: column; align-items: center; gap: 12px; padding: 12px 16px 14px;
}
.brand { width: 100%; }
.brand img {
display: block; width: 100%; max-width: 460px; height: auto;
margin: 0 auto; border-radius: 10px;
}
#site-nav { flex: none; width: 100%; justify-content: center; gap: 2px 20px; }
#site-nav a { padding: 5px 2px; }
#lang-switch { justify-content: center; }
/* L'accueil porte déjà la bannière dans son en-tête : pas de doublon. */
body:has(.topbar) .hero .banner { display: none; }
body:has(.topbar) .hero { padding-top: 6px; }
.app { gap: 22px; }
.app > .media { width: 100%; display: flex; justify-content: center; }
table.data { font-size: .88rem; }
table.data th, table.data td { padding: 8px 10px; }
table.data th { width: 40%; }
.card { padding: 18px 18px; }
}