/* La Table du Conteur — décision n°52. Thèmes par variables CSS : le porte theme-accueil (public), puis theme- de la campagne jouée (medieval / contemporain / futuriste). Aucune dépendance externe : polices système. */ * { box-sizing: border-box; margin: 0; } :root { --or: #c9a227; --parchemin: #f3e7c9; --brun: #2a1f14; --neon: #22d3ee; --violet: #8b5cf6; --nuit: #0b1020; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: Georgia, "Times New Roman", serif; color: var(--encre, #1d1509); background: var(--fond, #f3e7c9); } /* ---------- Thème ACCUEIL : bascule médiéval ⇄ futuriste ---------- */ .theme-accueil { --fond: var(--nuit); --encre: #ece6d6; --carte-fond: rgba(255, 255, 255, .06); --carte-bord: rgba(255, 255, 255, .18); --accent: var(--or); color: var(--encre); background: linear-gradient(120deg, #3b2a12 0%, #1f1a0d 28%, var(--nuit) 55%, #131a3a 78%, #241145 100%); background-size: 300% 300%; animation: deux-mondes 18s ease-in-out infinite alternate; } @keyframes deux-mondes { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ---------- Thèmes de jeu ---------- */ .theme-medieval { --fond: var(--parchemin); --encre: #241a0d; --carte-fond: #fbf3dd; --carte-bord: #d8c391; --accent: #8a6112; --bulle-gm: #efe2bd; --bulle-joueur: #dcecd2; font-family: Georgia, "Times New Roman", serif; } .theme-contemporain { --fond: #eef1f5; --encre: #1d232b; --carte-fond: #ffffff; --carte-bord: #d3dae3; --accent: #2563eb; --bulle-gm: #e8edf5; --bulle-joueur: #dbeafe; font-family: "Segoe UI", system-ui, sans-serif; } .theme-futuriste { --fond: #070b18; --encre: #d7e6f4; --carte-fond: #0e1630; --carte-bord: #24407a; --accent: var(--neon); --bulle-gm: #101d3f; --bulle-joueur: #0b2b33; font-family: "Segoe UI", system-ui, sans-serif; } .theme-futuriste .barre, .theme-futuriste .carte, .theme-futuriste .dialogue { box-shadow: 0 0 18px rgba(34, 211, 238, .12); } /* ---------- Fond d'écran de la page de jeu ---------- Le reçoit avec-fond + --image-fond (servie par /static/fonds/, campagne_.jpg sinon .jpg). Un voile sombre garde le texte lisible quelle que soit l'image ; les cartes/bulles ont déjà des fonds pleins. */ body.avec-fond { background: linear-gradient(rgba(10, 8, 4, .45), rgba(10, 8, 4, .55)), var(--image-fond) center / cover no-repeat fixed; } .avec-fond .jeu-entete h1 { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .85); } .avec-fond .barre { background: color-mix(in srgb, var(--carte-fond) 88%, transparent); } .avec-fond .pied { color: #eee; opacity: .8; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); } .avec-fond .pied a { color: #eee; } /* background-attachment: fixed se comporte mal sur mobile (repeints au défilement, zoom iOS) : on laisse l'image défiler avec la page. */ @media (max-width: 700px) { body.avec-fond { background-attachment: scroll; } } /* ---------- Structure ---------- */ .barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.4rem; background: var(--carte-fond); border-bottom: 1px solid var(--carte-bord); } .logo { font-weight: bold; font-size: 1.15rem; text-decoration: none; color: var(--encre); } nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } nav a { color: var(--encre); text-decoration: none; } nav a:hover { color: var(--accent); } .pseudo { opacity: .75; font-style: italic; } main { flex: 1; width: min(1060px, 94vw); margin: 0 auto; padding: 1.6rem 0; } /* La page de jeu porte deux colonnes (dialogue 3/4 + latérale 1/4) : elle a droit à plus de large que les pages de texte. */ main:has(.jeu) { width: min(1320px, 96vw); } .pied { text-align: center; padding: 1rem; opacity: .55; font-size: .85rem; } .btn { display: inline-block; cursor: pointer; padding: .55rem 1.2rem; border-radius: .6rem; border: 1px solid var(--accent); text-decoration: none; font: inherit; } .btn-plein { background: var(--accent); color: #fff; } .btn-plein:hover { filter: brightness(1.12); } .btn-ghost { background: transparent; color: var(--encre); } .btn-ghost:hover { border-color: var(--encre); } .btn.grand { padding: .8rem 1.7rem; font-size: 1.05rem; } .btn[disabled] { opacity: .55; cursor: wait; } .carte { background: var(--carte-fond); border: 1px solid var(--carte-bord); border-radius: .9rem; padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; } .carte.etroite { max-width: 30rem; margin: 2rem auto; } .carte h1, .carte h2 { margin-bottom: .8rem; } .carte h2 { margin-top: 1.4rem; } form label { display: block; margin: .8rem 0; } form input, form select, form textarea { width: 100%; margin-top: .25rem; padding: .55rem .7rem; border: 1px solid var(--carte-bord); border-radius: .5rem; background: var(--fond); color: var(--encre); font: inherit; } fieldset { border: 1px solid var(--carte-bord); border-radius: .6rem; padding: .8rem; margin: .9rem 0; } label.radio { font-weight: normal; } form button { margin-top: .8rem; } .erreur { background: #7f1d1d; color: #fee2e2; padding: .6rem .9rem; border-radius: .5rem; margin-bottom: .8rem; } .info { background: #14532d; color: #dcfce7; padding: .6rem .9rem; border-radius: .5rem; margin-bottom: .8rem; } .note { opacity: .75; font-size: .9rem; margin-top: .6rem; } .solde { margin: .6rem 0 1rem; } /* ---------- Accueil ---------- */ .heros { text-align: center; padding: 3.2rem 1rem 2.2rem; } .heros h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.15; background: linear-gradient(90deg, var(--or), #f5deA0 45%, var(--neon) 75%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .accroche { max-width: 40rem; margin: 1rem auto 0; font-size: 1.12rem; opacity: .9; } .heros-actions { margin-top: 1.8rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .portails { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 1.4rem 0; } .portail { border-radius: 1rem; padding: 1.6rem; border: 1px solid var(--carte-bord); } .portail h2 { margin-bottom: .6rem; } .portail-medieval { background: linear-gradient(160deg, #4a3410, #241a09); border-color: var(--or); color: #f3e7c9; } .portail-futuriste { background: linear-gradient(160deg, #101b45, #1c0b38); border-color: var(--neon); color: #d7e6f4; box-shadow: 0 0 22px rgba(34, 211, 238, .18); } .points { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.6rem 0 2.4rem; } .point { background: var(--carte-fond); border: 1px solid var(--carte-bord); border-radius: .8rem; padding: 1rem 1.2rem; } /* ---------- Mes parties ---------- */ .grille-campagnes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .campagne { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: .8rem; text-decoration: none; background: var(--carte-fond); color: var(--encre); border: 1px solid var(--carte-bord); } .campagne:hover { border-color: var(--accent); } .campagne span { font-size: .85rem; opacity: .75; } .deux-colonnes { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* ---------- Fenêtre de jeu ---------- */ .jeu-entete { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; } .badge { font-size: .85rem; padding: .2rem .7rem; border-radius: 1rem; border: 1px solid var(--carte-bord); background: var(--carte-fond); } .badge.moi { border-color: var(--accent); color: var(--accent); font-weight: bold; } .bandeau { margin-bottom: .8rem; padding: .6rem 1rem; border-radius: .6rem; border: 1px solid var(--accent); background: var(--carte-fond); color: var(--accent); font-weight: bold; } .dialogue { height: min(58vh, 640px); overflow-y: auto; background: var(--carte-fond); border: 1px solid var(--carte-bord); border-radius: .9rem; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; } .bulle { max-width: 88%; padding: .7rem 1rem; border-radius: .8rem; line-height: 1.45; } .bulle.gm { background: var(--bulle-gm, #eee); align-self: flex-start; border-bottom-left-radius: .2rem; } .bulle.joueur { background: var(--bulle-joueur, #dfd); align-self: flex-end; border-bottom-right-radius: .2rem; } .bulle.systeme { align-self: center; font-size: .9rem; opacity: .8; border: 1px dashed var(--carte-bord); background: transparent; } .bulle.erreur { align-self: center; background: #7f1d1d; color: #fee2e2; } .action { display: flex; gap: .8rem; margin-top: .9rem; align-items: flex-end; } .action textarea { flex: 1; resize: vertical; } /* Colonnes de la page de jeu : le dialogue occupe 3/4 de la largeur, la colonne latérale (alertes + fiche PJ) 1/4. Sur écran étroit, la latérale passe SOUS le dialogue (ordre naturel du document). */ .jeu-colonnes { display: grid; grid-template-columns: 3fr 1fr; gap: 1.2rem; align-items: start; } .carte-jeu { background: var(--carte-fond); border: 1px solid var(--carte-bord); border-radius: .9rem; padding: .9rem 1rem; } .carte-jeu + .carte-jeu { margin-top: 1.2rem; } .carte-jeu h2 { font-size: 1rem; margin-bottom: .5rem; } .carte-jeu p { margin: .2rem 0; font-size: .92rem; } .theme-futuriste .carte-jeu { box-shadow: 0 0 18px rgba(34, 211, 238, .12); } .fiche-nom { font-weight: bold; } .fiche-lieu { opacity: .8; } .fiche-vide { opacity: .75; font-style: italic; } #fiche { max-height: min(52vh, 560px); overflow-y: auto; } .fiche-sec { margin: .55rem 0; font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; } .fiche-sec b { display: block; color: var(--accent); } @media (max-width: 900px) { .jeu-colonnes { grid-template-columns: 1fr; } }