/* ---------------------------------------------------------------------
0. POLICES — hébergées sur le site
---------------------------------------------------------------------
Les trois polices étaient chargées depuis les serveurs de Google. Ce
chargement distant transmettait l'adresse IP de chaque visiteur à
Google, aux États-Unis — sans base légale solide, et sans qu'aucune
bannière ne puisse y changer quoi que ce soit, puisque les polices
partent avant tout consentement. Elles vivent désormais dans
assets/fonts/ : le site n'appelle plus aucun tiers.
Ce sont exactement les fichiers que Google servait, repris tels quels,
découpage Unicode compris. Le rendu est identique au pixel près.
▚ POURQUOI ONZE FICHIERS POUR TROIS POLICES
Chaque police est découpée par plage de caractères (latin, latin-ext,
vietnamien). La déclaration « unicode-range » dit au navigateur quelle
tranche contient quel caractère : il ne télécharge que celles dont la
page a besoin. Une page en français ne charge jamais le vietnamien.
Ne pas retirer ces déclarations pour « faire le ménage » — le site
téléchargerait alors les 645 Ko au lieu des 304 Ko utiles.
▚ CE QUE ÇA PÈSE
Fraunces est une police variable à cinq axes (opsz, wght, SOFT, WONK,
plus l'italique) : 264 Ko en latin à elle seule, romain et italique.
C'est, de loin, le poste le plus lourd du site — davantage que toutes
les photos réunies. C'est le prix du WONK, l'axe qui sort les vraies
formes fantaisistes de l'italique, signature typographique du site.
▚ SI UNE POLICE CHANGE
Reprendre l'URL Google Fonts correspondante, télécharger les .woff2
qu'elle référence, et remplacer les blocs ci-dessous. Surtout pas de
conversion maison : le sous-ensemble et les axes variables se perdent.
------------------------------------------------------------------ */
/* Fraunces — italique, vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url('assets/fonts/fraunces-italic-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces — italique, latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url('assets/fonts/fraunces-italic-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;
}
/* Fraunces — italique, latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url('assets/fonts/fraunces-italic-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;
}
/* Fraunces — vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('assets/fonts/fraunces-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces — latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('assets/fonts/fraunces-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;
}
/* Fraunces — latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('assets/fonts/fraunces-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;
}
/* Space Grotesk — vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('assets/fonts/space-grotesk-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Space Grotesk — latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('assets/fonts/space-grotesk-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;
}
/* Space Grotesk — latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('assets/fonts/space-grotesk-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;
}
/* Courier Prime — latin-ext */
@font-face {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/courier-prime-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;
}
/* Courier Prime — latin */
@font-face {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/courier-prime-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;
}
/* =====================================================================
Caroline Nascimento — feuille de styles unique
Direction artistique « LEVER DE RIDEAU »
Principe : la page est une pièce de théâtre. Le noir de plateau ouvre
et ferme ; entre les deux, les actes alternent lumière (papier, le
script) et pénombre (la scène). Trois voix typographiques :
· Fraunces — le jeu (titres, axes SOFT/WONK pour l'italique)
· Space Grotesk — la parole (texte courant)
· Courier Prime — les didascalies (actes, scènes, numéros)
Ordre : tokens · reset · base · utilitaires · rideau · en-tête
· composants · sections · animations · responsive
· préférences utilisateur
===================================================================== */
/* ---------------------------------------------------------------------
1. TOKENS
------------------------------------------------------------------ */
:root {
/* — Palette de marque (brief), conservée — */
--ink: #16263D;
--terracotta: #C15F3C;
--ochre: #E3A857;
--cream: #FBF7F1;
--warm-gray: #5F5A54;
--white: #FFFFFF;
/* — Variantes calculées pour respecter WCAG AA —
#C15F3C ne passe que 3,96:1 sur le crème : insuffisant pour du texte.
D'où deux nuances plus denses, réservées au texte et aux boutons. */
--terracotta-600: #B0522F; /* fond de bouton — 5,1:1 avec du blanc */
--terracotta-700: #9E4A2B; /* liens & texte sur fond clair — 5,1:1 */
--ochre-light: #F0C489;
/* — La scène (fonds sombres) — */
--noir: #0A1220; /* plateau, noir d'ouverture */
--noir-2: #101B2C; /* châssis, cartes */
--noir-3: #17253A; /* survol */
--noir-deep: #060B14; /* pied de page */
--velours: #8E2439; /* rouge rideau */
/* — Le script (fonds clairs) — */
--papier: #FBF7F1;
--papier-2: #F4EDE1;
--line: #E2D9CB;
/* — Thème : surfaces et encres de la « scène » —
Tout ce qui appartient à la scène (fonds sombres, textes crème qui s'y
posent, accents ocre) passe par ces jetons. Le thème sombre leur donne
les valeurs historiques du site ; [data-theme="light"] (section 13) les
redéfinit. Aucun composant ne doit plus viser --noir ou --cream
directement pour une surface ou un texte de scène.
--on-stage-rgb se décline en transparence : rgba(var(--on-stage-rgb), .5). */
--stage: var(--noir);
--stage-2: var(--noir-2);
--stage-3: var(--noir-3);
--stage-deep: var(--noir-deep);
--on-stage: var(--cream);
--on-stage-rgb: 251, 247, 241;
--stage-accent: var(--ochre); /* filets, icônes, numéros décoratifs */
--stage-accent-text: var(--ochre); /* texte d'accent posé sur la scène */
--glass-rgb: 10, 18, 32; /* verre de l'en-tête et du menu mobile */
--scroll-thumb: #2A3550;
--shadow-header: 0 18px 40px rgba(6, 11, 20, .35);
/* — Contexte de couleur, redéfini par section (.act--paper / --stage) */
--bg: var(--stage);
--fg: var(--on-stage);
--fg-soft: rgba(var(--on-stage-rgb), .74);
--rule: rgba(var(--on-stage-rgb), .14);
--accent-text: var(--stage-accent-text);
/* — Motif signature — */
--motif-line: rgba(227, 168, 87, .30);
--motif-line-2: rgba(193, 95, 60, .38);
/* — Typographie — */
--font-title: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
--font-body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: "Courier Prime", ui-monospace, "Courier New", monospace;
--fs-hero: clamp(2.75rem, 1.1rem + 6.6vw, 6.75rem);
--fs-h2: clamp(2rem, 1.25rem + 3.1vw, 3.75rem);
--fs-h3: clamp(1.1875rem, 1.09rem + .42vw, 1.4375rem);
--fs-lead: clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
--fs-body: clamp(1rem, .97rem + .14vw, 1.0625rem);
--fs-small: .9375rem;
--fs-micro: .75rem;
/* — Rythme & largeurs — */
--space-act: clamp(4.5rem, 9vw, 8.5rem);
--curve: clamp(26px, 5.5vw, 80px);
--container: 1220px;
--gutter: clamp(1.25rem, 5vw, 2.75rem);
--header-h: 74px;
/* — Formes — */
--radius-sm: 10px;
--radius: 18px;
--radius-lg: 28px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(6, 11, 20, .10), 0 3px 12px rgba(6, 11, 20, .06);
--shadow: 0 2px 6px rgba(6, 11, 20, .08), 0 18px 44px rgba(6, 11, 20, .12);
--shadow-lg: 0 6px 14px rgba(6, 11, 20, .10), 0 36px 90px rgba(6, 11, 20, .24);
--glow: 0 0 0 1px rgba(227, 168, 87, .28), 0 18px 60px rgba(227, 168, 87, .18);
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-inout: cubic-bezier(.76, 0, .24, 1);
}
/* ---------------------------------------------------------------------
2. RESET
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
background: var(--stage);
}
html.is-curtained { overflow: hidden; }
body,
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote {
margin: 0;
padding: 0;
}
ul[role="list"], ol[role="list"] { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }
/* ---------------------------------------------------------------------
3. BASE
------------------------------------------------------------------ */
body {
background: var(--stage);
color: var(--on-stage);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: var(--font-title);
font-weight: 600;
line-height: 1.06;
letter-spacing: -.025em;
text-wrap: balance;
font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 26, "WONK" 0;
}
h2 { font-size: var(--fs-h2); }
h3 {
font-size: var(--fs-h3);
line-height: 1.22;
letter-spacing: -.012em;
font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 20, "WONK" 0;
}
p { text-wrap: pretty; }
/* Le mot « fantaisie » : vraie italique Fraunces, axes SOFT + WONK poussés.
Réservé à un mot par titre — c'est un accent, pas un style de texte. */
.wonk {
font-family: var(--font-title);
font-style: italic;
font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 100, "WONK" 1;
color: var(--accent-text);
}
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .2em; }
strong { font-weight: 600; }
::selection { background: var(--ochre); color: var(--ink); }
/* Focus clavier visible partout, sur fond clair comme sur fond sombre */
:focus-visible {
outline: 3px solid var(--accent-text);
outline-offset: 3px;
border-radius: 4px;
}
/* Décalage des ancres pour compenser l'en-tête collant */
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }
/* Barre de défilement accordée à la scène (WebKit / Chromium) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--stage-deep); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--terracotta-600); }
/* ---------------------------------------------------------------------
4. UTILITAIRES
------------------------------------------------------------------ */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 1rem; top: -100px;
z-index: 9999;
padding: .75rem 1.25rem;
background: var(--ochre);
color: var(--ink);
border-radius: var(--radius-pill);
font-weight: 600;
text-decoration: none;
transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }
/* Didascalie : « Acte II / Expertises ». Le repère de lecture de la pièce. */
.slug {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--fg-soft);
margin-bottom: 1.5rem;
}
.slug__act { color: var(--accent-text); }
.slug__rule {
display: block;
width: 34px; height: 1px;
background: currentColor;
opacity: .4;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--fg-soft);
max-width: 56ch;
}
.micro {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .06em;
color: var(--fg-soft);
margin-top: 1rem;
}
/* Grain argentique — la texture qui empêche les aplats d'être trop nets */
.grain {
position: fixed;
inset: -150%;
z-index: 400;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grain-shift 6s steps(6) infinite;
will-change: transform;
}
@keyframes grain-shift {
0% { transform: translate(0, 0); }
20% { transform: translate(-3%, 2%); }
40% { transform: translate(2%, -3%); }
60% { transform: translate(-2%, -2%); }
80% { transform: translate(3%, 1%); }
100% { transform: translate(0, 0); }
}
/* Poursuite : halo chaud qui suit le curseur (injecté par le JS) */
.followspot {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
transition: opacity .8s var(--ease);
background: radial-gradient(
26vmax 26vmax at var(--spot-x, 50%) var(--spot-y, 30%),
rgba(227, 168, 87, .13), rgba(193, 95, 60, .05) 45%, transparent 68%);
}
.followspot.is-on { opacity: 1; }
/* ---------------------------------------------------------------------
5. RIDEAU D'OUVERTURE
Deux panneaux qui s'écartent. Affiché uniquement si JS est actif ;
retiré du DOM une fois la scène ouverte.
------------------------------------------------------------------ */
.curtain { display: none; }
.js .curtain {
display: block;
position: fixed;
inset: 0;
z-index: 900;
}
.curtain__panel {
position: absolute;
top: 0; bottom: 0;
width: 50.5%;
background: var(--stage);
transition: transform 1.1s var(--ease-inout);
}
.curtain__panel--left { left: 0; }
.curtain__panel--right { right: 0; }
.curtain__panel::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(227, 168, 87, .5), transparent);
}
.curtain__panel--left::after { right: 0; }
.curtain__panel--right::after { left: 0; }
.curtain__center {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 1rem;
text-align: center;
padding-inline: var(--gutter);
transition: opacity .45s var(--ease), transform .8s var(--ease-out);
}
.curtain__name {
font-family: var(--font-title);
font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
font-weight: 600;
font-variation-settings: "opsz" 90, "wght" 600, "SOFT" 40, "WONK" 0;
letter-spacing: -.02em;
color: var(--on-stage);
opacity: 0;
animation: curtain-in .9s var(--ease-out) .1s forwards;
}
.curtain__rule {
display: block;
width: min(220px, 46vw); height: 1px;
background: var(--stage-accent);
transform: scaleX(0);
transform-origin: center;
animation: curtain-rule 1s var(--ease-out) .35s forwards;
}
.curtain__sub {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--stage-accent-text);
opacity: 0;
animation: curtain-in .8s var(--ease-out) .5s forwards;
}
@keyframes curtain-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes curtain-rule { to { transform: scaleX(1); } }
.curtain.is-open .curtain__center { opacity: 0; transform: translateY(-18px); }
.curtain.is-open .curtain__panel--left { transform: translateX(-101%); }
.curtain.is-open .curtain__panel--right { transform: translateX(101%); }
/* ---------------------------------------------------------------------
6. EN-TÊTE / NAVIGATION
Barre flottante en verre sombre : elle traverse aussi bien les actes
clairs que les actes sombres sans changer de logique de contraste.
------------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 300;
color: var(--on-stage);
transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled {
background: rgba(var(--glass-rgb), .78);
box-shadow: 0 1px 0 rgba(var(--on-stage-rgb), .10), var(--shadow-header);
}
@supports (backdrop-filter: blur(10px)) {
.site-header.is-scrolled { backdrop-filter: saturate(160%) blur(14px); }
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: .7rem;
min-height: 44px;
color: var(--on-stage);
text-decoration: none;
flex-shrink: 0;
}
.brand .mark {
color: var(--stage-accent);
flex: 0 0 auto;
transition: transform .5s var(--ease-out);
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.brand__name {
font-family: var(--font-title);
font-size: 1.0625rem;
font-weight: 600;
font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 30, "WONK" 0;
letter-spacing: -.01em;
white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.site-nav__list {
display: flex;
align-items: center;
gap: clamp(1rem, 2.2vw, 2rem);
list-style: none;
}
.site-nav__list a {
position: relative;
display: inline-flex;
align-items: baseline;
gap: .45rem;
padding: .4rem 0;
color: var(--on-stage);
font-size: .875rem;
font-weight: 500;
letter-spacing: .01em;
text-decoration: none;
white-space: nowrap;
transition: color .25s var(--ease);
}
.site-nav__no {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .1em;
color: var(--stage-accent-text);
opacity: .55;
transition: opacity .25s var(--ease);
}
.site-nav__list a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: var(--stage-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s var(--ease-out);
}
.site-nav__list a:hover { color: var(--stage-accent-text); }
.site-nav__list a:hover .site-nav__no,
.site-nav__list a[aria-current="true"] .site-nav__no { opacity: 1; }
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.site-nav__list a[aria-current="true"] { color: var(--stage-accent-text); }
/* Bouton hamburger — masqué au-dessus de 980px */
.nav-toggle {
display: none;
align-items: center;
gap: .5rem;
min-height: 44px;
padding: .5rem .9rem;
background: rgba(var(--on-stage-rgb), .06);
border: 1px solid rgba(var(--on-stage-rgb), .18);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--on-stage);
cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
display: block;
height: 1.5px;
background: var(--stage-accent);
border-radius: 2px;
transition: transform .3s var(--ease-out), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* Progression de lecture */
.scroll-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
overflow: hidden;
}
.scroll-progress span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--terracotta), var(--ochre));
transform: scaleX(var(--p, 0));
transform-origin: left;
}
/* Indicateur d'acte en marge droite */
.rail {
position: fixed;
right: clamp(.75rem, 1.6vw, 1.5rem);
top: 50%;
translate: 0 -50%;
z-index: 250;
display: none;
align-items: center;
gap: 1rem;
flex-direction: column;
pointer-events: none;
}
.rail__line {
position: relative;
width: 1px; height: 120px;
background: rgba(var(--on-stage-rgb), .18);
overflow: hidden;
}
.rail__line span {
position: absolute;
inset: 0;
background: var(--stage-accent);
transform: scaleY(var(--p, 0));
transform-origin: top;
}
.rail__label {
writing-mode: vertical-rl;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(var(--on-stage-rgb), .6);
transition: opacity .3s var(--ease);
}
/* Sur fond clair, l'indicateur passe en encre pour rester lisible */
.rail.on-paper .rail__line { background: rgba(22, 38, 61, .18); }
.rail.on-paper .rail__label { color: rgba(22, 38, 61, .55); }
.rail.on-paper .rail__line span { background: var(--terracotta-600); }
/* ---------------------------------------------------------------------
7. COMPOSANTS
------------------------------------------------------------------ */
/* — 7.1 Boutons —
Un seul et même CTA sur tout le site : « Réserver un appel découverte ».
Ocre sur encre : 7,2:1. La terracotta n'atteindrait pas les 3:1 face au
bleu encre ; sur fond clair, c'est l'inverse — d'où les deux variantes. */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .9rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: -.005em;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease),
background-color .3s var(--ease), color .3s var(--ease);
}
/* Balayage de lumière au survol */
.btn::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .7s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn--primary {
background: var(--ochre);
color: var(--ink);
box-shadow: 0 10px 30px rgba(227, 168, 87, .22);
}
.btn--primary:hover {
background: var(--ochre-light);
color: var(--ink);
box-shadow: 0 14px 44px rgba(227, 168, 87, .34);
}
.btn--primary:active { transform: translateY(1px) scale(.99); }
/* Sur fond clair, l'ocre manque de contraste : on repasse en terracotta */
.act--paper .btn--primary {
background: var(--terracotta-600);
color: var(--white);
box-shadow: 0 10px 30px rgba(176, 82, 47, .22);
}
.act--paper .btn--primary:hover { background: var(--terracotta-700); color: var(--white); }
.btn--sm { padding: .6rem 1.15rem; font-size: .8125rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.0625rem; }
/* — 7.2 En-tête d'acte —
La justification des titres est exprimée en « em » : l'unité suit la
taille fluide du titre lui-même, donc le nombre de signes par ligne
reste constant du mobile au grand écran. (Un « ch » posé ici se
calculerait sur la police du bloc, pas sur celle du titre.) */
.act-head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.act-head h2 { max-width: 11em; }
.act-head--wide h2 { max-width: 14em; }
.act-head--center { margin-inline: auto; text-align: center; }
.act-head--center h2 { max-width: 14em; margin-inline: auto; }
.act-head--center .slug { justify-content: center; }
.act-head h2 + .lead { margin-top: 1.5rem; max-width: 48ch; }
.act-head--center .lead { margin-inline: auto; }
/* — 7.3 Emplacements photo —
Le format « arche » cite l'ouverture de scène (le cadre de scène
italien). L'image réelle hérite du même rayon. */
.photo {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border-radius: var(--radius-lg);
background:
radial-gradient(120% 90% at 25% 5%, rgba(227, 168, 87, .34), transparent 58%),
radial-gradient(110% 100% at 100% 100%, rgba(193, 95, 60, .30), transparent 62%),
var(--stage-2);
box-shadow: var(--shadow-lg);
}
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }
/* Arche de scène : rayon elliptique — la moitié de la largeur en
horizontal, 44 % de la hauteur en vertical. Un rayon uniforme trop
grand serait ramené par le navigateur à un simple coin arrondi. */
.photo--arch {
aspect-ratio: 4 / 5;
border-radius: 50% 50% var(--radius) var(--radius) / 44% 44% var(--radius) var(--radius);
}
/* Filet lumineux le long du cadre */
.photo::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(227, 168, 87, .28);
pointer-events: none;
}
/* Le motif signature en filigrane dans les emplacements vides */
.photo::before {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' fill='none' stroke='%23E3A857' stroke-width='2' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M0 60C30 10 70 10 100 60s70 50 100 15 70-20 120-16'/%3E%3Cpath d='M0 60c30 50 70 50 100 0s70-50 100-15 70 20 120 16'/%3E%3C/svg%3E") no-repeat center / 150% auto;
}
.photo__label {
position: relative;
padding: .55rem 1.05rem;
border-radius: var(--radius-pill);
background: rgba(10, 18, 32, .72);
color: rgba(251, 247, 241, .82);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .08em;
text-align: center;
}
/* Style appliqué à la vraie image une fois insérée.
⚠ Le rayon n'est volontairement PAS forcé ici. Quand l'image porte
elle-même les classes du cadre (.photo .photo--arch .photo__img — c'est
le remplacement décrit dans le README), un « border-radius: inherit »
déclaré après .photo--arch l'emporterait sur l'arche et la ramènerait
au rayon du parent, soit 0. L'arche serait perdue. */
.photo__img {
width: 100%; height: 100%;
object-fit: cover;
}
/* Portrait détouré posé DANS le cadre, et non à la place du cadre.
Pas de classe .photo__img ici : son object-fit:cover rognerait le sujet.
▚ POSITIONNEMENT ABSOLU, ET NON PAR LA GRILLE
.photo est bien en place-items:center, mais sa hauteur vient d'un
aspect-ratio : une hauteur en pourcentage sur l'enfant devient alors
circulaire, le navigateur la traite comme « auto », et l'image reprenait
sa largeur intrinsèque — elle débordait de 100 px sous le cadre.
inset:0 + margin:auto centre sans dépendre de la hauteur du parent, et
les deux max- garantissent qu'elle ne dépasse jamais.
▚ Z-INDEX : DEVANT LE MOTIF, DERRIÈRE LE FILET
Le motif signature et le filet ocre du cadre sont des pseudo-éléments
positionnés. Tant que .photo était elle-même un ![]()
, ils ne
s'affichaient pas du tout — un élément remplacé n'a pas de ::before.
Depuis qu'il y a un vrai conteneur, ils se peignent au-dessus de
l'enfant. On remet l'ordre voulu : le motif au fond, Caroline devant,
le filet du cadre par-dessus tout.
▚ CADRAGE : CALQUÉ SUR LA PHOTO DU THÈME SOMBRE
Les deux thèmes doivent présenter Caroline de la même façon. Mesuré sur
la photo sombre, dans son cadre : elle occupe environ 80 % de la largeur,
laisse 16 % de vide au-dessus de la tête, et son corps est coupé net par
le bas du cadre.
Ces trois valeurs sont reproduites ici. 9,5 % de retrait de chaque côté
donnent les 81 % de largeur ; 15 % de retrait en haut placent la tête au
même endroit (le détourage a lui-même 1 % de vide au-dessus du crâne).
La hauteur suit le format de l'image et déborde alors par le bas : c'est
ce débordement que l'arche rogne, comme dans le thème sombre.
Vérifié : le fichier n'a aucun vide transparent en bas, le corps va
jusqu'au bord — le rognage porte bien sur elle, pas sur du vide. */
/* ⚠ La largeur est fixée explicitement, et non déduite de left + right :
sur un élément remplacé (une image), une largeur « auto » prend la
largeur intrinsèque et « right » est purement ignoré. L'image repassait
alors pleine largeur sans prévenir. */
.hero__cutout {
position: absolute;
top: 15%;
left: 9.5%;
z-index: 1;
width: 81%;
height: auto;
}
.photo::after { z-index: 2; }
/* Cas d'une image imbriquée DANS un conteneur .photo : là, elle épouse
bien le rayon du cadre qui l'entoure. */
.photo > .photo__img { border-radius: inherit; }
/* — 7.4 Châssis d'expertise (cartes) —
Chaque carte est un panneau de décor : une poursuite locale suit le
curseur à l'intérieur (--mx / --my posés par le JS). */
.flats {
display: grid;
gap: clamp(1rem, 1.8vw, 1.5rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.flat {
position: relative;
isolation: isolate;
padding: clamp(1.5rem, 2.6vw, 2.25rem);
padding-top: clamp(2.5rem, 3.6vw, 3.25rem);
background: var(--stage-2);
border: 1px solid rgba(var(--on-stage-rgb), .09);
border-radius: var(--radius);
overflow: hidden;
transition: transform .45s var(--ease-out), border-color .45s var(--ease),
background-color .45s var(--ease);
}
.flat::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0;
background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 0%),
rgba(227, 168, 87, .18), transparent 68%);
transition: opacity .45s var(--ease);
}
.flat:hover, .flat:focus-within {
transform: translateY(-6px);
background: var(--stage-3);
border-color: rgba(227, 168, 87, .34);
}
.flat:hover::before, .flat:focus-within::before { opacity: 1; }
.flat__no {
position: absolute;
top: 1.15rem; right: 1.35rem;
font-family: var(--font-mono);
font-size: .8125rem;
letter-spacing: .1em;
color: rgba(var(--on-stage-rgb), .34);
transition: color .35s var(--ease);
}
.flat:hover .flat__no { color: var(--stage-accent-text); }
.flat__icon {
display: grid;
place-items: center;
width: 46px; height: 46px;
margin-bottom: 1.25rem;
border-radius: 50%;
border: 1px solid rgba(227, 168, 87, .3);
background: rgba(227, 168, 87, .08);
color: var(--stage-accent);
transition: transform .5s var(--ease-out), background-color .4s var(--ease);
}
.flat__icon svg { width: 22px; height: 22px; }
.flat:hover .flat__icon { transform: rotate(-8deg) scale(1.07); background: rgba(227, 168, 87, .16); }
.flat h3 { margin-bottom: .55rem; }
.flat p { color: var(--fg-soft); font-size: var(--fs-small); }
/* — 7.5 Scènes (formats) — */
.scenes {
position: relative;
padding-left: clamp(2.5rem, 4vw, 3.75rem);
counter-reset: scene;
}
/* Rail de scène : un trait qui se remplit à mesure de la lecture */
.scenes::before,
.scenes::after {
content: "";
position: absolute;
left: 6px; top: .6rem; bottom: .6rem;
width: 1px;
}
.scenes::before { background: var(--rule); }
.scenes::after {
background: linear-gradient(to bottom, var(--terracotta), var(--ochre));
transform: scaleY(var(--fill, 0));
transform-origin: top;
transition: transform .2s linear;
}
.scene { position: relative; padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.scene:last-child { padding-bottom: 0; }
.scene::before {
content: "";
position: absolute;
left: calc(-1 * clamp(2.5rem, 4vw, 3.75rem) + 2px);
top: .55rem;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--terracotta);
transition: background-color .4s var(--ease), transform .4s var(--ease-out);
}
.scene:hover::before { background: var(--terracotta); transform: scale(1.35); }
.scene__no {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: .4rem;
}
.scene h3 { margin-bottom: .35rem; }
.scene > p:last-child { color: var(--fg-soft); font-size: var(--fs-small); }
/* — 7.6 Publics — */
.audience {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.audience__item { position: relative; padding-top: 1.75rem; }
.audience__item::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--terracotta);
transform: scaleX(0);
transform-origin: left;
transition: transform .9s var(--ease-out) .1s;
}
.audience__item.is-visible::before { transform: scaleX(1); }
.audience__no {
display: block;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .2em;
color: var(--accent-text);
margin-bottom: .75rem;
}
.audience__item h3 { margin-bottom: .5rem; }
.audience__item p { color: var(--fg-soft); font-size: var(--fs-small); }
/* — 7.7 Billets de crédibilité — */
.tickets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
margin-top: clamp(3rem, 6vw, 5rem);
}
.ticket {
position: relative;
display: flex;
align-items: stretch;
background: var(--stage-2);
border: 1px solid rgba(var(--on-stage-rgb), .10);
border-radius: var(--radius-sm);
overflow: hidden;
transition: transform .4s var(--ease-out), border-color .4s var(--ease);
}
.ticket:hover { transform: translateY(-4px); border-color: rgba(227, 168, 87, .3); }
/* Largeur fixe : les deux encoches de perforation doivent tomber
exactement sur le trait pointillé, quelle que soit la fonte. */
.ticket { --stub: 2.75rem; }
.ticket__stub {
flex: 0 0 var(--stub);
display: grid;
place-items: center;
border-right: 1px dashed rgba(var(--on-stage-rgb), .28);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .18em;
color: var(--stage-accent-text);
writing-mode: vertical-rl;
text-orientation: mixed;
}
/* Les deux encoches de perforation, à la couleur du fond de section */
.ticket::before,
.ticket::after {
content: "";
position: absolute;
left: calc(var(--stub) - 7px);
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bg);
}
.ticket::before { top: -7px; }
.ticket::after { bottom: -7px; }
.ticket__body {
display: grid;
gap: .3rem;
padding: 1.15rem 1.35rem;
}
.ticket__icon {
display: grid;
place-items: center;
width: 34px; height: 34px;
margin-bottom: .35rem;
border-radius: 50%;
background: rgba(227, 168, 87, .12);
color: var(--stage-accent);
}
.ticket__icon svg { width: 18px; height: 18px; }
.ticket strong {
font-family: var(--font-title);
font-size: 1.0625rem;
font-weight: 600;
font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 20, "WONK" 0;
line-height: 1.25;
}
.ticket__note {
font-family: var(--font-mono);
font-size: var(--fs-micro);
line-height: 1.5;
color: var(--fg-soft);
}
/* — 7.8 Témoignages — */
.quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
align-items: start;
}
.quote {
position: relative;
padding: clamp(1.75rem, 3vw, 2.5rem);
padding-top: 3.5rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.quote:nth-child(odd) { rotate: -.7deg; }
.quote:nth-child(even) { rotate: .5deg; }
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.quote::before {
content: "\201C";
position: absolute;
top: .28em; left: 1rem;
font-family: var(--font-title);
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 100, "WONK" 1;
font-size: 5rem;
line-height: 1;
color: var(--terracotta);
opacity: .3;
}
/* Étiquette de catégorie de public — posée en haut à droite, face au
guillemet ouvrant. Même traitement que les slugs d'acte : mono, petites
capitales très espacées. Les 3 cartes reprennent le découpage de
l'acte IV « Pour qui » : Écoles · Entreprises · Étudiants. */
.quote__cat {
position: absolute;
top: 1.6rem;
right: clamp(1.75rem, 3vw, 2.5rem);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--terracotta-700);
}
.quote blockquote p {
font-family: var(--font-title);
font-size: 1.125rem;
font-variation-settings: "opsz" 30, "wght" 500, "SOFT" 40, "WONK" 0;
line-height: 1.45;
color: var(--ink);
}
/* Surlignage — deux ou trois mots par témoignage, jamais plus : c'est ce
qui reste en tête quand on ne fait que survoler la page. Le trait de
surligneur ne couvre que le bas des lettres (dégradé coupé net à 42 %),
pour éclairer sans écraser le texte. plutôt qu'un : c'est
l'élément prévu pour « passage mis en évidence ».
Contraste vérifié : encre sur ocre lavé, environ 11:1. */
.quote mark {
background: linear-gradient(to top,
rgba(227, 168, 87, .45) 42%, transparent 42%);
color: inherit;
padding: 0 .08em;
border-radius: 2px;
}
.quote figcaption {
display: grid;
gap: .15rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.quote__name { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.quote__role { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--warm-gray); }
/* Avis anonymisés : sans nom ni prénom, c'est la fonction qui attribue le
propos. Seule dans la légende, elle doit donc porter le poids visuel
d'un nom, et non le traitement discret d'une ligne secondaire.
Le :only-child rend la règle réversible : le jour où un nom revient
au-dessus, la fonction retrouve d'elle-même son style effacé. */
.quote figcaption > .quote__role:only-child {
font-family: inherit;
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink);
}
/* Emplacement encore vide : même gabarit, traitement discret */
.quote.is-empty {
background: transparent;
border-style: dashed;
border-color: rgba(95, 90, 84, .32);
box-shadow: none;
}
.quote.is-empty::before { opacity: .16; }
.quote.is-empty .quote__cat,
.quote.is-empty blockquote p,
.quote.is-empty .quote__name,
.quote.is-empty .quote__role { color: var(--warm-gray); }
.quote.is-empty figcaption { border-top-color: rgba(95, 90, 84, .25); }
.quote.is-empty figcaption > .quote__role:only-child { color: var(--warm-gray); }
/* ---------------------------------------------------------------------
8. SECTIONS / ACTES
------------------------------------------------------------------ */
.act {
position: relative;
padding-block: var(--space-act);
background: var(--bg);
color: var(--fg);
}
.act--tight { padding-top: 0; }
/* Contexte clair — le script */
.act--paper {
--bg: var(--papier);
--fg: var(--ink);
--fg-soft: var(--warm-gray);
--rule: var(--line);
--accent-text: var(--terracotta-700);
}
/* Contexte sombre — la scène */
.act--stage {
--bg: var(--stage);
--fg: var(--on-stage);
--fg-soft: rgba(var(--on-stage-rgb), .74);
--rule: rgba(var(--on-stage-rgb), .14);
--accent-text: var(--stage-accent-text);
}
/* Chevauchement arrondi : chaque acte « monte » sur le précédent,
qui reste visible dans les deux coins. C'est la découpe de scène. */
.act--curve {
z-index: 1;
margin-top: calc(-1 * var(--curve));
padding-top: calc(var(--space-act) + var(--curve) * .5);
border-start-start-radius: var(--curve);
border-start-end-radius: var(--curve);
}
/* — 8.1 Ouverture / hero — */
.hero {
position: relative;
min-height: min(94svh, 940px);
display: flex;
align-items: center;
padding-block: clamp(3.5rem, 8vw, 6rem) clamp(5rem, 9vw, 8rem);
margin-top: calc(-1 * var(--header-h));
padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem));
overflow: hidden;
background: var(--stage);
}
/* Faisceaux de poursuite */
.hero__stage { position: absolute; inset: 0; pointer-events: none; }
.beam {
position: absolute;
top: -18%;
width: 44vmax; height: 120%;
filter: blur(30px);
clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
transform-origin: top center;
animation: beam-sway 16s var(--ease-inout) infinite alternate;
}
.beam--1 {
left: -6vmax;
background: linear-gradient(to bottom, rgba(227, 168, 87, .20), rgba(227, 168, 87, 0) 62%);
rotate: -12deg;
}
.beam--2 {
left: 26vmax;
background: linear-gradient(to bottom, rgba(193, 95, 60, .18), rgba(193, 95, 60, 0) 58%);
rotate: 6deg;
animation-delay: -5s;
}
.beam--3 {
right: -10vmax;
background: linear-gradient(to bottom, rgba(227, 168, 87, .14), rgba(227, 168, 87, 0) 60%);
rotate: 14deg;
animation-delay: -9s;
}
@keyframes beam-sway {
from { opacity: .72; scale: 1 1; }
to { opacity: 1; scale: 1.06 1; }
}
.hero__floor {
position: absolute;
left: 50%; bottom: -32vmax;
width: 90vmax; height: 60vmax;
translate: -50% 0;
background: radial-gradient(50% 50% at 50% 50%, rgba(227, 168, 87, .13), transparent 70%);
}
/* Motif signature, tracé animé à l'ouverture */
.hero__motif {
position: absolute;
left: 0; right: 0;
bottom: -1rem;
width: 100%;
height: clamp(150px, 20vw, 280px);
pointer-events: none;
opacity: .9;
}
/* L'état « non tracé » n'existe que si JS est actif : sans lui, le motif
s'affiche simplement en entier au lieu de rester invisible. */
.js .hero__strand {
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
}
.js .hero.is-lit .hero__strand {
animation: draw-strand 2.4s var(--ease-out) .3s forwards;
}
.js .hero.is-lit .hero__strand--2 { animation-delay: .5s; }
@keyframes draw-strand { to { stroke-dashoffset: 0; } }
.hero__inner {
position: relative;
z-index: 2;
display: grid;
gap: clamp(2.75rem, 5vw, 4.5rem);
align-items: center;
width: 100%;
}
.hero__title {
font-size: var(--fs-hero);
line-height: .96;
letter-spacing: -.035em;
font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 24, "WONK" 0;
margin-bottom: 1.75rem;
max-width: 15ch;
}
.hero__title .wonk { font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 100, "WONK" 1; }
.hero__lead { max-width: 46ch; }
.hero__actions { margin-top: 2.25rem; }
.hero__aside { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.hero__photo { width: 100%; }
.hero__caption {
display: flex;
align-items: center;
gap: .6rem;
margin-top: 1.1rem;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(var(--on-stage-rgb), .5);
}
.hero__caption-no { color: var(--stage-accent-text); }
/* Centrage par les marges, et NON par translate : la classe .js anime
« translate » pour faire monter le bloc, ce qui écrasait le -50 % et
décalait le texte vers la droite de la moitié de sa largeur.
Les deux responsabilités sont désormais séparées. */
.scroll-cue {
position: absolute;
left: 0; right: 0; bottom: 1.25rem;
margin-inline: auto;
width: max-content;
z-index: 2;
display: grid;
justify-items: center;
gap: .75rem;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(var(--on-stage-rgb), .45);
}
.scroll-cue__line {
position: relative;
width: 1px; height: 54px;
background: rgba(var(--on-stage-rgb), .18);
overflow: hidden;
}
/* Sur une seule colonne, le repère « Entrer en scène » — posé en absolu au
bas de l'ouverture — retombait exactement sur la légende « 01 Sur le
plateau », qui termine la colonne photo : 19 px de recouvrement mesurés à
375 px. On creuse le bas de l'ouverture pour lui rendre sa place.
Inutile au-delà de 980 px : la légende part alors dans la colonne de
droite, et le repère reste seul, centré sous le texte. */
@media (max-width: 979.98px) {
.hero { padding-bottom: calc(clamp(5rem, 9vw, 8rem) + 3.25rem); }
}
.scroll-cue__line::after {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; height: 40%;
background: var(--stage-accent);
animation: cue-travel 2.4s var(--ease-inout) infinite;
}
@keyframes cue-travel {
0% { transform: translateY(-100%); }
60% { transform: translateY(250%); }
100% { transform: translateY(250%); }
}
/* — 8.2 Bandeau défilant — */
.marquee {
position: relative;
z-index: 0;
overflow: hidden;
padding-block: clamp(.9rem, 1.6vw, 1.35rem) calc(clamp(.9rem, 1.6vw, 1.35rem) + var(--curve));
background: var(--terracotta);
color: var(--noir); /* et non --ink : 3,8:1 sur la terracotta au lieu de 2,9:1 */
border-block: 1px solid rgba(10, 18, 32, .18);
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee-run 26s linear infinite;
will-change: transform;
}
/* Les mots ne sont séparés que par du vide, depuis le retrait du « ✳ ».
Écart resserré : assez pour que les mots ne se touchent pas, pas plus.
padding-right doit rester ÉGAL à gap : c'est lui qui tient l'écart aux
jointures entre groupes, là où la boucle se recolle. S'ils diffèrent,
on voit un hoquet à chaque tour. */
.marquee__group {
display: flex;
align-items: center;
gap: clamp(1.5rem, 2vw, 2.25rem);
padding-right: clamp(1.5rem, 2vw, 2.25rem);
font-family: var(--font-title);
font-size: clamp(1.25rem, .9rem + 1.5vw, 2.25rem);
font-weight: 600;
font-variation-settings: "opsz" 72, "wght" 600, "SOFT" 60, "WONK" 0;
letter-spacing: -.02em;
white-space: nowrap;
}
/* -12,5 % = exactement un groupe sur les huit que compte la piste. À la fin
du cycle, le deuxième groupe occupe la place du premier : la boucle se
recolle sans jointure visible.
▚ LA RÈGLE, ET POURQUOI HUIT
Ce pourcentage vaut -100 % / nombre de groupes. Le changer sans toucher au
HTML (ou l'inverse) casse le raccord.
Le nombre de groupes, lui, ne se choisit pas au hasard : après le décalage
d'un groupe, il doit rester au moins un écran de contenu à droite, soit
(nombre de groupes − 1) × largeur d'un groupe ⩾ largeur de l'écran.
Un groupe mesure environ 1000 px ; huit groupes couvrent donc jusqu'à
7000 px de large — au-delà de tout écran existant. Avec quatre, la limite
tombait à 3000 px et le bandeau se vidait en plein écran sur un moniteur
4K ou ultra-large. C'est le genre de défaut qu'on ne voit jamais sur son
propre écran : ne pas réduire ce nombre pour « alléger ». */
/* La distance est dictée par script.js, en pixels : exactement une copie,
mesurée sur la page réelle. Le repli -12,5 % ne sert que si le JavaScript
est absent — il vaut -100 % / 8, les huit groupes posés dans le HTML.
⚠ Ce repli et le nombre de groupes du HTML forment un couple : si l'un
change, l'autre doit suivre. Avec JavaScript, la question ne se pose plus. */
@keyframes marquee-run { to { transform: translateX(var(--marquee-shift, -12.5%)); } }
/* — 8.3 Acte I — approche — */
.approche {
display: grid;
gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: start;
}
.approche__media { position: relative; }
.approche__note {
margin-top: 1rem;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .06em;
color: var(--warm-gray);
}
.approche__note em { color: var(--terracotta-700); }
.approche__body > * + * { margin-top: 1.5rem; }
.approche__body p { color: var(--fg-soft); max-width: 54ch; }
/* Lettrine — l'entrée en matière du script */
.dropcap::first-letter {
float: left;
margin: .06em .12em 0 0;
font-family: var(--font-title);
font-size: 3.9em;
font-weight: 600;
font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 60, "WONK" 0;
line-height: .78;
color: var(--terracotta-700);
}
.pullquote {
position: relative;
padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
border-left: 2px solid var(--terracotta);
}
.pullquote p {
max-width: 13em;
font-family: var(--font-title);
font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem);
font-weight: 600;
font-variation-settings: "opsz" 90, "wght" 600, "SOFT" 40, "WONK" 0;
line-height: 1.16;
letter-spacing: -.02em;
color: var(--ink);
max-width: none;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
list-style: none;
}
.tags li {
padding: .4rem .9rem;
border: 1px solid var(--rule);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-soft);
transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}
.tags li:hover {
border-color: var(--terracotta);
color: var(--terracotta-700);
transform: translateY(-2px);
}
/* — 8.4 Acte III — formats — */
.formats {
display: grid;
gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: center;
}
.formats__media { justify-self: center; width: 100%; max-width: 420px; }
/* — 8.5 Acte V — références (bandeaux défilants) — */
.refs {
display: grid;
gap: clamp(.6rem, 1.2vw, 1rem);
margin-block: clamp(1rem, 2vw, 2rem);
}
/* Fondu sur les bords : les noms entrent et sortent de la lumière.
Le masque est posé sur chaque rangée (et non sur le conteneur) :
c'est elle qui porte l'overflow, donc le débordement à masquer. */
.refs__row {
display: flex;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.refs__track {
display: flex;
align-items: center;
gap: clamp(1.5rem, 3vw, 3rem);
padding-right: clamp(1.5rem, 3vw, 3rem);
flex: 0 0 auto;
list-style: none;
animation: refs-run 34s linear infinite;
will-change: transform;
}
.refs__row--reverse .refs__track { animation-direction: reverse; }
/* -100 % = la largeur d'UNE piste, quel que soit leur nombre : la piste
suivante vient prendre exactement sa place. Ce pourcentage est donc juste
par construction et n'a pas à changer.
En revanche, le NOMBRE de pistes compte : après le décalage il doit rester
au moins un écran de contenu à droite, soit (nombre de pistes − 1) ×
largeur d'une piste ⩾ largeur de l'écran. Une piste mesure ≈ 1550 px ;
quatre pistes couvrent donc 4650 px, soit jusqu'au 4K. Avec deux pistes,
la rangée se vidait dès 1550 px — un trou de 360 px sur un écran de bureau
ordinaire, que seul le fondu des bords rendait discret. Les trois copies
sont en aria-hidden et tabindex="-1" : les lecteurs d'écran n'en voient
qu'une, et la tabulation ne traverse pas les doublons. */
@keyframes refs-run { to { transform: translateX(-100%); } }
/* Les noms sont des liens vers les sites des établissements. Un bandeau
qui défile en continu en ferait des cibles inatteignables : la rangée
survolée s'arrête, et fait de même quand le clavier entre dedans.
Seule la rangée concernée se fige — l'autre continue de vivre. */
.refs__row:hover .refs__track { animation-play-state: paused; }
/* Hors écran : suspendu par script.js, qui pose cette classe. Passer par la
cascade — et non par l'API d'animations — laisse la règle de survol
ci-dessus opérer normalement. Les deux cas ne se rencontrent jamais : on
ne survole pas un bandeau qui n'est pas à l'écran. */
.is-paused { animation-play-state: paused; }
/* ⚠ Surtout pas :focus-within ici. Un clic de souris laisse le focus sur le
lien : la rangée resterait figée après l'ouverture du lien, et jusqu'au
rechargement de la page. :focus-visible ne se déclenche qu'au clavier,
c'est-à-dire exactement quand la pause est utile.
Règle séparée à dessein : un navigateur sans :has() l'ignore sans
emporter avec elle la pause au survol ci-dessus. */
.refs__row:has(:focus-visible) .refs__track { animation-play-state: paused; }
.ref {
flex: 0 0 auto;
font-family: var(--font-title);
font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
font-weight: 600;
font-variation-settings: "opsz" 72, "wght" 600, "SOFT" 30, "WONK" 0;
letter-spacing: -.02em;
white-space: nowrap;
/* .52 et non .34 : ce sont de vrais noms d'établissements, pas du décor.
Fondus dans le noir ils tomberaient à 2,2:1 ; à cette opacité ils
passent 4,8:1 tout en gardant l'effet de mur qui s'éclaire. */
color: rgba(var(--on-stage-rgb), .52);
transition: color .4s var(--ease);
}
.ref:hover { color: var(--stage-accent-text); }
/* Le lien n'apporte aucun style propre : c'est le qui
porte la typographie et la couleur, pour que les deux pistes du
bandeau restent rigoureusement identiques. */
.ref a { color: inherit; text-decoration: none; }
.ref a:focus-visible {
outline: 2px solid var(--stage-accent-text);
outline-offset: .3rem;
border-radius: 4px;
}
/* — 8.6 Finale / contact — */
.finale { text-align: center; overflow: hidden; }
.finale__inner { position: relative; z-index: 2; }
.finale .slug { justify-content: center; }
.finale .lead { margin-inline: auto; max-width: 44ch; }
.finale__title {
font-size: clamp(2.5rem, 1.3rem + 5vw, 5.5rem);
line-height: 1;
letter-spacing: -.035em;
font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 30, "WONK" 0;
margin-bottom: 1.5rem;
max-width: 12em;
margin-inline: auto;
}
.finale__title .wonk { font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 100, "WONK" 1; }
.finale__actions { margin-top: 2.5rem; }
.finale__glow {
position: absolute;
left: 50%; top: 8%;
width: 70vmax; height: 55vmax;
translate: -50% 0;
background: radial-gradient(50% 50% at 50% 50%, rgba(227, 168, 87, .16), transparent 68%);
pointer-events: none;
}
/* Macaron tournant */
.rotor {
display: none;
position: absolute;
right: 0; top: 4%;
width: 158px; height: 158px;
}
.rotor svg {
width: 100%; height: 100%;
animation: rotor-spin 26s linear infinite;
}
.rotor text {
font-family: var(--font-mono);
font-size: 13.5px;
letter-spacing: .16em;
text-transform: uppercase;
fill: rgba(var(--on-stage-rgb), .62);
}
.rotor__center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 1.5rem;
color: var(--stage-accent);
}
@keyframes rotor-spin { to { transform: rotate(360deg); } }
.contact-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem 2.5rem;
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--rule);
}
.contact-links a {
display: inline-flex;
align-items: center;
gap: .55rem;
min-height: 44px;
color: var(--on-stage);
font-size: var(--fs-small);
font-weight: 500;
text-decoration: none;
transition: color .25s var(--ease);
}
.contact-links a:hover { color: var(--stage-accent-text); text-decoration: underline; }
.contact-links svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Le aligne le lien et son bouton de repli côte à côte. */
.contact-links li { display: inline-flex; align-items: center; gap: .6rem; }
/* Bouton « Copier » — volontairement discret : le lien mailto reste
l'action principale, ceci n'est qu'un filet pour les visiteurs sans
logiciel de messagerie. Voir le commentaire dans index.html. */
.copy {
flex: 0 0 auto;
padding: .32rem .72rem;
border: 1px solid rgba(227, 168, 87, .38);
border-radius: var(--radius-pill);
background: transparent;
color: rgba(var(--on-stage-rgb), .72);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.copy:hover,
.copy.is-done { color: var(--stage-accent-text); border-color: var(--stage-accent-text); }
.copy:focus-visible { outline: 2px solid var(--stage-accent-text); outline-offset: 3px; }
/* Rideau de velours — la fermeture */
.velvet {
position: absolute;
left: 0; right: 0; bottom: 0;
height: clamp(44px, 6vw, 84px);
pointer-events: none;
}
.velvet svg { width: 100%; height: 100%; }
.finale { padding-bottom: calc(var(--space-act) + clamp(44px, 6vw, 84px)); }
/* ---------------------------------------------------------------------
9. PIED DE PAGE
------------------------------------------------------------------ */
.site-footer {
--fg-soft: rgba(var(--on-stage-rgb), .62);
--accent-text: var(--stage-accent-text);
background: var(--stage-deep);
color: rgba(var(--on-stage-rgb), .78);
padding-block: clamp(2.75rem, 5vw, 4rem);
font-size: var(--fs-small);
}
.site-footer__inner { display: grid; gap: 2rem; }
.site-footer__brand .mark { color: var(--stage-accent); margin-bottom: .9rem; }
.site-footer__name {
font-family: var(--font-title);
font-size: 1.25rem;
font-weight: 600;
font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 30, "WONK" 0;
color: var(--on-stage);
}
.site-footer__role { color: rgba(var(--on-stage-rgb), .6); font-size: var(--fs-small); }
.site-footer__legal {
display: grid;
gap: .5rem;
font-family: var(--font-mono);
font-size: var(--fs-micro);
line-height: 1.8;
}
.site-footer__legal a {
display: inline-block;
padding-block: .3rem; /* ≥ 24px de haut (WCAG 2.2 — 2.5.8) */
color: rgba(var(--on-stage-rgb), .85);
text-decoration: underline;
text-underline-offset: .2em;
}
.site-footer__legal a:hover { color: var(--stage-accent-text); }
.site-footer__legal span[aria-hidden] { margin-inline: .4rem; opacity: .5; }
.site-footer__copy { color: rgba(var(--on-stage-rgb), .5); }
.site-footer__copy .wonk { color: var(--terracotta); font-size: 1.05em; }
/* ---------------------------------------------------------------------
10. ANIMATIONS D'APPARITION
L'état masqué n'est appliqué que si JS est actif (classe .js posée en
) : sans JS, tout le contenu reste visible.
On anime « translate » et non « transform » : les rotations décoratives
(cartes de témoignage) restent ainsi libres de toute collision.
------------------------------------------------------------------ */
.js .reveal {
opacity: 0;
translate: 0 26px;
transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; translate: none; }
/* Cascade dans les grilles */
.js .flats .reveal:nth-child(2),
.js .audience .reveal:nth-child(2),
.js .quotes .reveal:nth-child(2),
.js .tickets .reveal:nth-child(2) { transition-delay: .09s; }
.js .flats .reveal:nth-child(3),
.js .audience .reveal:nth-child(3),
.js .quotes .reveal:nth-child(3),
.js .tickets .reveal:nth-child(3) { transition-delay: .18s; }
.js .flats .reveal:nth-child(4) { transition-delay: .27s; }
.js .flats .reveal:nth-child(5) { transition-delay: .36s; }
.js .scenes .reveal:nth-child(2) { transition-delay: .08s; }
.js .scenes .reveal:nth-child(3) { transition-delay: .16s; }
.js .scenes .reveal:nth-child(4) { transition-delay: .24s; }
/* Titre d'ouverture : chaque mot monte de derrière une ligne de plancher */
.js .hero__title .word {
display: inline-block;
overflow: hidden;
padding-bottom: .16em;
margin-bottom: -.16em;
padding-inline: .06em;
margin-inline: -.06em;
}
.js .hero__title .word__in {
display: inline-block;
opacity: 0;
translate: 0 108%;
rotate: 4deg;
transition: translate 1s var(--ease-out), rotate 1s var(--ease-out), opacity .5s linear;
transition-delay: calc(var(--i, 0) * 65ms);
}
.js .hero.is-lit .hero__title .word__in { opacity: 1; translate: none; rotate: none; }
/* Le reste de l'ouverture entre juste après le titre */
.js .hero .slug,
.js .hero__lead,
.js .hero__actions,
.js .hero .micro,
.js .hero__aside,
.js .scroll-cue {
opacity: 0;
translate: 0 20px;
transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
}
.js .hero .slug { transition-delay: .05s; }
.js .hero__lead { transition-delay: .38s; }
.js .hero__actions { transition-delay: .48s; }
.js .hero .micro { transition-delay: .56s; }
.js .hero__aside { transition-delay: .28s; }
.js .hero .scroll-cue { transition-delay: .8s; }
.js .hero.is-lit .slug,
.js .hero.is-lit .hero__lead,
.js .hero.is-lit .hero__actions,
.js .hero.is-lit .micro,
.js .hero.is-lit .hero__aside,
.js .hero.is-lit .scroll-cue { opacity: 1; translate: none; }
/* Parallaxe douce (valeur posée par le JS) */
.js [data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
/* ---------------------------------------------------------------------
11. RESPONSIVE
------------------------------------------------------------------ */
/* — Jusqu'à 979px : navigation repliée en panneau —
979.98px et non 980px : sans cela, les deux media queries se recouvrent
pile à 980px (menu replié ET mise en page deux colonnes). */
@media (max-width: 979.98px) {
.nav-toggle { display: inline-flex; }
.site-nav {
position: absolute;
left: 0; right: 0;
top: 100%;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: .5rem var(--gutter) 1.75rem;
background: rgba(var(--glass-rgb), .97);
border-bottom: 1px solid rgba(var(--on-stage-rgb), .12);
box-shadow: var(--shadow-lg);
}
@supports (backdrop-filter: blur(10px)) {
.site-nav { background: rgba(var(--glass-rgb), .88); backdrop-filter: saturate(160%) blur(18px); }
}
.site-header.is-nav-open .site-nav { display: flex; }
.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__list a {
display: flex;
padding: 1rem .25rem;
border-bottom: 1px solid rgba(var(--on-stage-rgb), .1);
font-family: var(--font-title);
font-size: 1.375rem;
font-variation-settings: "opsz" 30, "wght" 500, "SOFT" 30, "WONK" 0;
}
.site-nav__list a::after { display: none; }
.site-nav__no { font-size: .6875rem; }
.site-nav__cta { margin-top: 1.5rem; width: 100%; padding-block: .95rem; }
}
/* — À partir de 760px — */
@media (min-width: 760px) {
.formats { grid-template-columns: 1.25fr .75fr; }
.formats__media { justify-self: end; }
}
/* — À partir de 980px : mises en page deux colonnes — */
@media (min-width: 980px) {
.hero__inner { grid-template-columns: 1.2fr .8fr; }
.hero__aside { justify-self: end; max-width: 420px; }
.approche { grid-template-columns: .8fr 1.2fr; align-items: center; }
.approche__media { justify-self: start; max-width: 400px; }
/* Châssis décalés : la profondeur d'un décor de scène */
.flats { grid-template-columns: repeat(6, 1fr); }
.flat:nth-child(1) { grid-column: span 3; }
.flat:nth-child(2) { grid-column: span 3; margin-top: 2.75rem; }
.flat:nth-child(3) { grid-column: span 2; }
.flat:nth-child(4) { grid-column: span 2; margin-top: 2.75rem; }
.flat:nth-child(5) { grid-column: span 2; margin-top: 5.5rem; }
.rotor { display: block; }
.site-footer__inner {
grid-template-columns: auto 1fr;
align-items: end;
justify-content: space-between;
gap: 3rem;
}
.site-footer__legal { justify-items: end; text-align: right; }
}
/* — À partir de 1360px : l'indicateur d'acte a la place de s'afficher — */
@media (min-width: 1360px) {
.rail { display: flex; }
}
/* — Jusqu'à 679px : resserrer l'ouverture —
Sur une seule colonne, le haut de l'ouverture coûtait trop cher en hauteur.
La didascalie « Ouverture ─ Formatrice & coach · Théâtre et improvisation »
y tombait sur trois lignes, pour deux raisons qui se cumulent : la mention
de droite n'hérite que de la place laissée par le libellé et le filet, et le
crénage de .2em — la signature typographique de ces didascalies — étale le
texte d'un tiers. Mesuré à 375 px : 432 px de mention pour 193 px offerts.
Le seuil n'est pas rond parce qu'il est calculé. La gouttière vaut 5vw de
chaque côté, donc le contenu mesure 0,9 × la largeur de l'écran ; il faut
576 px pour poser la didascalie entière sur une ligne, soit 640 px d'écran
— au pixel près, ce qui est trop juste pour des métriques de police. D'où
680 px. Au-delà, la ligne tient d'elle-même : on n'y touche pas.
Rien n'est réécrit, seule la fin est retirée de l'affichage : « théâtre et
improvisation » se relit trois lignes plus bas dans le chapeau, puis dans le
pied de page, et encore dans le titre de l'onglet. La didascalie retrouve
une ligne unique, et l'ouverture une trentaine de pixels utiles. */
@media (max-width: 679.98px) {
.hero__text .slug { gap: .6rem; margin-bottom: 1.15rem; }
.hero__text .slug__rule { width: 24px; }
.hero__text .slug__role-ext { display: none; }
/* Les respirations du bloc sont dessinées pour un écran large ; à cette
largeur, ce ne sont plus des respirations mais du vide. */
.hero__title { margin-bottom: 1.25rem; }
.hero__actions { margin-top: 1.75rem; }
}
/* — Sous 350 px : la didascalie prend deux lignes, mais des lignes nettes —
« Ouverture ─ Formatrice & coach » réclame 302 px de contenu ; en dessous
de 336 px d'écran il n'y en a plus assez, et la mention se coupait en son
milieu. Plutôt que de rogner le crénage — qui est la signature de ces
didascalies —, on lui donne franchement sa propre ligne.
Concerne les iPhone SE de première génération et les écrans de couverture
des pliables (280 px). */
@media (max-width: 349.98px) {
.hero__text .slug__role { flex-basis: 100%; }
}
/* — Très petits écrans (320px) — */
@media (max-width: 400px) {
.brand__name { font-size: 1rem; }
/* Le libellé est masqué visuellement mais reste lu par les lecteurs
d'écran : un display:none priverait le bouton de nom accessible. */
.nav-toggle__label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Le libellé du CTA tient sur une seule ligne dès 320px */
.btn--lg { width: 100%; padding-inline: 1rem; font-size: 1rem; }
.scenes { padding-left: 2.25rem; }
.scene::before { left: calc(-2.25rem + 2px); }
}
/* ---------------------------------------------------------------------
13. THÈME CLAIR
Même pièce, jouée en plein jour. Seule la lumière change : typographies,
mise en page, motifs, animations et alternance des actes sont intacts.
Règle de dérivation — aucune couleur n'est inventée ici :
· Sur fond clair, le site avait DÉJÀ ses réglages « papier »
(.act--paper) : encre pour le texte, gris chaud pour le texte
secondaire, terracotta pour les accents et le bouton. Le thème clair
étend simplement ces réglages à la scène.
· L'alternance des actes est conservée par deux tons clairs distincts :
papier (crème) et scène (sable). Les découpes arrondies entre actes
restent donc lisibles.
· Halos, faisceaux et lueurs ocre restent : ce sont des lumières, elles
fonctionnent sur les deux fonds.
Le thème est porté par l'attribut data-theme="light" sur , posé
avant l'affichage par le script en ligne du , puis par theme.js.
------------------------------------------------------------------ */
:root[data-theme="light"] {
color-scheme: light;
/* — Le plein jour, en pierre froide —
Ce thème partait d'un sable crème. Deux raisons de l'avoir quitté :
1. Le beige clair est devenu la teinte par défaut de tout ce qui se
génère automatiquement. Il ne dit plus rien, il signe une absence
de choix.
2. Surtout, il travaillait contre la palette. Terracotta et ocre sont
des couleurs chaudes ; posées sur un fond chaud, elles s'enlisent —
le rapport est analogue, donc mou. Sur un gris bleuté, elles
passent en complémentaire : la terracotta claque, l'ocre s'allume.
Le fond n'est pas un gris quelconque : c'est le bleu encre #16263D du
thème sombre, désaturé et monté en clarté. Le clair et le sombre sont
le même plateau, à deux éclairages — pas deux univers différents.
Les actes « papier » suivent la même bascule (voir plus bas) : un
papier crème sur une scène froide jurerait. */
--stage: #E2E8EB; /* pierre : le plateau en plein jour */
--stage-2: #EFF3F5; /* châssis, billets */
--stage-3: #FFFFFF; /* survol */
--stage-deep: #DCE3E7; /* pied de page : un cran plus dense.
Pas davantage — mesuré : à #D5DCE1 la
terracotta tombe à 4,37:1 et passe
sous le seuil AA. */
--on-stage: var(--ink);
--on-stage-rgb: 22, 38, 61;
--stage-accent: var(--terracotta);
--stage-accent-text: var(--terracotta-700);
--glass-rgb: 239, 243, 245;
--scroll-thumb: #A9B7C0;
--shadow-header: 0 12px 32px rgba(22, 38, 61, .10);
/* Les actes « papier » basculent eux aussi en froid — mais uniquement
ici. En thème sombre, ces tokens gardent leur crème d'origine : posé
sur le noir de plateau, le papier chaud est juste, c'est l'alternance
scène / script qui fait toute la direction artistique. */
--papier: #F3F6F7;
--papier-2: #E8EDEF;
--line: #CCD7DD;
/* Texte secondaire : un gris froid remplace le gris chaud, qui tirait
au vert sur ce fond. Mesuré 5,73:1 sur la pierre, 6,53:1 sur le
papier — au-dessus du 5,51:1 de l'ancienne paire. */
--fg-soft: #4C5A66;
}
/* Contrastes mesurés sur cette palette (WCAG AA exige 4,5:1 pour du texte) :
encre sur pierre 12,31:1 encre sur papier 14,02:1
gris froid sur pierre 5,73:1 sur papier 6,53:1
terracotta-700 sur pierre 4,89:1 sur papier 5,58:1
terracotta-700 sur le pied 4,67:1 blanc sur bouton 5,13:1
La terracotta est le maillon serré : ne pas assombrir les fonds sans
remesurer, et ne pas éclaircir la terracotta. */
/* Le gris froid vaut aussi pour la scène et le pied de page : le gris
chaud d’origine verdissait sur la pierre. */
[data-theme="light"] .act--stage,
[data-theme="light"] .site-footer { --fg-soft: #4C5A66; }
/* Bouton principal : l'ocre manque de contraste sur fond clair. Même
bascule que celle que le site applique déjà dans les actes papier. */
[data-theme="light"] .btn--primary {
background: var(--terracotta-600);
color: var(--white);
box-shadow: 0 10px 30px rgba(176, 82, 47, .22);
}
[data-theme="light"] .btn--primary:hover { background: var(--terracotta-700); color: var(--white); }
/* Poursuite : « screen » éclaircit, donc disparaît sur un fond déjà clair.
« multiply » garde le halo chaud visible et n'éclaircit jamais le texte. */
[data-theme="light"] .followspot { mix-blend-mode: multiply; }
/* Noms des écoles : la transparence qui donnait 4,8:1 sur le noir ne donne
que 3,2:1 sur le sable — on la resserre pour retrouver le même contraste. */
[data-theme="light"] .ref { color: rgba(var(--on-stage-rgb), .72); }
/* Petits textes du pied de page : même logique. Le gris chaud des actes
papier remplace les transparences, trop pâles sur le sable. */
[data-theme="light"] .site-footer__role,
[data-theme="light"] .site-footer__copy { color: var(--fg-soft); }
[data-theme="light"] .site-footer__copy .wonk { color: var(--terracotta-700); }
/* Numéros de navigation et séparateurs du pied de page : décoratifs, mais
ils gardent au moins le contraste qu'ils avaient sur le noir. */
[data-theme="light"] .site-nav__no { opacity: .85; }
/* Légendes en didascalie du hero : le gris chaud au lieu d'une encre
transparente, qui tombait à 2,6–3:1 sur le sable (5,4:1 désormais,
soit au moins le contraste qu'elles avaient sur le noir). */
[data-theme="light"] .hero__caption,
[data-theme="light"] .scroll-cue { color: var(--fg-soft); }
/* Numéros des châssis : décoratifs et volontairement discrets. On garde
leur contraste d'origine (≈ 3:1), ni plus pâles, ni plus présents. */
[data-theme="light"] .flat__no { color: rgba(var(--on-stage-rgb), .5); }
[data-theme="light"] .site-footer__legal span[aria-hidden] { opacity: .8; }
/* — Détails du thème clair : l'ocre n'y a pas sa place —
L'ocre est l'accent du thème SOMBRE : une lumière posée sur du noir de
plateau. Reporté tel quel sur un fond clair, il ne lit plus comme une
lumière mais comme un lavis sable — exactement la teinte dont ce thème
cherchait à se défaire, et elle ressortait surtout au survol.
Sur les surfaces claires, l'accent est donc la terracotta.
⚠ Les faisceaux, halos, lueurs et le motif signature gardent leur ocre :
eux sont bel et bien des lumières, et fonctionnent sur les deux fonds.
Ne pas « uniformiser » au-delà de ce bloc. */
/* Cadre photo — le dégradé chaud jurait avec la pierre. Une pointe de
terracotta en haut à gauche, une ombre encrée en bas à droite : le cadre
reste modelé, sans virer au pêche. */
[data-theme="light"] .photo {
background:
radial-gradient(120% 90% at 25% 5%, rgba(193, 95, 60, .12), transparent 60%),
radial-gradient(110% 100% at 100% 100%, rgba(22, 38, 61, .10), transparent 64%),
var(--stage-2);
}
[data-theme="light"] .photo::after { border-color: rgba(193, 95, 60, .20); }
/* Châssis « expertises » — c'est ici que le sable sautait aux yeux : la
pastille d'icône virait au beige au survol. */
[data-theme="light"] .flat::before {
background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 0%),
rgba(193, 95, 60, .14), transparent 68%);
}
[data-theme="light"] .flat:hover,
[data-theme="light"] .flat:focus-within { border-color: rgba(193, 95, 60, .32); }
[data-theme="light"] .flat__icon {
border-color: rgba(193, 95, 60, .28);
background: rgba(193, 95, 60, .07);
}
[data-theme="light"] .flat:hover .flat__icon { background: rgba(193, 95, 60, .15); }
/* Billets et bouton « copier » */
[data-theme="light"] .ticket__icon { background: rgba(193, 95, 60, .11); }
[data-theme="light"] .ticket:hover { border-color: rgba(193, 95, 60, .28); }
[data-theme="light"] .copy { border-color: rgba(193, 95, 60, .34); }
/* Sommaire des pages légales */
[data-theme="light"] .legal__toc {
background: rgba(193, 95, 60, .06);
border-color: rgba(193, 95, 60, .24);
}
/* — Emplacement photo du hero : un par thème —
Les deux emplacements coexistent dans le HTML, marqués data-theme-photo,
et la bascule se fait ici. En sombre, c'est le portrait. En clair, c'est
un cadre vide : même arche, même dégradé, le motif signature au centre —
la colonne garde sa place et son poids visuel, prête à recevoir un
portrait le jour où il y en aura un.
Celui qui n'est pas affiché n'est pas téléchargé. */
[data-theme-photo="light"] { display: none; }
[data-theme="light"] [data-theme-photo="dark"] { display: none; }
[data-theme="light"] [data-theme-photo="light"] { display: grid; }
/* — Bouton de thème —
Même vocabulaire que le bouton de menu : pastille à filet fin, cible
tactile de 44 px. Il montre l'éclairage vers lequel on bascule : le
soleil en thème sombre, la lune en thème clair. */
.theme-toggle {
position: relative;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 44px; height: 44px;
padding: 0;
background: rgba(var(--on-stage-rgb), .06);
border: 1px solid rgba(var(--on-stage-rgb), .18);
border-radius: 50%;
color: var(--stage-accent);
cursor: pointer;
transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
/* Indispensable : sans cette ligne, le display ci-dessus l'emporterait sur
l'attribut hidden, et le bouton s'afficherait inerte sans JavaScript. */
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--stage-accent); background: rgba(var(--on-stage-rgb), .1); }
.theme-toggle svg {
grid-area: 1 / 1;
width: 20px; height: 20px;
transition: opacity .35s var(--ease), transform .5s var(--ease-out);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: rotate(40deg) scale(.6); }
[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: none; }
/* Placement : groupé à droite avec la navigation sur grand écran ; poussé
à droite, contre le bouton de menu, quand la navigation est repliée. */
@media (min-width: 980px) {
.site-nav { margin-left: auto; }
}
@media (max-width: 979.98px) {
.site-header__inner { gap: .6rem; }
.theme-toggle { margin-left: auto; }
}
/* Très petits écrans : la marque et deux boutons doivent tenir entre les
marges. Sous 375px, les boutons passent en format compact (38px — la
cible reste bien au-dessus des 24px de WCAG 2.2, critère 2.5.8) et le
nom se resserre d'un cran. Mesuré : tout tient à 320px. */
@media (max-width: 374.98px) {
.site-header__inner { gap: .35rem; }
.brand { gap: .5rem; }
.brand__name { font-size: .9rem; }
.theme-toggle { width: 38px; height: 38px; }
.nav-toggle { min-height: 38px; padding: .45rem .6rem; }
}
/* Pendant la bascule, aucune transition : sans cela chaque élément
changerait de couleur à son propre rythme (classe posée par theme.js). */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after { transition: none !important; }
/* Fondu enchaîné de la page entière, là où le navigateur le permet :
un changement d'éclairage plutôt qu'un saut. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }
@media print {
[data-theme-photo], .theme-toggle { display: none !important; }
}
/* ---------------------------------------------------------------------
14. PAGES ANNEXES — mentions, confidentialité, CGU, 404
---------------------------------------------------------------------
Ces styles vivaient en ligne dans mentions-legales.html tant qu'une
seule page les utilisait. Ils sont désormais partagés par quatre
documents : les garder ici évite d'en entretenir quatre copies qui
divergeraient au premier ajustement.
Le contexte de couleurs vient de la classe « act--paper » posée sur
: c'est elle qui bascule --fg, --fg-soft, --rule et --accent-text
en version « papier ». Sans elle, les variables gardent leurs valeurs
par défaut, prévues pour les sections sombres — on écrirait alors en
crème sur du crème. Ne pas retirer cette classe.
------------------------------------------------------------------ */
.legal {
background: var(--bg);
color: var(--fg);
padding-block: clamp(2.5rem, 6vw, 5rem);
}
.legal__inner { max-width: 74ch; margin-inline: auto; }
.legal__title {
font-family: var(--font-title);
font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
line-height: 1.05;
margin: .6rem 0 1rem;
}
.legal__intro { color: var(--fg-soft); max-width: 62ch; }
.legal__date {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--fg-soft);
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--rule);
}
/* Sommaire */
.legal__toc {
margin: 2.5rem 0;
padding: 1.5rem 1.75rem;
background: rgba(227, 168, 87, .07);
border: 1px solid rgba(227, 168, 87, .3);
border-radius: var(--radius);
}
.legal__toc h2 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent-text);
margin: 0 0 .9rem;
}
.legal__toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.legal__toc li { margin-bottom: .35rem; break-inside: avoid; }
.legal__toc a { color: var(--fg); text-decoration-color: rgba(22, 38, 61, .3); }
.legal__toc a:hover { color: var(--accent-text); }
@media (max-width: 620px) { .legal__toc ol { columns: 1; } }
/* Sections numérotées */
.legal section { margin-top: 3rem; scroll-margin-top: 6rem; }
.legal section > h2 {
font-family: var(--font-title);
font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
line-height: 1.2;
margin: 0 0 1rem;
padding-bottom: .6rem;
border-bottom: 1px solid var(--rule);
}
/* Numéros de section : accent du contexte papier (terracotta dense), et
non l'ocre, qui ne donnait que 1,97:1 sur le crème. */
.legal section > h2 .legal__no {
font-family: var(--font-mono);
font-size: .72em;
color: var(--accent-text);
margin-right: .6rem;
}
.legal h3 {
font-size: 1rem;
font-weight: 600;
margin: 1.75rem 0 .5rem;
color: var(--fg);
}
.legal p, .legal li { color: var(--fg-soft); }
.legal p { margin: 0 0 .9rem; }
.legal ul, .legal ol { margin: 0 0 .9rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--accent-text); }
/* Fiche d'identité — paires libellé / valeur */
.legal__id { display: grid; gap: 0; margin: 0 0 1rem; }
.legal__id div {
display: grid;
grid-template-columns: minmax(0, 15rem) 1fr;
gap: .4rem 1.25rem;
padding: .6rem 0;
border-bottom: 1px dashed rgba(95, 90, 84, .22);
}
.legal__id dt {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--fg-soft);
}
.legal__id dd { margin: 0; color: var(--fg); }
@media (max-width: 620px) { .legal__id div { grid-template-columns: 1fr; } }
/* Champ manquant — impossible à rater */
.todo {
display: inline-block;
padding: .1em .5em;
border-radius: 4px;
background: #FFE9A8;
border: 1px dashed #B0862F;
color: #6B4E11;
font-family: var(--font-mono);
font-size: .85em;
font-weight: 600;
}
/* Encadré d'avertissement */
.legal__warn {
margin: 1.25rem 0;
padding: 1.1rem 1.4rem;
background: #fff;
border-left: 3px solid var(--ochre);
border-radius: 0 var(--radius) var(--radius) 0;
box-shadow: var(--shadow-sm);
}
.legal__warn p:last-child { margin-bottom: 0; }
.legal__warn strong { color: var(--fg); }
/* Mention légale obligatoire, mise en exergue */
.legal__mandatory {
margin: 1.25rem 0;
padding: 1rem 1.3rem;
background: rgba(193, 95, 60, .07);
border: 1px solid rgba(193, 95, 60, .3);
border-radius: var(--radius);
font-weight: 600;
color: var(--fg);
}
/* En-tête allégé : pas de navigation, juste le retour au site */
.legal-header {
background: var(--stage);
padding-block: 1.1rem;
}
.legal-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.legal-header .brand { color: var(--on-stage); }
.legal-header__back {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(var(--on-stage-rgb), .7);
text-decoration: none;
margin-left: auto;
}
.legal-header__back:hover { color: var(--stage-accent-text); }
/* Le lien de retour prend la marge automatique : le bouton de thème le
suit, sans être poussé au centre par sa propre marge mobile. */
.legal-header .theme-toggle { margin-left: 0; }
/* Renvoi d'un document à l'autre, en pied d'article. Les trois textes
légaux se répondent : y arriver par un lien vaut mieux que par le
pied de page général, plus bas et plus chargé. */
.legal__siblings {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
}
.legal__siblings {
display: flex;
flex-wrap: wrap;
gap: .6rem 1.25rem;
}
/* Chaque intitulé reste d'un seul tenant : « Conditions générales » coupé en
deux se lirait comme deux liens. Ils passent à la ligne l'un après l'autre,
pas en leur milieu. */
.legal__siblings a { white-space: nowrap; }
/* …sauf quand la page devient plus étroite que l'intitulé lui-même.
« Conditions générales d'utilisation » mesure 269 px en chasse fixe : en
dessous d'environ 310 px de large, le nowrap le poussait hors du cadre et
faisait apparaître une barre de défilement horizontale sur TOUT le document
— un écran de couverture de téléphone pliant (280 px) suffisait.
Un intitulé qui se coupe vaut mieux qu'une page qui glisse. */
@media (max-width: 339.98px) {
.legal__siblings a { white-space: normal; }
}
/* ---------------------------------------------------------------------
404 — « la page a quitté la scène »
---------------------------------------------------------------------
Plein écran, sur le noir de plateau : une erreur n'a pas à ressembler
à un document. On réemploie les composants du site (slug, boutons,
rideau de velours) plutôt que d'inventer une mise en page de plus.
------------------------------------------------------------------ */
.lost {
position: relative;
overflow: hidden;
display: grid;
align-content: center;
/* 100svh : la barre d'adresse mobile ne doit pas décaler le centrage. */
min-height: calc(100svh - var(--header-h));
padding-block: clamp(3.5rem, 10vw, 7rem) calc(clamp(3.5rem, 10vw, 7rem) + clamp(44px, 6vw, 84px));
background: var(--stage);
color: var(--fg);
}
.lost__inner { max-width: 60ch; }
/* Le numéro, en didascalie : c'est un repère technique, pas un titre. */
.lost__no {
font-family: var(--font-mono);
font-size: clamp(4rem, 2rem + 11vw, 9rem);
line-height: .9;
letter-spacing: .04em;
color: var(--stage-accent);
opacity: .9;
margin: .4rem 0 1rem;
}
.lost__title {
font-family: var(--font-title);
font-size: clamp(1.9rem, 1.2rem + 3vw, 3.25rem);
line-height: 1.06;
margin: 0 0 1rem;
}
.lost__lead { color: var(--fg-soft); max-width: 46ch; }
.lost__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem 1rem;
margin: 2rem 0 0;
}
/* Les issues de secours : les quatre pages qui existent vraiment. */
.lost__map {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
}
.lost__map h2 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent-text);
margin: 0 0 .9rem;
}
.lost__map ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .5rem 1.5rem;
}
.lost__map a { color: var(--fg); }
.lost__map a:hover { color: var(--accent-text); }
/* ---------------------------------------------------------------------
12. PRÉFÉRENCES UTILISATEUR
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.js .reveal,
.js .hero .slug,
.js .hero__lead,
.js .hero__actions,
.js .hero .micro,
.js .hero__aside,
.js .scroll-cue,
.js .hero__title .word__in { opacity: 1; translate: none; rotate: none; }
.js .hero__strand { stroke-dashoffset: 0; }
.grain { animation: none; }
.curtain { display: none !important; }
.followspot { display: none; }
.js [data-parallax] { transform: none; }
}
@media (prefers-contrast: more) {
:root { --warm-gray: #4A453F; --line: #C9BFAF; }
.act--stage { --fg-soft: rgba(var(--on-stage-rgb), .92); }
.ref { color: rgba(var(--on-stage-rgb), .7); }
.quote.is-empty { border-color: var(--warm-gray); }
.flat { border-color: rgba(var(--on-stage-rgb), .24); }
}
@media print {
.site-header, .nav-toggle, .hero__motif, .hero__stage, .curtain, .grain,
.rail, .marquee, .refs, .velvet, .rotor, .scroll-cue, .skip-link,
.followspot { display: none !important; }
body, .act, .act--stage, .site-footer, .finale {
background: #fff !important;
color: #000 !important;
}
.act { padding-block: 1.5rem; }
.act--curve { margin-top: 0; border-radius: 0; }
.photo { display: none; }
.js .reveal { opacity: 1 !important; translate: none !important; }
.js .hero__title .word__in { opacity: 1 !important; translate: none !important; rotate: none !important; }
.wonk { color: #000 !important; }
}