/* ============================================================ VULTUR — LES PAGES DE PROJET Les onze pages de projets sortaient d'un même gabarit : elles partagent déjà leur vocabulaire de classes — `hero`, `kicker`, `lead`, `facts`, `frame`, `gallery`, `block`, `ctx`, `back`. Ce qui divergeait, c'était la feuille : chacune avait la sienne, avec sa propre palette inventée. Elles n'en ont donc qu'une, ici, et elle ne fait que décrire ces composants dans l'échelle de `vultur.css`. À charger APRÈS elle. Tout est préfixé par `.projet`, posé sur le . Deux raisons : `.foot` désigne le pied de SITE dans la feuille commune et le pied de PAGE ici — sans portée, les deux se marchaient dessus. Et la portée dit d'un coup d'œil ce qui n'appartient qu'à ces pages. ============================================================ */ /* ---------- LE RETOUR ---------- Une pastille fixe en haut à gauche, sous l'en-tête. C'est le seul chemin de sortie d'une page de projet : il ne se cache jamais. */ .projet .back{ position:fixed; left:var(--pad); top:50%; transform:translateY(-50%); z-index:40; width:var(--sp-4); height:var(--sp-4); display:grid; place-items:center; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); text-decoration:none; transition:background-color .25s var(--ease), transform .25s var(--ease); } .projet .back:hover{ background:color-mix(in srgb, var(--ink) 12%, transparent); } .projet .back svg{ width:var(--sp-3); height:var(--sp-3); } @media (max-width:56rem){ /* Sur téléphone la pastille reviendrait sous le pouce, au milieu du bord : on la remonte en haut, hors du chemin. */ .projet .back{ top:calc(var(--sp-3) + var(--sp-4) + var(--sp-3)); transform:none; } } /* ---------- LE CHAPEAU ---------- Le film ou l'image d'abord, le titre posé dessus. On part sous l'en-tête fixe, jamais collé à lui. */ .projet .hero{ padding:calc(var(--sp-7) + var(--sp-2)) var(--pad) 0; } /* `.hero-frame` porte un film : le 16:9 est le format, et l'image remplit la boîte. `.hero-media` porte ce que la page y met — un mockup vertical chez Flirty, une capture chez FlashPizza. Lui imposer un 16:9 en `cover` recadrait ces images debout à une bande centrale. Il laisse donc son contenu se dimensionner. */ .projet .hero-frame{ position:relative; overflow:hidden; border-radius:var(--sp-3); background:#000; aspect-ratio:16 / 9; } .projet .hero-frame iframe, .projet .hero-frame video, .projet .hero-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block; } .projet .hero-media{ position:relative; } .projet .hero-media > .frame{ max-width:var(--mesure); margin:0 auto; } /* Le voile : il ne noircit pas l'image, il retient seulement le bas pour que le titre s'y pose. */ .projet .scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.12) 46%, transparent 70%); } .projet .hero-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--sp-4); color:#fff; } .projet .hero-cap h1{ font-family:"Vultur Titre","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; line-height:var(--lh-titre); letter-spacing:-.025em; font-size:clamp(var(--t-1h),6vw,var(--t-3)); } .projet .ctx{ margin-top:var(--sp-1); color:rgba(255,255,255,.72); } .projet .kicker{ display:block; margin-bottom:var(--sp-2); } /* ---------- L'INTRODUCTION ---------- Deux colonnes : la phrase d'accroche, puis le texte et la fiche technique. Elles s'empilent sous la mesure de lecture. */ .projet .intro{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); padding:var(--sp-6) 0 0; align-items:start; } .projet .lead{ font-family:"Vultur Titre","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; line-height:var(--lh-titre); letter-spacing:-.02em; font-size:clamp(var(--t-1),3vw,var(--t-1h)); } .projet .lead b{ font-weight:400; color:var(--dim); } .projet .body{ color:var(--dim); max-width:var(--mesure); } .projet .body + .facts{ margin-top:var(--sp-4); } /* La fiche technique : une ligne par information, au même trait que les listes du reste du site. */ .projet .facts{ display:grid; gap:0; } .projet .fact{ display:grid; grid-template-columns:1fr 2fr; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--line); } .projet .fact .k{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:var(--t--h); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } .projet .fact .v{ font-size:var(--t-0); } @media (max-width:56rem){ .projet .intro{ grid-template-columns:1fr; gap:var(--sp-4); } .projet .fact{ grid-template-columns:1fr; gap:.236rem; } } /* ---------- LA GALERIE ---------- Des blocs qui se suivent, séparés par le rythme vertical et rien d'autre. */ .projet .gallery{ padding:var(--sp-6) 0 0; } .projet .block{ margin-top:var(--sp-6); } .projet .block:first-child{ margin-top:0; } .projet .frame{ display:block; overflow:hidden; border-radius:var(--sp-3); background:#000; border:1px solid var(--line); } .projet .frame img, .projet .frame video, .projet .frame iframe{ display:block; width:100%; height:auto; border:0; } /* Les formats imposés : un reel vertical, un carré de réseau. */ .projet .r916{ aspect-ratio:9 / 16; } .projet .r34{ aspect-ratio:3 / 4; } .projet .r916 video, .projet .r34 video, .projet .r916 img, .projet .r34 img{ height:100%; object-fit:cover; } .projet .grid2, .projet .hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); } .projet .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); } @media (max-width:56rem){ .projet .grid2, .projet .hero-grid{ grid-template-columns:1fr; } .projet .grid3{ grid-template-columns:1fr 1fr; } } @media (max-width:34rem){ .projet .grid3{ grid-template-columns:1fr; } } /* La citation : le seul endroit d'une page projet où le texte prend la parole avant l'image. */ .projet blockquote{ font-family:"Vultur Titre","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; line-height:var(--lh-titre); letter-spacing:-.025em; font-size:clamp(var(--t-1h),5vw,var(--t-2h)); max-width:var(--maxw); margin:0 auto var(--sp-4); text-align:center; text-wrap:balance; } .projet blockquote span{ color:var(--dim); } /* Les catégories s'EMPILENT : chacune est une section entière, et elle contient déjà sa propre grille d'images. En faire une grille de sections, c'était trois grilles côte à côte — les images tombaient à cent trente pixels de large. */ .projet .cats, .projet .clients{ display:block; } .projet .cat, .projet .client{ margin-top:var(--sp-6); } .projet .cat:first-child, .projet .client:first-child{ margin-top:0; } .projet .cat-head, .projet .client-head, .projet .gal-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding-bottom:var(--sp-2); margin:0 0 var(--sp-3); border-bottom:1px solid var(--line); } .projet .cat-head h2, .projet .client-head h2, .projet .gal-head h2{ font-family:"Vultur Titre","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; line-height:var(--lh-titre); letter-spacing:-.025em; font-size:clamp(var(--t-1),3.4vw,var(--t-1h)); } .projet .tag{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:var(--t--h); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); white-space:nowrap; } @media (max-width:56rem){ /* Le `nowrap` garde l'étiquette sur une ligne à côté du titre, ce qui est juste tant qu'il y a la place. Sur téléphone il poussait la page : chez map.ch, 112 px de débordement horizontal. La tête passe donc à la ligne, et l'étiquette retrouve le droit de se couper. */ .projet .cat-head, .projet .client-head, .projet .gal-head{ flex-wrap:wrap; gap:var(--sp-1); } .projet .tag{ white-space:normal; } } .projet .device, .projet .contain, .projet .pod{ display:block; } .projet .contain img, .projet .contain video{ object-fit:contain; background:#000; } /* ---------- LE PIED DE LA PAGE ---------- Une sortie, et la signature du projet. `.foot` désigne autre chose dans la feuille commune : d'où la portée `.projet`. */ .projet .gallery .foot{ margin-top:var(--sp-6); padding:var(--sp-4) 0 var(--sp-6); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); } .projet .gallery .foot a{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:var(--t--h); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink); transition:gap .25s var(--ease); } .projet .gallery .foot a:hover{ gap:var(--sp-3); } .projet .gallery .foot a svg{ width:var(--sp-2); height:var(--sp-2); } .projet .sig{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:var(--t--h); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }