/* ============================================================================ À L'AFFICHE — le palier 00 du couloir, et son panneau en grand. CE QUI A CHANGÉ LE 7 SEPTEMBRE 2026. Les annonces étaient une carte de verre posée dans le coin haut-gauche, en surimpression. Elles sont devenues une PORTE : le premier palier du vestibule, bâti dans index.html, habillé ici. Ce fichier ne pose donc presque plus de décor propre — le palier hérite de tout ce que `vestibule-lk.css` donne déjà à `.vest-station` (le grand chiffre au trait, le filet du kicker, la sérif du titre, le bouton en pilule). Ne sont écrits ici que les écarts, et le panneau qui s'ouvre. POURQUOI /assets/ ET NON css/. Traefik ne sert publiquement que les chemins qu'il énumère, plus tout ce qui est sous /assets/. Un fichier neuf dans css/ serait bloqué. Voir la note en tête d'index.html. ========================================================================== */ /* --------------------------------------------------------------------------- LE PALIER 00 --------------------------------------------------------------------------- */ /* La ligne de lieu ou de date, entre le titre et le texte. Même chasse que le kicker, mais sans filet : c'est une précision, pas une rubrique. */ .vest-station--annonces .annonces-lieu { display: block; margin: -.35rem 0 .8rem; font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .vest-station--annonces .annonces-lieu[hidden] { display: none; } /* L'extrait : le début du texte, coupé net. Trois lignes suffisent à donner envie ; au-delà, le palier disputerait la lecture au reste du couloir. */ .vest-station--annonces .annonces-extrait { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* La porte en sommeil : rien à l'affiche. Le texte d'attente se tient un ton en dessous du reste du couloir — il est là pour être lu en passant, pas pour retenir. */ .vest-station--annonces:not(.vest-station--a-l-affiche) .annonces-titre { color: rgba(255, 255, 255, .74); } .vest-station--annonces:not(.vest-station--a-l-affiche) .annonces-extrait { color: rgba(255, 255, 255, .55); } /* La porte allumée : il y a quelque chose. Le filet du kicker se fait net et le chiffre 00 sort de l'ombre — c'est tout, mais dans un couloir noir cela se voit de loin. */ .vest-station--a-l-affiche .vest-kicker { border-bottom-color: rgba(255, 255, 255, .42); color: rgba(255, 255, 255, .82); } .vest-station--a-l-affiche .vest-chiffre { -webkit-text-stroke-color: rgba(255, 255, 255, .16); } /* --------------------------------------------------------------------------- LE PANNEAU EN GRAND Il s'ouvre par-dessus le couloir. Pendant qu'il est là, porte `panneau-ouvert` et le couloir ne lit plus ni la molette ni les flèches : c'est ce panneau qui défile. Voir l'en-tête d'annonces-lk.js. --------------------------------------------------------------------------- */ .annonce-fenetre { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 3vh, 2.5rem); opacity: 0; transition: opacity .35s ease; } .annonce-fenetre[hidden] { display: none; } .annonce-fenetre.annonce-ouverte { opacity: 1; } .annonce-fond { position: absolute; inset: 0; background: rgba(4, 4, 8, .78); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .annonce-corps { position: relative; display: flex; flex-direction: column; width: min(940px, 100%); /* Une hauteur BORNÉE, pas une hauteur libre : c'est elle qui force le débordement à se produire dans `.annonce-defile` plutôt que de pousser la page. Sans ça, le panneau grandissait avec le texte et le défilement repartait au couloir. */ max-height: min(88vh, 100%); border: 1px solid rgba(255, 255, 255, .16); border-radius: 5px; background: rgba(10, 10, 16, .96); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); overflow: hidden; transform: translateY(14px) scale(.985); transition: transform .45s cubic-bezier(.16, 1, .3, 1); } .annonce-ouverte .annonce-corps { transform: none; } /* L'en-tête ne défile pas : le bouton de fermeture reste sous la main quelle que soit la longueur de ce qu'on lit. `position: static` n'est PAS décoratif. css/style.css pose `header { position: fixed; top: 0; width: 100% }` pour tout le site ; le jour où quelqu'un rendra son

à ce bandeau, il repartira se coller en haut de l'écran, hors du panneau. La règle le retient. */ .annonce-entete { position: static; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none; padding: 1rem clamp(1.1rem, 3.5vw, 2.4rem); border-bottom: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 10, 16, .98); } .annonce-sur-titre { font-family: 'DM Mono', monospace; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .58); } .annonce-fermer { flex: none; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .7); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } .annonce-fermer:hover, .annonce-fermer:focus-visible { background: #fff; border-color: #fff; color: #0b0b10; outline: none; } /* LA ZONE QUI DÉFILE. `overscroll-behavior: contain` est ce qui empêche le défilement de repartir sur la page une fois arrivé en bas : sans lui, la dernière impulsion traversait le panneau et faisait bouger le couloir. */ .annonce-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(1.4rem, 4vw, 2.6rem); } .annonce-defile:focus-visible { outline: 1px solid rgba(255, 255, 255, .3); outline-offset: -3px; } /* La barre de défilement, discrète mais visible : dans un panneau sombre et plein, rien ne dit qu'il reste du texte plus bas. */ .annonce-defile::-webkit-scrollbar { width: 9px; } .annonce-defile::-webkit-scrollbar-track { background: transparent; } .annonce-defile::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: content-box; background-color: rgba(255, 255, 255, .22); } .annonce-defile::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .38); } .annonce-defile { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; } /* --- Une annonce ---------------------------------------------------------- */ .annonce + .annonce { margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: clamp(2.2rem, 5vw, 3.4rem); border-top: 1px solid rgba(255, 255, 255, .12); } .annonce-titre { margin: 0 0 .5rem; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; color: #fff; } .annonce-lieu { display: block; margin-bottom: 1.4rem; font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } /* L'affiche : la première image, celle qui se lit avec le titre. SA HAUTEUR EST BORNÉE. Une photo de téléphone en portrait, étirée sur les 940 px du panneau, faisait plus de deux écrans de haut : le titre partait en haut, le texte n'apparaissait qu'après un long défilement, et on ne savait plus ce qu'on lisait. On la recadre plutôt que de la déformer. */ .annonce-affiche { margin: 0 0 1.7rem; } .annonce-affiche .annonce-image { max-height: 48vh; object-fit: cover; } .annonce-image { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, .12); border-radius: 3px; background: rgba(255, 255, 255, .03); } .annonce-texte p { margin: 0 0 1.05rem; font-family: var(--hero-sans, 'Inter', sans-serif); font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.72; color: rgba(255, 255, 255, .82); } .annonce-texte p:last-child { margin-bottom: 0; } /* LES AUTRES IMAGES, sous le texte. Deux colonnes dès qu'il y a la place : au-delà de deux ou trois vues, une pile pleine largeur transformait le panneau en couloir de défilement sans fin. */ .annonce-galerie { display: grid; grid-template-columns: 1fr; gap: clamp(.7rem, 2vw, 1.1rem); margin-top: 1.8rem; } @media (min-width: 620px) { .annonce-galerie { grid-template-columns: 1fr 1fr; } } .annonce-vue { margin: 0; } /* --------------------------------------------------------------------------- REPLIS --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .annonce-fenetre, .annonce-corps { transition: none; } } /* Écran étroit : le panneau prend tout, le titre se calme, et la galerie redevient une colonne (la règle ci-dessus ne s'applique qu'au-delà de 620 px, mais on descend aussi les marges). */ @media (max-width: 620px) { .annonce-fenetre { padding: 0; } .annonce-corps { width: 100%; max-height: 100%; height: 100%; border: 0; border-radius: 0; } } /* =========================================================================== LES TEMPLATES Une annonce porte un theme, choisi a la redaction dans une liste fermee (voir THEMES dans annonces_studio.py et dans annonces-lk.js). Il habille la PORTE du couloir et le panneau : l'evenement garde sa direction artistique depuis la porte qu'on croise jusqu'au texte qu'on lit. LE DECOR EST UNE COUCHE, PAS UN FOND. Il n'est jamais pose sur `.vest-station` : le script du couloir ecrit lui-meme la transformation, l'opacite et le flou de chaque palier, image par image, et un fond ajoute la se serait retrouve a devoir suivre ces trois valeurs. Le decor est donc un enfant absolu, deborde de la boite du texte, en `z-index: -2` — donc derriere le grand chiffre (-1), lui-meme derriere le texte. AUCUN DECOR NE PASSE SOUS LE TEXTE. Les feuilles vont aux angles, les clous au linteau, les fanions en haut : la place des mots est intouchable, quel que soit le theme. =========================================================================== */ .annonce-decor { position: absolute; z-index: -2; inset: -1.5rem -1.8rem -1.7rem; pointer-events: none; overflow: hidden; } /* --------------------------------------------------------------------------- CHINOIS — la porte rouge Laque vermillon, encadrement d'or, la rangee de clous d'une porte de temple (les 門釘), le joint des deux battants et les anneaux de tirage. Le grain du bois est un degrade repete plutot qu'une texture : zero octet a charger, et il suit la taille du palier quand la fenetre change. --------------------------------------------------------------------------- */ .annonce-decor--chinois { border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .11) 0 1px, rgba(0, 0, 0, 0) 1px 38px), linear-gradient(180deg, #8e2018 0%, #77170f 55%, #5c100b 100%); border: 1px solid rgba(214, 171, 90, .72); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .22), inset 0 0 0 6px rgba(214, 171, 90, .45), 0 20px 50px rgba(0, 0, 0, .5); } .porte-clous { position: absolute; top: .68rem; left: 1.15rem; right: 1.15rem; display: flex; justify-content: space-between; } .porte-clou { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f2dca4, #c8a44d 58%, #8a6a25); box-shadow: 0 1px 2px rgba(0, 0, 0, .55); } /* Le joint des deux battants. Il s'eteint en haut et en bas : une ligne franche d'un bord a l'autre aurait coupe le bloc en deux au lieu de le creuser. */ .porte-joint { position: absolute; top: 1.7rem; bottom: 1.7rem; left: 50%; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45) 14%, rgba(0, 0, 0, .45) 86%, transparent); } /* Les anneaux vont en bas a DROITE, et non au milieu comme sur une vraie porte : au centre ils tombaient derriere le bouton « Lire l'annonce ». */ .porte-anneaux { position: absolute; right: 1.4rem; bottom: .95rem; display: flex; gap: .5rem; } .porte-anneau { width: 19px; height: 19px; border: 3px solid rgba(214, 171, 90, .78); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 1px 2px rgba(0, 0, 0, .3); } /* Le texte de la porte rouge : ivoire et or, jamais le blanc du couloir. */ .vest-station--annonces.annonce-theme--chinois .vest-kicker { color: rgba(246, 224, 182, .92); border-bottom-color: rgba(214, 171, 90, .55); } .vest-station--annonces.annonce-theme--chinois .annonces-titre { color: #fdf3e0; } .vest-station--annonces.annonce-theme--chinois .annonces-lieu { color: rgba(240, 214, 160, .88); } .vest-station--annonces.annonce-theme--chinois .annonces-extrait { color: rgba(250, 238, 216, .9); } .vest-station--annonces.annonce-theme--chinois .vest-chiffre { -webkit-text-stroke-color: rgba(240, 210, 150, .34); } .vest-station--annonces.annonce-theme--chinois .vest-bouton { border-color: rgba(214, 171, 90, .82); color: #fdf3e0; } .vest-station--annonces.annonce-theme--chinois .vest-bouton:hover, .vest-station--annonces.annonce-theme--chinois .vest-bouton:focus-visible { background: #d6ab5a; border-color: #d6ab5a; color: #4a0d08; } /* --------------------------------------------------------------------------- NATURE — le feuillage Le contour est volontairement inegal (quatre rayons differents) : une boite parfaitement reguliere ne dit rien du vegetal. Les feuilles sont posees par le script, aux angles et sur les bords. --------------------------------------------------------------------------- */ .annonce-decor--nature { border-radius: 16px 4px 18px 5px; background: radial-gradient(120% 90% at 10% 0%, rgba(96, 142, 88, .30), transparent 62%), radial-gradient(110% 100% at 94% 100%, rgba(56, 102, 72, .34), transparent 58%), linear-gradient(168deg, rgba(19, 33, 23, .88), rgba(11, 21, 15, .93)); border: 1px solid rgba(150, 190, 140, .3); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); } .feuille { position: absolute; width: 46px; height: 46px; color: rgba(154, 199, 134, .5); } .feuille svg { display: block; width: 100%; height: 100%; } /* Le balancement est porte par le PARENT de la feuille, jamais par le