/* ============================================================ JONAS — feuille de style commune à toutes les pages 0 Monigue · 1 tokens · 2 base · 3 fond · 4 curseur 5 intro · 6 header · 7 boutons · 8 hero · 9 structure 10 à propos · 11 projets · 12 skills · 13 contact 14 footer · 15 page projet · 16 responsive · 17 motion ============================================================ */ /* ============================================================ 0 — MONIGUE, la typo du logo, réservée aux grands titres Dépose le fichier dans fonts/. Le navigateur prend le premier format qu'il trouve : un seul suffit, woff2 de préférence. Les chemins sont relatifs à ce fichier CSS, donc « ../fonts/ ». ============================================================ */ @font-face{ font-family:'Monigue'; /* ▸ Ces chemins correspondent aux fichiers réellement présents dans fonts/. Ils cherchaient auparavant « Monigue.otf » et « Monigue.ttf », qui n'existent pas : la police ne se chargeait donc sur aucune page et tous les grands titres tombaient en Archivo de repli. L'espace du nom de fichier s'écrit %20 dans une URL. Monigue existe maintenant aussi en woff2 (6 Ko au lieu de 10) : c'est le format que tout navigateur moderne prend en premier. Chaque page le précharge dans son , pour que les titres ne sautent plus quand la police arrive. Les deux autres restent en secours. */ src:url('../fonts/Monigue.woff2') format('woff2'), url('../fonts/Monigue%20DEMO.otf') format('opentype'), url('../fonts/Monigue%20DEMO.ttf') format('truetype'); font-weight:400 900; font-style:normal; font-display:swap; } /* ============================================================ 1 — TOKENS ============================================================ */ :root{ color-scheme:light; --paper:#EDEDED; --paper-hi:#F9F9F9; --plate:#E3E3E3; --ink:#000000; --ink-2:#5A5A5A; --ink-3:#8E8E8E; --rule:rgba(0,0,0,.10); --hair:rgba(0,0,0,.14); --amber:#FFAA00; --on-amber:#141414; --photo-mask:linear-gradient(to bottom,#000 58%,transparent 97%); --gutter:clamp(20px,6vw,90px); --display:'Monigue','Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --tracking:-.012em; /* resserrage des titres en Monigue */ --ease:cubic-bezier(.22,1,.36,1); } /* Transition entre les pages (Chrome, Edge, Safari 18+). Ailleurs la navigation se fait normalement, rien ne casse. */ @view-transition{ navigation:auto } /* ============================================================ 2 — BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0;overflow-x:clip; background:var(--paper);color:var(--ink); font-family:var(--font); font-variation-settings:'wdth' 100,'wght' 400; font-size:clamp(15px,1.02vw,17px);line-height:1.55; -webkit-font-smoothing:antialiased; } img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} p{margin:0 0 1.1em;text-wrap:pretty} h1,h2,h3{margin:0;font-weight:400} figure{margin:0} ::selection{background:var(--amber);color:var(--on-amber)} :focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px} /* ============================================================ 3 — FOND : la grille du wireframe + le halo central ============================================================ */ .rules{position:fixed;top:0;bottom:0;left:0;width:100%;pointer-events:none;z-index:1} .rules i{position:absolute;top:0;bottom:0;width:1px;background:var(--rule)} .rules i:nth-child(1){left:33.3333%} .rules i:nth-child(2){left:66.6666%} .glow{position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(58% 46% at 50% 40%, var(--paper-hi) 0%, transparent 72%)} @media (max-width:760px){ .rules i:nth-child(1){left:50%} .rules i:nth-child(2){display:none} } /* ============================================================ 4 — CURSEUR ============================================================ */ .cursor{ position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%; background:var(--ink);pointer-events:none;z-index:999;opacity:0; transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s; will-change:transform; } .cursor.on{opacity:1} .cursor.ring{width:50px;height:50px;background:transparent;border:1px solid var(--ink)} .cursor.amber{width:54px;height:54px;background:var(--amber);border-color:var(--amber)} html.fine a,html.fine button{cursor:none} /* ============================================================ 5 — INTRO VIDÉO (page d'accueil uniquement) ============================================================ */ .loader{position:fixed;inset:0;z-index:900;background:var(--paper);display:none;place-items:center} html.js .loader{display:grid} html.js.loaded .loader{display:none} /* intro déjà vue dans cette visite, ou retour d'une autre page du site : pas de loader, et tout est visible tout de suite (voir le d'index.html) */ html.sans-intro .loader{display:none} .intro-video{ width:min(560px,74vw);height:auto;will-change:transform; /* Fond blanc du MP4 : multiply le fond dans le gris de la page. Si tu réexportes avec un fond #EDEDED, supprime ces 2 lignes. */ mix-blend-mode:multiply; clip-path:inset(4% 0); } .skip{ position:absolute;right:var(--gutter);bottom:clamp(22px,4vh,44px); background:transparent;border:1px solid var(--hair);color:var(--ink-2); font-family:var(--font);font-size:14px;padding:.5em 1.2em; border-radius:999px;cursor:pointer;transition:color .3s,border-color .3s; animation:skip-in .5s .6s both; /* apparaît une fois l'intro lancée */ } .skip:hover{color:var(--ink);border-color:var(--ink)} @keyframes skip-in{from{opacity:0}} /* ============================================================ 6 — HEADER ============================================================ */ .site-head{position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:clamp(16px,2.4vw,32px) var(--gutter)} .site-head::before{content:'';position:absolute;inset:0;background:var(--paper);opacity:0; transition:opacity .45s ease; -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent); mask-image:linear-gradient(to bottom,#000 52%,transparent)} .site-head.stuck::before{opacity:.94} .site-head>*{position:relative} .head-logo{width:clamp(78px,7.2vw,110px);display:block} /* masqué seulement sur l'accueil, le temps de l'intro vidéo */ html.js .page-home .head-logo{opacity:0} html.static .page-home .head-logo{opacity:1} html.sans-intro .page-home .head-logo{opacity:1} .nav{display:flex;align-items:center;gap:clamp(16px,3.4vw,58px)} .nav a{font-size:clamp(14px,1.05vw,17px);position:relative;padding-bottom:3px} .nav a:not(.pill)::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)} .nav a:not(.pill):hover::after{transform:scaleX(1);transform-origin:left} /* ============================================================ 7 — BOUTONS ============================================================ */ .pill{display:inline-block;background:var(--amber);color:var(--on-amber); border:0;font-family:var(--font);font-size:clamp(14px,1.05vw,17px); padding:.62em 1.5em;border-radius:999px;cursor:pointer; font-variation-settings:'wght' 500; transition:background .3s,color .3s;will-change:transform} .pill:hover{background:var(--ink);color:var(--paper)} /* bouton secondaire : un contour, pour une action à côté de la principale */ .pill-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .pill-ghost:hover{background:var(--ink);color:var(--paper)} .pill:disabled{opacity:.3;cursor:default;pointer-events:none} .pill-meta{font-size:.72em;letter-spacing:.06em;opacity:.6;margin-left:.35em;line-height:0} /* un