/* ============================================================
VULTUR — LA FEUILLE COMMUNE
Une seule source pour ce qui doit être identique partout : le
nombre d'or, les couleurs, la typographie, la coque du site —
en-tête, navigation, pied de page.
Elle existe parce que le site avait dérivé. Chaque page portait
sa propre feuille, et une seule — l'accueil — connaissait
l'échelle φ. La navigation de « À propos » n'avait ni le même
dessin ni les mêmes liens que celle de l'accueil : changer de
page, c'était changer de site.
Ce qui est PROPRE À UNE PAGE reste dans cette page. Ce qui doit
être commun est ici, et nulle part ailleurs. Si une valeur doit
changer, on la change ici.
Aucune étape de compilation : c'est un , rien d'autre.
============================================================ */
@font-face{
font-family:"Vultur Titre";
src:url("fonts/vultur-titre.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap;
}
:root{
/* ---------- NOMBRE D'OR ----------
φ = 1,618. La suite avance par pas entiers (×φ) et par
demi-pas (×√φ = 1,272), ce qui donne assez de degrés pour
tout composer sans jamais sortir de la proportion.
Base : 1rem = 16 px.
pas facteur px
-1 0,618 9,9 PAS DE TEXTE ICI (voir ci-dessous)
-½ 0,786 12,6 étiquettes
0 1,000 16 texte courant
+½ 1,272 20,4 chapeau
+1 1,618 25,9 sous-titre
+1½ 2,058 32,9
+2 2,618 41,9
+2½ 3,330 53,3
+3 4,236 67,8 titre de section
+3½ 5,388 86,2
+4 6,854 109,7 grand titre
+5 11,090 177,4 logo du hero
---------------------------------- */
--phi:1.618;
/* Le pas -1 vaut 9,9 px. Aucun texte que le visiteur doit lire ne
descend là : en dessous de 11 px un libellé décroche sur petit
écran et en haute densité, et l'espacement des capitales aggrave
le cas. Le plus petit corps du site pour du texte fonctionnel est
donc le demi-pas, --t--h, à 12,6 px. */
--t--1:0.618rem; --t--h:0.786rem;
--t-0:1rem; --t-0h:1.272rem;
--t-1:1.618rem; --t-1h:2.058rem;
--t-2:2.618rem; --t-2h:3.330rem;
--t-3:4.236rem; --t-3h:5.388rem;
--t-4:6.854rem; --t-5:11.090rem;
/* Les espacements suivent la même suite. Un seul vocabulaire
pour les marges, les gouttières et les paddings. */
--sp-1:0.618rem; --sp-2:1rem; --sp-3:1.618rem;
--sp-4:2.618rem; --sp-5:4.236rem; --sp-6:6.854rem;
--sp-7:11.090rem; --sp-8:17.944rem;
/* Interlignes : le texte courant respire à φ, les titres se
serrent à l'inverse du même rapport. */
--lh-texte:1.618;
--lh-titre:0.927; /* 1,5/φ — desserré sous 56 rem, voir plus bas */
/* Largeurs : la page fait φ³ × 16 × 4,236 ≈ 1220 px, et la
colonne de lecture en est le petit côté (largeur ÷ φ). */
--maxw:76.25rem; /* 1220 px */
--mesure:calc(var(--maxw) / var(--phi)); /* 754 px */
--pad:clamp(var(--sp-3), 5vw, var(--sp-5));
/* ---------- couleurs ----------
Sur l'accueil, les quatre premières sont réécrites en JS à
chaque image pendant la bascule jour → nuit. Ailleurs elles
gardent ces valeurs. */
--bg:#faf8f4;
--ink:#14110c;
--dim:#6b6355;
--line:rgba(20,17,12,.14);
--accent:#7a6a4f;
--ease:cubic-bezier(.22,.61,.36,1);
color-scheme:light;
}
/* ---------- LA NUIT ----------
L'accueil bascule du jour à la nuit en descendant, et ses trois
films vivent dans le noir. Les pages de projets montrent les
mêmes images : elles héritent donc de la même ambiance, posée
d'emblée par une classe sur plutôt que calculée au
défilement. Ce sont exactement les valeurs vers lesquelles le
morphing de l'accueil interpole — pas un noir approchant. */
html.nuit{
--bg:#0a0908;
--ink:#f2eee4;
--dim:#9a9182;
--line:rgba(242,238,228,.18);
--accent:#c0ad86;
color-scheme:dark;
}
/* ============================================================
BASE
============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
/* PAS de `scroll-behavior:smooth` sur `html`. La règle ne servait
qu'aux ancres, mais Chrome l'applique AUSSI à la molette : chaque
cran partait alors en animation au lieu de sauter, et la page
paraissait lente — uniquement sur ce site, uniquement à la
souris. Un pavé tactile y échappe, ce qui la rendait invisible
sur un Mac. La douceur des ancres est reprise en JavaScript,
dans `vultur-shell.js`, où elle ne concerne que les ancres. */
body{
background:var(--bg); color:var(--ink);
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:var(--t-0); line-height:var(--lh-texte);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
/* `clip` et non `hidden` : les deux coupent pareil, mais `hidden`
fait du corps un conteneur de défilement, et `position:sticky`
n'y tient plus. */
overflow-x:clip;
}
a{ color:inherit; }
img, video{ max-width:100%; }
/* ============================================================
LES SURFACES DU NAVIGATEUR
Ce qu'on ne dessine pas porte quand même le design. La
sélection, le curseur de saisie, l'anneau de focus et la barre
de défilement arrivent par défaut dans des couleurs qui
n'appartiennent à aucune charte — et qui jurent franchement
sur le fond noir du Studio. Elles suivent donc l'ambiance,
comme le reste.
============================================================ */
::selection{ background:var(--ink); color:var(--bg); }
::-moz-selection{ background:var(--ink); color:var(--bg); }
textarea, input{ caret-color:var(--accent); }
/* Un seul anneau de focus pour tout le site, visible au clavier
et jamais à la souris. */
:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:2px;
}
.hdnav a:focus-visible, .cue:focus-visible, .index a:focus-visible{ outline-offset:2px; }
/* La barre de défilement, discrète, dans l'encre du moment. */
html{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 32%, transparent) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
background:color-mix(in srgb, var(--ink) 26%, transparent);
border-radius:999px; border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--ink) 45%, transparent); background-clip:content-box; }
/* ============================================================
TYPOGRAPHIE
LA POLICE DE TITRAGE — Momo Trust Display.
Elle ne sert QU'AUX TITRES. Nulle part ailleurs : ni dans les
phrases des agents, ni dans le texte courant, ni dans les
étiquettes. Elle n'a qu'une graisse : on demande donc 400 et
jamais 900, une graisse absente étant sinon fabriquée par le
navigateur, qui épaissit le trait au hasard.
============================================================ */
.d1,.d2,.d3{
font-family:"Vultur Titre","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:400; line-height:var(--lh-titre); letter-spacing:-.025em;
}
.d1{ font-size:clamp(var(--t-2),7vw,var(--t-4)); }
.d2{ font-size:clamp(var(--t-1h),4.6vw,var(--t-3)); }
.d3{ font-size:clamp(var(--t-1),2.2vw,var(--t-1h)); letter-spacing:-.015em; }
/* L'étiquette monospace : sur-titres, libellés, années. */
.mono, .index-h{
font-family:"IBM Plex Mono", ui-monospace, monospace;
font-size:var(--t--h); letter-spacing:.18em; text-transform:uppercase;
color:var(--dim);
}
/* Les chiffres qui se lisent en colonne s'alignent au lieu de danser. */
.tl-num{ font-variant-numeric:tabular-nums; }
/* ---------- LOGOTYPE ----------
Le mot « Vultur » n'est pas composé avec la police à points : à
grande taille ses points se rejoignent et les lettres tournent
à la bouillie. On utilise le logotype vectoriel, posé en masque
pour qu'il prenne la couleur de l'encre du moment.
L'URL est relative à CETTE FEUILLE, pas à la page : les pages de
projets vivent deux dossiers plus bas et le masque les suit
quand même. */
.logo{
display:block;
background:var(--ink);
-webkit-mask:url("logo-vultur/logo-vultur-bitcount-plain.svg") no-repeat center/contain;
mask:url("logo-vultur/logo-vultur-bitcount-plain.svg") no-repeat center/contain;
aspect-ratio:3600 / 1200;
}
/* ============================================================
EN-TÊTE — la même partout, dessin comme liens.
============================================================ */
.hd{
position:fixed; inset:0 0 auto 0; z-index:60;
display:flex; align-items:center; justify-content:space-between;
gap:var(--sp-3); padding:var(--sp-3) var(--pad);
pointer-events:none;
}
.hd > *{ pointer-events:auto; }
.hd::before{
content:""; position:absolute; inset:0 0 auto 0; z-index:-1; pointer-events:none;
height:calc(100% + var(--sp-4));
background:linear-gradient(to bottom, var(--bg) 0 58%, transparent);
}
/* Sur l'accueil, la petite marque ne paraît qu'une fois le hero
passé : tant qu'on y est, le logotype en grand tient déjà ce
rôle. Ailleurs il n'y a pas de hero, et `passe` est posée
d'emblée par le script — la marque est là tout de suite.
visibility, et pas seulement l'opacité : un logotype invisible
ne doit pas se laisser prendre au clavier. */
.hd .brand{
width:clamp(5.388rem,9vw,7.5rem);
opacity:0; visibility:hidden; transform:translateY(-.382rem);
transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.hd.passe .brand{ opacity:1; visibility:visible; transform:none; }
.hdnav{ display:flex; align-items:center; gap:.236rem; }
.hdnav a{
font-family:"IBM Plex Mono", ui-monospace, monospace;
font-size:var(--t--h); letter-spacing:.14em; text-transform:uppercase;
text-decoration:none; color:var(--dim);
padding:var(--sp-1) var(--sp-2); border-radius:999px;
position:relative; z-index:0; border:1px solid transparent; white-space:nowrap;
transition:color .3s var(--ease), background-color .3s var(--ease),
border-color .3s var(--ease),
transform .5s cubic-bezier(.34,1.5,.5,1),
box-shadow .5s cubic-bezier(.34,1.5,.5,1);
}
.hdnav a.on, .hdnav a[aria-current="page"]{ color:var(--ink); }
/* ---- LE VERRE LIQUIDE ----
Le survol allume une pastille translucide, et un halo la suit
sous le curseur — ce sont `--x` et `--y` que pose la coque.
Il vient de l'ancienne page « À propos », où il était écrit en
blanc pur parce que la page était noire. Ici la barre traverse
les deux ambiances de l'accueil : la nuit du Studio et le jour
du Digital. Tout est donc exprimé en `--ink`, l'encre du moment.
Un blanc en dur aurait disparu sur le fond clair. */
.hdnav a::before{
content:""; position:absolute; inset:0; z-index:-1;
border-radius:inherit; pointer-events:none;
background:radial-gradient(80px circle at var(--x,50%) var(--y,50%),
color-mix(in srgb, var(--ink) 32%, transparent), transparent 62%);
opacity:0; transition:opacity .3s var(--ease);
}
.hdnav a:hover, .hdnav a:focus-visible{
color:var(--bg);
border-color:color-mix(in srgb, var(--ink) 28%, transparent);
background:color-mix(in srgb, var(--ink) 14%, transparent);
-webkit-backdrop-filter:blur(9px) saturate(1.4);
backdrop-filter:blur(9px) saturate(1.4);
transform:scale(1.05);
box-shadow:
inset 0 1px 1px color-mix(in srgb, var(--ink) 42%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
0 2px 10px color-mix(in srgb, var(--ink) 26%, transparent),
0 0 16px color-mix(in srgb, var(--ink) 18%, transparent),
0 0 44px color-mix(in srgb, var(--ink) 12%, transparent);
}
.hdnav a:hover::before, .hdnav a:focus-visible::before{ opacity:1; }
/* Sans `backdrop-filter`, la pastille doit tenir seule : on la
densifie, sinon le texte passe sur un fond trop clair. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.hdnav a:hover, .hdnav a:focus-visible{ background:color-mix(in srgb, var(--ink) 82%, transparent); }
}
@media (prefers-reduced-motion:reduce){
.hdnav a:hover, .hdnav a:focus-visible{ transform:none; }
}
.burger{
display:none; width:var(--sp-4); height:var(--sp-4); border:1px solid var(--line);
border-radius:999px; background:transparent; color:inherit; cursor:pointer;
align-items:center; justify-content:center;
}
.burger svg{ width:var(--sp-3); height:var(--sp-3); }
@media (max-width:53.5rem){
.burger{ display:inline-flex; }
.hdnav{
position:fixed; inset:0; z-index:55;
flex-direction:column; justify-content:center; align-items:center; gap:var(--sp-1);
background:var(--bg);
opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.hdnav.open{ opacity:1; visibility:visible; }
.hdnav a{ font-size:var(--t-0h); letter-spacing:.1em; padding:var(--sp-2) var(--sp-4); }
/* Le bouton doit rester AU-DESSUS du menu qu'il ouvre. Le voile
porte un z-index, le bouton n'en avait aucun : il passait
dessous, et le menu ne pouvait plus se fermer autrement qu'en
choisissant un lien. */
.burger{ position:relative; z-index:56; }
.burger .ico-fermer{ display:none; }
.burger[aria-expanded="true"] .ico-menu{ display:none; }
.burger[aria-expanded="true"] .ico-fermer{ display:block; }
}
/* le menu ouvert bloque le défilement de la page derrière lui */
body.menu-ouvert{ overflow:hidden; }
/* ============================================================
SECTIONS — la colonne, le chapeau, le rythme vertical.
============================================================ */
.act{ padding:var(--sp-6) var(--pad); }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.act-head{ max-width:var(--maxw); text-align:center; }
.act-head h2{ margin-top:var(--sp-3); }
.act-head .lede{
max-width:var(--mesure); margin:var(--sp-3) auto 0;
font-size:var(--t-0h); color:var(--dim);
}
/* Le chapeau d'une page intérieure : on part sous l'en-tête fixe,
pas dessous de justesse. */
.page-head{ padding-top:calc(var(--sp-7) + var(--sp-3)); }
/* Les titres de section tiennent sur UNE ligne et sont centrés.
Leur taille n'est pas choisie à la main : le script la calcule
pour que la ligne remplisse exactement sa colonne, quel que soit
le nombre de signes et la largeur de la fenêtre. Le pas de la
suite d'or sert de plafond, jamais de valeur imposée. */
.seule{
white-space:nowrap;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Tant que le script n'a pas mesuré, on affiche à une taille sûre
plutôt qu'un titre qui déborde le temps d'une image. Uniquement
sur grand écran : sur téléphone le script ne mesure rien, les
titres reprennent leur taille fluide, et cette règle écraserait
la différence entre un titre de premier et de second rang. */
@media (min-width:56.01rem){
.seule:not([style*="font-size"]){ font-size:var(--t-1h); }
}
/* ---- l'index : une liste de lignes ---- */
.index{ margin-top:var(--sp-6); border-top:1px solid var(--line); }
.index-h{ padding:var(--sp-3) 0 var(--sp-1); }
.index a{
display:grid; grid-template-columns:1fr auto; gap:var(--sp-3); align-items:baseline;
padding:var(--sp-2) .236rem; border-bottom:1px solid var(--line);
text-decoration:none; transition:padding-left .3s var(--ease);
}
.index a:hover{ padding-left:var(--sp-2); }
.index .c{
font-family:"IBM Plex Mono", ui-monospace, monospace;
font-size:var(--t--h); letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
/* ============================================================
PIED DE PAGE
============================================================ */
/* Le pied porte un contexte : c'est sur lui que se pose le voile
de points qui le fait apparaître (bloc 14 de l'accueil). */
.foot{ padding:var(--sp-6) var(--pad) var(--sp-6); position:relative; }
/* Les voiles : ils couvrent la chose qui entre à l'écran, contenu
compris, et se retirent une fois défaits. Ôtés du document à la
fin — un canevas qui ne sert plus n'a pas à rester.
`width:100%; height:100%` n'est PAS redondant avec `inset:0`.
Un