/* ============================================================ 1 BITCOIN — Fraj Chaieb, ESP Palette extraite de la couverture du livre blanc. ============================================================ */ /* --- FONTS ------------------------------------------------- Benton Modern Display est une fonte commerciale (Font Bureau / Type Network). Dépose les .woff2 dans /fonts : ils seront pris automatiquement. Sans eux, Newsreader prend le relais. ----------------------------------------------------------- */ /* Les fichiers ne sont pas encore là : bloc désactivé pour éviter deux 404 à chaque chargement. Dépose les .woff2 dans /fonts, décommente, c'est tout. @font-face { font-family: 'Benton Modern D'; src: url('fonts/BentonModernDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Benton Modern D'; src: url('fonts/BentonModernDisplay-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } */ :root { --rouge: #D8412F; --rouge-vif: #E8503C; --noir: #000000; --creme: #F4C785; --blanc: #F7F4EF; --serif: 'Benton Modern D', 'Newsreader', 'Times New Roman', Times, serif; --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; --frame: 10px; --gutter: clamp(20px, 4vw, 56px); } * { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; background: var(--noir); color: var(--blanc); font-family: var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .frame { position: fixed; inset: 0; border: var(--frame) solid var(--noir); pointer-events: none; z-index: 100; } .page { padding: var(--frame); } /* Défilement lissé (main.js) : le calque est fixe, le ne sert plus qu'à donner sa hauteur à la barre de défilement. */ body.smooth { overflow-x: hidden; } body.smooth .page { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono); font-size: clamp(9px, .78vw, 11px); letter-spacing: .14em; text-transform: uppercase; } /* ============================================================ HERO — le film plein cadre ============================================================ */ .hero { position: relative; height: calc(100svh - var(--frame) * 2); background: var(--noir) url('img/hero-poster.jpg') center / cover no-repeat; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2.2vw, 30px) var(--gutter) clamp(26px, 3.2vw, 42px); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; /* piloté au scroll par main.js */ transform: scale(var(--heroScale, 1)); transform-origin: center 40%; opacity: var(--heroFade, 1); will-change: transform, opacity; } /* Repli si la vidéo ne charge pas : le rouge de la couverture */ .hero.is-videoless { background: var(--rouge); } .hero.is-videoless .hero__video { display: none; } /* Lisibilité du chrome par-dessus l'image */ .hero::before, .hero::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; } .hero::before { top: 0; height: 34%; background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent); } .hero::after { bottom: 0; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.82), transparent); } .hero > *:not(.hero__video) { position: relative; z-index: 2; } /* --- Barre du haut ----------------------------------------- */ .hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; } .brand { font-family: var(--mono); font-size: clamp(11px, 1vw, 14px); letter-spacing: .02em; color: var(--blanc); padding: 10px 2px 8px; margin: -10px -2px -8px; border-bottom: 1px solid transparent; transition: color .28s, border-color .28s; } .brand:hover { color: var(--creme); border-bottom-color: var(--creme); } .brand:focus-visible { outline: 1px solid var(--creme); outline-offset: 8px; } /* Les deux prix, en haut, en texte seul — aucun bouton. */ .cta-pair { display: flex; gap: clamp(18px, 2.6vw, 40px); align-items: baseline; } .cta { font-family: var(--mono); font-size: clamp(10px, .95vw, 12.5px); letter-spacing: .1em; text-transform: uppercase; color: var(--blanc); padding: 10px 2px 8px; margin: -10px -2px -8px; border-bottom: 1px solid rgba(247,244,239,.5); transition: color .28s, border-color .28s; } .cta:hover { color: var(--creme); border-color: var(--creme); } .cta:focus-visible { color: var(--creme); outline: 1px solid var(--creme); outline-offset: 8px; } .cta--btc { color: var(--creme); border-color: rgba(244,199,133,.45); } .cta--btc:hover { color: var(--blanc); border-color: var(--blanc); } /* --- Bas de la hero ---------------------------------------- */ .hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .hero__title { margin: 0; font-weight: 400; font-size: clamp(30px, 5vw, 76px); line-height: .96; letter-spacing: -.025em; color: rgba(247,244,239,.7); max-width: 15ch; } .hero__title em { font-style: italic; } /* (le bloc meta a été retiré : la hero ne porte plus que le titre et le son) */ .sound { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; padding: 0 0 3px; cursor: pointer; color: var(--blanc); border-bottom: 1px solid rgba(247,244,239,.35); transition: color .25s, border-color .25s; } .sound:hover { color: var(--creme); border-color: var(--creme); } /* ============================================================ MANIFESTE ============================================================ */ section { padding: clamp(80px, 13vw, 200px) var(--gutter); } .section-label { color: var(--creme); display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(247,244,239,.18); padding-bottom: 12px; margin: 0 0 clamp(34px, 5vw, 70px); } /* ============================================================ FRAGMENTS — parallaxe ============================================================ */ .fragments { padding-top: clamp(40px, 6vw, 90px); } .frag { position: relative; contain: layout; margin-bottom: clamp(70px, 12vw, 190px); width: 100%; } /* I/II, IV/V et VI/VII sont des distiques : on les serre. */ .frag:nth-of-type(1), .frag:nth-of-type(4), .frag:nth-of-type(6) { margin-bottom: clamp(28px, 4vw, 64px); } /* Et on respire avant chaque nouveau mouvement. */ .frag:nth-of-type(2), .frag:nth-of-type(5), .frag:nth-of-type(7) { margin-bottom: clamp(110px, 18vw, 280px); } .frag:last-of-type { margin-bottom: 0; } /* Rythme filmique : largeurs et alignements variables */ .frag--l { max-width: min(56%, 760px); margin-right: auto; } .frag--r { max-width: min(52%, 700px); margin-left: auto; } .frag--c { max-width: min(72%, 980px); margin-inline: auto; } .frag--xl { max-width: 100%; } .frag--sm { max-width: min(38%, 460px); margin-left: 12%; } .frag__media { position: relative; overflow: hidden; background: #0A0A0A; aspect-ratio: 16 / 9; /* révélation au scroll */ clip-path: inset(0 0 var(--reveal, 100%) 0); transition: clip-path 1.15s cubic-bezier(.22,1,.28,1); } /* Plan VI : rien ne doit être rogné, le texte du film est dedans. */ .frag--xl .frag__media { aspect-ratio: 16 / 9; } .frag--xl .frag__media img { height: 126%; top: -13%; } .frag.is-in .frag__media { --reveal: 0%; } .frag.is-in .frag__media img { --zoom: 1; } .frag__media img { /* 1 px de débord de chaque côté : plus aucun liseré au sous-pixel. */ width: calc(100% + 2px); height: 132%; object-fit: cover; position: absolute; top: -16%; left: -1px; transform: translate3d(0, var(--py, 0px), 0) scale(var(--zoom, 1.06)); transition: transform 1.4s cubic-bezier(.16,1,.3,1); will-change: transform; } /* Chiffre romain géant, en contre-parallaxe */ .frag__num { position: absolute; top: -.34em; font-size: clamp(70px, 13vw, 210px); line-height: .8; letter-spacing: -.04em; color: rgba(247,244,239,.13); pointer-events: none; z-index: 2; transform: translate3d(0, var(--pyNum, 0px), 0); will-change: transform; } .frag--l .frag__num, .frag--sm .frag__num { right: -.18em; } .frag--r .frag__num, .frag--c .frag__num, .frag--xl .frag__num { left: -.1em; } .frag__cap { font-size: clamp(14px, 1.55vw, 24px); line-height: 1.35; letter-spacing: -.005em; color: rgba(247,244,239,.7); margin-top: clamp(16px, 1.9vw, 28px); max-width: 30ch; text-wrap: balance; } /* --- Mots qui roulent, à l'entrée comme à la sortie --------- */ .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; } .w__i { display: inline-block; transform: translateY(115%); transition: transform .95s cubic-bezier(.16,1,.3,1) var(--d, 0ms); } [data-roll].is-in .w__i { transform: translateY(0); } [data-roll].is-out-up .w__i { transform: translateY(-115%); } [data-roll].is-out-down .w__i{ transform: translateY(115%); } .frag--r .frag__cap, .frag--sm .frag__cap { margin-left: auto; text-align: right; } /* Phrase qui traverse la séquence */ .frag-quote { font-size: clamp(26px, 4.6vw, 76px); line-height: 1.04; letter-spacing: -.025em; margin: clamp(70px, 12vw, 180px) auto; max-width: 20ch; text-align: center; text-wrap: balance; } .frag-quote .accent { color: var(--rouge-vif); } /* ============================================================ LES DEUX PRIX — « la chute » Un chiffre monumental, un fil qui tombe, et le deuxième prix qui atterrit plus bas, plus petit, plus chaud. ============================================================ */ .prix { background: var(--noir); padding-bottom: clamp(100px, 15vw, 230px); } .prix__ligne { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 40px); } .prix__ligne--bas { justify-content: flex-end; } .prix__offre { display: block; color: inherit; } .prix__chiffre { display: block; color: var(--blanc); transition: color .35s ease; } /* Aucune fonte ne contient le signe ₿ : il tombait sur un glyphe de secours, plus maigre et plus étroit que le « 1 » d'à côté. On écrit le mot — c'est plus lisible, et c'est le sujet. */ .prix__chiffre .n { display: block; font-size: clamp(90px, 22vw, 320px); line-height: .78; letter-spacing: -.05em; } .prix__chiffre .u { display: block; font-size: clamp(34px, 7.2vw, 104px); line-height: .9; letter-spacing: -.035em; margin-top: .04em; } .prix__ou { font-size: clamp(20px, 3.2vw, 46px); letter-spacing: -.02em; color: rgba(247,244,239,.45); } .prix__mot { display: block; font-size: clamp(40px, 8.4vw, 118px); line-height: .84; letter-spacing: -.04em; color: var(--creme); transition: color .35s ease; } /* le seul « bouton » de la page, et c'est un mot */ .prix__verbe { display: inline-block; margin-top: clamp(14px, 1.8vw, 26px); font-size: clamp(10px, .95vw, 12.5px); letter-spacing: .14em; color: var(--blanc); border-bottom: 1px solid rgba(247,244,239,.35); padding-bottom: 5px; transition: color .3s ease, border-color .3s ease; } /* le cours, en marge du chiffre — écrit par main.js */ .prix__cours { margin: 0; font-size: clamp(10px, 1vw, 12.5px); letter-spacing: .12em; color: rgba(247,244,239,.6); white-space: nowrap; } .prix__dit { margin: clamp(20px, 2.6vw, 34px) 0 0; font-size: clamp(16px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -.01em; color: rgba(247,244,239,.7); max-width: 34ch; } /* le fil : la chute, qui se dissout en descendant */ .prix__fil { display: block; width: 1px; height: clamp(90px, 15vh, 200px); margin: clamp(34px, 5vw, 70px) 0 clamp(34px, 5vw, 70px) clamp(4px, 1.6vw, 22px); background: linear-gradient(to bottom, rgba(247,244,239,.34), rgba(247,244,239,0)); transform: scaleY(0); transform-origin: top; transition: transform 1.5s cubic-bezier(.16,1,.3,1); } .prix__fil.is-in { transform: scaleY(1); } .prix__bas { margin-left: auto; max-width: min(46ch, 100%); text-align: right; } .prix__bas .prix__dit { margin-left: auto; } /* --- états ------------------------------------------------- */ .prix__offre:hover .prix__chiffre, .prix__offre:focus-visible .prix__chiffre { color: var(--rouge-vif); } .prix__offre--libre:hover .prix__mot, .prix__offre--libre:focus-visible .prix__mot { color: var(--blanc); } .prix__offre:hover .prix__verbe, .prix__offre:focus-visible .prix__verbe { color: var(--rouge-vif); border-color: var(--rouge-vif); } .prix__offre--libre:hover .prix__verbe, .prix__offre--libre:focus-visible .prix__verbe { color: var(--creme); border-color: var(--creme); } .prix__offre:focus-visible { outline: 1px solid var(--creme); outline-offset: 12px; } /* ============================================================ FOOTER ============================================================ */ footer { padding: clamp(50px, 7vw, 90px) var(--gutter) clamp(26px, 3.5vw, 40px); border-top: 1px solid rgba(247,244,239,.16); } .footer__top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--creme); } .footer__links { display: flex; gap: clamp(14px, 2vw, 30px); flex-wrap: wrap; } .footer__links a { transition: opacity .25s; } .footer__links a:hover { opacity: .55; } .footer__mark { margin: clamp(40px, 6vw, 80px) 0 0; font-size: clamp(38px, 12vw, 200px); line-height: .84; letter-spacing: -.04em; color: rgba(247,244,239,.13); font-weight: 400; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 860px) { :root { --frame: 6px; } .hero__bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .hero__meta { text-align: left; white-space: normal; } .manifesto__cols { grid-template-columns: 1fr; } .prix__ligne--bas { justify-content: flex-start; } .prix__bas { margin-left: 0; text-align: left; max-width: 100%; } .prix__bas .prix__dit { margin-left: 0; } .prix__fil { height: clamp(64px, 12vh, 110px); } .frag--l, .frag--c { max-width: 100%; margin-inline: 0; } .frag--r { max-width: 88%; margin-left: auto; margin-right: 0; } .frag--sm { max-width: 62%; margin-left: auto; } .frag--xl { max-width: 100%; margin-inline: calc(var(--gutter) * -1); } .frag__cap { max-width: 100%; } .frag--r .frag__cap, .frag--sm .frag__cap { text-align: left; margin-left: 0; } .frag__num { font-size: clamp(56px, 20vw, 120px); } .cta-pair { gap: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.smooth .page { position: static; transform: none !important; } body.smooth { height: auto !important; } .frag__media { clip-path: none !important; transition: none; } .frag__media img, .frag__num, .hero__video { transform: none !important; opacity: 1 !important; transition: none; } .w { overflow: visible; } .prix__fil { transform: none !important; transition: none; } .w__i { transform: none !important; transition: none; } }