/* La stratégie de l'échec — landing page */ /* Direction artistique : affiche festival/cinéma, sobre + humour discret */ :root { /* Variations de DA — pilotées par data-art sur */ --paper: #F1ECE0; --ink: #1A1612; --ink-soft: #3A332B; --ink-mute: #6B6258; --rule: rgba(26, 22, 18, 0.18); --rule-soft: rgba(26, 22, 18, 0.10); --accent: #C8321E; /* rouge tampon */ --accent-2: #E8B53C; /* jaune affiche */ --accent-3: #1E3A8A; /* bleu marine */ --paper-2: #E8E0CE; /* alt paper */ --stamp: rgba(200, 50, 30, 0.85); --serif: 'Fraunces', 'Times New Roman', serif; --sans: 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Courier New', monospace; } html[data-art="programme"] { --paper: #EDE7D6; --paper-2: #DDD3BB; --ink: #14110D; --ink-soft: #2E2820; --accent: #A0241A; --accent-2: #6B5A2C; --rule: rgba(20, 17, 13, 0.22); } html[data-art="warroom"] { --paper: #131210; --paper-2: #1C1A16; --ink: #F0EADB; --ink-soft: #C9C1AE; --ink-mute: #8B8474; --rule: rgba(240, 234, 219, 0.16); --rule-soft: rgba(240, 234, 219, 0.08); --accent: #FF5436; --accent-2: #FFB638; --accent-3: #6FB4FF; --stamp: rgba(255, 84, 54, 0.9); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Texture papier subtile */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0,0,0,0.02) 0%, transparent 60%); mix-blend-mode: multiply; opacity: 0.7; } html[data-art="warroom"] body::before { background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.02) 0%, transparent 60%); mix-blend-mode: screen; } /* Grain */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.35; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; } html[data-art="warroom"] body::after { mix-blend-mode: screen; opacity: 0.25; } main, header, footer { position: relative; z-index: 3; } /* Typo */ .serif { font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0; } .sans { font-family: var(--sans); } .mono { font-family: var(--mono); } h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1; letter-spacing: -0.02em; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } /* Layout */ .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; } /* Header */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid var(--rule); } .topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 32px; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .brand-mark { width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--serif); font-size: 13px; font-weight: 700; font-style: italic; } .nav { display: flex; gap: 28px; justify-content: center; font-size: 13px; } .nav a { color: var(--ink-soft); text-decoration: none; } .nav a:hover { color: var(--accent); } .topbar-right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; } .edition { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; border-radius: 0; text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease, color .12s ease; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { box-shadow: 4px 4px 0 var(--ink); background: transparent; } .btn-accent { background: var(--accent); color: var(--paper); border-color: var(--accent); } .btn-accent:hover { box-shadow: 4px 4px 0 var(--ink); } /* Section primitives */ section { padding: 96px 0; border-top: 1px solid var(--rule); position: relative; } section:first-of-type { border-top: 0; } .sec-head { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: 56px; align-items: end; } .sec-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .sec-title { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.025em; } .sec-title em { font-style: italic; font-family: var(--serif); } .sec-lede { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; } /* Tampon / stamp */ .stamp { display: inline-block; border: 2.5px solid var(--stamp); color: var(--stamp); padding: 4px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; transform: rotate(-3deg); background: transparent; border-radius: 2px; } /* Tape badge (festival) */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; } /* Ticker (marquee) */ .ticker { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); overflow: hidden; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .ticker-track { display: flex; gap: 48px; padding: 12px 0; white-space: nowrap; animation: tick 50s linear infinite; width: max-content; } .ticker-track > span { display: inline-flex; align-items: center; gap: 14px; } .ticker-track > span::after { content: "✱"; color: var(--accent-2); } @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Utilities */ .divider-rough { height: 1px; background: var(--ink); border: 0; margin: 0; position: relative; } .k-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } .tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-radius: 999px; } /* Placeholder image (subtle stripes) */ .ph { background-color: var(--paper-2); background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px ); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; } html[data-art="warroom"] .ph { background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 8px, rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 9px ); } /* Focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }