/* ============================================================================ FourFiveOne — templates.css Version 2026-08-26-B Une section par mise en scène, portée par [data-tpl] sur le . Les quatorze cohabitent : seule celle qui est tirée au sort s'applique. ========================================================================= */ /* ---- Socle commun ------------------------------------------------------- */ .stage { position: fixed; inset: 0; overflow: hidden; /* Empêche le pull-to-refresh natif du navigateur mobile de se déclencher pendant le geste pull-to-change (voir bindPullToChange dans templates.js) : sans cette ligne, tirer vers le bas tout en haut du contenu risquerait de recharger la page au lieu de changer de série. */ overscroll-behavior-y: contain; } .stage::-webkit-scrollbar { display: none; } .cell { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--deeper); cursor: pointer; -webkit-tap-highlight-color: transparent; } .cell .shot { width: 100%; height: 100%; object-fit: cover; } .cell:focus-visible { outline: 2px solid var(--ember); outline-offset: -3px; } @media (hover: hover) { .cell .shot { transition: opacity 800ms ease-out, transform 1400ms var(--ease); } .cell:hover .shot { transform: scale(1.035); } } .idx { font-family: var(--font-edge); font-size: .66rem; letter-spacing: .26em; color: var(--bone-dim); line-height: 1; font-variant-numeric: tabular-nums; } /* ========================================================================= 01 — COLONNE ====================================================================== */ [data-tpl="colonne"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; } [data-tpl="colonne"] .col-item { width: 100%; overflow: hidden; } /* ========================================================================= 02 — CADRE ====================================================================== */ [data-tpl="cadre"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; } [data-tpl="cadre"] .frame-item { display: flex; align-items: center; justify-content: center; } [data-tpl="cadre"] .frame-inner { position: relative; } [data-tpl="cadre"] .frame-inner .idx { position: absolute; left: 0; top: calc(100% + .8rem); } [data-tpl="cadre"] .cell { box-shadow: 0 40px 90px rgba(0, 0, 0, .55); } /* ========================================================================= 03 — DAMIER ====================================================================== */ [data-tpl="damier"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; } [data-tpl="damier"] .checker { display: grid; grid-template-columns: 1fr 2fr; gap: 0; } [data-tpl="damier"] .checker.is-flipped { grid-template-columns: 2fr 1fr; } /* ========================================================================= 04 — PLANCHE CONTACT ====================================================================== */ [data-tpl="contact"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; background: #04100f; } [data-tpl="contact"] .sheet { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 0; } [data-tpl="contact"] .sheet-cell { display: flex; flex-direction: column; border-right: 1px solid rgba(228, 106, 44, .18); border-bottom: 1px solid rgba(228, 106, 44, .18); } [data-tpl="contact"] .sheet-cell .cell { flex: 1; min-height: 0; } [data-tpl="contact"] .sheet-cell .idx { height: 26px; display: flex; align-items: center; padding-left: .7rem; color: var(--ember); opacity: .75; } /* ========================================================================= 05 — BENTO ====================================================================== */ [data-tpl="bento"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; } [data-tpl="bento"] .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; } [data-tpl="bento"] .bento > .cell:first-child { grid-column: span 2; grid-row: span 2; } [data-tpl="bento"] .bento.is-narrow { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1.4fr 1fr; } [data-tpl="bento"] .bento.is-narrow > .cell:first-child { grid-column: span 2; grid-row: span 1; } /* ========================================================================= 06 — BANDEAU ====================================================================== */ [data-tpl="bandeau"] .stage { display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; overflow-anchor: none; } [data-tpl="bandeau"] .band-item { position: relative; flex: 0 0 auto; height: 100%; overflow: hidden; } [data-tpl="bandeau"] .band-item .idx { position: absolute; left: 14px; bottom: 12px; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); color: var(--bone); opacity: .6; } /* ========================================================================= 07 — FRISE ====================================================================== */ [data-tpl="frise"] .stage { display: flex; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; overflow-anchor: none; } [data-tpl="frise"] .frieze { flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; } [data-tpl="frise"] .frieze-top, [data-tpl="frise"] .frieze-bot { height: 50%; overflow: hidden; } [data-tpl="frise"] .frieze-bot { will-change: transform; } /* Léger sur-cadrage : la dérive de la rangée basse ne doit jamais laisser apparaître le fond. */ [data-tpl="frise"] .frieze-bot .shot { transform: scale(1.12); } /* ========================================================================= 08 — FONDU ====================================================================== */ [data-tpl="fondu"] .stage { overflow: hidden; } [data-tpl="fondu"] .fade-layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 700ms var(--ease), transform 6000ms linear; } [data-tpl="fondu"] .fade-layer.is-front { opacity: 1; transform: scale(1.0); } [data-tpl="fondu"] .fade-layer .cell { position: absolute; inset: 0; } /* ========================================================================= 09 — PILE ====================================================================== */ [data-tpl="pile"] .stage { display: grid; place-items: center; perspective: 1400px; overflow: hidden; } [data-tpl="pile"] .pile-card { position: absolute; width: min(76vw, 62vh); height: min(76vw, 62vh); border-radius: 2px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); transform: translateY(calc(var(--d) * 16px)) scale(calc(1 - var(--d) * 0.045)); opacity: calc(1 - var(--d) * 0.16); transition: transform 480ms var(--ease), opacity 480ms var(--ease); } [data-tpl="pile"] .pile-card.is-gone { transform: translate(-125%, -6%) rotate(-9deg) scale(1.02); opacity: 0; } [data-tpl="pile"] .pile-card:not(.is-top) { pointer-events: none; } /* ========================================================================= 10 — CARROUSEL ====================================================================== */ [data-tpl="carrousel"] .stage { display: grid; place-items: center; perspective: 1700px; overflow: hidden; } [data-tpl="carrousel"] .cover-card { position: absolute; width: min(58vw, 56vh); height: min(58vw, 56vh); transform: translateX(calc(var(--d) * 42%)) translateZ(calc(var(--a) * -190px)) rotateY(calc(var(--d) * -38deg)); opacity: calc(1 - var(--a) * 0.22); transition: transform 420ms var(--ease), opacity 420ms var(--ease); box-shadow: 0 30px 80px rgba(0, 0, 0, .65); } [data-tpl="carrousel"] .cover-card.is-center { opacity: 1; } [data-tpl="carrousel"] .cover-card:not(.is-center) .shot { filter: brightness(.62) saturate(.8); } /* ========================================================================= Mouvement réduit ====================================================================== */ @media (prefers-reduced-motion: reduce) { .cell:hover .shot { transform: none; } [data-tpl="fondu"] .fade-layer, [data-tpl="pile"] .pile-card, [data-tpl="carrousel"] .cover-card { transition-duration: 1ms; } [data-tpl="fondu"] .fade-layer { transform: none; } } /* ========================================================================= DECK — une photo par écran, la carte se retourne ====================================================================== */ [data-tpl="deck"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; scroll-snap-type: y mandatory; } [data-tpl="deck"] .stage.is-locked { overflow-y: hidden; } [data-tpl="deck"] .card { position: relative; display: block; width: 100%; height: var(--card-h, 100dvh); scroll-snap-align: start; scroll-snap-stop: always; perspective: 1800px; background: var(--abyss); cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-tpl="deck"] .card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms var(--ease); will-change: transform; } [data-tpl="deck"] .card.is-open .card-inner { transform: rotateY(180deg); } [data-tpl="deck"] .face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } [data-tpl="deck"] .front { background: var(--abyss); } [data-tpl="deck"] .front .shot { width: 100%; height: 100%; object-fit: cover; } [data-tpl="deck"] .card.is-active .front .shot { animation: drift 22s ease-out forwards; } @keyframes drift { from { transform: scale(1.001); } to { transform: scale(1.05); } } [data-tpl="deck"] .back { transform: rotateY(180deg); background: var(--deep); display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 7vw, 6rem); } [data-tpl="deck"] .back-veil { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(48px) saturate(.55) brightness(.32); transform: scale(1.15); } [data-tpl="deck"] .back-shade { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 40%, rgba(11,41,48,.35) 0%, rgba(4,16,20,.88) 100%); } [data-tpl="deck"] .back .note { position: relative; } [data-tpl="deck"] .back .mark { position: absolute; right: clamp(1.5rem,4vw,3rem); bottom: clamp(1.5rem,4vw,3rem); } /* ========================================================================= MOSAIC — mur d'images ====================================================================== */ [data-tpl="mosaic"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; } [data-tpl="mosaic"] .row { display: grid; grid-template-columns: repeat(var(--n,3), 1fr); gap: 0; } [data-tpl="mosaic"] .tile .idx { position: absolute; left: 10px; bottom: 8px; opacity: 0; color: var(--bone); text-shadow: 0 1px 8px rgba(0,0,0,.9); transition: opacity 260ms ease; } [data-tpl="mosaic"] .tile:hover .idx, [data-tpl="mosaic"] .tile:focus-visible .idx { opacity: .8; } /* Le survol assombrit les voisines plutôt que d'éclairer la cible. */ @media (hover: hover) { [data-tpl="mosaic"] .row:hover .shot { opacity: .42; } [data-tpl="mosaic"] .row:hover .tile:hover .shot { opacity: 1; } } /* ========================================================================= STRIP — bande horizontale et panneau de lecture ====================================================================== */ [data-tpl="strip"] .stage { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overflow-anchor: none; cursor: grab; transition: transform 620ms var(--ease); } [data-tpl="strip"] .stage.is-dragging { cursor: grabbing; scroll-snap-type: none; } [data-tpl="strip"] .stage.is-locked { overflow-x: hidden; } [data-tpl="strip"] .stage.is-reading { transform: translateX(calc(-1 * var(--panel-w,0px) * .55)); } [data-tpl="strip"] .pane { flex: 0 0 auto; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; } [data-tpl="strip"] .pane:not(.is-current) .shot { filter: brightness(.5) saturate(.75); } [data-tpl="strip"] .pane .idx { position: absolute; left: 14px; bottom: 12px; opacity: 0; color: var(--bone); text-shadow: 0 1px 8px rgba(0,0,0,.9); transition: opacity 320ms ease; } [data-tpl="strip"] .pane.is-current .idx { opacity: .7; } [data-tpl="strip"] .panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w, min(460px, 46vw)); z-index: 40; background: var(--deep); border-left: 1px solid rgba(47,163,156,.22); box-shadow: -40px 0 80px rgba(4,16,20,.75); transform: translateX(101%); transition: transform 620ms var(--ease); display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem,4vw,3.5rem); overflow-y: auto; } [data-tpl="strip"] .panel.is-on { transform: none; } [data-tpl="strip"] .panel-body { position: relative; } [data-tpl="strip"] .panel .mark { margin-top: 2.5rem; display: block; } [data-tpl="strip"] .panel-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; opacity: .45; } [data-tpl="strip"] .panel-close::before, [data-tpl="strip"] .panel-close::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 1px; background: var(--bone); } [data-tpl="strip"] .panel-close::before { transform: rotate(45deg); } [data-tpl="strip"] .panel-close::after { transform: rotate(-45deg); } [data-tpl="strip"] .panel-close:hover { opacity: 1; } @media (max-width: 760px) { [data-tpl="strip"] .panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(64vh, 520px); border-left: 0; border-top: 1px solid rgba(47,163,156,.22); transform: translateY(101%); justify-content: flex-start; } [data-tpl="strip"] .panel.is-on { transform: none; } [data-tpl="strip"] .stage.is-reading { transform: none; } } /* ========================================================================= REVEAL — développement du tirage ====================================================================== */ [data-tpl="reveal"] .stage { overflow-y: scroll; scrollbar-width: none; overflow-anchor: none; scroll-snap-type: y mandatory; background: #000; } [data-tpl="reveal"] .stage.is-locked { overflow-y: hidden; } [data-tpl="reveal"] .plate { position: relative; width: 100%; height: var(--card-h, 100dvh); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-tpl="reveal"] .plate .shot { width: 100%; height: 100%; object-fit: cover; filter: brightness(.05) contrast(2.6) saturate(0) blur(10px); transform: scale(1.06); transition: opacity 400ms ease-out, filter 2400ms cubic-bezier(.16,.84,.3,1), transform 3600ms cubic-bezier(.16,.84,.3,1); } [data-tpl="reveal"] .plate.is-revealed .shot { filter: brightness(1) contrast(1) saturate(1) blur(0); transform: scale(1); } [data-tpl="reveal"] .grain-defs { position: fixed; width: 0; height: 0; overflow: hidden; } [data-tpl="reveal"] .grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 15; opacity: .16; mix-blend-mode: overlay; filter: url(#ffo-grain); background: #7f7f7f; animation: grain-shift 900ms steps(4, end) infinite; } @keyframes grain-shift { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,1.5%); } 50% { transform: translate(1.5%,-1%); } 75% { transform: translate(-1%,-2%); } 100% { transform: translate(0,0); } } [data-tpl="reveal"] .timer { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 22; pointer-events: none; } [data-tpl="reveal"] .timer span { display: block; height: 100%; width: 0; background: var(--ember); box-shadow: 0 0 12px rgba(228,106,44,.8); } [data-tpl="reveal"] .timer.is-running span { animation: develop 2400ms linear forwards; } @keyframes develop { from { width: 0; } to { width: 100%; } } [data-tpl="reveal"] .annot { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(1.6rem,5vw,4.5rem); background: linear-gradient(to top, rgba(4,16,20,.95) 0%, rgba(4,16,20,.80) 42%, rgba(4,16,20,0) 100%); opacity: 0; visibility: hidden; transition: opacity 520ms var(--ease), visibility 0s linear 520ms; } [data-tpl="reveal"] .plate.is-noted .annot { opacity: 1; visibility: visible; transition: opacity 520ms var(--ease), visibility 0s; } [data-tpl="reveal"] .annot .mark { position: absolute; right: clamp(1.4rem,5vw,4.5rem); bottom: clamp(1.4rem,5vw,4.5rem); } @media (prefers-reduced-motion: reduce) { [data-tpl="deck"] .card-inner { transition-duration: 1ms; } [data-tpl="deck"] .card.is-active .front .shot { animation: none; } [data-tpl="strip"] .stage, [data-tpl="strip"] .panel { transition-duration: 1ms; } [data-tpl="reveal"] .plate .shot { transition-duration: 1ms; filter: none; transform: none; } [data-tpl="reveal"] .grain { animation: none; opacity: .1; } [data-tpl="reveal"] .timer.is-running span { animation: none; width: 100%; } [data-tpl="reveal"] .annot { transition-duration: 1ms; } } /* ========================================================================= Jauge : orientation selon l'axe de la mise en scène ====================================================================== */ [data-tpl="bandeau"] .rail, [data-tpl="frise"] .rail, [data-tpl="strip"] .rail { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 2px; } [data-tpl="bandeau"] .rail .rail-fill, [data-tpl="frise"] .rail .rail-fill, [data-tpl="strip"] .rail .rail-fill { top: 0; bottom: 0; height: auto; left: 0; width: 0; transition: width 260ms ease-out, left 260ms ease-out; } /* L'invite ne concerne que les mises en scène où un clic révèle une note. */ [data-tpl="colonne"] .invite, [data-tpl="cadre"] .invite { display: none; }