/* FICHIER GÉNÉRÉ par tools/bundle-css.sh — NE PAS MODIFIER.
   Modifier les fichiers sources (voir main.css), puis relancer le script. */
@layer reset, tokens, base, layout, components, utilities;
@layer tokens {
:root {
--c-noir: #231F20;
--c-emeraude: #003F1E;
--c-saumon: #F37043;
--c-sable: #FFF1E7;
--c-blanc: #FFFFFF;
--c-turquoise: #00AEA9;
--c-saumon-texte-clair: #BF3A0C;
--c-saumon-texte-fonce: #F5835C;
--ff-sans: "LGO Sans", "LGO Sans fallback", Arial, Helvetica, sans-serif;
--ff-serif: "Roslindale Deck", "Roslindale Deck fallback", Times, serif;
--ff-serif-text: "Roslindale Text", "Roslindale Text fallback", Times, serif;
--fw-regular: 400;
--step--2: clamp(0.6875rem, 0.6667rem + 0.0926vw, 0.7188rem);
--step--1: clamp(0.8152rem, 0.8036rem + 0.0515vw, 0.85rem);
--step-0:  clamp(1rem, 0.9815rem + 0.0926vw, 1.0625rem);
--step-1:  clamp(1.0781rem, 0.9948rem + 0.3704vw, 1.3281rem);
--step-2:  clamp(1.2398rem, 1.0997rem + 0.6227vw, 1.6602rem);
--step-3:  clamp(1.4258rem, 1.2094rem + 0.962vw, 2.0752rem);
--step-4:  clamp(1.6397rem, 1.3216rem + 1.4138vw, 2.594rem);
--step-5:  clamp(1.8856rem, 1.4334rem + 2.0101vw, 3.2425rem);
--step-6:  clamp(2.1685rem, 1.5403rem + 2.792vw, 4.0531rem);
--step-7:  clamp(2.4938rem, 1.6362rem + 3.8113vw, 5.0664rem);
--step-8:  clamp(2.8678rem, 1.7128rem + 5.1336vw, 6.333rem);
--step-9:  clamp(3.298rem, 1.7586rem + 6.8418vw, 7.9162rem);
--space-3xs: clamp(0.25rem, 0.2292rem + 0.0926vw, 0.3125rem);
--space-2xs: clamp(0.5rem, 0.4583rem + 0.1852vw, 0.625rem);
--space-xs:  clamp(0.75rem, 0.6875rem + 0.2778vw, 0.9375rem);
--space-s:   clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
--space-m:   clamp(1.5rem, 1.375rem + 0.5556vw, 1.875rem);
--space-l:   clamp(2rem, 1.8333rem + 0.7407vw, 2.5rem);
--space-xl:  clamp(3rem, 2.75rem + 1.1111vw, 3.75rem);
--space-2xl: clamp(4rem, 3.6667rem + 1.4815vw, 5rem);
--space-3xl: clamp(6rem, 5.5rem + 2.2222vw, 7.5rem);
--space-s-m:     clamp(1rem, 0.7083rem + 1.2963vw, 1.875rem);
--space-s-l:     clamp(1rem, 0.5rem + 2.2222vw, 2.5rem);
--space-m-2xl:   clamp(1.5rem, 0.3333rem + 5.1852vw, 5rem);
--space-l-2xl:   clamp(2rem, 1rem + 4.4444vw, 5rem);
--space-xl-2xl:  clamp(3rem, 2.3333rem + 2.963vw, 5rem);
--space-2xl-3xl: clamp(4rem, 2.8333rem + 5.1852vw, 7.5rem);
--lh-none: 0.96;
--lh-tight: 1.06;
--lh-snug: 1.14;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
--lh-loose: 1.8;
--tracking-tight: -0.015em;
--tracking-caps: 0.14em;
--tracking-label: 0.18em;
--tracking-wide: 0.22em;
--tracking-ornament: 0.6em;
--w-page: 85rem;
--w-narrow: 55rem;
--w-text: 45rem;
--w-form: 38.75rem;
--w-form-inline: 28.75rem;
--w-aside: 22rem;
--measure: 60ch;
--radius-pill: 999px;
--border: 1px;
--border-thick: 2px;
--tap-min: 1.5rem;
--tap-comfort: 2.75rem;
--logo-h: clamp(3.5rem, 2.3333rem + 5.1852vw, 5rem);
--logo-h-lg: clamp(6.875rem, 5.5417rem + 5.9259vw, 9.375rem);
--ease-out: cubic-bezier(.2, .7, .2, 1);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M.8.7 5.2 5 .8 9.3'/%3E%3C/svg%3E");
--dur-fast: .25s;
--dur-base: .35s;
--dur-slow: .5s;
--scrim: linear-gradient(180deg,
rgb(9 12 20 / .6) 0%,
rgb(9 12 20 / .25) 30%,
rgb(9 12 20 / .5) 60%,
rgb(9 12 20 / .88) 100%);
--z-header: 50;
--z-alert: 60;
--header-h: 7rem;
--alert-h: 2.25rem;
}
:root {
--fs-display: var(--step-9);
--fs-h1: var(--step-8);
--fs-h2: var(--step-6);
--fs-lead: var(--step-4);
--fs-h3-lg: var(--step-3);
--fs-h3: var(--step-2);
--fs-quote: var(--step-2);
--fs-verse: var(--step-1);
--fs-lede: var(--step-1);
--fs-lg: var(--step-1);
--fs-md: var(--step-0);
--fs-xs: var(--step--1);
--fs-label: var(--step--1);
--fs-micro: var(--step--2);
--fs-input: max(1rem, var(--fs-md));
--gutter: var(--space-m-2xl);
--space-band: var(--space-2xl-3xl);
--space-band-tight: var(--space-xl-2xl);
--space-section-head: var(--space-l-2xl);
--gap-grid: var(--space-s-l);
--gap-grid-tight: var(--space-s-m);
--gap-split: var(--space-m-2xl);
--pad-box: var(--space-l) var(--space-m);
--flow-space: var(--space-s);
}
:root {
--surface: var(--c-sable);
--ink: var(--c-emeraude);
--accent: var(--c-saumon);
--accent-text: var(--c-saumon-texte-clair);
--on-accent: var(--c-blanc);
--on-ink: var(--c-sable);
--accent-alt: var(--c-turquoise);
--focus: var(--c-emeraude);
--logo: var(--c-noir);
}
[data-theme="sable"] {
--surface: var(--c-sable);
--ink: var(--c-emeraude);
--accent-text: var(--c-saumon-texte-clair);
--on-ink: var(--c-sable);
--focus: var(--c-emeraude);
--logo: var(--c-noir);
}
[data-theme="blanc"] {
--surface: var(--c-blanc);
--tint-base: var(--c-sable);
--ink: var(--c-emeraude);
--accent-text: var(--c-saumon-texte-clair);
--on-ink: var(--c-blanc);
--focus: var(--c-emeraude);
--logo: var(--c-noir);
}
[data-theme="vert"] {
--surface: var(--c-emeraude);
--ink: var(--c-sable);
--accent-text: var(--c-saumon-texte-fonce);
--on-ink: var(--c-emeraude);
--focus: var(--c-turquoise);
--logo: var(--c-blanc);
}
[data-theme="saumon"] {
--surface: var(--c-saumon);
--ink: var(--c-blanc);
--accent-text: var(--c-blanc);
--on-ink: var(--c-saumon);
--focus: var(--c-blanc);
--logo: var(--c-blanc);
}
[data-theme="noir"] {
--surface: var(--c-noir);
--ink: var(--c-sable);
--accent-text: var(--c-saumon-texte-fonce);
--on-ink: var(--c-noir);
--focus: var(--c-turquoise);
--logo: var(--c-blanc);
}
[data-theme="overlay"] {
--surface: transparent;
--ink: var(--c-sable);
--accent-text: var(--c-saumon);
--on-ink: var(--c-emeraude);
--focus: var(--c-sable);
--logo: var(--c-blanc);
}
:root,
[data-theme] {
--ink-soft: color-mix(in oklch, var(--ink) 80%, transparent);
--ink-muted: color-mix(in oklch, var(--ink) 70%, transparent);
--line: color-mix(in oklch, var(--ink) 18%, transparent);
--line-strong: color-mix(in oklch, var(--ink) 30%, transparent);
--tint: color-mix(in oklab, var(--ink) 8%, var(--tint-base, var(--surface)));
}
}
@layer tokens {
@font-face {
font-family: "LGO Sans";
src: url("../fonts/LGO-Sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roslindale Deck";
src: url("../fonts/RoslindaleDeckNarrow-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roslindale Text";
src: url("../fonts/RoslindaleText-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roslindale Text";
src: url("../fonts/RoslindaleText-Italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "LGO Sans fallback";
src: local("Arial"), local("ArialMT");
size-adjust: 100.2%;
ascent-override: 74.85%;
descent-override: 24.95%;
line-gap-override: 0%;
}
@font-face {
font-family: "Roslindale Deck fallback";
src: local("Times New Roman"), local("TimesNewRomanPSMT");
size-adjust: 102.35%;
ascent-override: 95.75%;
descent-override: 22.47%;
line-gap-override: 0%;
}
@font-face {
font-family: "Roslindale Text fallback";
src: local("Times New Roman"), local("TimesNewRomanPSMT");
font-style: normal;
size-adjust: 119.56%;
ascent-override: 81.96%;
descent-override: 19.24%;
line-gap-override: 0%;
}
@font-face {
font-family: "Roslindale Text fallback";
src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
font-style: italic;
size-adjust: 108.92%;
ascent-override: 89.97%;
descent-override: 21.12%;
line-gap-override: 0%;
}
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
}
@layer base {
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
background: var(--surface);
color: var(--ink);
font-family: var(--ff-sans);
font-weight: var(--fw-regular);
font-size: var(--fs-md);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
}
[data-theme] {
background: var(--surface);
color: var(--ink);
}
h1, h2, h3 {
font-family: var(--ff-serif);
font-weight: var(--fw-regular);
text-wrap: balance;
}
h2 {
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
}
h3 {
font-size: var(--fs-h3);
line-height: var(--lh-snug);
}
p { text-wrap: pretty; }
address { font-style: normal; }
@media (max-width: 35em) {
p, li, dd { hyphens: auto; }
}
a {
color: inherit;
text-decoration: none;
transition: color var(--dur-fast);
}
a:hover { color: var(--accent); }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-s)); }
:focus-visible {
outline: var(--border-thick) solid var(--focus);
outline-offset: .2em;
}
::selection {
background: var(--accent);
color: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
}
@layer layout {
.l-band,
.l-wrap,
.l-split > * {
container-type: inline-size;
}
.l-band { padding-block: var(--space-band); }
.l-band--tight { padding-block: var(--space-band-tight); }
.l-band--flush-top { padding-top: 0; }
.l-wrap {
max-width: var(--w-page);
margin-inline: auto;
padding-inline: var(--gutter);
}
.l-wrap--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }
.l-wrap--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); }
.l-split {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: var(--gap-split);
align-items: center;
}
.l-split--top { align-items: start; }
@container (max-width: 50em) {
.l-split { grid-template-columns: 1fr; }
}
.l-grid {
display: grid;
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
gap: var(--gap, var(--gap-grid));
}
.l-grid--2 { --cols: 2; }
.l-grid--3 { --cols: 3; }
.l-grid--4 { --cols: 4; }
.l-grid--tight { --gap: var(--gap-grid-tight); }
.l-grid--compact { --gap: var(--space-s); }
.l-grid--wide { --gap: calc(var(--gap-grid) * 2); }
@container (max-width: 50em) {
.l-grid--3,
.l-grid--4 { --cols: 2; }
}
@container (max-width: 30em) {
.l-grid--2,
.l-grid--3,
.l-grid--4 { --cols: 1; }
}
.l-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap, var(--space-m));
}
.l-stack {
display: flex;
flex-direction: column;
gap: var(--gap, var(--space-m));
}
.l-stack--xl { --gap: var(--space-2xl); }
.l-flow > * + * {
margin-block-start: var(--flow-space);
}
}
@layer components {
.c-alert {
position: relative;
z-index: var(--z-alert);
padding: var(--space-xs) var(--space-s);
font-size: var(--fs-label);
letter-spacing: var(--tracking-caps);
text-align: center;
}
}
@layer components {
.c-brand {
display: flex;
align-items: center;
gap: var(--space-xs);
flex: 0 0 auto;
}
.c-brand__logo {
display: block;
height: var(--logo-h);
width: auto;
aspect-ratio: 1801 / 1555;
color: var(--logo);
}
.c-brand__logo--auberge { aspect-ratio: 1801 / 2021; }
}
@layer components {
.c-header {
position: sticky;
top: 0;
z-index: var(--z-header);
transition: background var(--dur-slow) ease, color var(--dur-slow) ease;
}
.c-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-l);
padding: var(--space-l) var(--gutter);
border-bottom: var(--border) solid var(--line);
transition: border-color var(--dur-slow);
}
.c-header[data-theme="overlay"] .c-header__inner { border-color: transparent; }
.c-header .c-brand { padding-right: var(--space-m); }
.c-header.is-instant,
.c-header.is-instant * { transition: none !important; }
}
@layer components {
.c-burger {
display: flex;
align-items: center;
gap: var(--space-xs);
min-height: var(--tap-comfort);
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: var(--fs-label);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
transition: color var(--dur-fast);
}
.c-burger:hover { color: var(--accent); }
.c-burger__icon {
display: block;
width: 2.5em;
height: .75em;
border-block: var(--border) solid currentColor;
transition: transform var(--dur-fast);
}
.c-burger--close .c-burger__icon {
width: 2em;
height: 0;
border-bottom: 0;
transform: rotate(45deg);
}
}
@layer components {
.c-menu {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
grid-template-rows: auto 1fr auto;
opacity: 0;
transition:
opacity var(--dur-slow) var(--ease-out),
display var(--dur-slow) allow-discrete,
overlay var(--dur-slow) allow-discrete;
}
.c-menu[open] { display: grid; opacity: 1; }
@starting-style { .c-menu[open] { opacity: 0; } }
.c-menu::backdrop { background: transparent; }
html:has(.c-menu[open]) { overflow: hidden; }
.c-menu__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-l) var(--gutter);
border-bottom: var(--border) solid var(--line);
}
.c-menu__body {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-xl);
align-content: center;
padding: var(--space-xl) var(--gutter);
}
.c-menu__links {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.c-menu__link {
font-family: var(--ff-serif);
font-size: var(--fs-h2);
line-height: var(--lh-tight);
transition: color var(--dur-fast), padding-left var(--dur-base);
}
.c-menu__link:hover { padding-left: var(--space-s); }
.c-menu__link[aria-current="page"] { color: var(--accent-text); }
.c-menu__sub {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-m);
margin: var(--space-3xs) 0 var(--space-m) var(--space-3xs);
}
.c-menu__sublink {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--ink-soft);
}
.c-menu__sublink:hover { color: var(--accent); }
.c-menu__aside {
display: flex;
flex-direction: column;
gap: var(--space-m);
align-self: center;
padding-left: var(--space-l);
border-left: var(--border) solid var(--line);
}
.c-menu__aside .c-link-arrow { align-self: flex-start; }
.c-menu__foot {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
padding: var(--space-s) var(--gutter);
border-top: var(--border) solid var(--line);
font-size: var(--fs-label);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.c-menu__foot a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
color: var(--ink-soft);
}
.c-menu__foot a:hover { color: var(--accent); }
@media (max-width: 56.25em) {
.c-menu__body { grid-template-columns: 1fr; }
.c-menu__aside { padding-left: 0; border-left: 0; }
}
@media (max-width: 35em) {
.c-menu__sub { flex-direction: column; gap: var(--space-3xs); }
}
}
@layer components {
.c-footer {
padding: var(--space-band) 0 var(--space-m);
}
.c-footer a { color: var(--ink-soft); }
.c-footer__list a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
}
.c-footer a:hover { color: var(--accent); }
.c-footer__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--space-l);
}
.c-footer__logo {
display: block;
height: var(--logo-h-lg);
width: auto;
aspect-ratio: 1801 / 2021;
color: var(--logo);
}
.c-footer__title {
margin: 0 0 var(--space-s);
font-family: var(--ff-sans);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent-text);
}
.c-footer__text,
.c-footer__list {
font-size: var(--fs-xs);
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.c-footer__text + .c-footer__text,
.c-footer__logo + .c-footer__text { margin-top: var(--space-s); }
.c-footer__project {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.c-footer__logo-es {
display: block;
align-self: flex-end;
margin-top: auto;
width: var(--fs-h3-lg);
height: var(--fs-h3-lg);
}
.c-footer__logo-es img {
display: block;
width: 100%;
height: 100%;
filter: invert(1);
opacity: .85;
}
.c-footer__list {
list-style: none;
padding: 0;
margin: 0;
}
.c-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-s);
margin-top: var(--space-xl);
padding-top: var(--space-s);
border-top: var(--border) solid var(--line);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--ink-muted);
}
.c-footer__credit { text-transform: none; letter-spacing: var(--tracking-label); }
.c-footer__heart { color: var(--accent-text); }
@container (max-width: 50em) {
.c-footer__grid { grid-template-columns: 1fr; }
}
.c-footer__legal {
font-size: 0.6875rem;
letter-spacing: normal;
text-transform: lowercase;
}
.c-footer__legal a,
.c-footer__link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.c-footer__link { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
}
@layer components {
.c-consent {
position: fixed;
z-index: 80;
inset: auto var(--space-s) var(--space-s) var(--space-s);
max-width: 44rem;
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
padding: var(--space-s) var(--space-m);
background: var(--c-emeraude, #003f1e);
color: var(--c-sable, #fdeee3);
border-radius: var(--radius-m, 1rem);
box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.25);
font-size: var(--fs-sm, 0.875rem);
line-height: var(--lh-normal);
}
.c-consent__text { flex: 1 1 22rem; margin: 0; }
.c-consent__text a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.c-consent__actions { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.c-consent .c-btn { color: inherit; }
.c-consent .c-btn:hover { background: var(--c-sable, #fdeee3); border-color: var(--c-sable, #fdeee3); color: var(--c-emeraude, #003f1e); }
.c-consent :focus-visible { outline-color: var(--c-sable, #fdeee3); }
}
@layer components {
.c-hero {
position: relative;
height: calc(100vh - var(--alert-h));
height: calc(100svh - var(--alert-h));
min-height: 38.75rem;
margin-top: calc(-1 * var(--header-h));
}
.c-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
}
.c-hero__media + .c-hero__media { opacity: 0; }
.c-hero.is-rotating .c-hero__media {
z-index: 0;
opacity: 0;
transition: opacity 0s linear 1.6s;
will-change: opacity;
}
.c-hero.is-rotating .c-hero__media.is-active {
z-index: 1;
opacity: 1;
transition: opacity 1.6s ease;
}
.c-hero.is-rotating .c-hero__img {
transform: scale(1);
transition: transform 0s linear 1.6s;
will-change: transform;
}
.c-hero.is-rotating .is-active .c-hero__img {
transform: scale(1.08);
transition: transform 7s linear;
}
@media (prefers-reduced-motion: reduce) {
.c-hero.is-rotating .c-hero__media,
.c-hero.is-rotating .c-hero__img { transition: none; }
}
.c-hero__picture { display: contents; }
.c-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.c-hero__scrim {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background: var(--scrim);
}
.c-hero__content {
position: absolute;
z-index: 3;
inset: auto 0 0 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-l);
padding: 0 var(--gutter) var(--space-xl);
}
.c-hero__title {
margin-top: var(--space-xs);
font-size: var(--fs-display);
line-height: var(--lh-none);
letter-spacing: var(--tracking-tight);
}
.c-hero__aside {
max-width: var(--w-aside);
text-align: right;
}
.c-hero__text {
margin-bottom: var(--space-m);
font-size: var(--fs-md);
line-height: var(--lh-loose);
}
.c-hero__sentinel {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
}
@media (max-width: 56.25em) {
.c-hero__content { flex-direction: column; align-items: flex-start; }
.c-hero__aside { text-align: left; }
}
}
@layer components {
.c-page-head__title {
font-size: var(--fs-h1);
line-height: var(--lh-none);
letter-spacing: var(--tracking-tight);
}
.c-page-head__lede {
max-width: 56ch;
margin-top: var(--space-m);
font-size: var(--fs-lede);
line-height: var(--lh-relaxed);
color: var(--ink-soft);
}
.c-page-head__media { margin-top: var(--space-xl); }
.c-page-head--center { text-align: center; }
.c-page-head--center .c-page-head__lede { margin-inline: auto; }
}
@layer components {
.c-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2xs) var(--space-m);
margin-bottom: var(--space-section-head);
padding-top: var(--space-s);
}
}
@layer components {
.c-eyebrow {
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.c-eyebrow--accent { color: var(--accent-text); }
.c-eyebrow--muted { color: var(--ink-muted); }
}
@layer components {
.c-prose p {
max-width: var(--measure);
font-size: var(--fs-md);
line-height: var(--lh-loose);
}
.c-prose strong {
font-family: var(--ff-serif-text);
font-weight: var(--fw-regular);
font-style: italic;
}
.c-prose a { border-bottom: var(--border) solid currentColor; }
.c-prose--soft p { color: var(--ink-soft); }
.c-prose--lg p { font-size: var(--fs-lg); }
.c-prose p.c-prose__meta { color: var(--ink-soft); }
.c-prose--legal h2 {
margin-top: var(--space-l);
font-size: var(--fs-h3-lg);
line-height: var(--lh-tight, 1.15);
}
.c-prose--legal h2:first-child { margin-top: 0; }
.c-prose--legal ul { padding-left: 1.25em; }
.c-prose--legal li {
max-width: var(--measure);
font-size: var(--fs-md);
line-height: normal;
}
.c-prose--legal li + li { margin-top: var(--space-xs, 0.4em); }
}
@layer components {
.c-quote {
font-family: var(--ff-sans);
font-size: var(--fs-quote);
line-height: var(--lh-normal);
}
}
@layer components {
.c-callout {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-m);
}
.c-callout__title { max-width: 20ch; }
.c-callout__text {
max-width: 52ch;
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.c-callout .c-prose p { color: var(--ink-soft); }
.c-callout--center {
align-items: center;
text-align: center;
}
}
@layer components {
.c-checklist {
display: grid;
gap: var(--space-xs);
margin: var(--space-l) 0 0;
padding: 0;
list-style: none;
}
.c-checklist__item::before {
content: "✶";
content: "✶" / "";
margin-right: .75em;
}
}
@layer components {
.c-manifesto {
--flow-space: var(--space-m);
max-width: var(--w-text);
margin-inline: auto;
padding-inline: var(--gutter);
}
.c-manifesto__verse {
font-family: var(--ff-sans);
font-size: var(--fs-verse);
line-height: var(--lh-relaxed);
}
.c-manifesto__lead {
font-family: var(--ff-serif);
font-size: var(--fs-lead);
line-height: var(--lh-snug);
}
.c-manifesto__lead--final { margin-top: var(--space-l); }
.c-manifesto__lead + .c-manifesto__verse { margin-top: var(--space-l); }
.c-manifesto__divider {
margin-block: var(--space-l);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-ornament);
text-align: center;
color: var(--accent-text);
}
}
@layer components {
.c-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-m);
border: var(--border) solid currentColor;
border-radius: var(--radius-pill);
background: transparent;
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
white-space: nowrap;
transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.c-btn--fill {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.c-btn--fill:hover,
.c-btn--ghost:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--on-ink);
}
}
@layer components {
.c-link-arrow {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-s);
padding: 0 0 var(--space-2xs);
border: 0;
background: none;
color: var(--ink);
font: inherit;
font-size: var(--fs-label);
text-transform: uppercase;
text-wrap: balance;
cursor: pointer;
}
.c-link-arrow::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: var(--border);
background: currentColor;
transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.c-link-arrow::after {
content: "";
flex: none;
width: .6em;
height: 1em;
background: currentColor;
-webkit-mask: var(--icon-chevron) center / contain no-repeat;
mask: var(--icon-chevron) center / contain no-repeat;
}
.c-link-arrow--back { flex-direction: row-reverse; }
.c-link-arrow--back::after { transform: scaleX(-1); }
@media (hover: hover) {
.c-link-arrow:hover::before {
transform: scaleX(0);
transform-origin: right;
}
}
@media (prefers-reduced-motion: reduce) {
.c-link-arrow::before { transition: none; }
}
}
@layer components {
.c-badge {
display: inline-block;
padding: var(--space-3xs) var(--space-xs);
border: var(--border) solid var(--accent-alt);
border-radius: var(--radius-pill);
color: var(--ink);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
}
@layer components {
.c-media {
position: relative;
overflow: hidden;
}
.c-media picture { display: contents; }
.c-media__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-media__img--shape {
object-fit: contain;
object-position: left bottom;
}
.c-media--placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 10rem;
padding: var(--space-m);
border: var(--border) dashed var(--line-strong);
background: var(--tint);
color: var(--ink-muted);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-label);
line-height: var(--lh-loose);
text-transform: uppercase;
text-align: center;
}
.c-video { position: relative; display: block; }
.c-video::before,
.c-video::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
z-index: 1;
}
.c-video::before {
width: 2rem;
height: 2rem;
translate: -50% -50%;
border-radius: 50%;
background: var(--surface);
opacity: .9;
}
.c-video::after {
width: .625rem;
height: .7rem;
translate: -35% -50%;
background: var(--ink);
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 2;
}
.c-figure { margin: 0; }
.c-figure__cap {
margin-top: var(--space-xs);
color: var(--ink-muted);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-label);
line-height: var(--lh-loose);
text-transform: uppercase;
}
.c-slides { position: relative; overflow: hidden; }
.c-slides picture { display: contents; }
.c-slides__slide { position: absolute; inset: 0; opacity: 1; transition: opacity .8s ease; }
.c-slides__slide[hidden] { display: block; opacity: 0; pointer-events: none; }
.c-slides__dots {
position: absolute; z-index: 1; right: var(--space-s); bottom: var(--space-s);
display: flex; gap: .25rem; padding: .25rem .5rem; border-radius: 999px;
background: rgb(9 12 20 / .45);
}
.c-slides__dot {
all: unset; cursor: pointer; box-sizing: border-box;
width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
}
.c-slides__dot::before {
content: ""; width: .5rem; height: .5rem; border-radius: 50%;
background: #fff; opacity: .5;
}
.c-slides__dot[aria-current="true"]::before { opacity: 1; }
.c-slides__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
}
@layer components {
.c-fenetre {
aspect-ratio: var(--fenetre-ratio);
clip-path: var(--fenetre-clip);
}
.c-fenetre--v {
--fenetre-ratio: 480 / 626;
--fenetre-clip: polygon(0% 0%, 100% 0%, 95.6% 59.4%, 83.9% 95%, 23.3% 100%, 6.4% 94.3%, 0% 40%);
}
.c-fenetre--v2 {
--fenetre-ratio: 480 / 626;
--fenetre-clip: polygon(100% 0%, 0% 0%, 4.4% 59.4%, 16.1% 95%, 76.7% 100%, 93.6% 94.3%, 100% 40%);
}
.c-fenetre--v3 {
--fenetre-ratio: 480 / 626;
--fenetre-clip: polygon(100% 100%, 0% 100%, 4.4% 40.6%, 16.1% 5%, 76.7% 0%, 93.6% 5.7%, 100% 60%);
}
.c-fenetre--v4 {
--fenetre-ratio: 677 / 648;
--fenetre-clip: polygon(11.2% 17.8%, 51.6% 0%, 100% 26.9%, 90.1% 89.6%, 33.8% 100%, 20.5% 81%, 0% 69.4%);
}
.c-slides.c-fenetre .c-slides__dots {
right: auto;
left: 50%;
translate: -50% 0;
bottom: 9%;
}
.c-figure {
--legende-max-w: 12ch;
position: relative;
}
html:not([data-legende="sous"]) .c-figure:has(.c-fenetre) { --legende-bottom: 12%; }
html:not([data-legende="sous"]) .c-figure:has(.c-fenetre--v2) { --legende-bottom: 12%; }
html:not([data-legende="sous"]) .c-figure:has(.c-fenetre--v3) { --legende-bottom: 8%; }
html:not([data-legende="sous"]) .c-figure:has(.c-fenetre--v4) { --legende-bottom: 19%; }
html:not([data-legende="sous"]) .c-figure:has(.c-fenetre) .c-figure__cap {
position: absolute;
z-index: 2;
left: calc(-1 * var(--space-s));
bottom: var(--legende-bottom);
max-width: var(--legende-max-w);
height: auto;
margin: 0;
padding: var(--space-3xs);
background-color: var(--c-saumon);
color: var(--c-blanc);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
letter-spacing: normal;
text-transform: lowercase;
hyphens: none;
}
html .c-figure.c-figure--cap-sous:has(.c-fenetre) .c-figure__cap {
position: static;
max-width: none;
margin-top: var(--space-xs);
padding: 0;
background: none;
color: var(--ink-muted);
font-size: var(--fs-micro);
line-height: var(--lh-loose);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.c-card__media > .c-figure__cap { height: auto; margin-top: var(--space-xs); }
}
@layer components {
.c-card {
display: flex;
flex-direction: column;
}
.c-card__media { margin-bottom: var(--space-m); }
.c-card__media > * {
height: 100%;
}
.c-card__media--shape {
position: relative;
aspect-ratio: 3 / 2;
}
.c-card__media--shape > img {
position: absolute;
inset: 0 auto 0 0;
width: 80%;
}
.c-card__title { margin-bottom: var(--space-xs); }
.c-card__text {
max-width: 52ch;
margin-bottom: var(--space-s);
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.c-card__action {
margin-top: auto;
align-self: flex-start;
}
}
@layer components {
.c-tile {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--pad-box);
border: var(--border) solid var(--line);
}
.c-tile__index { color: var(--accent-text); }
.c-tile__text {
line-height: var(--lh-relaxed);
color: var(--ink-soft);
}
.c-tile__action {
align-self: flex-start;
margin-top: auto;
}
}
@layer components {
.c-link-card {
display: flex;
flex-direction: column;
gap: var(--space-xs);
height: 100%;
padding: var(--pad-box);
border: var(--border) solid var(--line);
transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.c-link-card:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--on-ink);
}
.c-link-card__index {
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
color: var(--accent-text);
}
.c-link-card:hover .c-link-card__index { color: var(--accent); }
.c-link-card__title {
font-family: var(--ff-serif);
font-size: var(--fs-h3-lg);
line-height: var(--lh-snug);
}
.c-link-card__text {
line-height: var(--lh-relaxed);
color: var(--ink-soft);
}
.c-link-card:hover .c-link-card__text { color: inherit; }
.c-link-card__go {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-s);
align-self: flex-start;
margin-top: auto;
padding-top: var(--space-xs);
padding-bottom: var(--space-2xs);
font-size: var(--fs-label);
text-transform: uppercase;
}
.c-link-card__go::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: var(--border);
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
.c-link-card:hover .c-link-card__go::before {
transform: scaleX(1);
transform-origin: left;
}
}
@media (prefers-reduced-motion: reduce) {
.c-link-card__go::before { transition: none; }
}
.c-link-card__go::after {
content: "";
flex: none;
width: .6em;
height: 1em;
background: currentColor;
-webkit-mask: var(--icon-chevron) center / contain no-repeat;
mask: var(--icon-chevron) center / contain no-repeat;
}
.c-link-card__go--back { flex-direction: row-reverse; }
.c-link-card__go--back::after { transform: scaleX(-1); }
}
@layer components {
.c-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--border);
margin: var(--space-l) 0 0;
padding: 0;
list-style: none;
background: var(--line);
border: var(--border) solid var(--line);
}
.c-features__item {
display: flex;
align-items: flex-end;
min-height: 6.5rem;
padding: var(--space-m);
background: var(--surface);
font-size: var(--fs-xs);
}
.c-features__item--muted { color: var(--ink-muted); }
@container (max-width: 50em) {
.c-features { grid-template-columns: 1fr 1fr; }
}
}
@layer components {
.c-timeline {
display: grid;
gap: var(--border);
margin: 0;
padding: 0;
list-style: none;
background: var(--line);
border-top: var(--border) solid var(--line);
}
.c-timeline__step {
display: grid;
grid-template-columns: 14.375rem 1fr;
gap: var(--space-m);
padding: var(--space-m) 0;
background: var(--surface);
}
.c-timeline__when {
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.c-timeline__what {
max-width: var(--measure);
line-height: var(--lh-relaxed);
}
.c-timeline__step.is-done .c-timeline__when { color: var(--accent-text); }
@container (max-width: 40em) {
.c-timeline__step { grid-template-columns: 1fr; gap: var(--space-2xs); }
}
}
@layer components {
.c-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--border);
margin-top: var(--space-l);
background: var(--line);
border: var(--border) solid var(--line);
}
.c-values__item {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--pad-box);
background: var(--surface);
}
.c-values__num {
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
color: var(--accent-text);
}
.c-values__name { font-size: var(--fs-h3); }
.c-values__text {
line-height: var(--lh-loose);
color: var(--ink-soft);
}
@container (max-width: 50em) {
.c-values { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 30em) {
.c-values { grid-template-columns: 1fr; }
}
}
@layer components {
.c-member {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.c-member__name {
margin-top: var(--space-xs);
font-size: var(--fs-h3);
}
.c-member__role {
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent-text);
}
.c-member__summary {
line-height: var(--lh-relaxed);
color: var(--ink-soft);
}
.c-member-grid {
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: var(--border) solid var(--line);
}
.c-member__bio {
margin-top: auto;
padding-top: var(--space-xs);
border-top: var(--border) solid var(--line);
}
.c-member__toggle {
display: flex;
align-items: center;
min-height: var(--tap-min);
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
font: inherit;
font-size: var(--fs-micro);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.c-member__toggle::after { content: " +"; color: var(--accent-text); }
.c-member__dialog {
width: min(40rem, calc(100% - 2 * var(--gutter)));
max-height: calc(100svh - 2 * var(--space-m));
margin: auto;
padding: var(--pad-box);
border: 0;
background: var(--surface);
color: var(--ink);
overflow-y: auto;
}
.c-member__dialog[open] { display: flex; flex-direction: column; gap: var(--space-xs); }
.c-member__dialog::backdrop { background: color-mix(in oklch, var(--c-noir) 55%, transparent); }
html:has(.c-member__dialog[open]) { overflow: hidden; }
.c-member__text { margin-top: var(--space-s); }
.c-member__text p {
font-size: var(--fs-md);
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.c-member__close {
align-self: flex-start;
margin-top: var(--space-m);
}
.c-member--note {
justify-content: center;
padding: var(--pad-box);
border: var(--border) solid var(--line);
}
.c-member--note .c-member__role { font-size: var(--fs-md); letter-spacing: 0; }
.c-member--note { grid-column: 1 / -1; }
@container (min-width: 50.01em) {
.c-member--note { grid-column: span 2; }
}
}
@layer components {
.c-faq__item {
padding: var(--space-m) 0;
border-top: var(--border) solid var(--line);
}
.c-faq__question {
display: flex;
justify-content: space-between;
gap: var(--space-s);
list-style: none;
cursor: pointer;
font-family: var(--ff-serif);
font-size: var(--fs-h3);
}
.c-faq__question::-webkit-details-marker { display: none; }
.c-faq__question::after { content: "+"; color: var(--accent-text); }
.c-faq__item[open] .c-faq__question::after { content: "–"; }
.c-faq__item {
interpolate-size: allow-keywords;
}
.c-faq__item::details-content {
height: 0;
overflow: hidden;
transition:
height var(--dur-base) var(--ease-out),
content-visibility var(--dur-base) allow-discrete;
}
.c-faq__item[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) {
.c-faq__item::details-content { transition: none; }
}
.c-faq__answer {
max-width: 64ch;
margin-top: var(--space-s);
line-height: var(--lh-loose);
color: var(--ink-soft);
}
}
@layer components {
.c-partner {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.c-partner__logo { display: block; }
.c-partner__logo:not(.c-media--placeholder) {
background: var(--surface);
}
.c-partner__logo {
display: flex;
align-items: center;
justify-content: center;
}
.c-partner__logo .c-media__img {
width: var(--logo-w, 70%);
height: auto;
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.c-partner__name { line-height: var(--lh-normal); }
.c-partner__url {
margin-top: calc(var(--space-3xs) - var(--space-xs));
font-size: var(--fs-micro);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--ink-muted);
}
.c-partner:hover .c-partner__logo {
border-color: var(--accent);
color: var(--accent-text);
}
}
@layer components {
.c-info__label {
margin-bottom: var(--space-xs);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent-text);
}
.c-info__value {
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.c-info__value a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
}
.c-info--sm .c-info__value {
font-size: var(--fs-xs);
line-height: var(--lh-relaxed);
}
}
@layer components {
.c-form {
display: grid;
gap: var(--space-m);
max-width: var(--w-form);
}
.c-form--wide { max-width: none; }
.c-form--boxed {
padding: var(--space-l);
border: var(--border) solid var(--line);
}
.c-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-m);
}
@container (max-width: 28em) {
.c-form__row { grid-template-columns: 1fr; }
}
.c-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-s);
}
.c-form__hint {
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--ink-muted);
}
.c-form__captcha {
margin-top: calc(-1 * var(--space-s));
font-size: var(--fs-micro);
font-weight: 600;
color: var(--ink-muted);
}
.c-form .cf-turnstile[data-idle] { position: absolute; }
.c-form__legal {
font-size: var(--fs-xs);
line-height: var(--lh-relaxed);
color: var(--ink-soft);
}
.c-form__status {
padding: var(--space-xs) var(--space-s);
border-left: var(--border-thick) solid var(--accent);
background: var(--tint);
font-size: var(--fs-xs);
}
.c-form__status:empty { display: none; }
.c-form[data-state="sent"] > :not(.c-form__done) { display: none; }
.c-form--boxed[data-state="sent"] { padding: 0; border: 0; }
.c-form__done {
display: grid;
gap: var(--space-s);
justify-items: start;
padding: var(--space-l);
border: var(--border) solid var(--accent);
outline: 0;
}
.c-form__done::before {
content: "✶";
font-size: var(--fs-lg);
color: var(--accent-text);
}
.c-form__done-title {
font-family: var(--ff-serif);
font-size: var(--fs-h2);
line-height: var(--lh-tight);
}
.c-form__done-text {
max-width: 40ch;
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
}
.c-form__again {
min-height: var(--tap-min);
padding: 0;
border: 0;
background: none;
color: var(--ink-soft);
font: inherit;
font-size: var(--fs-xs);
text-decoration: underline;
text-underline-offset: .2em;
cursor: pointer;
}
.c-form__again:hover { color: var(--accent-text); }
.c-form__trap {
position: absolute;
left: -9999px;
}
.c-field {
display: grid;
gap: var(--space-2xs);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.c-field__label {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
}
.c-field__req { color: var(--accent-text); }
.c-field__control {
width: 100%;
padding: var(--space-xs) var(--space-3xs);
border: 0;
border-bottom: var(--border) solid var(--line-strong);
border-radius: 0;
background: transparent;
color: var(--ink);
font: var(--fw-regular) var(--fs-input) / var(--lh-normal) var(--ff-sans);
letter-spacing: normal;
text-transform: none;
}
.c-field__control:focus {
outline: 0;
border-color: var(--accent);
}
.c-field__control:user-invalid { border-color: var(--accent-text); }
textarea.c-field__control { min-height: 8.125rem; resize: vertical; }
.c-check {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--fs-xs);
line-height: var(--lh-relaxed);
}
.c-check__input {
flex: 0 0 auto;
width: 1em;
height: 1em;
margin-top: .3em;
accent-color: var(--ink);
}
}
@layer components {
.c-newsletter {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
width: 100%;
max-width: var(--w-form-inline);
margin-inline: auto;
}
.c-newsletter__input {
flex: 1;
min-width: 0;
padding: var(--space-xs) var(--space-3xs);
border: 0;
border-bottom: var(--border) solid var(--line-strong);
background: transparent;
color: var(--ink);
font: var(--fw-regular) var(--fs-input) / var(--lh-none) var(--ff-sans);
}
.c-newsletter__legal {
flex-basis: 100%;
font-size: var(--fs-xs);
line-height: var(--lh-relaxed);
color: var(--ink-soft);
}
.c-newsletter__input::placeholder { color: var(--ink-muted); }
.c-newsletter__input:focus { outline: 0; border-color: var(--accent); }
@container (max-width: 25em) {
.c-newsletter { flex-direction: column; }
}
}
@layer utilities {
.u-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;
}
.u-center { text-align: center; }
.u-mt-s { margin-top: var(--space-s); }
.u-mt-m { margin-top: var(--space-m); }
.u-mt-l { margin-top: var(--space-l); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mb-l { margin-bottom: var(--space-l); }
.u-lede { max-width: 56ch; font-size: var(--fs-lede); line-height: var(--lh-relaxed); color: var(--ink-soft); }
.u-ratio-1    { aspect-ratio: 1; }
.u-ratio-3x2  { aspect-ratio: 3 / 2; }
.u-ratio-4x3  { aspect-ratio: 4 / 3; }
.u-ratio-3x4  { aspect-ratio: 3 / 4; }
.u-ratio-4x5  { aspect-ratio: 4 / 5; }
.u-ratio-16x9 { aspect-ratio: 16 / 9; }
.u-ratio-21x9 { aspect-ratio: 21 / 9; }
[class*="u-ratio-"] { min-height: 0; }
.u-skip {
position: absolute;
left: var(--space-s);
top: 0;
translate: 0 -150%;
z-index: 100;
padding: var(--space-xs) var(--space-s);
background: var(--ink);
color: var(--on-ink);
}
.u-skip:focus { translate: 0; top: var(--space-s); }
}