/* Lazy Bard : la marque du site, en un seul endroit.
   PROPOSITION 1, « La lampe jaune » : la nouvelle palette à l'essai (Mike et Martin, 05/11/2026), rien n'est encore choisi.
   Le site d'aujourd'hui, rôle pour rôle : la nuit devient aubergine, la lampe et le bouton principal passent au jaune, l'orange prend la place de la braise, au fond de la salle.
   Le cyan (Mike, 05/11 : « il faudrait ajouter le cyan dans se modèle ») dit où mène un lien : les adresses sur les plaques, le souligné du lien, le survol des plaques, le focus. La chaleur, la lampe, le bouton, la promesse, reste au jaune et à l'orange.
   Pour passer à cette proposition, ce fichier remplace css/marque.css ; les deux pages prennent la ligne theme-color #241631.
   Une couleur, une police, le lettrage du nom, la lumière de la salle : tout se change ici, et seulement ici.
   Les deux pages (la page d'attente et la page de liens) lisent ce fichier avant leur mise en page.
   Polices servies depuis l'hébergement, sous licence OFL 1.1 : ../fonts/OFL-*.txt.
   Les logos des réseaux : un fichier par réseau, ../icons/. Les images : un fichier chacune, ../images/ et la racine. */

/* Les polices. Le lettrage du nom est la police « MedievalSharp » (Mike, 05/11/2026 ; avant, Kaushan Script) : pour en changer, changez ce fichier et --lettering. */
@font-face{font-family:'MedievalSharp';src:url('../fonts/MedievalSharp-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Lora';src:url('../fonts/lora-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans3-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans3-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* La palette à l'essai, six couleurs : #241631 la nuit, #7041a6 le violet, #17dff6 le cyan, #f06b35 l'orange, #ffc857 le jaune, #f3ebdd le crème.
     Chaque couleur dit à quoi elle sert, puis laquelle des six elle prend ; « mêlé » : deux des six, mélangées, rien d'autre.
     Quand une couleur change, sa ligne « -rgb » (les mêmes trois chiffres) change avec elle : elle sert aux lueurs et aux ombres. */
  --ground:#241631;      --ground-rgb:36,22,49;    /* tout grand fond : la nuit */
  --surface:#351f4b;                               /* les plaques des liens, le bouton secondaire : la nuit, mêlé de 22 % de violet */
  --edge:#7041a6;        --edge-rgb:112,65,166;    /* les filets, la baguette du cadre de la photo : le violet */
  --text:#f3ebdd;        --text-rgb:243,235,221;   /* le nom « Lazy Bard », et lui seul ; l'arête éclairée des plaques : le crème */
  --text-soft:#e2dacf;                             /* tout le texte posé sur la nuit : le crème, mêlé de 8 % de nuit */
  --text-muted:#ceb385;                            /* ce qui accompagne : légendes, identifiants, le pied de page : le crème et le jaune à parts égales, mêlés de 20 % de nuit */
  --light:#ffc857;       --light-rgb:255,200,87;   /* la promesse, le survol des plaques, le souligné du lien, la lumière sur le cadre : le jaune */
  --light-deep:#7041a6;                            /* le bord d'une plaque : le violet */
  --light-edge:#f06b35;                            /* le bord du bouton principal : l'orange */
  --action:#ffc857;                                /* le bouton principal, en haut : le jaune */
  --action-deep:#fcb550;                           /* le bouton principal, en bas : le jaune, mêlé de 20 % de orange */
  --on-action:#241631;                             /* le texte posé sur le bouton principal : la nuit */
  --on-surface:#e2dacf;                            /* le texte posé sur une plaque : le même que le texte : la plaque est sombre */
  --on-surface-muted:#17dff6;                           /* l'identifiant posé sur une plaque : le cyan */
  --focus:#17dff6;                                 /* le contour du focus, au clavier : le cyan */
  --link:#17dff6;        --link-rgb:23,223,246;    /* où mène un lien : le souligné du lien, le survol des plaques : le cyan */
  /* La salle : la lampe en haut, la lueur très basse au fond ; chaque fois la couleur, puis sa force au cœur et à mi-chemin. */
  --lamp-rgb:255,200,87; --lamp-core:0.17; --lamp-mid:0.06;     /* la lampe : le jaune */
  --glow-rgb:240,107,53; --glow-core:0.16; --glow-mid:0.06;     /* la lueur du fond : l'orange */
  --shade-rgb:14,9,20;                             /* les ombres portées : la nuit, mêlée de 60 % de noir */
  /* Les polices. */
  --story:'Lora',Georgia,'Times New Roman',serif;
  --ui:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --lettering:'MedievalSharp','Lora',Georgia,serif;
  /* La lueur du nom (le crème au cœur, l'orange autour, le jaune au loin), et l'arête éclairée des plaques. */
  --shadow-lettering:0 0 .013em rgba(243,235,221,0.35),0 0 .141em rgba(240,107,53,0.3),0 0 .449em rgba(255,200,87,0.22);
  --shadow-wood-edge:inset 0 1px 0 rgba(var(--text-rgb),.14);
  --radius-control:6px;
  /* Les logos des réseaux sont blancs dans leur fichier. Ce filtre les peint là où le blanc ne se lirait pas ; « none » les laisse blancs.
     Le filtre ci-dessous les peint dans la nuit #241631 (calculé, puis vérifié dans Chrome le 05/11). */
  --logo-on-surface:none;
  --logo-on-action:brightness(0) saturate(100%) invert(9%) sepia(26%) saturate(1421%) hue-rotate(228deg) brightness(95%) contrast(96%);
  /* Les logos des réseaux, un interrupteur pour les six : « block 28px 12px » les montre, « none 0px 0px » les cache.
     Ils restent cachés tant que les six fichiers ne sont pas dans ../icons/ (youtube.svg, instagram.svg, facebook.svg, tiktok.svg, x.svg, itchio.svg). */
  --logo-display:block; --logo-col:28px; --logo-gap:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;position:relative;overflow-x:hidden;background:var(--ground);color:var(--text-soft);-webkit-font-smoothing:antialiased}

/* La salle : une seule lampe, une lueur très basse au fond, le grain de la pellicule. Chaque page dit où tombe la lampe. */
body::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--lamp-height,900px);z-index:0;pointer-events:none;
  background:
    radial-gradient(var(--lamp-shape,ellipse 60% 45%) at var(--lamp-at,50% 0%),rgba(var(--lamp-rgb),var(--lamp-core)) 0%,rgba(var(--lamp-rgb),var(--lamp-mid)) 50%,rgba(var(--lamp-rgb),0) 100%),
    radial-gradient(var(--glow-shape,ellipse 80% 60%) at var(--glow-at,50% 30%),rgba(var(--glow-rgb),var(--glow-core)) 0%,rgba(var(--glow-rgb),var(--glow-mid)) 45%,rgba(var(--glow-rgb),0) 100%);
  animation:lamp 1.6s ease-out both}
@keyframes lamp{from{opacity:0}to{opacity:1}}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Le nom « Lazy Bard » : le lettrage et sa lueur. Chaque page ne dit que sa taille.
   padding-bottom : sous la ligne de base, la même place qu'avec Kaushan Script (mesurée le 05/11), pour que rien ne bouge sous le nom. */
.name{margin:0;padding-bottom:.10em;font-family:var(--lettering);font-weight:400;font-style:normal;line-height:1;
  color:var(--text);text-shadow:var(--shadow-lettering);word-spacing:-.04em;font-kerning:normal}

/* Le logo de chaque réseau, tel que sa charte le donne ; le nom du réseau reste écrit à côté. */
.logo{display:var(--logo-display);flex:none;width:28px;height:24px;object-fit:contain}

/* Qui lit quelle couleur sur une plaque et sur le bouton principal. Ces règles ne touchent qu'à la couleur.
   « html body » devant : elles passent avant site.css et liens.css, chargés après ce fichier, sans rien changer à leur mise en page. */
html body .btn-wood,html body .follow .label,html body .links a{color:var(--on-surface)}
html body .follow .sub,html body .links .sub{color:var(--on-surface-muted)}
html body .btn-main,html body .links a.main,html body .links a.main .sub{color:var(--on-action)}
html body .btn-wood .logo,html body .follow .logo,html body .links .logo{filter:var(--logo-on-surface)}
html body .btn-main .logo,html body .links a.main .logo{filter:var(--logo-on-action)}

/* Où mène un lien : le souligné du lien « Tous nos liens », et le bord d'une plaque au survol (la plaque de la chaîne garde le sien). */
html body .all-links{text-decoration-color:rgba(var(--link-rgb),.75)}
html body .all-links:hover{text-decoration-color:var(--link)}
html body .btn-wood:hover,html body .follow a:hover,html body .links a:not(.main):hover{border-color:var(--link)}

a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}