/* ============================================================ MICHELBATLLE.ART — Styles partagés maquette Import du design system + styles de mise en page ============================================================ */ @import url('tokens.css'); /* ── Reset minimal ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', 'Noto Sans JP', sans-serif; background: var(--color-bg-page); color: var(--color-text-primary); line-height: 1.65; opacity: 0; animation: fadeIn var(--duration-slower) var(--ease-out) forwards; } /* ============================================================ I18N — Affichage par langue (FR / EN / JA) Le pilote la visibilité des variantes [data-lang] ============================================================ */ [data-lang] { } html[lang="fr"] [data-lang]:not([data-lang~="fr"]), html[lang="en"] [data-lang]:not([data-lang~="en"]), html[lang="ja"] [data-lang]:not([data-lang~="ja"]) { display: none !important; } /* Japonais : Noto Sans JP prioritaire pour un rendu net des glyphes */ html[lang="ja"] body, html[lang="ja"] .body-fr, html[lang="ja"] .body-en, html[lang="ja"] .lead, html[lang="ja"] .heading-s, html[lang="ja"] .heading-m, html[lang="ja"] .heading-l, html[lang="ja"] .heading-xl { font-family: 'Noto Sans JP', 'Poppins', sans-serif; } html[lang="ja"] .body-en { font-weight: 300; } /* Évite le clignotement avant l'init JS : on cache EN/JA tant que n'a pas de lang défini */ html:not([lang]) [data-lang]:not([data-lang~="fr"]) { display: none !important; } img { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: inherit; } @keyframes fadeIn { to { opacity: 1; } } /* ── Skip link ── */ .skip-link { position: absolute; top: -100px; left: var(--space-4); background: var(--color-brand); color: white; padding: var(--space-2) var(--space-4); z-index: var(--z-loader); font-weight: 600; } .skip-link:focus { top: var(--space-4); } /* ── Page Loader ── */ .page-loader { position: fixed; inset: 0; background: var(--color-bg-black); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: var(--z-loader); transition: opacity var(--duration-slow) var(--ease-out); } .page-loader.is-done { opacity: 0; pointer-events: none; } .page-loader__logo { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1rem; letter-spacing: 0.2em; color: white; text-transform: lowercase; margin-bottom: var(--space-6); } .page-loader__bar { width: 160px; height: 1px; background: var(--color-gray-800); position: relative; overflow: hidden; } .page-loader__bar::after { content: ''; position: absolute; inset-block: 0; left: -100%; width: 100%; background: var(--color-brand); animation: loaderBar var(--duration-slow) var(--ease-out) forwards; } @keyframes loaderBar { to { left: 0; } } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); display: flex; align-items: center; padding: 0 var(--space-10); z-index: var(--z-nav); transition: background var(--duration-normal) var(--ease-out); } .nav--transparent, .nav--dark { background: var(--color-bg-dark); } .nav--light { background: var(--color-bg-page); box-shadow: 0 1px 0 var(--color-border); } /* ── Logo de marque (lockup) ── */ .brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: auto; } .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--color-brand); color: #fff; font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 1.0625rem; letter-spacing: 0.01em; line-height: 1; flex-shrink: 0; } .brand__name { display: flex; flex-direction: column; line-height: 1; } .brand__line1 { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; } .brand__line2 { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; margin-top: 3px; } .nav--dark .brand__line1, .nav--transparent .brand__line1 { color: #fff; } .nav--dark .brand__line2, .nav--transparent .brand__line2 { color: rgba(255,255,255,0.55); } .nav--light .brand__line1 { color: var(--color-text-primary); } .nav--light .brand__line2 { color: var(--color-gray-600); } .brand:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; } /* Legacy : conserve le rendu du logo loader / footer (texte simple) */ .nav__logo { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: lowercase; margin-right: auto; } .nav--dark .nav__logo, .nav--transparent .nav__logo { color: white; } .nav--light .nav__logo { color: var(--color-text-primary); } .nav__links { display: flex; list-style: none; gap: var(--space-8); margin-right: var(--space-8); } .nav__link { font-family: 'Poppins', sans-serif; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color var(--duration-fast), color var(--duration-fast); } .nav--dark .nav__link, .nav--transparent .nav__link { color: rgba(255,255,255,0.85); } .nav--light .nav__link { color: var(--color-text-primary); } .nav__link:hover { border-bottom-color: var(--color-brand); } .nav__link[aria-current="page"] { color: var(--color-brand); border-bottom-color: var(--color-brand); } .nav__link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .lang-switcher { display: flex; align-items: center; gap: var(--space-2); } .lang-switcher__btn { font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); transition: color var(--duration-fast); } .lang-switcher__btn.is-active { color: white; } .lang-switcher__btn:hover { color: white; } .nav--light .lang-switcher__btn { color: var(--color-gray-500); } .nav--light .lang-switcher__btn.is-active { color: var(--color-text-primary); } .lang-switcher__separator { color: rgba(255,255,255,0.2); font-size: 0.75rem; } .nav--light .lang-switcher__separator { color: var(--color-border); } /* ── Hamburger mobile ── */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); margin-left: var(--space-4); } .nav__hamburger span { width: 24px; height: 2px; background: white; display: block; transition: transform var(--duration-normal); } /* ── Container & Grid ── */ .container { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-20); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); } .col-span-half { grid-column: span 6; } .col-span-third { grid-column: span 4; } .col-span-two-thirds { grid-column: span 8; } /* ── Sections ── */ .section { padding: var(--space-24) 0; } .section--white { background: var(--color-bg-page); } .section--gray { background: var(--color-bg-section); } .section--dark { background: var(--color-bg-dark); } .section--black { background: var(--color-bg-black); } .section--accent { background: var(--color-bg-accent); } .section--sm { padding: var(--space-16) 0; } .section--lg { padding: var(--space-40) 0; } /* ── Typographie ── */ .display-xl { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(5rem, 10vw, 9rem); line-height: 1.05; letter-spacing: -0.02em; } .display-l { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(3.5rem, 6vw, 6rem); line-height: 1.05; letter-spacing: -0.02em; } .display-m { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.2; letter-spacing: -0.02em; } .heading-xl { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.2; } .heading-l { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.2; } .heading-m { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.25rem; line-height: 1.4; } .heading-s { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.4; } .lead { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 1.65; } .body-fr { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.65; } .body-en { font-family: 'Poppins', sans-serif; font-weight: 200; font-size: 1rem; line-height: 1.65; } .pullquote { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; } .caption-title { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.4; } .caption-detail { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.75rem; line-height: 1.4; } .caption-meta { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.6875rem; line-height: 1.4; } .nav-label { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; } .text-inverse { color: var(--color-text-inverse); } .text-accent { color: var(--color-brand); } .text-secondary { color: var(--color-text-secondary); } .text-caption { color: var(--color-text-caption); } /* ── Hero (base) ── */ .hero { position: relative; overflow: hidden; } .hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; /* au-dessus du fond noir de .hero (tokens), sous le voile/texte */ } /* Voile dégradé allégé : assombrit gauche+bas pour le texte, laisse l'image vivante à droite/haut */ .hero__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(12,12,12,0.72) 0%, rgba(12,12,12,0.28) 48%, rgba(12,12,12,0) 100%), linear-gradient(0deg, rgba(12,12,12,0.55) 0%, rgba(12,12,12,0) 42%), linear-gradient(180deg, rgba(12,12,12,0.30) 0%, rgba(12,12,12,0) 22%); } /* Ken Burns : zoom lent et continu pour rendre les héros vivants */ @keyframes kenburns-soft { from { transform: scale(1.005); } to { transform: scale(1.09); } } .hero--page .hero__bg-image, .hero--cover .hero__bg-image { transform-origin: 60% 40%; animation: kenburns-soft 24s ease-in-out infinite alternate; will-change: transform; } /* Accueil : ancre le zoom vers le haut pour ne pas couper la tête */ .hero--cover .hero__bg-image { transform-origin: center 22%; } .hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 0; } /* ── Hero page intérieure (unifié sur toutes les pages) ── */ .hero--page { min-height: 70vh; display: flex; align-items: flex-end; } .hero--page .hero__content { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--nav-height) + var(--space-16)); padding-bottom: var(--space-16); text-align: left; } .hero__accent { width: 56px; height: 6px; background: var(--color-brand); margin-bottom: var(--space-6); } .hero__sub { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); margin-top: var(--space-4); max-width: 52ch; } .hero__kicker { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-4); } /* ── Hero accueil (split — corrige l'overflow vertical) ── */ .hero--home { display: grid; grid-template-columns: 1.05fr 1fr; height: 100vh; min-height: 600px; align-items: stretch; } .hero__left { background: var(--color-bg-black); display: flex; flex-direction: column; justify-content: center; padding: var(--space-16) clamp(2rem, 5vw, 5rem); padding-top: var(--nav-height); overflow: hidden; } .hero__home-title { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(3.25rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; color: #fff; margin-bottom: var(--space-6); } .hero__right { position: relative; overflow: hidden; } .hero__right img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ── Hero accueil — plein écran, diaporama d'œuvres ── */ .hero--cover { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; } .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity 1.6s var(--ease-out); } .hero-slide.is-active { opacity: 1; animation: kenburns 8s ease-out both; } @keyframes kenburns { from { transform: scale(1.005); } to { transform: scale(1.10); } } .hero-cover__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(12,12,12,0.80) 0%, rgba(12,12,12,0.40) 45%, rgba(12,12,12,0.10) 100%), linear-gradient(0deg, rgba(12,12,12,0.70) 0%, rgba(12,12,12,0) 50%), linear-gradient(180deg, rgba(12,12,12,0.45) 0%, rgba(12,12,12,0) 22%); } .hero-cover__content { position: relative; z-index: 1; width: 100%; padding-top: var(--nav-height); padding-bottom: clamp(3rem, 8vh, 6rem); } .hero-cover__title { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(3rem, 11vw, 9rem); line-height: 0.92; letter-spacing: -0.02em; color: #fff; margin-bottom: var(--space-6); } .hero-cover__tagline { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.375rem); color: rgba(255,255,255,0.82); max-width: 46ch; margin-bottom: var(--space-10); } .hero-cover__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; } .hero-cover__scroll { position: absolute; z-index: 1; bottom: var(--space-6); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: rgba(255,255,255,0.6); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.625rem; letter-spacing: 0.25em; text-transform: uppercase; } .hero-cover__scroll::after { content: ''; width: 1px; height: 36px; background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0)); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } /* ── Statement (accroche éditoriale) ── */ .statement { max-width: 1000px; } .statement__line { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-primary); } .statement__line .accent { color: var(--color-brand); } /* ── Portails (portes d'entrée vers les pages) ── */ .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .portal { position: relative; display: block; overflow: hidden; aspect-ratio: 16/10; background: var(--color-bg-black); } .portal__media { position: absolute; inset: 0; } .portal__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); } .portal:hover .portal__media img, .portal:focus-visible .portal__media img { transform: scale(1.06); } .portal__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,12,12,0.88) 0%, rgba(12,12,12,0.30) 55%, rgba(12,12,12,0.05) 100%); transition: background 0.4s var(--ease-out); } .portal:hover .portal__scrim { background: linear-gradient(0deg, rgba(12,12,12,0.90) 0%, rgba(12,12,12,0.35) 70%, rgba(12,12,12,0.15) 100%); } .portal__body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 3vw, 2.75rem); color: #fff; } .portal__num { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 0.875rem; letter-spacing: 0.1em; color: var(--color-brand); margin-bottom: var(--space-3); } .portal__title { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -0.01em; color: #fff; margin-bottom: var(--space-3); } .portal__teaser { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.9375rem; line-height: 1.5; color: rgba(255,255,255,0.8); max-width: 38ch; margin-bottom: var(--space-4); } .portal__link { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: var(--space-2); } .portal__link::after { content: '→'; transition: transform 0.3s var(--ease-out); } .portal:hover .portal__link::after { transform: translateX(6px); } .portal::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 2; height: 4px; width: 0; background: var(--color-brand); transition: width 0.45s var(--ease-out); } .portal:hover::after, .portal:focus-visible::after { width: 100%; } .portal:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; } /* Bande CTA contact (accueil) */ .home-cta { text-align: center; } .home-cta__title { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: var(--space-4); } /* ── Accent strip ── */ .accent-strip { width: 100%; height: 6px; background: var(--color-brand); } /* ── Artwork Grid ── */ .artwork-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .artwork-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } /* ── Artwork Card ── */ .artwork-card { cursor: pointer; transition: transform var(--duration-slow) var(--ease-out); } .artwork-card:hover { transform: scale(1.03); } .artwork-card:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .artwork-card__image-wrap { overflow: hidden; position: relative; } .aspect-4-3 { aspect-ratio: 4/3; } .aspect-3-4 { aspect-ratio: 3/4; } .aspect-1-1 { aspect-ratio: 1/1; } .aspect-16-9 { aspect-ratio: 16/9; } .artwork-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); display: block; } .artwork-card:hover .artwork-card__image { transform: scale(1.05); } .artwork-card__caption { padding: var(--space-3) 0 var(--space-4); } .artwork-card__title { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--color-text-primary); margin-bottom: 2px; } .artwork-card__detail { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.75rem; color: var(--color-text-label); } /* ── Pullquote ── */ .pullquote-block { max-width: 820px; margin: 0 auto; text-align: center; padding: var(--space-16) var(--space-10); } .pullquote-block__glyph { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 5rem; line-height: 1; color: var(--color-brand); display: block; margin-bottom: var(--space-4); } .pullquote-block__text { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text-inverse); margin-bottom: var(--space-6); } .pullquote-block__author { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); font-style: normal; } .pullquote-block__role { display: block; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.75rem; color: var(--color-gray-600); margin-top: var(--space-1); } /* ── Bilingue ── */ .bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } .bilingual__label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-4); } .bilingual__fr p { font-weight: 400; font-size: 1rem; line-height: 1.75; max-width: 65ch; } .bilingual__en p { font-weight: 200; font-size: 1rem; line-height: 1.75; max-width: 65ch; color: var(--color-text-label); } /* ── Tabs ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-12); } .tab-btn { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-4) var(--space-8); color: var(--color-text-label); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast), border-color var(--duration-fast); } .tab-btn:hover { color: var(--color-text-primary); } .tab-btn[aria-selected="true"] { color: var(--color-text-primary); border-bottom-color: var(--color-brand); } .tab-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* ── Timeline ── */ .timeline { display: flex; flex-direction: column; gap: var(--space-2); } .timeline-year-group { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-8); align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); } .timeline__year { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 1.25rem; color: var(--color-brand); } .timeline__events { display: flex; flex-direction: column; gap: var(--space-2); } .timeline__event { font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-primary); } /* ── Frise chronologique (Expositions) ── */ .frieze { position: relative; margin-top: var(--space-8); padding-left: clamp(70px, 12vw, 150px); } /* Colonne verticale rouge dégradée = épine de la frise */ .frieze::before { content: ''; position: absolute; left: clamp(58px, 11vw, 132px); top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand) 70%, rgba(232,0,41,0.15) 100%); } .frieze__item { position: relative; padding: 0 0 var(--space-12) 0; } .frieze__item:last-child { padding-bottom: 0; } /* Nœud (point) sur l'épine */ .frieze__item::before { content: ''; position: absolute; left: calc(clamp(58px, 11vw, 132px) - clamp(70px, 12vw, 150px) - 4px); top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-bg-page); border: 2px solid var(--color-brand); transition: background var(--duration-fast), transform var(--duration-fast); z-index: 1; } .frieze__item:hover::before { background: var(--color-brand); transform: scale(1.25); } /* Année — grand chiffre Barlow */ .frieze__year { position: absolute; left: calc((clamp(70px, 12vw, 150px)) * -1); top: -4px; width: clamp(52px, 10vw, 116px); text-align: right; padding-right: var(--space-6); font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1; color: var(--color-text-primary); letter-spacing: -0.01em; } .frieze__item:hover .frieze__year { color: var(--color-brand); } .frieze__events { display: flex; flex-direction: column; gap: var(--space-3); } .frieze__event { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-primary); } .frieze__event .frieze__place { display: block; font-weight: 300; font-size: 0.8125rem; color: var(--color-text-label); margin-top: 1px; } /* Repère de décennie */ .frieze__decade { position: relative; margin: 0 0 var(--space-10) 0; padding: 0; } .frieze__decade-label { position: absolute; left: calc((clamp(70px, 12vw, 150px)) * -1); top: -10px; font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; color: var(--color-gray-200); letter-spacing: -0.03em; user-select: none; } /* ── Frise interactive (master / détail) ── */ .frieze2 { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: var(--space-8); } .frieze2__years { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; padding-right: var(--space-2); } .frieze2__year { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: baseline; width: 100%; text-align: left; padding: var(--space-4) 0 var(--space-4) 0; border-top: 1px solid var(--color-border); background: none; transition: padding-left var(--duration-fast) var(--ease-out), color var(--duration-fast); } .frieze2__years .frieze2__year:last-child { border-bottom: 1px solid var(--color-border); } .frieze2__year::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background: var(--color-brand); transition: width var(--duration-fast) var(--ease-out); } .frieze2__year .yr { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; color: var(--color-text-primary); transition: color var(--duration-fast); } .frieze2__year .yr-place { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-label); align-self: center; } .frieze2__year:hover { cursor: pointer; } .frieze2__year:hover .yr, .frieze2__year:focus-visible .yr { color: var(--color-brand); } .frieze2__year:focus-visible { outline: none; } .frieze2__year:focus-visible .yr-place { color: var(--color-text-primary); } .frieze2__year.is-active { padding-left: 22px; } .frieze2__year.is-active::before { width: 14px; } .frieze2__year.is-active .yr { color: var(--color-brand); } .frieze2__detail { position: sticky; top: calc(var(--nav-height) + var(--space-6)); } .frieze2__panel { display: none; } .frieze2__panel.is-active { display: block; } .frieze2__panel.is-active .frieze2__media, .frieze2__panel.is-active .frieze2__panel-body { animation: friezeFade var(--duration-slow) var(--ease-out); } .frieze2__media { position: relative; overflow: hidden; aspect-ratio: 16/10; margin-bottom: var(--space-6); background: var(--color-bg-section); } .frieze2__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .frieze2__media::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 6px; background: var(--color-brand); } .frieze2__panel-year { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-text-primary); margin-bottom: var(--space-5); } .frieze2__panel-events { display: flex; flex-direction: column; gap: var(--space-4); } .frieze2__panel-event { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.55; color: var(--color-text-primary); } .frieze2__panel-event .place { display: block; font-weight: 300; font-size: 0.875rem; color: var(--color-text-label); margin-top: 2px; } .frieze2__hint { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-label); margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-2); } @keyframes friezeFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ── Frise (style d'origine) + aperçu image interactif à droite ── */ .frieze-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .frieze-layout .frieze { margin-top: 0; } .frieze-layout .frieze__item { cursor: pointer; } .frieze-layout .frieze__item.is-active .frieze__year { color: var(--color-brand); } .frieze-layout .frieze__item.is-active::before { background: var(--color-brand); transform: scale(1.3); } /* l'aside occupe toute la hauteur de la frise pour que le sticky reste visible jusqu'en bas */ .frieze-aside { align-self: stretch; height: 100%; } .frieze-aside__sticky { position: sticky; top: calc(var(--nav-height) + var(--space-8)); } .frieze-aside__media { position: relative; overflow: hidden; aspect-ratio: 4/5; /* ne dépasse jamais la hauteur visible : on garde la place pour le sticky-top + la légende */ max-height: calc(100vh - var(--nav-height) - 9rem); background: var(--color-bg-section); } .frieze-aside__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: friezeFade var(--duration-normal) var(--ease-out); } .frieze-aside__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(12,12,12,0.6) 0%, rgba(12,12,12,0) 45%); } .frieze-aside__media::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 2; width: 64px; height: 6px; background: var(--color-brand); } .frieze-aside__year { position: absolute; left: var(--space-6); bottom: var(--space-6); z-index: 2; font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.6); } .frieze-aside__caption { margin-top: var(--space-4); font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.8125rem; color: var(--color-text-label); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--space-8); font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; transition: background var(--duration-fast), transform var(--duration-fast); min-width: 44px; } .btn-primary { background: var(--color-brand); color: white; border: 2px solid var(--color-brand); } .btn-primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); } .btn-primary:active { background: var(--color-brand-pressed); transform: scale(0.98); } .btn-secondary { background: transparent; color: var(--color-text-primary); border: 2px solid var(--color-text-primary); } .btn-secondary:hover { background: var(--color-text-primary); color: white; } .btn-ghost { background: transparent; color: white; border: 2px solid white; } .btn-ghost:hover { background: white; color: var(--color-text-primary); } .btn-lg { height: 52px; font-size: 1rem; padding: 0 var(--space-10); } .btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* ── Form ── */ .form { display: flex; flex-direction: column; gap: var(--space-6); } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-label); } .field__input, .field__textarea { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1rem; color: var(--color-text-primary); background: transparent; border: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; outline: none; transition: border-color var(--duration-fast); width: 100%; resize: none; } .field__input:focus, .field__textarea:focus { border-bottom-color: var(--color-brand); } /* ── Section titre ── */ .section-header { margin-bottom: var(--space-12); display: flex; align-items: baseline; gap: var(--space-6); } .section-header__line { flex: 1; height: 1px; background: var(--color-border); } /* ── Lightbox ── */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out); } .lightbox.is-open { opacity: 1; pointer-events: all; } .lightbox__image-wrap { max-width: 90vw; max-height: 90vh; position: relative; } .lightbox__image { max-width: 90vw; max-height: 80vh; object-fit: contain; } .lightbox__caption { text-align: center; margin-top: var(--space-4); } .lightbox__title { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.875rem; color: white; } .lightbox__details { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.75rem; color: var(--color-gray-600); margin-top: 2px; } .lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; color: white; font-size: 1.5rem; padding: var(--space-4); background: transparent; border: none; cursor: pointer; transition: color var(--duration-fast); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { color: var(--color-brand); } .lightbox__close { top: var(--space-4); right: var(--space-4); font-size: 2rem; } .lightbox__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); font-size: 2.5rem; } .lightbox__next { right: var(--space-4); top: 50%; transform: translateY(-50%); font-size: 2.5rem; } .lightbox__counter { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 0.75rem; color: var(--color-gray-600); } /* ── Footer ── */ .site-footer { background: var(--color-bg-black); padding: var(--space-12) 0 var(--space-8); } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-gray-800); margin-bottom: var(--space-6); } .site-footer__brand { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1rem; letter-spacing: 0.1em; text-transform: lowercase; color: white; } .site-footer__nav { display: flex; gap: var(--space-8); } .site-footer__link { font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-600); transition: color var(--duration-fast); } .site-footer__link:hover { color: white; } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; } .site-footer__copy { font-family: 'Poppins', sans-serif; font-size: 0.6875rem; font-weight: 300; color: var(--color-gray-700); letter-spacing: 0.04em; } /* ── Photo gallery (MB & Artistes) ── */ .artists-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .artist-photo { position: relative; overflow: hidden; aspect-ratio: 1/1; } .artist-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .artist-photo:hover img { transform: scale(1.06); } .artist-photo__caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.75)); padding: var(--space-6) var(--space-4) var(--space-3); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.75rem; color: white; opacity: 0; transition: opacity var(--duration-normal); } .artist-photo:hover .artist-photo__caption { opacity: 1; } /* ── Livre ── */ .book-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: center; } .book-cover { position: relative; } .book-cover img { width: 100%; height: auto; display: block; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45), 0 10px 20px -10px rgba(0,0,0,0.3); } .book-info { display: flex; flex-direction: column; gap: var(--space-8); } .book-price { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 3rem; color: var(--color-text-primary); } .book-price span { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1rem; color: var(--color-text-secondary); margin-left: var(--space-2); } /* ── Contact layout ── */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); } .contact-info { display: flex; flex-direction: column; gap: var(--space-6); } .contact-address { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-primary); } .contact-label { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-2); display: block; } /* ── Acquisitions ── */ .acquisitions-grid { columns: 2; gap: var(--space-8); } .acquisition-item { break-inside: avoid; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; line-height: 1.5; } /* ── Utility ── */ .mt-auto { margin-top: auto; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); } .mb-16 { margin-bottom: var(--space-16); } .text-center { text-align: center; } .max-w-prose { max-width: 70ch; } /* ── Responsive ── */ @media (max-width: 1023px) { .container { padding: 0 var(--space-8); } .nav { padding: 0 var(--space-8); } .artwork-grid-3 { grid-template-columns: repeat(2, 1fr); } .artwork-grid-4 { grid-template-columns: repeat(2, 1fr); } .artists-grid { grid-template-columns: repeat(2, 1fr); } .bilingual { grid-template-columns: 1fr; gap: var(--space-10); } .book-layout { grid-template-columns: 1fr; gap: var(--space-12); } .contact-layout { grid-template-columns: 1fr; } .hero--home { grid-template-columns: 1fr; grid-template-rows: 1fr 0.9fr; height: auto; min-height: 100vh; } .hero__left { justify-content: flex-end; padding-bottom: var(--space-12); } .hero__right { min-height: 42vh; } .bio-extract, .book-promo { grid-template-columns: 1fr !important; gap: var(--space-12) !important; } .book-promo { text-align: left; } } @media (max-width: 767px) { .nav { padding: 0 var(--space-5); position: fixed; flex-wrap: wrap; } .brand__line2 { display: none; } .nav__hamburger { display: flex; order: 3; } .lang-switcher { order: 2; } /* Menu déroulant mobile */ .nav__links { order: 4; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-out); background: var(--color-bg-dark); margin: 0 calc(var(--space-5) * -1); } .nav__links.is-open { max-height: 360px; } .nav__links li { width: 100%; border-top: 1px solid var(--color-gray-800); } .nav__link { display: block; padding: var(--space-4) var(--space-5); border-bottom: none; } .nav--light .nav__links { background: var(--color-bg-page); } .container { padding: 0 var(--space-5); } .artwork-grid-3 { grid-template-columns: 1fr; } .artwork-grid-4 { grid-template-columns: repeat(2, 1fr); } .artists-grid { grid-template-columns: repeat(2, 1fr); } .timeline-year-group { grid-template-columns: 60px 1fr; } .frieze { padding-left: 56px; } .frieze::before { left: 44px; } .frieze__item::before { left: -16px; } .frieze__year { position: static; width: auto; text-align: left; padding-right: 0; margin-bottom: var(--space-2); display: block; } .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-6); } .site-footer__nav { flex-wrap: wrap; gap: var(--space-4); } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .acquisitions-grid { columns: 1; } .diptych { grid-template-columns: 1fr !important; } .map-grid { grid-template-columns: 1fr !important; } .portal-grid { grid-template-columns: 1fr; gap: var(--space-4); } .portal { aspect-ratio: 3/2; } .frieze2 { grid-template-columns: 1fr; gap: var(--space-8); } .frieze2__detail { position: static; order: -1; margin-bottom: var(--space-4); } .frieze2__years { max-height: none; overflow: visible; } .frieze-layout { grid-template-columns: 1fr; } .frieze-aside { display: none; } } /* ── reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } body { opacity: 1 !important; } } /* ════════════════════════════════════════════════════════════ V3 — pages internes SANS héros : on dégage la nav fixe. Le 1er bloc de
reçoit une marge haute. L'accueil garde son héro plein écran (.hero) et n'est PAS affecté (:not(.hero)). ════════════════════════════════════════════════════════════ */ main > *:first-child:not(.hero) { padding-top: calc(var(--nav-height) + var(--space-12)); } /* Titre de page (remplace le héros sur les pages internes v3) */ .page-head { padding-bottom: var(--space-10); } .page-head + .section { padding-top: 0; } .page-head__accent { width: 56px; height: 6px; background: var(--color-brand); margin-bottom: var(--space-5); } .page-head__title { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--color-text-primary); } .page-head__sub { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-label); margin-top: var(--space-4); max-width: 62ch; } /* ── Accessibilité : titre masqué visuellement (P0 audit) ── */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Honeypot anti-spam (formulaire contact) */ .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* Splash affiché une seule fois par session (masqué avant le rendu sur les pages suivantes) */ html.no-loader .page-loader{display:none!important} /* Polices auto-hébergées (Barlow, Poppins — latin/latin-ext) */ @font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-800-latin.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:'Barlow';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/barlow-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Barlow';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/barlow-900-latin.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:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/poppins-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/poppins-200-latin.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:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300-latin.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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin.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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin.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:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-800-latin.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:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/poppins-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/poppins-900-latin.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;}