/* ===================================================================== ALYNIA — PROTOCOLE CENDRE Feuille propre a la page de lore. Elle s ajoute a main.css et ne redefinit que ce qui la concerne. Deux climats : le SUD, clair, papier de dossier ; le NORD, sombre et froid. La bascule se fait dans la section du Mur, par une classe posee sur . Toutes les couleurs passent par les six jetons ci-dessous, ce sont eux qui s echangent. ===================================================================== */ .lore{ --os: #E6E1D5; /* papier / beton clair */ --encre: #121417; /* noir de tampon */ --plan: #1F3A54; /* bleu de plan cadastral */ --tampon: #9E1B10; /* rouge de tampon */ --hazmat: #E39B14; /* orange securite */ --dosimetre: #B8D94A; /* vert phosphore, RESERVE au dosimetre */ /* Roles, deduits des jetons. C est cette couche qui s inverse. */ --fond: var(--os); --texte: var(--encre); --faible: rgba(18, 20, 23, .58); --trait: rgba(18, 20, 23, .16); --carte: rgba(18, 20, 23, .04); background:var(--fond); color:var(--texte); transition:background .8s var(--ease), color .8s var(--ease); } /* Le nord. Les roles s echangent, les jetons ne bougent pas. */ .lore.nord{ --fond: var(--encre); --texte: #DDD8CE; --faible: rgba(221, 216, 206, .52); --trait: rgba(221, 216, 206, .14); --carte: rgba(221, 216, 206, .045); } /* Le fond photo du site n a rien a faire ici. */ .lore .bg{ display:none; } /* --- Typographie ---------------------------------------------------------- Les polices du site sont conservees. Nexa Black Italic tient le role d affichage, Nexa Book le corps, Nexa Bold en capitales espacees tout ce qui est donnee : date, releve, cote, numero de dossier. */ .lore .donnee, .lore .oeil{ font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faible); } .lore h2{ font-weight:900; font-style:italic; font-size:clamp(2.4rem, 6vw, 4rem); line-height:1; letter-spacing:-.01em; text-transform:uppercase; } .lore h3{ font-weight:900; font-style:italic; font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em; } .lore p{ color:var(--texte); font-size:1.06rem; line-height:1.75; max-width:62ch; } .lore p + p{ margin-top:1.1rem; } .lore .texte{ max-width:62ch; } /* Le titre se ronge a mesure qu on va vers le nord : le contour se desagrege, comme un tampon qui a trop servi. La page vieillit avec le recit. */ .lore .ronge1{ text-shadow:.5px 0 0 var(--faible); } .lore .ronge2{ text-shadow:1px 0 0 var(--faible), -.5px .5px 0 var(--trait); opacity:.96; } .lore .ronge3{ text-shadow:1.5px 0 0 var(--faible), -1px 1px 0 var(--trait), 0 0 2px var(--trait); opacity:.92; } /* --- Rythme des sections --------------------------------------------------- */ .lore section{ padding:0; } .chap{ position:relative; padding:6rem 0; border-top:1px dashed var(--trait); } .chap .wrap{ position:relative; } /* Le numero de chapitre, pose sur la ligne pointillee. */ .chapNum{ position:absolute; top:-.85rem; left:0; padding:0 .8rem; background:var(--fond); font-weight:900; font-style:italic; font-size:.8rem; letter-spacing:.2em; color:var(--faible); } .chapTitre{ margin:.6rem 0 2rem; } /* --- Apparition au defilement --------------------------------------------- Une classe posee par lore.js quand l element entre dans l ecran. Pas de fondu generique repete : le decalage se fait par le masque et le deplacement, et chaque bloc part avec son propre retard. */ .monte{ opacity:0; transform:translateY(1.5rem); transition:opacity .7s var(--ease), transform .7s var(--ease); } .monte.vu{ opacity:1; transform:none; } /* --- Grain ---------------------------------------------------------------- */ .grain{ position:fixed; inset:0; z-index:45; pointer-events:none; opacity:.055; mix-blend-mode:multiply; background-repeat:repeat; background-size:180px 180px; } .lore.nord .grain{ mix-blend-mode:screen; opacity:.07; } /* --- LE DOSIMETRE ---------------------------------------------------------- Le seul element bruyant de la page. Fixe, present du debut a la fin, il dit ou l on se trouve mieux qu un fil d Ariane. */ .dosi{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:60; width:12.5rem; padding:.85rem .9rem .8rem; background:var(--encre); border:1px solid rgba(184, 217, 74, .3); color:var(--dosimetre); box-shadow:0 14px 34px rgba(0,0,0,.45); } .dosiHaut{ display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(184, 217, 74, .55); } .dosiVal{ display:block; margin:.35rem 0 .1rem; font-weight:900; font-style:italic; font-size:1.9rem; line-height:1; /* Chasse fixe : la valeur defile en continu, sans elle le boitier tressaute a chaque changement de largeur. */ font-variant-numeric:tabular-nums; } .dosiUnite{ font-size:.62rem; font-weight:700; letter-spacing:.16em; color:rgba(184, 217, 74, .6); } .dosiZone{ margin-top:.45rem; font-weight:900; font-style:italic; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; } /* La barre a segments : dix traits qui se remplissent. */ .dosiBarre{ display:flex; gap:2px; margin-top:.5rem; } .dosiBarre i{ flex:1; height:5px; background:rgba(184, 217, 74, .16); transition:background .3s var(--ease); } .dosiBarre i.on{ background:var(--dosimetre); } /* Au-dela de 500 : le boitier passe en alarme. Le tremblement est minuscule — un demi-pixel — mais il suffit a rendre l objet nerveux. */ .dosi.alerte{ border-color:var(--tampon); animation:dosiClignote 1.1s steps(2, end) infinite; } .dosi.alerte .dosiVal{ animation:dosiTremble .12s linear infinite; } .dosi.alerte .dosiZone{ color:#FF7C6B; } @keyframes dosiClignote{ 0%, 100%{ box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(158,27,16,.5); } 50%{ box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 3px rgba(158,27,16,.5); } } @keyframes dosiTremble{ 0%{ transform:translate(0,0); } 25%{ transform:translate(.5px,-.5px); } 50%{ transform:translate(-.5px,.5px); } 75%{ transform:translate(.5px,.5px); } 100%{ transform:translate(0,0); } } @media (max-width:720px){ .dosi{ right:.6rem; left:.6rem; bottom:auto; top:.6rem; width:auto; display:flex; align-items:center; gap:.8rem; padding:.5rem .7rem; } .dosiHaut, .dosiBarre{ display:none; } .dosiVal{ margin:0; font-size:1.1rem; } .dosiZone{ margin:0; } } /* --- LE SAS D ENTREE ------------------------------------------------------- Une seule fois par session : reveu a chaque page, il deviendrait un peage. */ .sas{ position:fixed; inset:0; z-index:200; background:var(--encre); } .sas[hidden]{ display:none; } .sasTexte{ position:absolute; inset:0; display:grid; place-content:center; padding:2rem; color:var(--dosimetre); font-weight:700; font-size:.78rem; line-height:2; letter-spacing:.12em; text-transform:uppercase; white-space:pre; z-index:2; } /* Les deux battants qui s ecartent. */ .sasBattant{ position:absolute; left:0; right:0; height:50%; background:var(--encre); transition:transform 1s var(--ease); } .sasBattant.haut{ top:0; border-bottom:1px solid rgba(184,217,74,.25); } .sasBattant.bas{ bottom:0; border-top:1px solid rgba(184,217,74,.25); } .sas.ouvert .sasTexte{ opacity:0; transition:opacity .25s; } .sas.ouvert .sasBattant.haut{ transform:translateY(-100%); } .sas.ouvert .sasBattant.bas{ transform:translateY(100%); } .sasPasser{ position:absolute; right:1.4rem; bottom:1.2rem; z-index:3; padding:.5rem .9rem; background:none; border:1px solid rgba(184,217,74,.3); color:rgba(184,217,74,.7); font-family:inherit; font-weight:700; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; } /* --- LE HERO --------------------------------------------------------------- */ .loreHero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; padding:0 0 4rem; } .loreHeroImg{ position:absolute; inset:0; background:var(--plan) url('../img/bg-lore.webp') center / cover no-repeat; /* Desatures et vires vers le bleu de plan : la photo doit avoir l air d une piece de dossier, pas d un fond d ecran. */ filter:saturate(.3) contrast(1.05); transform:scale(1.12); will-change:transform; } .loreHeroImg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,20,23,.5), rgba(18,20,23,.86)); } .loreHero .wrap{ position:relative; z-index:2; color:#E6E1D5; } .loreTitre{ font-weight:900; font-style:italic; font-size:clamp(3rem, 10vw, 7rem); line-height:.92; text-transform:uppercase; letter-spacing:-.02em; } /* Chaque ligne arrive derriere un masque, pas en fondu. */ .masque{ display:block; overflow:hidden; } .masque > span{ display:block; transform:translateY(105%); transition:transform .9s var(--ease); } .loreHero.pret .masque > span{ transform:none; } .loreCitation{ margin-top:1.6rem; max-width:46ch; font-size:1.05rem; line-height:1.7; color:rgba(230,225,213,.78); font-style:italic; } .loreDescendre{ margin-top:2.6rem; display:flex; align-items:center; gap:.7rem; color:rgba(230,225,213,.6); } /* --- Le tampon ------------------------------------------------------------ Il tombe : il arrive gros et flou, se pose net, avec une secousse. Un tampon ne se fond pas en douceur. */ .tampon{ display:inline-block; padding:.5rem .9rem; border:2px solid var(--tampon); color:var(--tampon); font-weight:900; font-style:italic; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; transform:rotate(-6deg); } .tamponPose{ opacity:0; transform:rotate(-6deg) scale(1.6); transition:opacity .12s linear, transform .12s var(--ease); } .tamponPose.vu{ opacity:1; transform:rotate(-6deg) scale(1); animation:coup .25s var(--ease) .12s; } @keyframes coup{ 0%{ transform:rotate(-6deg) scale(1); } 30%{ transform:rotate(-7.5deg) scale(1.03) translate(1px,-1px); } 60%{ transform:rotate(-5deg) scale(.99) translate(-1px,1px); } 100%{ transform:rotate(-6deg) scale(1); } } /* --- Le caviardage --------------------------------------------------------- */ .cav{ position:relative; display:inline; background:var(--texte); color:transparent; border-radius:1px; transition:background .25s var(--ease), color .25s var(--ease); user-select:none; } /* Au survol on devine, on ne lit pas : le contenu reste flou, jamais net. */ .cav:hover{ background:rgba(18,20,23,.72); color:rgba(230,225,213,.28); filter:blur(2.5px); } .lore.nord .cav:hover{ background:rgba(221,216,206,.7); color:rgba(18,20,23,.3); } /* --- LE DOCUMENT CLASSIFIE -------------------------------------------------- */ .docs{ padding:5rem 0; background:var(--plan); } .doc{ position:relative; max-width:52rem; margin-inline:auto; padding:2.4rem 2.2rem 2rem; background:#E9E4D8; color:#121417; border:1px solid rgba(18,20,23,.2); box-shadow:14px 14px 0 rgba(0,0,0,.22); /* La feuille arrive en perspective, comme posee sur la table. */ transform:perspective(1200px) rotateX(12deg) translateY(2rem); opacity:0; transition:transform .9s var(--ease), opacity .7s var(--ease); } .doc.vu{ transform:perspective(1200px) rotateX(0) translateY(0) rotate(-.4deg); opacity:1; } /* La pliure : un trait clair et une ombre, en travers de la feuille. */ .doc::before{ content:""; position:absolute; left:0; right:0; top:42%; height:2px; background:linear-gradient(180deg, rgba(0,0,0,.09), rgba(255,255,255,.5)); pointer-events:none; } .docTete{ padding-bottom:1rem; margin-bottom:1.4rem; border-bottom:1px solid rgba(18,20,23,.25); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .docTete p{ font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(18,20,23,.62); max-width:none; line-height:1.9; } .docSceau{ width:3.2rem; height:3.2rem; border:2px solid var(--tampon); border-radius:50%; display:grid; place-items:center; color:var(--tampon); font-weight:900; font-style:italic; font-size:.72rem; letter-spacing:.06em; } .doc p{ color:#121417; font-size:.98rem; max-width:none; } .doc .cav{ background:#121417; } .doc .cav:hover{ background:rgba(18,20,23,.72); color:rgba(233,228,216,.3); } .docTampons{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.8rem; padding-top:1.2rem; border-top:1px dashed rgba(18,20,23,.25); } .docTampons .tampon:nth-child(2){ transform:rotate(4deg); } /* Usure : le troisieme dossier est le plus abime. */ .doc.usure3{ box-shadow:14px 14px 0 rgba(0,0,0,.3); } .doc.usure3::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(closest-side at 100% 40%, rgba(60,30,10,.55), transparent 60%), radial-gradient(closest-side at 88% 92%, rgba(60,30,10,.4), transparent 55%); mix-blend-mode:multiply; } /* --- CHAPITRE II : 04:17 ---------------------------------------------------- */ .flashSec{ position:relative; height:300vh; } .flashColle{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--encre); display:grid; place-items:center; } .flashVue{ position:absolute; inset:0; background:var(--encre) url('../img/bg-lore.webp') center / cover no-repeat; filter:brightness(.42) saturate(.4); } .flashVue.apres{ opacity:0; filter:brightness(.6) saturate(1.5) sepia(.5) hue-rotate(-18deg); } .flashHeure{ position:relative; z-index:3; font-weight:900; font-style:italic; font-size:clamp(4rem, 16vw, 12rem); letter-spacing:.02em; color:#E6E1D5; font-variant-numeric:tabular-nums; } .flashBlanc{ position:absolute; inset:0; z-index:4; background:#fff; opacity:0; pointer-events:none; } .flashTitre{ position:absolute; z-index:5; bottom:14vh; left:0; right:0; opacity:0; transition:opacity .5s var(--ease); } .flashTitre.vu{ opacity:1; } /* L avertissement, avant la section. On previent, on ne surprend pas. */ .avert{ margin:0 auto; max-width:52rem; padding:1.1rem 1.3rem; border:1px solid var(--tampon); background:rgba(158,27,16,.07); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .avert p{ font-size:.92rem; max-width:48ch; } .avert button{ padding:.55rem .9rem; background:none; border:1px solid var(--tampon); color:var(--tampon); font-family:inherit; font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; } /* --- CHAPITRE III : LE VENT ------------------------------------------------- */ .ventGrille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); margin-top:2.4rem; } .vent{ padding:1.4rem 1.2rem; background:var(--fond); } .vent .jour{ font-weight:900; font-style:italic; font-size:1.5rem; color:var(--plan); } .lore.nord .vent .jour{ color:var(--hazmat); } .vent .lieu{ margin-top:.15rem; font-weight:700; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faible); } .vent p{ margin-top:.7rem; font-size:.94rem; } /* La tache de contamination : un disque qui s etale derriere la grille. */ .ventCarte{ position:relative; height:2px; margin-top:2.6rem; background:var(--trait); } .ventCarte i{ position:absolute; left:0; top:-1px; height:4px; width:var(--p, 0%); background:var(--tampon); transition:width .1s linear; } /* --- Le tableau des secteurs ------------------------------------------------ */ .secteurs{ width:100%; border-collapse:collapse; margin-top:1.4rem; } .secteurs th, .secteurs td{ padding:.6rem .7rem; border-bottom:1px solid rgba(18,20,23,.16); text-align:left; font-size:.84rem; } .secteurs th{ font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(18,20,23,.6); } .secteurs td:first-child{ font-weight:700; } .secteurs .coeur{ background:rgba(158,27,16,.1); } .secteurs .coeur td{ color:var(--tampon); font-weight:700; } /* --- CHAPITRE IV : L EXODE -------------------------------------------------- */ .exode{ position:relative; } .exodeColle{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; } .exodePiste{ display:flex; gap:1.4rem; padding-inline:8vw; will-change:transform; } .panneau{ flex:none; width:min(24rem, 78vw); padding:1.8rem; border:1px solid var(--trait); background:var(--carte); } .panneau .jour{ font-weight:900; font-style:italic; font-size:1.1rem; letter-spacing:.1em; color:var(--plan); } .lore.nord .panneau .jour{ color:var(--hazmat); } .panneau .compteur{ display:block; margin:.8rem 0 .2rem; font-weight:900; font-style:italic; font-size:2.6rem; line-height:1; font-variant-numeric:tabular-nums; } .panneau p{ margin-top:.8rem; font-size:.94rem; } /* --- CHAPITRE V : LE MUR ---------------------------------------------------- */ .mur{ position:relative; height:400vh; } .murColle{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; } .murPlan{ display:flex; justify-content:center; width:min(34rem, 62vw); will-change:transform; /* Avancee du devoilement, 0 a 1. Pilotee au scroll par lore.js. Par defaut a 1 : sans JS, ou en mouvement reduit, la carte doit etre visible entiere plutot qu'invisible. */ --rev:1; } /* La carte se decouvre d ouest en est. Le bord n est pas net : une frange de 7 % fait lire un balayage, la ou une coupe franche ferait volet. */ /* Le cadre epouse exactement l image. Sans lui, le trait se positionne sur la largeur du BLOC : des que l image est plus etroite que son bloc — ce qui arrive des que la hauteur la contraint — le trait se decale du bord du devoilement et les deux ne coincident plus. */ .murCadre{ position:relative; display:inline-block; line-height:0; } /* La carte se decouvre d ouest en est, avec une frange de 7 % au bord : une coupe franche ferait volet, la frange fait balayage. La course va de -7 % a 107 %, pas de 0 a 100 %. Il faut que la frange soit entierement SORTIE de l image aux deux bouts : calee sur 100 %, son degrade restait visible sur le bord ouest a --rev = 0, et un bout de carte s affichait avant meme d avoir scrolle. */ .murCarte{ display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(var(--rev) * 107% - 7%), transparent calc(var(--rev) * 107%)); mask-image:linear-gradient(90deg, #000 0, #000 calc(var(--rev) * 107% - 7%), transparent calc(var(--rev) * 107%)); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; filter:drop-shadow(0 0 34px rgba(0,0,0,.55)); transition:filter .6s ease; } /* Le trait qui avance avec le devoilement : c est la ligne qu on trace. Il s efface aux deux extremites, sinon il reste plante sur un bord. */ .murScan{ position:absolute; top:2%; bottom:2%; /* Meme course que le bord du masque, recentree sur la frange. */ left:calc(var(--rev) * 107% - 3.5%); width:2px; margin-left:-1px; pointer-events:none; background:linear-gradient(180deg, transparent 0, rgba(255,41,41,.9) 16%, #ff6b6b 50%, rgba(255,41,41,.9) 84%, transparent 100%); box-shadow:0 0 22px 4px rgba(255,41,41,.45); opacity:0; transition:opacity .35s ease; } /* Visible seulement pendant le trace. */ .murPlan.trace .murScan{ opacity:1; } /* De l autre cote du mur, la carte passe au froid : le sud est derriere. */ .lore.nord .murCarte{ filter:drop-shadow(0 0 34px rgba(0,0,0,.55)) saturate(.35) brightness(.82) hue-rotate(-12deg); } .murCotes{ position:absolute; inset:auto 0 12vh 0; display:flex; justify-content:center; gap:2.4rem; flex-wrap:wrap; } .cote{ text-align:center; opacity:0; transform:translateY(.6rem); transition:opacity .4s var(--ease), transform .4s var(--ease); } .cote.vu{ opacity:1; transform:none; } .cote b{ display:block; font-weight:900; font-style:italic; font-size:1.7rem; color:var(--plan); } .lore.nord .cote b{ color:var(--hazmat); } /* Le beton qui obstrue pendant la traversee. */ .murBeton{ position:absolute; inset:0; background:#2A2C2E; opacity:0; pointer-events:none; } .murApres{ position:absolute; inset:0; display:grid; place-items:center; background: radial-gradient(120% 80% at 50% 100%, rgba(227,155,20,.07), transparent 60%), linear-gradient(180deg, #101214, #16181B); opacity:0; pointer-events:none; } .murApres p{ text-align:center; color:rgba(221,216,206,.6); } /* --- CHAPITRE VI : CEUX QUI PASSENT ---------------------------------------- */ .equip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); margin-top:2rem; } .eq{ padding:1.4rem 1.2rem; background:var(--fond); transition:background .2s var(--ease), box-shadow .2s var(--ease); } .eq:hover{ background:var(--carte); box-shadow:inset 0 0 0 1px var(--hazmat); } .eq h4{ font-weight:900; font-style:italic; font-size:1rem; } .eq p{ margin-top:.4rem; font-size:.9rem; color:var(--faible); } .eq .val{ display:block; margin-top:.8rem; font-weight:700; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--hazmat); } /* Les fiches d objet, en rangee tirable a la souris. */ .fiches{ display:flex; gap:1rem; margin-top:2rem; overflow-x:auto; padding-bottom:1rem; cursor:grab; scrollbar-width:none; } .fiches::-webkit-scrollbar{ display:none; } .fiches.tire{ cursor:grabbing; scroll-behavior:auto; } .fiche{ flex:none; width:min(19rem, 76vw); padding:1.3rem 1.2rem; border:1px solid var(--trait); background:var(--carte); } .fiche.rare{ border-color:var(--hazmat); box-shadow:inset 0 0 0 1px rgba(227,155,20,.25); } .fiche h4{ font-weight:900; font-style:italic; font-size:1rem; line-height:1.25; } .fiche dl{ margin:1rem 0 .9rem; display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; font-size:.74rem; } .fiche dt{ font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faible); } .fiche dd{ text-align:right; font-weight:700; } .fiche .prix{ color:var(--hazmat); font-weight:900; font-style:italic; font-size:1.2rem; } .fiche p{ margin-top:.6rem; font-size:.86rem; color:var(--faible); } .fiche .note{ display:inline-block; margin-top:.8rem; padding:.25rem .5rem; border:1px solid var(--hazmat); color:var(--hazmat); font-weight:700; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; } /* Les carnets de plongee : du papier jauni, pose de travers. */ .carnets{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.6rem; margin-top:2rem; } .carnet{ padding:1.4rem 1.3rem; background:#D9CFB4; color:#1B1A16; border:1px solid rgba(27,26,22,.25); box-shadow:6px 6px 0 rgba(0,0,0,.28); } .carnet:nth-child(odd){ transform:rotate(-1deg); } .carnet:nth-child(even){ transform:rotate(1deg); } .carnet .oeil{ color:rgba(27,26,22,.6); } .carnet p{ color:#1B1A16; margin-top:.6rem; font-size:.94rem; } .carnet .cav{ background:#1B1A16; } /* --- CHAPITRE VII ----------------------------------------------------------- */ .etats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.2rem; margin-top:2rem; } .etat{ padding:1.4rem 1.2rem; border:1px solid var(--trait); background:var(--carte); } .etat h4{ font-weight:900; font-style:italic; font-size:1.05rem; } .jauge{ height:6px; margin:.9rem 0 .8rem; background:var(--trait); } .jauge i{ display:block; height:100%; width:0; background:var(--hazmat); transition:width 1.1s var(--ease); } .etat p{ font-size:.92rem; } .finale{ margin:5rem auto 0; text-align:center; font-weight:900; font-style:italic; font-size:clamp(1.6rem, 5vw, 2.6rem); text-transform:uppercase; } .loreFin{ margin-top:4rem; padding:3rem 2rem; border:1px solid var(--trait); background:var(--carte); text-align:center; } .loreFin img{ height:3.4rem; width:auto; margin-inline:auto; } .loreFin p{ margin:1rem auto 2rem; max-width:46ch; } .loreActions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; } .loreActions .btn{ background:var(--hazmat); border-color:var(--hazmat); color:#121417; border-radius:2px; } .loreActions .btn:hover{ background:#F0AB2C; border-color:#F0AB2C; color:#121417; } .loreActions .btn.creux{ background:none; color:var(--texte); border-color:var(--trait); } .loreActions .btn.creux:hover{ background:var(--carte); color:var(--texte); } /* --- Reglage systeme respecte ----------------------------------------------- Sans animation, la page doit rester lisible de haut en bas et complete : les sections collees se deroulent, les blocs sont visibles d emblee. */ @media (prefers-reduced-motion: reduce){ .monte{ opacity:1; transform:none; } .masque > span{ transform:none; } .tamponPose{ opacity:1; transform:rotate(-6deg); } .doc{ opacity:1; transform:rotate(-.4deg); } .dosi.alerte{ animation:none; } .dosi.alerte .dosiVal{ animation:none; } .grain{ display:none; } .flashSec, .mur{ height:auto; } .flashColle, .murColle, .exodeColle{ position:static; height:auto; min-height:60vh; } .flashBlanc{ display:none; } .cote{ opacity:1; transform:none; } } /* Le caviardage pas encore pose : le texte reste visible, le rectangle arrive apres. C est ce qui donne l impression qu on censure le document sous les yeux du lecteur. */ .cav.nu{ background:transparent; color:inherit; } /* --- Corrections de premiere passe ---------------------------------------- */ /* La zone du dosimetre heritait de la couleur de texte de la page : encre sombre sur un boitier noir, donc invisible. */ .lore .dosiZone{ color:var(--dosimetre); max-width:none; } .lore .dosi p{ max-width:none; } /* Le tampon et le titre se chevauchaient : le tampon est rotate, sa boite ne rend pas compte de sa hauteur reelle. */ .tamponPose{ margin-bottom:1.6rem; } /* Le bandeau doit tenir dans un ecran : titre, citation et fleche compris. */ .loreTitre{ font-size:clamp(2.6rem, 7.5vw, 5.4rem); } .loreHero{ padding-bottom:3rem; } .loreCitation{ margin-top:1.2rem; font-size:1rem; } .loreDescendre{ margin-top:1.6rem; } /* Le tampon est incline : sa boite ne rend pas compte de la hauteur reelle de ses coins, qui plongeaient dans le titre. Moins d angle, plus d air. */ .tamponPose{ margin-bottom:2.6rem; } .tamponPose .tampon, .tamponPose.vu{ transform:rotate(-3deg); } .tamponPose.vu .tampon{ transform:none; } /* L en-tete occupe sa place dans le flux : sans le deduire, le bas du bandeau tombait sous la ligne de flottaison. */ .loreHero{ min-height:calc(100vh - 7rem); } /* ===================================================================== CORRECTIONS ===================================================================== */ /* --- Le haut des lettres etait rogne --------------------------------------- Le masque du titre coupe ce qui depasse, et avec une hauteur de ligne inferieure a 1 les hampes sortent de la boite. On lui rend l espace en rembourrage, repris en marge negative : la mise en page ne bouge pas, mais le masque a de quoi laisser passer les lettres. */ .masque{ padding:.16em 0 .1em; margin:-.16em 0 -.1em; } .masque > span{ transform:translateY(140%); } .loreHero.pret .masque > span{ transform:none; } /* Meme cause, meme correctif pour les titres de chapitre. */ .lore h1, .lore h2{ padding-top:.08em; } /* --- Les chapitres respirent ------------------------------------------------ La pastille de numero est partie : l oeil reprend sa place normale, et on double l espace entre la fin d un chapitre et le debut du suivant. */ .chap{ padding:7rem 0 6rem; } .chap .oeil{ display:block; margin-bottom:.4rem; } .chapTitre{ margin:0 0 2.4rem; } /* --- Les dossiers ne mordent plus sur ce qui suit -------------------------- La feuille est inclinee et porte une ombre portee franche : sa boite ne rend compte ni de l une ni de l autre. Il lui faut de la marge. */ .docs{ padding:6rem 0 7rem; } /* --- Des tampons qui ressemblent a des tampons ----------------------------- Un rectangle propre a la bonne couleur ne fait pas un tampon. Ce qui le fait : l encre qui bave, le trait irregulier, l inclinaison franche, et surtout la superposition — un tampon se pose SUR le texte, pas a cote. */ .tampon{ padding:.55rem 1.1rem; border:3px double var(--tampon); border-radius:3px; font-size:.8rem; letter-spacing:.2em; /* L encre s imprime dans le papier au lieu de se poser dessus. */ mix-blend-mode:multiply; opacity:.82; text-shadow:0 0 1px rgba(158,27,16,.5); box-shadow:inset 0 0 0 1px rgba(158,27,16,.25); } .docTampons{ gap:2.4rem; padding-top:1.6rem; /* Les tampons debordent du cadre du texte, comme poses a la main apres coup, un peu de travers. */ margin-left:-.6rem; } .docTampons .tampon:nth-child(1){ transform:rotate(-7deg); } .docTampons .tampon:nth-child(2){ transform:rotate(3.5deg) translateY(-.3rem); } .doc.usure3 .docTampons .tampon:nth-child(1){ transform:rotate(-11deg); } /* --- Le chapitre II : tout doit se lire sur le noir ------------------------ La regle generale de la page peint le texte en encre sombre. Sur une vue nocturne, il disparaissait purement et simplement. */ .lore .flashHeure{ color:#F2EEE6; max-width:none; } .lore .flashTitre h2{ color:#F2EEE6; } .lore .flashTitre .oeil{ color:rgba(242,238,230,.6); } .lore .murApres h2{ color:#F2EEE6; } .lore .murApres .oeil{ color:rgba(242,238,230,.55); } .lore .murApres p{ max-width:none; } /* --- LE MUR, remis en ordre ------------------------------------------------- Avant : un plan au milieu, des cotes en bas, et rien pour dire ce qu on regarde. Maintenant l en-tete annonce, le plan occupe le centre, les cotes se lisent dessous comme sur un vrai plan. */ .murColle{ display:grid; grid-template-rows:auto 1fr auto; align-content:center; gap:2rem; padding:6rem 0 4rem; } .murTete{ text-align:center; transition:opacity .4s var(--ease); } .murTete .oeil{ display:block; margin-bottom:.4rem; } .murSous{ margin:.8rem auto 0; max-width:46ch; color:var(--faible); font-size:.95rem; } .murPlan{ align-self:center; justify-self:center; max-height:42vh; } /* max-height sur le bloc ne borne pas l image qu il contient : on la contraint elle-meme. Les deux bornes sont necessaires — avec la seule hauteur et width:auto, l image reprend sa largeur naturelle (900 px) et deborde du bloc. */ .murPlan .murCarte{ max-height:42vh; max-width:100%; width:auto; height:auto; margin:0 auto; } /* Les cotes reprennent leur place dans la grille, en pied de plan. */ .murCotes{ position:static; gap:3.4rem; } .cote b{ font-size:1.5rem; } .murApres{ z-index:3; } .murApres .wrap{ text-align:center; } /* --- La citation du bandeau ------------------------------------------------ Meme piege que le chapitre II : la regle generale de la page repeignait ce texte en encre sombre, sur une photo nocturne. */ .lore .loreCitation{ color:rgba(242,238,230,.82); } .lore .loreDescendre{ color:rgba(242,238,230,.6); } /* --- Garde-fous, en DERNIER -------------------------------------------------- Ce bloc doit rester le dernier du fichier : une regle ecrite apres lui le neutralise, et c est exactement ce qui venait d arriver au titre du bandeau — invisible pour qui a demande moins d animations. */ @media (prefers-reduced-motion: reduce){ .monte{ opacity:1; transform:none; } .masque > span{ transform:none; } .tamponPose, .tamponPose.vu{ opacity:1; transform:rotate(-3deg); } .doc{ opacity:1; transform:rotate(-.4deg); } .dosi.alerte{ animation:none; } .dosi.alerte .dosiVal{ animation:none; } .grain{ display:none; } .flashSec, .mur{ height:auto; } .flashColle, .murColle, .exodeColle{ position:static; height:auto; min-height:70vh; } .flashBlanc{ display:none; } .cote{ opacity:1; transform:none; } .murApres{ position:static; opacity:1; } .murPlan{ opacity:1; } .exodePiste{ flex-wrap:wrap; justify-content:center; transform:none; } } /* ===================================================================== RETOUR AU FOND DU SITE Le sud clair est abandonne : la page reste sur le noir de la charte, comme le reste du site. Les six jetons ne changent pas — ce sont toujours leurs ROLES qui portent le climat, et c est ce qui rend cette volte-face possible en quelques lignes. Les documents, eux, gardent leur papier creme : ce sont des feuilles posees sur la page, pas la page elle-meme. ===================================================================== */ .lore{ --fond: #0C0C0C; --texte: rgba(255,255,255,.94); --faible: rgba(255,255,255,.5); --trait: rgba(255,255,255,.1); --carte: rgba(255,255,255,.035); background:transparent; /* le fond du site reprend la main */ } /* Le nord : un cran plus froid et plus dense, pour que la traversee se sente encore sans repasser par le grand ecart clair/sombre. */ .lore.nord{ --fond: #08090B; --texte: #DDD8CE; --faible: rgba(221,216,206,.46); --trait: rgba(221,216,206,.1); --carte: rgba(221,216,206,.03); } /* Le fond du site est de retour. */ .lore .bg{ display:block; } /* Le grain s ajoute a la lumiere : en multiply sur du noir, il ne ferait rien du tout. */ .grain, .lore.nord .grain{ mix-blend-mode:screen; opacity:.05; } /* Le bleu de plan devient un bandeau, pas une page : il tranche moins sur du noir que sur du creme. */ .docs{ background:rgba(31,58,84,.4); border-block:1px solid var(--trait); } .cote b{ color:#7FB2D9; } .vent .jour, .panneau .jour{ color:#7FB2D9; } /* Le mur, de l autre cote : plus besoin d un aplat, le fond est deja noir. */ .murApres{ background:radial-gradient(120% 80% at 50% 100%, rgba(227,155,20,.09), transparent 62%); } /* Le caviardage doit rester un bloc PLEIN, meme sur fond sombre : c est un rectangle d encre, pas une zone effacee. */ .lore .cav{ background:#000; } .lore .cav:hover{ background:rgba(0,0,0,.72); color:rgba(255,255,255,.26); } .lore .doc .cav{ background:#121417; } .lore .carnet .cav{ background:#1B1A16; } /* ===================================================================== RETOUCHES ===================================================================== */ /* --- Le bandeau n a plus son propre fond ----------------------------------- Il posait sa photo et son voile par-dessus le fond du site : d ou cette bande noire en haut de page, qui ne ressemblait a rien d autre. Le fond du site suffit, il porte deja son voile. */ .loreHeroImg{ display:none; } .loreHero{ min-height:calc(100vh - 12rem); padding-top:2rem; } /* --- L avertissement, plus discret ----------------------------------------- Il doit prevenir, pas occuper le tiers de l ecran. */ .avert{ max-width:44rem; padding:.7rem .9rem; gap:.8rem; } .avert p{ font-size:.82rem; line-height:1.5; max-width:40ch; } .avert button{ padding:.4rem .7rem; font-size:.6rem; letter-spacing:.14em; } /* La section qui le porte n a pas besoin d un chapitre entier d espace. */ .avert{ margin-block:-3rem; } /* --- L exode ----------------------------------------------------------------- Le conteneur n avait pas de hauteur : le sticky a l interieur n avait donc rien a quoi s accrocher, la frise ne glissait jamais, et la section occupait un ecran entier de vide. */ .exode{ height:280vh; } .exodeColle{ height:100vh; align-items:center; } /* Le chapitre qui l annonce se colle a lui. */ .exode{ margin-top:-4rem; } /* --- Le mur : l oeil vraiment au centre --------------------------------------- `text-align:center` centre le texte DANS sa boite. L oeil ayant une largeur maximale plus etroite que le conteneur, sa boite restait callee a gauche : le texte paraissait decale par rapport au titre. */ .murTete p, .murTete .oeil{ max-width:none; margin-inline:auto; } .murTete .murSous{ max-width:46ch; } /* Le premier chapitre se decollait mal du bandeau : il lui faut sa propre respiration, la marge du bandeau ne suffit pas. */ .loreHero + .chap{ padding-top:9rem; } .loreHero{ padding-bottom:4rem; } /* La marge negative posee pour resserrer l avertissement le faisait remonter SOUS la feuille du dossier, qui deborde de sa section par son inclinaison et son ombre. On resserre la section elle-meme, sans rien tirer vers le haut : deux elements ne peuvent plus se croiser. */ .avert{ margin-block:0; } .docs + .chap{ padding-block:3.2rem 4rem; } /* --- Le jour blanc : avant et apres ---------------------------------------- Deux vues du meme lieu, superposees. La premiere est la base calme, la seconde monte en opacite pendant le flash : c est ce fondu, pilote par le defilement, qui fait le basculement. La vue d avant n a plus besoin d etre assombrie au filtre : elle est deja nocturne. On garde juste ce qu il faut pour que le compte a rebours reste lisible par-dessus. */ .flashVue{ background-image:url('../img/lore-avant.webp'); filter:brightness(.72) saturate(.8); } /* Apres : le meme lieu, brule. */ .flashVue.apres{ background-image:url('../img/bg-lore.webp'); filter:brightness(.6) saturate(1.6) sepia(.45) hue-rotate(-18deg); } /* --- SECTION NON DECLASSIFIEE --------------------------------------------- Remplace l equipement et les fiches d objet, retires de la version publique. Le contenu n est pas simplement floute : il a ete SORTI du HTML. Un flou CSS ne cache rien, le texte reste lisible dans le code source de la page et dans n importe quel lecteur. Ici il n y a litteralement rien a lire, les barres sont vides. L original est dans _sauvegardes/lore-sections-masquees.html. */ .classe{ position:relative; margin-top:2rem; padding:2.6rem 1.6rem 2.2rem; border:1px solid var(--trait); background:var(--carte); overflow:hidden; text-align:center; } .classe[data-h="haut"]{ padding-block:3.4rem 3rem; } /* Les barres : une suggestion de texte, jamais du texte. Le flou et la faible opacite disent "il y a quelque chose ici" sans rien livrer. */ .classeBarres{ position:absolute; inset:1.4rem 1.6rem; display:flex; flex-direction:column; justify-content:center; gap:.7rem; filter:blur(3px); opacity:.16; pointer-events:none; user-select:none; } .classeBarres i{ display:block; height:.62rem; width:var(--l, 70%); background:var(--texte); } /* Une barre sur deux part de la droite : aligner toutes les barres a gauche donnait un histogramme, pas un paragraphe caviarde. */ .classeBarres i:nth-child(even){ margin-left:auto; } .classeTampon{ position:relative; display:inline-block; padding:.5rem 1.4rem; border:2px solid var(--tampon); color:var(--tampon); font-weight:900; font-style:italic; font-size:clamp(.9rem, 2.4vw, 1.15rem); letter-spacing:.14em; text-transform:uppercase; transform:rotate(-2.5deg); } .classeNote{ position:relative; margin-top:1.2rem; font-size:.9rem; color:var(--faible); }