/* ============================================================ LA PROHIBITION : « GANGSTAR ENERGY » Underground / brutaliste / zine interdit Carbon Black · Anthracite · Copper · Copper Light · Warm White ============================================================ */ /* ---------- 0. Polices (auto-hébergées) ---------- Les polices étaient chargées depuis Google Fonts, ce qui envoyait l'adresse IP de chaque visiteur vers un serveur tiers hors UE, sans consentement possible. Elles sont désormais servies par notre propre domaine : plus aucun transfert hors UE, une dépendance externe de moins, et un rendu plus rapide (pas de résolution DNS ni de connexion supplémentaire avant l'affichage du texte). Sous-ensemble latin uniquement : il couvre le français, accents et ligature œ comprises. Licences SIL Open Font License 1.1, redistribution autorisée. */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300 700; /* police variable : un seul fichier pour les 5 graisses */ font-display: swap; src: url('../fonts/oswald-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira Stencil One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/saira-stencil-one-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/special-elite-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 1. Tokens ---------- */ :root { /* Palette : Gangstar Energy */ --void: #0E0E0E; /* Carbon Black : fond principal */ --coal: #1C1C1C; /* Anthracite : surfaces */ --coal-2: #262626; /* élévation (palier neutre) */ --blood: #B87333; /* Copper : primaire / CTA / accents */ --blood-hi: #D4956A; /* Copper Light : survol / emphase */ --bone: #F2EAD8; /* Warm White : texte clair */ --paper: #F2EAD8; /* Warm White : sections claires */ --ash: #978C7B; /* Warm White atténué : texte secondaire */ --amber: #D4956A; /* Copper Light : accent tertiaire */ --ink: #0E0E0E; /* Carbon Black : bordures / ombres */ /* Sémantique */ --bg: var(--void); --surface: var(--coal); --surface-2: var(--coal-2); --text: var(--bone); --text-muted: var(--ash); --cta: var(--blood); --line: rgba(242,234,216,.16); --line-strong:rgba(242,234,216,.42); /* Typo */ --f-display: 'Anton', Impact, system-ui, sans-serif; --f-stencil: 'Saira Stencil One', system-ui, sans-serif; --f-type: 'Special Elite', 'Courier New', monospace; --f-body: 'Oswald', system-ui, sans-serif; /* Échelle (8pt) */ --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem; --maxw: 1200px; --radius: 0px; --ease: cubic-bezier(.2,.7,.2,1); --t: 200ms var(--ease); --hard: 6px 6px 0 var(--ink); --hard-red: 6px 6px 0 var(--blood); --z-nav: 100; --z-overlay: 90; --z-modal: 1000; } /* ---------- 2. Reset & base ---------- */ *,*::before,*::after { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { font-family: var(--f-body); font-weight: 300; background: var(--void); color: var(--text); line-height: 1.7; font-size: 1.06rem; overflow-x: hidden; position: relative; letter-spacing: .015em; } /* Grain + scanlines */ body::after { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body::before { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--blood-hi); outline-offset: 2px; } ::selection { background: var(--blood); color: var(--bone); } /* ---------- 3. Typo ---------- */ h1,h2,h3 { font-family: var(--f-display); font-weight: 400; line-height: .94; color: var(--bone); text-transform: uppercase; letter-spacing: .005em; } .eyebrow { font-family: var(--f-stencil); text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; color: var(--blood); display: inline-flex; align-items: center; gap: .7rem; } .eyebrow::before { content: "["; color: var(--blood); } .eyebrow::after { content: "]"; color: var(--blood); } .eyebrow.center { justify-content: center; } .display { font-size: clamp(3rem, 11vw, 9rem); letter-spacing: -.01em; } .h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); } .lead { font-family: var(--f-type); font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--bone); max-width: 60ch; line-height: 1.65; } .muted { color: var(--text-muted); } .serif-quote { font-family: var(--f-type); font-style: italic; } .tnum { font-variant-numeric: tabular-nums; } /* ---------- 4. Layout ---------- */ .wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .wrap-wide { width: min(100% - 2.5rem, 1440px); margin-inline: auto; } section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; } .section-light { background: var(--paper); color: #1a1714; background-image: radial-gradient(rgba(0,0,0,.10) 1.1px, transparent 1.2px); background-size: 9px 9px; } .section-light h1,.section-light h2,.section-light h3 { color: #120f0c; } .section-light .muted { color: #5b5444; } .section-light .lead { color: #2b261f; } .section-light .eyebrow { color: var(--blood); } .section-light .eyebrow::before,.section-light .eyebrow::after { color: var(--blood); } .section-emerald { background: linear-gradient(135deg, #2a1d10, #0E0E0E 70%); } .section-emerald::before, .section-emerald::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(45deg, var(--amber) 0 14px, var(--ink) 14px 28px); opacity: .85; } .section-emerald::before { top: 0; } .section-emerald::after { bottom: 0; } .grid { display: grid; gap: var(--s-4); } .center { text-align: center; } .stack > * + * { margin-top: var(--s-3); } /* ---------- 5. Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: .9rem clamp(1.25rem, 4vw, 3rem); background: rgba(11,10,9,0); transition: background var(--t), border-color var(--t), padding var(--t); border-bottom: 2px solid transparent; } .nav.scrolled { background: rgba(11,10,9,.94); backdrop-filter: blur(6px); border-bottom-color: var(--blood); padding-block: .6rem; } .brand { display: flex; align-items: center; gap: .65rem; font-family: var(--f-display); letter-spacing: .04em; text-transform: uppercase; font-size: 1.15rem; color: var(--bone); } .brand svg { width: 30px; height: 30px; } .brand b { color: var(--blood); font-weight: 400; } .nav-links { display: flex; align-items: center; gap: clamp(.8rem,2vw,1.9rem); list-style: none; } .nav-links a { font-family: var(--f-body); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); position: relative; padding: .35rem .1rem; opacity: .82; transition: opacity var(--t), color var(--t); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--blood); transition: width var(--t); } .nav-links a:hover { opacity: 1; color: var(--blood-hi); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-links a[aria-current="page"] { color: var(--blood); opacity: 1; } .nav-toggle { display: none; background: var(--blood); border: 2px solid var(--ink); border-radius: 0; width: 46px; height: 46px; color: var(--bone); align-items: center; justify-content: center; box-shadow: var(--hard); } .nav-toggle svg { width: 22px; height: 22px; } /* ── Réseaux sociaux : icônes carrées, cuivre au survol ────────────── Une icône sans URL (ou désactivée dans l'admin) porte [hidden] et ne doit jamais s'afficher, d'où le !important qui prime sur le flex. */ .social { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .social.center { justify-content: center; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; padding: 0; color: var(--bone); border: 2px solid var(--line-strong); background: transparent; transition: color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t); } .social-link:hover { color: var(--blood-hi); border-color: var(--blood); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--blood); } .social-link svg { width: 20px; height: 20px; } .social-link[hidden] { display: none !important; } /* Le nom du réseau n'apparaît que sur les plaques (masqué en pastille) */ .social-name { display: none; } /* Bande « Rejoins-nous » : halo cuivre + filets haut/bas, pour lui donner une vraie présence sans surcharger la page. */ .social-band { position: relative; padding-block: clamp(3rem, 6vw, 4.8rem); background: radial-gradient(120% 95% at 50% 50%, rgba(184, 115, 51, .12), transparent 66%); } .social-band[hidden] { display: none; } .social-band::before, .social-band::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(88%, 880px); height: 2px; background: linear-gradient(90deg, transparent, rgba(184, 115, 51, .6), transparent); } .social-band::before { top: 0; } .social-band::after { bottom: 0; } /* Plaques nommées : icône + nom, même langage que les cartes du site (fond anthracite, ombre portée dure, décalage cuivre au survol). */ /* Le texte reste lisible sur 60ch, mais les plaques disposent de toute la largeur du wrap : sinon 4 plaques ne tiennent jamais sur une ligne. */ .social-intro { max-width: 60ch; margin-inline: auto; } /* Paliers voulus : 1x4 tant que ça rentre, puis 2x2, puis 1 colonne. On borne la largeur du conteneur pour imposer le retour à la ligne au bon moment (le flex-wrap libre produirait un vilain 3+1). */ .social-lg { gap: clamp(.8rem, 2vw, 1.3rem); margin-top: 2.1rem; } @media (max-width: 720px) { .social-lg { max-width: 320px; margin-inline: auto; } } @media (max-width: 380px) { .social-lg { max-width: 176px; } } .social-lg .social-link { flex: 0 0 148px; height: auto; flex-direction: column; gap: .7rem; padding: 1.25rem 1.5rem; color: var(--bone); border-color: var(--line-strong); box-shadow: var(--hard); background: linear-gradient(165deg, rgba(184, 115, 51, .12), transparent 62%), var(--surface); } .social-lg .social-link:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--blood); } .social-lg .social-link svg { width: 28px; height: 28px; } .social-lg .social-name { display: block; font-family: var(--f-stencil); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); transition: color var(--t); } .social-lg .social-link:hover .social-name { color: var(--blood-hi); } /* Icônes du footer : pastilles discrètes sous la baseline. `display` et `padding` sont redéclarés car la règle `.footer a` (display:block + padding) est plus spécifique et casserait le centrage. */ .footer .social { margin-top: 1.2rem; } .footer .social-link { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 38px; height: 38px; color: var(--ash); border-color: var(--line); } .footer .social-link svg { width: 18px; height: 18px; } .footer .social-link:hover { color: var(--blood-hi); border-color: var(--blood); } /* Bouton de fermeture du menu mobile (injecté par main.js) : masqué en desktop */ .nav-close { display: none; } /* Fond assombri derrière le panneau (injecté par main.js) */ .nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease), visibility 280ms var(--ease); } .nav-backdrop.open { opacity: 1; visibility: visible; } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } /* backdrop-filter crée un bloc conteneur qui casse le panneau fixe une fois scrollé : on le retire en mobile (le fond est déjà quasi opaque) */ .nav, .nav.scrolled, .paper-page .nav { backdrop-filter: none; } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.3rem; background: var(--coal); padding: 5.5rem 2rem 2rem; border-left: 3px solid var(--blood); transform: translateX(100%); transition: transform 280ms var(--ease); overflow-y: auto; } .nav-links.open { transform: translateX(0); } .nav-links a { font-size: 1.15rem; } .nav-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 1.1rem; right: 1.1rem; width: 46px; height: 46px; background: transparent; border: 2px solid var(--line-strong); color: var(--bone); transition: color var(--t), border-color var(--t); } .nav-close:hover { color: var(--blood-hi); border-color: var(--blood); } .nav-close svg { width: 22px; height: 22px; } } /* ---------- 6. Boutons ---------- */ .btn { --bg-btn: var(--blood); display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-body); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; padding: .95rem 1.7rem; color: var(--bone); background: var(--bg-btn); border: 2px solid var(--ink); border-radius: 0; box-shadow: var(--hard); transition: transform var(--t), box-shadow var(--t), background var(--t); } .btn:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); background: var(--blood-hi); } .btn:active { transform: translate(6px,6px); box-shadow: 0 0 0 var(--ink); } .btn-ghost { background: transparent; color: var(--bone); border: 2px solid var(--bone); box-shadow: var(--hard); } .btn-ghost:hover { background: var(--bone); color: var(--ink); box-shadow: 3px 3px 0 var(--blood); } .btn svg { width: 18px; height: 18px; } /* ---------- 7. Hero ---------- */ .hero { min-height: 100svh; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding-block: 7rem 4rem; } .hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--void); } .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Voile sombre pour la lisibilité du texte (contraste AA) */ .hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,14,14,.62) 0%, rgba(14,14,14,.55) 45%, rgba(14,14,14,.78) 100%); } .hero-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, rgba(184,115,51,.26), transparent 62%); } .hero-rays { position: absolute; top: 50%; left: 50%; width: 160vmax; height: 160vmax; transform: translate(-50%,-58%); opacity: .08; animation: spin 120s linear infinite; } .hero-rays polygon { fill: var(--blood); } @keyframes spin { to { transform: translate(-50%,-58%) rotate(360deg); } } .hero-inner { position: relative; z-index: 1; } /* tampon fantôme "INTERDIT" */ .hero-inner::before { content: "GANGSTAR"; position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%) rotate(-9deg); font-family: var(--f-display); font-size: clamp(4rem,18vw,15rem); color: transparent; -webkit-text-stroke: 2px rgba(184,115,51,.22); letter-spacing: .02em; white-space: nowrap; pointer-events: none; z-index: -1; } .hero .display { margin: .4rem 0 1.2rem; line-height: .88; } .hero .display em { font-style: normal; color: var(--blood); -webkit-text-stroke: 1px var(--blood); } .hero-emblem { width: clamp(78px, 13vw, 120px); margin: 0 auto 1.1rem; } .hero-emblem g[stroke] { stroke: var(--bone); } .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .scroll-cue { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 1; font-family: var(--f-stencil); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ash); display: flex; flex-direction: column; align-items: center; gap: .5rem; } .scroll-cue span { width: 2px; height: 40px; background: linear-gradient(var(--blood), transparent); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { 0%,100%{ transform: scaleY(.4); opacity:.35 } 50%{ transform: scaleY(1); opacity:1 } } /* ---------- 8. Séparateur ---------- */ .deco-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--blood); padding-block: var(--s-4); } .deco-divider .line { height: 3px; flex: 1; max-width: 220px; background: var(--blood); } .deco-divider .line.r { background: var(--blood); } .deco-divider svg { width: 30px; height: 30px; } .deco-divider svg path { stroke: var(--blood); fill: var(--blood); } /* ---------- 9. Cartes ---------- */ .cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); } .card { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 0; padding: var(--s-4); position: relative; overflow: hidden; transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--blood); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .card:hover { transform: translate(-3px,-3px); border-color: var(--bone); box-shadow: var(--hard-red); } .card:hover::before { transform: scaleX(1); } .card .num { font-family: var(--f-stencil); color: var(--blood); font-size: .9rem; letter-spacing: .12em; } .card h3 { font-size: 1.6rem; margin: .55rem 0; } .card-link { display: flex; flex-direction: column; } .card-link .go { margin-top: 1.2rem; color: var(--blood); font-family: var(--f-body); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5rem; transition: gap var(--t); } .card-link:hover .go { gap: .9rem; } /* ---------- 10. Stat / compteurs ---------- */ .stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); text-align: center; } .stat { padding: var(--s-3) var(--s-2); border: 2px solid var(--line-strong); border-radius: 0; background: var(--surface); } .stat .big { font-family: var(--f-display); font-size: clamp(2.8rem, 6.5vw, 4.4rem); color: var(--blood); line-height: .9; } .stat .lbl { font-family: var(--f-stencil); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); margin-top: .7rem; } .section-light .stat { background: rgba(255,255,255,.35); border-color: rgba(0,0,0,.55); } .section-light .stat .big { color: var(--blood); } .section-light .stat .lbl { color: #5b5444; } /* ---------- 11. Timeline ---------- */ .timeline { position: relative; max-width: 900px; margin-inline: auto; padding-left: 0; } .timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--blood); transform: translateX(-50%); } .tl-item { position: relative; width: 50%; padding: 0 2.6rem 3rem; } .tl-item:nth-child(odd) { left: 0; text-align: right; } .tl-item:nth-child(even) { left: 50%; } .tl-dot { position: absolute; top: .5rem; width: 16px; height: 16px; background: var(--blood); border: 2px solid var(--bone); transform: rotate(45deg); } .tl-item:nth-child(odd) .tl-dot { right: -8px; } .tl-item:nth-child(even) .tl-dot { left: -8px; } .tl-year { font-family: var(--f-display); font-size: 2.8rem; color: var(--blood); line-height: 1; } .tl-card { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 0; padding: 1.3rem 1.5rem; margin-top: .5rem; transition: border-color var(--t), transform var(--t), box-shadow var(--t); } .tl-card:hover { border-color: var(--bone); transform: translateY(-3px); box-shadow: var(--hard-red); } .tl-card h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; color: var(--bone); margin-bottom: .4rem; text-transform: uppercase; } .tl-tag { display: inline-block; font-family: var(--f-stencil); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border: 1.5px solid; border-radius: 0; margin-bottom: .6rem; } .tl-tag.law { color: var(--bone); border-color: var(--bone); } .tl-tag.crime { color: var(--blood); border-color: var(--blood); } .tl-tag.culture { color: var(--amber); border-color: var(--amber); } @media (max-width: 740px) { .timeline::before { left: 7px; } .tl-item, .tl-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 2.4rem 2.4rem; } .tl-item:nth-child(odd) { text-align: left; } .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot { left: 0; right: auto; } } /* ---------- 12. Split media ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; } .split.rev .split-media { order: 2; } .split-media { position: relative; } .split-media img { border-radius: 0; border: 2px solid var(--bone); filter: grayscale(1) contrast(1.12) brightness(.92); } .split-media::after { content: ""; position: absolute; inset: 0; background: var(--blood); mix-blend-mode: color; opacity: .28; pointer-events: none; } .split-media.color img { filter: none; } .split-media.color::after { display: none; } .split-media figcaption { font-family: var(--f-type); font-size: .78rem; letter-spacing: .02em; color: var(--ash); margin-top: .7rem; } .section-light .split-media figcaption { color: #5b5444; } .frame-deco { position: absolute; inset: 0; border: 2px solid var(--blood); transform: translate(14px,14px); z-index: -1; pointer-events: none; } @media (max-width: 760px){ .split { grid-template-columns: 1fr; } .split.rev .split-media { order: 0; } } /* ---------- 14. Marquee (bandeau hazard) ---------- */ .marquee { overflow: hidden; border-block: 3px solid var(--ink); padding-block: .7rem; background: var(--blood); } .marquee-track { display: flex; gap: 2.6rem; white-space: nowrap; width: max-content; animation: marquee 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee span { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-size: 1.05rem; display: inline-flex; gap: 2.6rem; align-items: center; } .marquee span::after { content: "✶"; color: var(--bone); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- 15. Quote ---------- */ .pull { max-width: 940px; margin-inline: auto; text-align: center; } .pull blockquote { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.02; color: var(--bone); } .pull blockquote::before { content: "«"; color: var(--blood); margin-right: .2em; } .pull blockquote::after { content: "»"; color: var(--blood); margin-left: .2em; } .pull cite { display: block; margin-top: 1.4rem; font-family: var(--f-type); font-style: normal; letter-spacing: .04em; font-size: .85rem; color: var(--blood); } .section-light .pull blockquote { color: #120f0c; } .section-light .pull blockquote::before,.section-light .pull blockquote::after { color: var(--blood); } /* ---------- 16. Figures ---------- */ .figures { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); } .figure { border: 2px solid var(--line-strong); border-radius: 0; overflow: hidden; background: var(--surface); transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .figure:hover { transform: translate(-3px,-3px); border-color: var(--bone); box-shadow: var(--hard-red); } .figure .ph { aspect-ratio: 3/4; background: var(--surface-2); display: grid; place-items: center; color: var(--blood); overflow: hidden; position: relative; } .figure .ph::after { content: ""; position: absolute; inset: 0; background: var(--blood); mix-blend-mode: color; opacity: .3; } .figure .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.92); } .figure .ph svg { stroke: var(--blood); } .figure .body { padding: 1.1rem 1.2rem; } .figure h3 { font-family: var(--f-display); font-size: 1.35rem; color: var(--bone); } .figure .role { font-family: var(--f-stencil); font-size: .66rem; color: var(--blood); letter-spacing: .08em; text-transform: uppercase; margin: .3rem 0 .7rem; } .figure p { font-size: .92rem; color: var(--text-muted); } /* ---------- 17. Charts ---------- */ .chart-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); } .chart-card { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 0; padding: var(--s-4); } .chart-card h3 { font-family: var(--f-display); font-size: 1.4rem; color: var(--bone); margin-bottom: .3rem; } .chart-card .src { font-family: var(--f-type); font-size: .74rem; color: var(--ash); margin-bottom: 1rem; } .chart-holder { position: relative; height: 300px; } details.data-table { margin-top: 1rem; } details.data-table summary { font-family: var(--f-stencil); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blood); cursor: pointer; } details.data-table table { width: 100%; margin-top: .8rem; border-collapse: collapse; font-size: .86rem; } details.data-table th, details.data-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: left; } details.data-table th { color: var(--bone); font-family: var(--f-body); font-weight: 600; text-transform: uppercase; } /* ---------- 18. Speakeasy door ---------- */ .door { max-width: 580px; margin-inline: auto; text-align: center; background: var(--coal); border: 2px solid var(--bone); border-radius: 0; padding: clamp(2rem,5vw,3.2rem); box-shadow: var(--hard-red); position: relative; } .door::before { content: "CONFIDENTIEL"; position: absolute; top: .8rem; right: .9rem; font-family: var(--f-stencil); font-size: .6rem; letter-spacing: .12em; color: var(--blood); border: 1.5px solid var(--blood); padding: .15rem .4rem; transform: rotate(6deg); } .door .peek { width: 70px; height: 70px; margin: 0 auto 1.4rem; border: 2px solid var(--blood); display: grid; place-items: center; color: var(--blood); transition: transform var(--t); } .door .peek svg { stroke: currentColor; } .door.open .peek { transform: rotateY(180deg); border-color: var(--amber); color: var(--amber); } .door form { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; justify-content: center; } .door input { flex: 1; min-width: 200px; background: var(--void); border: 2px solid var(--line-strong); color: var(--bone); padding: .85rem 1rem; border-radius: 0; font-family: var(--f-type); font-size: .95rem; } .door input:focus-visible { border-color: var(--blood); outline-offset: 0; } .door .msg { margin-top: 1rem; font-family: var(--f-type); font-size: .85rem; letter-spacing: .02em; min-height: 1.2em; } .door .msg.ok { color: var(--amber); } .door .msg.no { color: var(--blood); } .door .secret { margin-top: 1.4rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms var(--ease), opacity 400ms var(--ease); } .door.open .secret { max-height: 400px; opacity: 1; } .door .secret p { font-family: var(--f-type); color: var(--bone); } /* ---------- 19. Footer ---------- */ .footer { background: var(--ink); border-top: 3px solid var(--blood); padding-block: var(--s-6) var(--s-4); } .footer h4 { font-family: var(--f-stencil); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blood); margin-bottom: 1rem; } .footer a { color: var(--ash); font-size: .94rem; display: block; padding: .25rem 0; transition: color var(--t); } .footer a:hover { color: var(--bone); } .footer .colophon { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: .7rem; font-family: var(--f-type); font-size: .76rem; color: var(--ash); } /* Liens legaux du colophon sur une seule ligne (sinon ils heritent du display:block du footer) */ .footer .colophon a { display: inline; padding: 0; font-size: inherit; } .footer-grid { display: grid; gap: var(--s-4); grid-template-columns: 1.5fr 1fr 1fr; } @media (max-width: 700px){ .footer-grid { grid-template-columns: 1fr; } } /* ---------- 20. Animations au scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; } @media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } } /* ---------- 21. Page header ---------- */ .page-head { padding: clamp(7rem,14vw,11rem) 0 clamp(3rem,6vw,5rem); text-align: center; position: relative; overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(184,115,51,.24), transparent 62%); } .page-head::after { content: "GANGSTAR"; position: absolute; top: 22%; right: -1%; transform: rotate(8deg); font-family: var(--f-display); font-size: clamp(2rem,7vw,5rem); color: transparent; -webkit-text-stroke: 2px rgba(242,234,216,.07); white-space: nowrap; pointer-events: none; } .page-head .inner { position: relative; } .page-head .display { margin: .6rem 0 1rem; font-size: clamp(2.8rem,9vw,6.5rem); line-height: 1.05; } /* ---------- utils ---------- */ .mt-0{margin-top:0}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)} .maxw-prose{max-width:65ch}.maxw-prose.center{margin-inline:auto} /* ---------- 22. Compat : alias des anciens tokens (mappés sur la palette Contrebande) ---------- */ :root { --char: var(--coal); --char-2: var(--coal-2); --brass: var(--blood); --brass-hi: var(--blood); --champagne: var(--bone); --cream: var(--bone); --emerald: var(--amber); --emerald-hi: var(--amber); --oxblood: var(--blood); --oxblood-hi: var(--blood); --smoke: var(--ash); --copper: var(--amber); --line-soft: var(--line); --f-caps: var(--f-stencil); } .section-light [style*="--champagne"], .section-light .h2 { /* garde-fou lisibilité */ } /* Recolore l'emblème de marque (SVG inline historiquement doré) */ .brand svg circle, .brand svg path { stroke: var(--bone); } .brand:hover svg circle, .brand:hover svg path { stroke: var(--blood-hi); } /* ============================================================ 23. GANGSTAR : composants ajoutés (marque énergisante) ============================================================ */ /* ---- Logo image dans la marque ---- */ .brand .logo-img { height: 44px; width: auto; display: block; } .nav.scrolled .brand .logo-img { height: 40px; } /* ---- Header : groupe droite (nav + CTA) ---- */ .nav-right { display: flex; align-items: center; gap: clamp(1rem,2vw,1.8rem); } .nav-cta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-body); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; padding: .6rem 1.1rem; color: var(--ink); background: var(--blood); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform var(--t), background var(--t), box-shadow var(--t); } .nav-cta:hover { background: var(--blood-hi); transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); } @media (max-width: 880px){ .nav-cta { display: none; } } /* ---- Dropdown « Pro » ---- */ .nav-drop { position: relative; } .nav-drop-toggle { background: none; border: none; color: var(--bone); font-family: var(--f-body); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; opacity: .82; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .1rem; cursor: pointer; } .nav-drop-toggle:hover { opacity: 1; color: var(--blood-hi); } .nav-drop-toggle svg { width: 14px; height: 14px; transition: transform var(--t); } .nav-drop.open .nav-drop-toggle svg { transform: rotate(180deg); } .nav-drop-menu { position: absolute; top: calc(100% + .8rem); right: 0; min-width: 210px; list-style: none; background: var(--coal); border: 2px solid var(--blood); box-shadow: var(--hard); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t); } .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: none; } .nav-drop-menu a { display: block; padding: .6rem .8rem; font-family: var(--f-body); font-weight: 500; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); opacity: .85; } .nav-drop-menu a::after { display: none; } .nav-drop-menu a:hover { background: rgba(184,115,51,.16); color: var(--blood-hi); opacity: 1; } @media (max-width: 880px) { .nav-drop { width: 100%; } .nav-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--blood); margin: .4rem 0 .4rem .4rem; padding: 0 0 0 .6rem; display: none; } .nav-drop.open .nav-drop-menu { display: block; } .nav-drop-menu a { font-size: .9rem; } } /* ---- Animation banderole (reveal canette) ---- */ #banderole-section { position: relative; height: 520vh; } #banderole-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--void); } #b-inner { position: relative; overflow: visible; } #b-content-wrap { overflow: hidden; height: 0; width: 100%; } #b-content { padding: clamp(3.5rem,8vh,6rem) 1.5rem clamp(4rem,14vh,9rem); text-align: center; will-change: transform, opacity; } #b-tag { display: block; font-family: var(--f-stencil); font-size: clamp(.62rem,1vw,.74rem); letter-spacing: .28em; text-transform: uppercase; color: var(--blood); margin-bottom: 1rem; } #b-title { font-family: var(--f-display); font-size: clamp(3rem,9vw,8rem); letter-spacing: .01em; line-height: .9; text-transform: uppercase; color: var(--bone); margin-bottom: 1.8rem; } .b-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } #b-can-wrap { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 3; } #b-can { height: clamp(300px,72vh,660px); width: auto; display: block; transform-origin: center center; will-change: transform; filter: drop-shadow(0 20px 60px rgba(184,115,51,.42)) drop-shadow(0 0 100px rgba(184,115,51,.2)); } #b-marquee-wrap { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); overflow: hidden; pointer-events: none; z-index: 2; } #b-marquee-inner { display: flex; align-items: center; white-space: nowrap; width: max-content; will-change: transform; } .b-m-text { font-family: var(--f-display); font-size: clamp(3.5rem,7vw,7.5rem); color: transparent; -webkit-text-stroke: 1.5px rgba(184,115,51,.5); padding: 0 2.5rem; user-select: none; line-height: 1.2; text-transform: uppercase; } /* ---- Actus / News ---- */ .news-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); } .news-card { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--line-strong); overflow: hidden; transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .news-card:hover { transform: translate(-3px,-3px); border-color: var(--bone); box-shadow: var(--hard-red); } .news-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; border-bottom: 2px solid var(--line-strong); } .news-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); transition: transform .5s var(--ease), filter var(--t); } .news-card:hover .news-thumb img { transform: scale(1.05); filter: none; } .news-body { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; } .news-meta { display: flex; align-items: center; gap: .8rem; } .news-meta time { font-family: var(--f-type); font-size: .76rem; color: var(--ash); } .news-card h3 { font-family: var(--f-display); font-size: 1.5rem; text-transform: uppercase; color: var(--bone); line-height: 1; } .news-more { margin-top: .3rem; } .news-more summary { font-family: var(--f-stencil); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blood-hi); cursor: pointer; } .news-more p { margin-top: .6rem; font-size: .95rem; color: var(--text-muted); } /* ── Page claire (fond papier) : Actus ────────────────────────────── Bascule toute la page sur le fond clair de la charte. Réversible : retirer la classe `paper-page` du de news.html. ── */ /* Fond papier + grille de points, identique aux sections claires de la LP. */ body.paper-page { color: #1a1714; background-color: var(--paper); background-image: radial-gradient(rgba(0,0,0,.10) 1.1px, transparent 1.2px); background-size: 9px 9px; } /* Sur fond clair, le grain et les scanlines passeraient par-dessus le texte et nuiraient à la lisibilité (surtout en petit) : on les atténue fortement. */ body.paper-page::before { opacity: .12; } body.paper-page::after { opacity: .04; } /* Nav : texte clair conservé, donc fond sombre permanent (contraste sur fond clair) */ .paper-page .nav { background: rgba(11,10,9,.94); backdrop-filter: blur(6px); border-bottom-color: var(--blood); } /* Écritures sur fond clair (teintes foncées et bien contrastées) */ .paper-page h1, .paper-page h2, .paper-page h3 { color: #120f0c; } .paper-page .lead { color: #241f18; } .paper-page .muted { color: #453d30; } .paper-page .eyebrow { color: var(--blood); } .paper-page .eyebrow::before, .paper-page .eyebrow::after { color: var(--blood); } .paper-page .page-head .display { text-shadow: 3px 3px 0 rgba(184,115,51,.16); } .paper-page .page-head::before { background: radial-gradient(ellipse at 50% 0%, rgba(184,115,51,.18), transparent 60%); } .paper-page .page-head::after { -webkit-text-stroke: 2px rgba(14,14,14,.05); } /* Les cartes actus gardent leur style sombre par défaut (comme l'aperçu sur la LP). */ /* ---- FAQ ---- */ .faq { max-width: 820px; margin-inline: auto; } .faq-group { margin-bottom: var(--s-4); } .faq-cat { font-family: var(--f-stencil); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blood); padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 2px solid var(--line-strong); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem .2rem; font-family: var(--f-body); font-weight: 500; font-size: 1.05rem; color: var(--bone); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { width: 20px; height: 20px; color: var(--blood); flex: none; transition: transform .3s var(--ease); } .faq-item[open] summary svg { transform: rotate(180deg); color: var(--blood-hi); } .faq-item[open] summary { color: var(--blood-hi); } .faq-a { padding: 0 .2rem 1.1rem; } .faq-a p { color: var(--text-muted); max-width: 70ch; opacity: 0; transform: translateY(-7px); transition: opacity .32s var(--ease), transform .32s var(--ease); } .faq-item[open] .faq-a p { opacity: 1; transform: none; } /* Ouverture animee, pilotee par le navigateur via ::details-content. Remplace une animation de hauteur en JavaScript qui ne fonctionnait plus : Chrome pose content-visibility: hidden sur le contenu d'un
ferme, si bien que la hauteur etait bien interpolee mais le contenu restait masque jusqu'au bout, d'ou une pause d'environ 350 ms suivie d'un a-coup. Les etats reposent sur [open] et non sur une classe posee en script : les reponses s'affichent donc meme sans JavaScript, ce qui n'etait pas le cas. Les navigateurs sans ::details-content ouvrent sans animation, ce qui reste correct et accessible. */ @supports selector(::details-content) { .faq { interpolate-size: allow-keywords; } .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .34s var(--ease), content-visibility .34s allow-discrete; } .faq-item[open]::details-content { block-size: auto; } } @media (prefers-reduced-motion: reduce) { .faq-a p { opacity: 1; transform: none; } .faq-item::details-content { transition: none; } } /* ---- Formulaires ---- */ .form { display: grid; gap: 1rem; max-width: 560px; } .form.wide { max-width: 720px; } .field { display: flex; flex-direction: column; gap: .4rem; } .field label { font-family: var(--f-stencil); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blood-hi); } .field input, .field textarea, .field select { background: var(--void); border: 2px solid var(--line-strong); color: var(--bone); border-radius: 0; padding: .85rem 1rem; font-family: var(--f-body); font-size: 1rem; width: 100%; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--blood); outline-offset: 0; } .field [aria-invalid="true"] { border-color: var(--blood-hi); } .form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } } .form-msg { min-height: 1.3em; font-family: var(--f-type); font-size: .9rem; } .form-msg.ok { color: var(--amber); } .form-msg.no { color: var(--blood-hi); } .inline-form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 520px; } .inline-form input { flex: 1; min-width: 220px; background: var(--void); border: 2px solid var(--line-strong); color: var(--bone); padding: .85rem 1rem; font-family: var(--f-body); } .inline-form input:focus-visible { border-color: var(--blood); outline-offset: 0; } /* ---- Produit : badge prix/format, cartes produit ---- */ .product-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; background: var(--surface); border: 2px solid var(--line-strong); padding: clamp(1.5rem,4vw,2.5rem); } .product-card.rev .product-media { order: 2; } .product-media { display: grid; place-items: center; } .product-media img { max-height: 360px; width: auto; filter: drop-shadow(0 20px 50px rgba(184,115,51,.3)); } .product-card .tag-line { font-family: var(--f-stencil); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blood); } .product-card h3 { font-size: clamp(1.6rem,3.5vw,2.4rem); margin: .4rem 0 .8rem; } .spec-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.4rem; } .spec-list li { font-family: var(--f-stencil); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bone); border: 1.5px solid var(--line-strong); padding: .3rem .6rem; } @media (max-width: 640px){ .product-card { grid-template-columns: 1fr; } .product-card.rev .product-media { order: 0; } } /* ---- Ruban DLUO / mention ---- */ .legal-strip { font-family: var(--f-type); font-size: .82rem; color: var(--ash); border: 1px dashed var(--line-strong); padding: 1rem 1.2rem; } /* ---- Tableau nutritionnel ---- */ .nutri { width: 100%; border-collapse: collapse; font-size: .95rem; } .nutri th, .nutri td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; } .nutri thead th { font-family: var(--f-stencil); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blood-hi); } .nutri td.tnum, .nutri th.tnum { text-align: right; font-variant-numeric: tabular-nums; } .nutri tbody tr:hover { background: rgba(184,115,51,.06); } /* ---- Scène scroll : ingrédients autour de la canette ---- */ .ing-scene { position: relative; height: 230vh; } .ing-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: linear-gradient(135deg, #2a1d10, #0E0E0E 72%); } .ing-stage { position: relative; width: min(100% - 2.5rem, 1180px); height: 100%; margin-inline: auto; } .ing-head { position: absolute; top: clamp(3.5rem, 9vh, 6rem); left: 50%; transform: translateX(-50%); width: min(100%, 42ch); text-align: center; z-index: 4; } .ing-head .h2 { font-size: clamp(1.8rem, 4vw, 3rem); } .ing-can { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%) scale(.86); height: clamp(300px, 60vh, 640px); width: auto; opacity: .15; z-index: 2; pointer-events: none; filter: drop-shadow(0 20px 60px rgba(184,115,51,.45)) drop-shadow(0 0 90px rgba(184,115,51,.22)); will-change: transform, opacity; /* couche composée : évite la re-rasterisation du drop-shadow à chaque frame */ } .ing-card { position: absolute; width: clamp(178px, 18vw, 226px); z-index: 3; background: rgba(18,16,14,.86); border: 2px solid var(--line-strong); padding: .95rem 1.1rem; opacity: var(--p, 0); transform: translate(calc(var(--fx,0px) * (1 - var(--p,0))), calc(var(--fy,0px) * (1 - var(--p,0)))) scale(calc(.8 + .2 * var(--p,0))); box-shadow: 0 14px 34px rgba(0,0,0,.5); } .ing-card .ic-k { font-family: var(--f-stencil); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blood-hi); display: block; } .ing-card strong { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--bone); display: block; line-height: 1; margin: .25rem 0 .35rem; text-transform: uppercase; font-weight: 400; } .ing-card .ic-d { font-size: .82rem; color: var(--text-muted); line-height: 1.4; display: block; } .ing-hint { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; z-index: 4; font-family: var(--f-stencil); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); } .ing-scene.ing-static .ing-hint { display: none; } /* Repli mobile / reduced-motion : empilé, tout visible */ .ing-scene.ing-static { height: auto; } .ing-scene.ing-static .ing-pin { position: static; height: auto; overflow: visible; padding: clamp(3.5rem,9vw,5.5rem) 0; } .ing-scene.ing-static .ing-stage { height: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .ing-scene.ing-static .ing-head { position: static; transform: none; margin-bottom: 1.4rem; } .ing-scene.ing-static .ing-can { position: static; transform: none !important; opacity: 1 !important; height: clamp(300px, 68vw, 460px); margin: 0 auto 1.6rem; } .ing-scene.ing-static .ing-card { position: static; transform: none !important; opacity: 1 !important; width: min(100%, 420px); } /* ---- Logos placés judicieusement ---- */ /* Emblème cuivre, au-dessus du manifeste (fond dégradé sombre = lisible) */ .manifeste-mark { display: block; height: clamp(72px, 9vw, 116px); width: auto; margin: 0 auto 1.6rem; filter: drop-shadow(0 12px 34px rgba(184,115,51,.32)); } /* Pick-up emblématique, clin d'œil dans les sections CTA */ .cta-pickup { display: block; width: clamp(220px, 34vw, 340px); height: auto; margin: 0 auto 1.4rem; filter: drop-shadow(0 16px 40px rgba(184,115,51,.4)); } /* ── Pages légales (mentions légales, confidentialité) ────────────── Texte dense : on réduit la très grosse police d'affichage pour la lisibilité. */ .legal-page .display { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; } .legal-page .h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; margin: 2.2rem 0 .5rem; } .legal-page main p, .legal-page main li { font-family: var(--f-body); font-size: .98rem; line-height: 1.7; } .legal-page main ul { padding-left: 1.25rem; margin: .4rem 0 1rem; } .legal-page main li { margin-bottom: .35rem; } /* ═══════════════════════════════════════════════════════════════════ SECTION « PRODUITS » : MASQUÉE TEMPORAIREMENT (décision équipe) Pour la RÉACTIVER : supprimer tout ce bloc. La page products.html et son contenu sont conservés intacts (retrait/retour sans effort). Les sélecteurs suivent l'URL propre /produits/ : avec l'ancienne forme products.html, plus rien n'était masqué. ═══════════════════════════════════════════════════════════════════ */ .nav-links li:has(a[href="/produits/"]), .footer a[href="/produits/"], .hero-cta a[href="/produits/"], #produits-teaser { display: none !important; } /* ── Manifeste (accueil) : emblème filigrane + point focal cuivre ─────── */ .manifeste { position: relative; overflow: hidden; background: radial-gradient(120% 78% at 50% 30%, rgba(184, 115, 51, 0.16), transparent 62%), linear-gradient(135deg, #2a1d10, #0e0e0e 72%); } /* Le logo de la maison devient un sceau géant estampé en fond (pas un doublon de la nav). */ .manifeste-crest { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(82%, 760px); height: auto; opacity: 0.045; z-index: 0; pointer-events: none; user-select: none; } .manifeste .pull { position: relative; z-index: 1; max-width: 860px; } /* Citation moins écrasante + phrase-clé en cuivre */ .manifeste blockquote { font-size: clamp(1.45rem, 3vw, 2.5rem); line-height: 1.16; } .manifeste blockquote em { font-style: normal; color: var(--blood-hi); } .manifeste .pull blockquote::before, .manifeste .pull blockquote::after { opacity: 0.6; } /* Filet cuivre entre la citation et le texte d'appui */ .manifeste .lead { position: relative; padding-top: 2rem; } .manifeste .lead::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 72px; height: 2px; background: linear-gradient(90deg, transparent, var(--blood) 25%, var(--blood) 75%, transparent); } /* ── Le code de la maison (accueil) : les quatre règles distillées sous le manifeste. Numéraux romains fantômes, colonnes séparées de filets, une seule signature pour toute la section. ── */ .house-code { max-width: 1080px; margin: clamp(3rem, 7vw, 4.5rem) auto 0; } .house-code-label { display: flex; align-items: center; gap: 1.1rem; justify-content: center; font-family: var(--f-stencil); font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blood); } .house-code-label::before, .house-code-label::after { content: ""; width: clamp(40px, 8vw, 110px); height: 2px; background: linear-gradient(90deg, transparent, var(--blood)); } .house-code-label::after { background: linear-gradient(90deg, var(--blood), transparent); } .hc-grid { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); } .hc { position: relative; padding: 0.4rem clamp(1.1rem, 2.5vw, 1.9rem) 0.6rem; } .hc + .hc { border-left: 1px solid var(--line); } /* Numéral romain fantôme, en contour (même esprit que les chapitres beverage) */ .hc-no { display: block; font-family: var(--f-display); font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(184, 115, 51, 0.5); margin-bottom: 0.55rem; user-select: none; transition: -webkit-text-stroke-color var(--t); } @supports not (-webkit-text-stroke: 1px black) { .hc-no { color: rgba(184, 115, 51, 0.28); } } .hc h3 { font-size: 1.06rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 0.5rem; transition: color var(--t); } .hc p { font-family: var(--f-type); font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; } .hc:hover .hc-no { -webkit-text-stroke-color: var(--blood-hi); } .hc:hover h3 { color: var(--blood-hi); } .house-code-note { margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: 1.4rem; border-top: 1px solid var(--line); text-align: center; font-family: var(--f-type); font-size: 0.9rem; color: var(--ash); } .house-code-note cite { display: block; margin-top: 0.7rem; font-family: var(--f-stencil); font-style: normal; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blood); } @media (max-width: 960px) { .hc-grid { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; } .hc:nth-child(3) { border-left: none; } } @media (max-width: 560px) { .hc-grid { grid-template-columns: 1fr; } .hc + .hc { border-left: none; border-top: 1px solid var(--line); padding-top: 1.3rem; } } /* ── La première gorgée (accueil) : le teaser sensoriel de la boisson. Carte de dégustation façon menu de bar clandestin (pointillés, coins estampés), étiquette verticale sur la photo, signature typewriter. ── */ .gorgee .h2 em { font-style: normal; color: var(--blood-hi); } .img-label { position: absolute; top: 50%; right: -1.05rem; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--f-stencil); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blood); white-space: nowrap; pointer-events: none; user-select: none; } .deg-card { position: relative; margin: 1.7rem 0 1.4rem; padding: 1.15rem 1.35rem 1.3rem; background: linear-gradient(165deg, rgba(184, 115, 51, 0.08), transparent 55%), var(--surface); border: 2px solid var(--line-strong); } .deg-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 115, 51, 0.28); pointer-events: none; } /* Coins cuivrés estampés (un L par angle) */ .deg-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-image: linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)); background-position: left 3px top 3px, left 3px top 3px, right 3px top 3px, right 3px top 3px, left 3px bottom 3px, left 3px bottom 3px, right 3px bottom 3px, right 3px bottom 3px; background-size: 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px; } .deg-title { display: block; font-family: var(--f-stencil); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blood); margin-bottom: 0.75rem; } .deg-row { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.42rem 0; } .deg-l { flex: none; font-family: var(--f-body); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); } .deg-dots { flex: 1; min-width: 30px; border-bottom: 2px dotted rgba(184, 115, 51, 0.38); transform: translateY(-4px); } .deg-v { flex: none; max-width: 58%; font-family: var(--f-type); font-size: 0.86rem; color: var(--text-muted); text-align: right; } .sig-line { font-family: var(--f-type); font-style: italic; font-size: 0.92rem; color: var(--ash); margin-bottom: 1.5rem; } @media (max-width: 560px) { .img-label { display: none; } .deg-row { flex-wrap: wrap; } .deg-v { max-width: 100%; text-align: left; } } /* ── Formats (page « La boisson ») : face-à-face visuel canette / PET ──── */ .format-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); } .format-card { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; } .format-card img { height: clamp(240px, 30vw, 360px); width: auto; filter: drop-shadow(0 26px 44px rgba(20, 12, 4, 0.4)); transition: transform 0.5s var(--ease); } .format-card:hover img { transform: translateY(-6px) scale(1.02); } .format-card figcaption { max-width: 40ch; } .format-card .fc-k { font-family: var(--f-stencil); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blood); display: block; } .format-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.05; color: #120f0c; margin: 0.35rem 0 0.6rem; } .format-card p { color: #4a4038; line-height: 1.6; } @media (max-width: 720px) { .format-cards { grid-template-columns: 1fr; } } /* ── Storytelling (page « La boisson ») : chapitres illustrés, façon éditorial. Photo encadrée cuivre + numéro fantôme en contour. ── */ .story-flow { display: grid; gap: clamp(3.5rem, 9vw, 6.5rem); } .story-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .story-row.rev .story-media { order: 2; } .story-media { position: relative; margin: 0; } .story-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--bone); } .story-text { position: relative; max-width: 52ch; } /* Numéro de chapitre géant, en contour cuivre (esprit affiche Prohibition) */ .story-ghost { position: absolute; top: -0.5em; right: -0.05em; z-index: 0; font-family: var(--f-display); font-size: clamp(5rem, 11vw, 8.5rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(184, 115, 51, 0.32); pointer-events: none; user-select: none; } @supports not (-webkit-text-stroke: 1px black) { .story-ghost { color: rgba(184, 115, 51, 0.09); } } .story-kicker { position: relative; z-index: 1; font-family: var(--f-stencil); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blood); display: block; } .story-text h2 { position: relative; z-index: 1; font-size: clamp(1.7rem, 3.6vw, 2.7rem); text-transform: uppercase; margin: 0.5rem 0 0.9rem; padding-bottom: 0.85rem; } .story-text h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 56px; height: 2px; background: linear-gradient(90deg, var(--blood), transparent); } .story-text p { position: relative; z-index: 1; font-family: var(--f-type); color: var(--text-muted); line-height: 1.8; } @media (max-width: 760px) { .story-row { grid-template-columns: 1fr; } .story-row.rev .story-media { order: 0; } .story-ghost { font-size: 4.5rem; } } /* ── Scène ingrédients : halo, connecteurs et cartes plus travaillées ─── */ .ing-stage::before { content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(58vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(184, 115, 51, 0.2), transparent 66%); z-index: 1; pointer-events: none; } .ing-card { /* Pas de backdrop-filter ici : trop coûteux pendant l'animation au scroll. */ background: rgba(16, 13, 10, 0.88); will-change: transform, opacity; } /* Coin cuivré façon étiquette d'archive */ .ing-card::before { content: ""; position: absolute; top: -2px; width: 16px; height: 16px; border-top: 2px solid var(--blood); } .ing-card.ing-l::before { left: -2px; border-left: 2px solid var(--blood); } .ing-card.ing-r::before { right: -2px; border-right: 2px solid var(--blood); } /* Filet reliant chaque carte à la canette, révélé avec la carte */ .ing-card::after { content: ""; position: absolute; top: 50%; width: clamp(36px, 6vw, 96px); height: 1px; opacity: calc(var(--p, 0) * 0.65); } .ing-card.ing-l::after { left: 100%; background: linear-gradient(90deg, var(--blood-hi), transparent); } .ing-card.ing-r::after { right: 100%; background: linear-gradient(270deg, var(--blood-hi), transparent); } .ing-scene.ing-static .ing-card::before, .ing-scene.ing-static .ing-card::after, .ing-scene.ing-static .ing-stage::before { display: none; } /* ── FAQ : pick-up emblème en noir et blanc dans le haut de page, à la place du « GANGSTAR » écrit en fond (masqué ci-dessous). ── */ .page-head:has(.faq-crest)::after { content: none; } .faq-crest { position: absolute; top: 60%; right: -4%; transform: translateY(-50%) rotate(-5deg); width: min(108%, 1050px); height: auto; opacity: 0.15; z-index: 0; filter: grayscale(1); pointer-events: none; user-select: none; } /* ── Scroll fluide (Lenis) ────────────────────────────────────────── Repli natif pour les ancres quand Lenis est inactif (reduced-motion) ; quand Lenis tourne, il ajoute .lenis-smooth qui reprend la main. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- 25. Cocktails : co-branding, partenaire, fiches recette ---------- Motif dédié à la page cocktails. Trois principes tiennent la mise en page : 1. tout est visible sans JavaScript, ingrédients et préparation compris. C'est l'objectif SEO/GEO de la page, et les mentions sanitaires ne peuvent pas dépendre d'un clic ; 2. chaque recette est un
autonome, prêt à devenir une page ; 3. la photo est optionnelle : tant qu'elle manque, un cadre tient la place sans casser le rythme. */ /* Verrou sans JavaScript : .reveal reste à opacity 0 tant que main.js n'a pas posé .in, ce qui rend les mentions sanitaires invisibles sans JS. Le repli ne peut pas passer par une classe posée en script inline : la CSP du site impose script-src 'self'. Il vit donc dans un