/* ═══════════════════════════════════════════════════════════════════════════ VITRE.CSS — L'IDENTITÉ FINALE DE RENARD, EN UNE SEULE FEUILLE (24/09/2026) Djalil : « prends la dernière image, refais pareil sur la page d'accueil, conserve bien ce qu'on a de base au cas où ; les pastilles doivent être transparentes et laisser la lumière du fond venir se refléter ; ensuite on lance ce gros projet et on donne son identité finale à Renard ». RÈGLE : une page est à la charte quand elle charge CETTE feuille (jamais une copie) et que `node banc-vitre.mjs ` passe. La liste des pages converties vit dans site/vitre-pages.json. Le design classique de chaque page est gardé avant conversion dans site/.sauvegardes/. Contenu : 1. le premier écran de l'accueil (la carte de fin du film, l'aurore, la vitre, les perles de verre) — né dans index.html le 23/09, sorti ici le 24/09 ; 2. les pièces pour toutes les pages : .v-fond, .v-entete, .v-caps, .v-bouton, .v-panneau. Les jetons de couleur (--action, --ok, --encre, --gris, --sourd, --trait, --trait-fort, --fond, --mono, --ui) viennent de la page ; cette feuille ne les redéfinit pas et ne connaît que deux couleurs de marque : l'orange agit, le vert tient. La feuille est servie réseau-d'abord par le service worker (pas dans la liste des fichiers « qui ne changent qu'en changeant de nom ») ; le ?v= dans les pages force malgré tout un nouveau chemin à chaque changement visible. ═══════════════════════════════════════════════════════════════════════════ */ /* ══ LE PREMIER ÉCRAN · LA VITRE (23/09/2026) ═══════════════════════════════ Djalil, à partir d'un arrêt sur image de notre film (IMG_3511, la carte de fin « Rien ne s'efface. ») : « tu vas prendre ça [l'effet de lumière de nos vidéos], tu vas reprendre la nouvelle interface du logo renard, tu vas rajouter le bouton tout en haut à droite avec les pastilles comme nous, et en fonction de ce que nous on a déjà, par exemple intention, engagement, preuve, je te laisse réécrire ça à ta manière ; à la place de "Rien ne s'efface" tu peux mettre "moteur d'imputabilité". En tout cas ça doit être au millimètre près, surtout cet effet de lumière derrière, comme emprisonné à travers une vitre, c'est le plus important : doux, souple comme sur nos vidéos, des contrastes pas agressifs, beaucoup de contraste mais pas agressif. » CE QUI EST FAIT. Le héros est la carte de fin du film, à l'échelle : toutes les cotes viennent du canevas 1080 × 1920 d'After Effects (ads/vendredi/ae/fin-25.jsx), multipliées par UN SEUL facteur --k = min(100vw, 640px) / 1080 — 0,364 sur un iPhone de 393 px, 0,593 sur la colonne de 640 px du bureau. Les écarts internes de la pile (ligne de base de l'accroche → trait 52, trait → tête 126,8, tête → capitales 79,8) sont ceux du film au demi-pixel. Entre « Renard » et le bouton, le film laisse 116 : c'est cet écart, et lui seul, qu'on ouvre pour loger la phrase h1, qui n'existe pas dans le film. La rangée intention · engagement · preuve prend la place de l'URL grise du film, sous le bouton. Pas d'URL « monrenard.com » : on y est déjà. La pile part du haut comme dans le film, le bas reste vide. LA LUMIÈRE. Cinq disques aux couleurs de la marque, floutés à 320 (AE) = trois écarts-types → un radial-gradient dont les paliers SONT le profil erf du disque flouté (aucun filter, coût nul, aucun bord). Opacités du film : 24 · 16 · 18 · 20 · 10 % — rien n'est ajouté. Le noir dessous est la rampe du film (#07090A → #000). ⚑ LES POSITIONS SONT CELLES DE LA PHOTO, PAS LE REPOS D'AE (23/09). Au repos d'After Effects (orange 260,480 ; bleu 180,1400 ; rayons 550 et 525) les cœurs se recouvrent de 150 px et fondent en gris-mauve au milieu- gauche, la bande sombre du milieu disparaît. La photo de Djalil est un instant précis de la dérive (t ≈ 29,6 s, ajusté au modèle erf) où les taches sont écartées vers les coins : c'est cet instant qui est le repos, et la dérive garde les périodes d'AE avec une amplitude × 0,35. Les taches vivent sur une PLAQUE 9:16 en « cover » : les % gardent le sens du film quelle que soit la fenêtre ; sur bureau la plaque est ancrée en haut et remontée de 15 % (la moitié haute du film). LA VITRE, c'est la trame du film et rien d'autre (points de 4 au pas de 48, #2A2E2C à 35 %, posés AU-DESSUS de la lumière : la poussière sur le verre), plus un fondu vers le noir en bas parce que le film n'a pas de bord. Teinte, jour rasant et liseré du premier jet sont retirés : invisibles (1 à 3 niveaux sur 255) ou faux (un filet clair d'un pixel, une guillotine en bas du héros). Pas de backdrop-filter : les taches sont déjà floues. Les seules lueurs : le trait orange (permanente, 50 %, comme dans le film) et le bouton, au clic seulement (75 %). Le halo de l'accroche est NOIR : il ne fait pas de lumière, il garde l'encre lisible sur l'aurore. RÉGLAGES (sur .v-aurore) : --aurore-op (1 = le film ; .9 = « doux »), --aurore-echelle (1 ; la plaque fait le reste), --aurore-vitesse (3 : dérives de 18 à 41 s), --aurore-flou (variante littérale .floue seulement). Rien de l'ancien héros n'est supprimé : la section s'appelle .v-heros et aucune règle .heros ne l'atteint. Les règles .decouvrir/.rail de l'ancien bouton ont été préfixées « .heros » (lignes ~140, 2031-2032, 2095-2123, 2158, 2162, 2224-2230) : le bouton garde class="decouvrir" (banc-outils V.2 l'exige) sans hériter de la forme d'avant. Le CSS ne parie pas sur le JS : aucune classe n'est posée par un script ici. */ /* ⚑ LA BARRE DE DÉFILEMENT S'EFFACE (26/09/2026). Djalil : « le petit trait gris sur le bord droit quand on défile — affine-le, et rends la couleur beaucoup plus grise, qu'il se voie beaucoup moins. » On passe par les propriétés standard et PAS par `::-webkit-scrollbar` : dès qu'on style ce pseudo, Chromium abandonne la barre flottante et en dessine une permanente, avec sa gouttière — on gagnerait la finesse et on perdrait l'effacement, ce qui est l'inverse de ce qu'il demande. ⚑ CE QUE ÇA NE FAIT PAS, ET IL FAUT LE LUI DIRE : sur iPhone la barre est dessinée par le système et n'écoute aucune de ces deux règles. Sa longueur, elle, n'est réglable nulle part — le navigateur la calcule sur le rapport écran/page. La raccourcir de moitié demanderait de cacher la vraie et d'en dessiner une à nous. */ html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.085) transparent} .v-heros{--k:calc(min(100vw,640px)/1080); /* la hauteur de l'en-tête (absolu, il flotte sur le héros) */ --v-entete:calc(max(16px, var(--oy,0px) + var(--rh,100vh)*0.0085) + max(46px, var(--rh,100vh)*0.0825)); position:relative;isolation:isolate;overflow:hidden;background:var(--fond); /* pleine largeur : le héros sort de la colonne de main */ margin:0 calc(50% - 50vw);max-width:none; /* ⚑ la pile part du HAUT, comme dans le film (accroche à 15 % du cadre, le bas vide) ; centrée, le tiers haut restait vide (correction du 23/09). Le jour sous l'en-tête est le cadre du film ramené à la largeur de l'écran et centré dans la fenêtre : accroche à ≈ 21 % sur 393 × 852, 18,5 % sur 1440 × 900. Le plancher de 56 px sert au téléphone en paysage, où la pile déborde et défile sans coller à l'en-tête. */ min-height:100svh;padding:calc(var(--v-entete) + max(56px, 10.5svh)) 16px calc(40*var(--k)); display:flex;flex-direction:column;align-items:center;justify-content:flex-start; text-align:center;color:var(--encre)} .v-heros > *{position:relative;z-index:1} /* ── LA NAPPE : la rampe radiale du film (ADBE Ramp, [540,760] → [540,1900]) ── */ /* ⚑ LA PLAQUE SE DÉCOUPE PAR clip-path, PAS SEULEMENT PAR overflow (10/10/2026, iPad de Djalil, Safari 17.3.1 : de grands disques à bords nets et des rectangles sur l'accueil). Safari ne découpe pas toujours des enfants ANIMÉS avec overflow (même leçon que .v-point le 24/09) ; ici les disques font jusqu'à 3 580 px et la cage du bandeau ne découpe rien. clip-path est respecté sur les couches animées ; sur un moteur qui découpe déjà, il ne change pas un pixel (vérifié). */ .v-aurore{position:absolute;z-index:0;overflow:hidden;pointer-events:none;clip-path:inset(0);-webkit-clip-path:inset(0); /* la plaque 9:16 du film en « cover », centrée : les % et les disques gardent le sens du film quelle que soit la fenêtre (479 × 852 sur un iPhone de 393 de large ; 563 × 1000 si le héros fait 1000 px de haut) */ left:50%;top:50%;translate:-50% -50%;width:auto;height:auto;min-width:100%;min-height:100%;aspect-ratio:9/16; /* ⚑ LA DÉRIVE SE VOIT (24/09/2026). Djalil, devant l'accueil en ligne : « il manque les effets de lumière comme sur nos vidéos, qui bougent derrière ; ce sont ces lumières qui doivent venir se refléter à travers les pastilles ; leur manière de bouger ensemble doit être très naturelle, elles ne se mélangent jamais ». Le premier réglage bridait l'amplitude au tiers du film (--ax/--ay inline = AE × 0,35) et étirait les périodes (×3) : à l'œil, rien ne bougeait. --aurore-ampli multiplie les amplitudes inline (2 = les deux tiers du film) ; --aurore-vitesse 2 ramène les périodes à 12–27 s, celles du film à peu près. Les taches gardent leurs places de départ (celles de la photo), donc elles s'écartent et se croisent sans se fondre en gris. */ --aurore-op:1;--aurore-echelle:1;--aurore-flou:47px;--aurore-vitesse:2;--aurore-ampli:2;--aurore-tour:40; background:radial-gradient(ellipse 105.6% 59.4% at 50% 39.6%,#07090A,#000 100%)} /* ⚑ ELLES TOURNENT LES UNES AUTOUR DES AUTRES (24/09/2026). Djalil, devant la dérive : « elles doivent vraiment tourner entre elles, comme des masses opaques, donc l'orange n'est pas forcément en haut ; il faut vraiment qu'on sente que ça bouge, de manière très fluide ». Donc plus de dérive sur place : une ORBITE commune. Chaque tache tourne autour du centre de la plaque en --aurore-tour (40 s : un tour complet, neuf degrés par seconde, on le sent), sur sa propre ellipse (--ox, --oy en % de la plaque), et toutes à la MÊME cadence angulaire : l'écart entre elles ne change jamais, elles se croisent en profondeur mais ne se fondent pas en gris. Le rose tourne à l'intérieur, sur une petite orbite. Le mouvement est fait de deux allers-retours en ease-in-out (x sur .t, y sur b, décalés d'un quart de tour) : une orbite ronde-douce, sur le compositeur, sans repeint. Une tache : .t (orbite x) > b (orbite y) > i (le disque, qui respire). */ .v-aurore .t{position:absolute;left:0;top:0;width:100%;height:100%; animation:v-orbite-x calc(var(--aurore-tour)*.5s) ease-in-out calc((var(--ph) + .25)*var(--aurore-tour)*-1s) infinite alternate} .v-aurore .t b{position:absolute;inset:0;display:block; animation:v-orbite-y calc(var(--aurore-tour)*.5s) ease-in-out calc(var(--ph)*var(--aurore-tour)*-1s) infinite alternate} .v-aurore .t b>i{position:absolute;left:50%;top:50%;display:block; height:calc(var(--d)*var(--aurore-echelle)*1%);width:auto;aspect-ratio:1;translate:-50% -50%; opacity:calc(var(--o)*var(--aurore-op)); animation:v-aurore-respire calc(var(--pr)*var(--aurore-vitesse)*1s) ease-in-out calc(var(--dr)*var(--aurore-vitesse)*-1s) infinite alternate} /* les orbites : rayons en % de la plaque (x sur la largeur, y sur la hauteur), phase en tours ; à t = 0 la scène ressemble à la photo (orange en haut à gauche, jaune en haut à droite, rouge en bas à droite, bleu en bas à gauche) */ .v-aurore .t.orange{--ox:30;--oy:31;--ph:.125;--x:34.6;--y:17.7;--d:86.2;--o:.24;--kd:.66;--pr:4.49;--dr:2.25} .v-aurore .t.jaune{--ox:26;--oy:36;--ph:.375;--x:64;--y:4.1;--d:73.7;--o:.16;--kd:.61;--pr:4.49;--dr:3.67} .v-aurore .t.rouge{--ox:32;--oy:33;--ph:.625;--x:101.9;--y:92.2;--d:79.9;--o:.18;--kd:.64;--pr:4.49;--dr:5.1} .v-aurore .t.bleu{--ox:34;--oy:30;--ph:.875;--x:-2.2;--y:87;--d:83.6;--o:.2;--kd:.65;--pr:4.49;--dr:6.53} .v-aurore .t.rose{--ox:13;--oy:11;--ph:.5;--x:70.9;--y:37.5;--d:65.3;--o:.1;--kd:.56;--pr:4.49;--dr:7.96} @keyframes v-orbite-x{from{translate:calc(var(--ox)*-1%) 0}to{translate:calc(var(--ox)*1%) 0}} @keyframes v-orbite-y{from{translate:0 calc(var(--oy)*-1%)}to{translate:0 calc(var(--oy)*1%)}} /* les paliers erf de chaque tache (100 % = le rayon de l'élément, R + 2,6 σ) */ .v-aurore .t.orange b>i{background:radial-gradient(circle closest-side,rgba(255,90,31,1) 33%,rgba(255,90,31,.977) 40.7%,rgba(255,90,31,.933) 47.1%,rgba(255,90,31,.841) 53.6%,rgba(255,90,31,.691) 60%,rgba(255,90,31,.500) 66.5%,rgba(255,90,31,.309) 72.9%,rgba(255,90,31,.159) 79.4%,rgba(255,90,31,.067) 85.8%,rgba(255,90,31,.023) 92.3%,rgba(255,90,31,.005) 100%,transparent 100%)} .v-aurore .t.jaune b>i{background:radial-gradient(circle closest-side,rgba(245,181,46,1) 21.6%,rgba(245,181,46,.977) 30.6%,rgba(245,181,46,.933) 38.2%,rgba(245,181,46,.841) 45.7%,rgba(245,181,46,.691) 53.3%,rgba(245,181,46,.500) 60.8%,rgba(245,181,46,.309) 68.3%,rgba(245,181,46,.159) 75.9%,rgba(245,181,46,.067) 83.4%,rgba(245,181,46,.023) 91%,rgba(245,181,46,.005) 100%,transparent 100%)} .v-aurore .t.rouge b>i{background:radial-gradient(circle closest-side,rgba(255,59,48,1) 27.7%,rgba(255,59,48,.977) 36.1%,rgba(255,59,48,.933) 43%,rgba(255,59,48,.841) 50%,rgba(255,59,48,.691) 56.9%,rgba(255,59,48,.500) 63.9%,rgba(255,59,48,.309) 70.8%,rgba(255,59,48,.159) 77.8%,rgba(255,59,48,.067) 84.7%,rgba(255,59,48,.023) 91.7%,rgba(255,59,48,.005) 100%,transparent 100%)} .v-aurore .t.bleu b>i{background:radial-gradient(circle closest-side,rgba(56,189,248,1) 30.9%,rgba(56,189,248,.977) 38.8%,rgba(56,189,248,.933) 45.5%,rgba(56,189,248,.841) 52.1%,rgba(56,189,248,.691) 58.8%,rgba(56,189,248,.500) 65.4%,rgba(56,189,248,.309) 72.1%,rgba(56,189,248,.159) 78.7%,rgba(56,189,248,.067) 85.4%,rgba(56,189,248,.023) 92%,rgba(56,189,248,.005) 100%,transparent 100%)} .v-aurore .t.rose b>i{background:radial-gradient(circle closest-side,rgba(255,122,156,1) 11.6%,rgba(255,122,156,.977) 21.8%,rgba(255,122,156,.933) 30.3%,rgba(255,122,156,.841) 38.8%,rgba(255,122,156,.691) 47.3%,rgba(255,122,156,.500) 55.8%,rgba(255,122,156,.309) 64.3%,rgba(255,122,156,.159) 72.8%,rgba(255,122,156,.067) 81.3%,rgba(255,122,156,.023) 89.8%,rgba(255,122,156,.005) 100%,transparent 100%)} /* variante B, littérale (classe .floue sur .v-aurore) : disque plein + flou */ .v-aurore.floue .t b>i{background:none;border-radius:50%;filter:blur(var(--aurore-flou)); height:calc(var(--d)*var(--aurore-echelle)*var(--kd)*1%)} .v-aurore.floue .t.orange b>i{background:#FF5A1F}.v-aurore.floue .t.jaune b>i{background:#F5B52E} .v-aurore.floue .t.rouge b>i{background:#FF3B30}.v-aurore.floue .t.bleu b>i{background:#38BDF8} .v-aurore.floue .t.rose b>i{background:#FF7A9C} /* les trois mouvements du film : sin/cos → un aller ease-in-out alterné */ @keyframes v-aurore-x{from{translate:calc(var(--ax)*var(--aurore-ampli,1)*-1%) 0}to{translate:calc(var(--ax)*var(--aurore-ampli,1)*1%) 0}} @keyframes v-aurore-y{from{translate:0 calc(var(--ay)*var(--aurore-ampli,1)*-1%)}to{translate:0 calc(var(--ay)*var(--aurore-ampli,1)*1%)}} @keyframes v-aurore-respire{from{scale:.88}to{scale:1.12}} /* LA VITRE, au-dessus de la lumière : la trame du film (AE : points de 4 au pas de 48 sur le canevas 1080, encre #2A2E2C à 35 %), et un fondu vers le noir sur les 22 % du bas — le film n'a pas de bord, son cadre est l'écran, et la section suivante est noire. Portée par le héros, pas par la plaque (sinon la trame suivrait la plaque 9:16 et sa dérive). Elle passe sous la pile (z 1) et sur la plaque (z 0, avant elle dans l'arbre). */ /* ⚑ LA GRILLE EST COUPÉE NETTE (24/09/2026, 06h10). Djalil, après l'essai côte à côte : « on coupe la grille nette partout ; on garde la lumière, on veut juste un arrière-fond tout noir avec notre lumière derrière ». Trois grilles existaient sur l'accueil — celle du corps, celle posée sur main, celle du héros — et une quatrième sur les pages intérieures (.v-fond::after). Toutes retirées ; ne restent que les fondus vers le noir, qui ne dessinent rien. */ /* ⚑ LE LAVIS AVAIT UN GENOU (26/09/2026). C'était une rampe DROITE : noir plein en bas, transparent à 22 %, rien entre les deux qu'une pente constante. Une pente constante posée sur une lumière qui, elle, décroît en courbe, ça fait une cassure visible là où les deux se croisent — la « démarcation » qu'il voit. Mesuré dans la gouttière : la lumière valait encore 6,1 à quarante pixels du bas, et 0,0 au bas. Même course, mais en courbe, et elle n'atteint le noir plein qu'au tout dernier pour cent. */ .v-heros::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to top,#000 0,rgba(0,0,0,.94) 1.5%,rgba(0,0,0,.80) 4%, rgba(0,0,0,.60) 7.5%,rgba(0,0,0,.42) 11%,rgba(0,0,0,.26) 15%,rgba(0,0,0,.13) 19%, rgba(0,0,0,.05) 23%,rgba(0,0,0,0) 27%)} /* ── LA PILE (cotes du film × --k) ── Inter, hauteur de ligne 1 : la ligne de base est à 0,864 em du haut de la boîte, le haut des capitales à 0,137 em ; c'est avec ces deux nombres que les marges ci-dessous reproduisent les écarts d'encre du film. */ .v-accroche{font-family:var(--ui);font-weight:800;font-size:calc(58.24*var(--k));line-height:1; letter-spacing:-.02em;padding-left:.02em; /* l'approche traînante de CSS, compensée */ word-spacing:.26em; /* le film pose les mots à 56 × 0,52 = 29,1 d'encre à encre ; l'espace d'Inter n'en fait que 14 */ color:var(--encre);white-space:nowrap; text-shadow:0 0 calc(20.8*var(--k)) rgba(0,0,0,.86)} .v-trait{display:block;width:calc(426.4*var(--k));height:max(1.5px,calc(3.64*var(--k)));border-radius:99px; margin-top:calc(42.3*var(--k));background:var(--action); box-shadow:0 0 calc(22*var(--k)) rgba(255,90,31,.5)} /* la seule lueur permanente : 11 canevas à 8 % du pic, comme dans la photo */ .v-tete{display:block;width:calc(260*var(--k));height:calc(260*var(--k)); margin-top:calc(119*var(--k))} /* l'encre de renard-tete-2.png commence plus bas dans sa boîte que celle du film : axe du trait → encre 133,7 comme la photo */ .v-nom{font-family:var(--ui);font-weight:600;font-size:calc(124*var(--k));line-height:1;letter-spacing:-.015em; padding-left:.015em;margin-top:calc(62.9*var(--k));color:var(--encre);white-space:nowrap} .v-nom .lettre-verte{color:var(--ok);margin-left:-.015em} /* le film serre le d de 1,9 px */ .v-titre{font-family:var(--ui);font-weight:500;font-size:max(16px,calc(44*var(--k)));line-height:1.28; letter-spacing:-.01em;margin-top:calc(72*var(--k));max-width:26ch;text-wrap:balance;color:var(--encre)} .v-titre em{font-style:normal;color:var(--action)} /* la rangée : un point plein, son mot en capitales mono, un fil entre deux. ⚑ Elle passe SOUS le bouton (order:1), à la place de l'URL grise du film — la seule ligne secondaire du film est sous l'appel, à ≈ 60 du cadre. Au- dessus, collée sous « Renard », elle se lisait comme une légende du logo (correction du 23/09). L'ordre du DOM ne change pas. */ .v-parcours{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;order:1; gap:clamp(6px,calc(14*var(--k)),10px);margin-top:calc(60*var(--k)); font-family:var(--mono);font-weight:500;font-size:clamp(10px,calc(24*var(--k)),12.5px); line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)} .v-pas{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} /* ── LE ROND DE VERRE LIQUIDE (24/09/2026) ── Djalil, après la première pose : « je ne parlais même pas de perles : laisse juste un rond de verre liquide, vide, où la lumière derrière vient juste se refléter. Là on voit qu'il y a une masse, non : vraiment que ça, comme du liquide glace. » Donc : pas de bille. Aucun voile, aucun reflet spéculaire, aucune épaisseur, aucune ombre portée. Un disque VIDE : la lumière de l'aurore le traverse (backdrop-filter, qui lit ce qui est DERRIÈRE : la plaque en z 0 sous la pile en z 1) à peine relevée et saturée, comme à travers une goutte d'eau ; et le seul signe du verre est son BORD — un liseré fin, un cheveu plus clair en haut qu'en bas, là où la lumière se courbe. Bleu dessous → rond bleu ; rouge dessous → rond rouge ; rien dessous → un rond de nuit à peine cerné, et c'est voulu : il est vide. Les trois règles .v-pas.intention / .engagement / .preuve n'existent plus : rien n'est peint, la couleur vient toujours de dessous. Coût : trois backdrop-filter de 13 à 16 px, un dégradé pour le bord. iOS : -webkit-backdrop-filter en tête ; pas d'url() ni de déplacement. */ /* ⚑ LE CIEL DANS LE ROND (24/09/2026). Djalil : « quand la lumière vient se refléter sur les pastilles, la pastille peut comporter plusieurs dégradés, parce que la lumière a plusieurs dégradés ; je veux que tout se reflète, de manière fluide, avec ses vrais dégradés : parfois le bleu est plus profond en haut qu'en bas ». Le backdrop-filter, lui, ne rend qu'une moyenne : sur 14 px, la lumière d'une tache de 700 px est plate. Une bille de verre, elle, REFLÈTE le ciel entier, compressé. Donc chaque rond contient un reflet miniature de l'aurore (.v-ciel > .v-aurore.ciel : les mêmes cinq taches, les mêmes orbites, les mêmes cadences — elles partent au même instant que la grande, donc restent en phase), à l'échelle d'une plaque de 36 × 64 px derrière un rond de 14 : on y voit les dégradés d'une tache, le passage d'une couleur à l'autre, et ça tourne avec le ciel. Chaque rond regarde une fenêtre différente du ciel (décalage par rang). Le reflet s'ajoute à la lumière vraie du dessous (mix-blend-mode screen) ; pas de JS. */ .v-point{position:relative;display:block;flex:none;overflow:hidden;isolation:isolate; width:clamp(13px,calc(40*var(--k)),16px);height:clamp(13px,calc(40*var(--k)),16px); border-radius:50%; /* ⚑ LA TRANSPARENCE DE LA PASTILLE « PRIVÉ · FLUIDE » (24/09/2026). Djalil, devant la page des formules : « c'est de cette couleur transparente que je te parlais pour les pastilles : vraiment transparente, exactement comme ça, et la lumière doit se refléter à travers ». Cette pastille-là : un verre à 1,5 % de blanc, un bord fin, rien d'autre. Donc le rond : le même verre (2 % de blanc), un bord fin clair, le fond vrai à peine relevé, et le reflet du ciel en filigrane — on voit À TRAVERS, la lumière passe, elle ne remplit pas. */ background:rgba(255,255,255,.02); /* ⚑ SAFARI NE DÉCOUPE PAS UN ENFANT ANIMÉ AVEC overflow:hidden + border-radius (24/09/2026, Djalil sur iPhone : « le cercle, il y a un carré de lumière dessus ») : la plaque du reflet débordait en carré. clip-path, lui, est respecté par WebKit sur les couches composées ; -webkit-mask double la garde. Le rond redevient un cercle simple. */ clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%); -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 97%,transparent 100%); mask-image:radial-gradient(circle closest-side at 50% 50%,#000 97%,transparent 100%); -webkit-backdrop-filter:blur(1.5px) saturate(1.4) brightness(1.15); backdrop-filter:blur(1.5px) saturate(1.4) brightness(1.15); /* la lumière vraie traverse, à peine relevée */ /* le bord du verre : un liseré fin, comme celui de la pastille des formules ; un cheveu plus clair en haut */ box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.12)} .v-point::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2; /* la courbure : un très léger anneau de lumière au bord, le centre reste vide */ background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 62%,rgba(255,255,255,.07) 86%,rgba(255,255,255,.02) 100%)} /* le reflet : une plaque 9:16 de 2,6 × 4,6 fois le rond, centrée, décalée selon le rang du rond */ .v-point .v-ciel{position:absolute;left:50%;top:50%;width:260%;height:460%;translate:-50% -50%;pointer-events:none; mix-blend-mode:screen;opacity:.55} /* en filigrane : on voit le reflet, on voit à travers */ /* le reflet reste un reflet : le rond garde sa transparence, on voit à travers */ .v-pas:nth-of-type(1) .v-ciel{translate:-38% -46%} .v-pas:nth-of-type(3) .v-ciel{translate:-50% -56%} .v-pas:nth-of-type(5) .v-ciel{translate:-62% -48%} .v-point .v-aurore{background:none;--aurore-op:1.3} /* dans le verre, la lumière est un peu plus dense qu'au fond, sans redevenir une bille pleine */ .v-point .v-aurore .t b>i{animation-duration:calc(var(--pr)*var(--aurore-vitesse)*1s)} .v-fil{display:block;width:calc(48*var(--k));height:1px;background:var(--trait-fort);flex:none} /* le bouton du héros : il porte class="decouvrir v-bouton" (banc-outils lit « decouvrir ») ; sa forme, sa matière et ses gestes sont ceux de .v-bouton, UNE définition pour tout le site — ici seulement sa place dans la pile */ .v-heros .decouvrir{margin-top:calc(64*var(--k))} .v-fl{display:block;width:calc(24.4*var(--k));height:calc(27.1*var(--k));color:var(--action);flex:none} .v-fl svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5} .v-sep{display:block;width:max(1px,calc(2*var(--k)));height:calc(56*var(--k));background:rgba(242,241,236,.22);flex:none; margin:0 calc(33*var(--k)) 0 calc(22.8*var(--k))} .v-lib{display:block;margin-right:-.12em;translate:0 calc(5*var(--k));white-space:nowrap} .v-cadre{display:none!important} /* l'ancien cadre SVG à coins coupés : plus jamais dessiné, s'il en reste un dans un markup */ .v-heros .vers-cohorte{order:2;margin-top:calc(30*var(--k))} /* ⚑ L'EN-TÊTE SUR L'AURORE (23/09/2026). Le 02/09, Djalil a voulu que le bandeau ne se lise plus comme « une barre rapportée » : sur la page noire d'alors, on lui a donné le noir de la page à 72 %, et la barre a disparu. Sur l'aurore, tout voile la redessine — à 72 % une bande noire à bord dur avec 16 px de lumière au-dessus ; à 30 % avec un liseré (premier jet) une bande plus sombre que la lumière au-dessus et au-dessous, soulignée d'un filet clair, et entre 641 et 899 px une plaque de 640 px à bords visibles. Même intention, geste inverse : AU REPOS, PAS DE VERRE DU TOUT. Le logo et le menu posent sur l'aurore comme le bouton du film. Mesuré : le fond le plus clair sous l'en-tête fait Y 70/255, l'encre reste au-dessus de 10:1. L'état condensé (bureau, après défilement, posé par le script) garde la lettre du 02/09 : noir à 72 % et flou. Sans script la page reste juste : l'en-tête absolu défile avec la page, aucune plaque. Les !important battent ceux de la règle d'origine (l.1832), qu'on ne touche pas. */ /* ⚑ LA BARRE : NUE EN HAUT, VERRE DÈS QU'ON DESCEND (24/09/2026). Djalil : « enlève cet effet transparent, laisse les boutons posés à même l'interface ; mais quand on descend, le flou et le noir arrivent, ça j'aime bien, on le garde — uniquement quand on commence à descendre. Et même une petite animation : quand on baisse, ça écarte légèrement le logo et la pastille. Quelque chose qui comprend qu'on est en train de baisser. » Donc, au repos : rien. Pas de fond, pas de flou, pas de filet — le renard et le bouton posent sur la lumière comme deux objets. Dès que la page descend d'un pixel (body.condense, posé par le script à toutes les largeurs) : la barre monte à ras, prend le noir à 62 % et son verre, se resserre en hauteur, et les deux objets S'ÉCARTENT de douze pixels chacun — c'est ce mouvement, plus que le noir, qui dit « tu descends ». Tout est en `translate` (la propriété seule, pas `transform`) : le centrage de la marque et du bouton vit dans leur `transform`, on ne le touche pas. */ header{background:transparent!important;box-shadow:none!important; border-bottom:1px solid rgba(242,241,236,0)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important} body.v-accueil header{position:fixed!important;z-index:60!important; transition:background .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1), top .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1)!important} body.v-accueil header .marque,body.v-accueil header #burger{ transition:translate .42s cubic-bezier(.16,1,.3,1)} /* ⚑ LE RENARD NE CHANGE PAS DE TAILLE (24/09/2026). Djalil : « quand il s'écarte il se décale d'un millimètre, et pareil quand on revient ; je veux qu'il soit fixe ». La mesure le disait : l'écart demandé était de 12 px et la marque n'en parcourait que 10. La cause : le renard rétrécissait (31 → 27 px) en même temps qu'il s'écartait ; la marque est centrée sur son point d'ancrage (`transform:translate(-50%,-50%)`), donc un contenu plus étroit la RE-CENTRE de deux pixels — un second mouvement, non voulu, par-dessus le premier. La tête garde donc sa taille dans les deux états : il ne reste qu'un seul mouvement, l'écartement, et il est net. */ /* on descend : le verre arrive, la barre se resserre, les deux objets s'écartent */ body.v-accueil.condense header{top:0!important;left:0!important;right:0!important;max-width:none!important; height:max(58px, calc(var(--rh) * 0.0685))!important; /* ⚑ ASSEZ DENSE POUR QUE RIEN NE TRANSPARAISSE (24/09/2026, 12h30). Djalil : « quand tu descends et tu remontes, il y a comme le logo Hibou qui apparaît au niveau du logo Renard ». Ce n'était pas un logo : à 62 % de noir et 18 px de flou, les VERBES du flux — qui sont grands et clairs — se lisaient encore à travers la barre, juste à côté de la marque. Un fantôme de lettre à cette taille ressemble à une tête. On monte à 88 % et 26 px : la barre reste du verre (on voit la lumière bouger dessous) mais plus aucune forme ne se lit. */ /* ⚑ PLUS DE BARRE, PLUS DE TRAIT (26/09/2026). Djalil : « tout en haut tu as mis une barre noire, enlève cette barre quand on descend, mets plutôt un effet transparent, mais sans trace ni contour — il doit être imperceptible. » Ce qui se voyait, ce n'était pas la densité : c'était ses deux ARÊTES. Un trait clair d'un pixel en bas, et le bord franc du flou, qui s'arrête net sur toute la largeur. Les deux partent. La densité, elle, RESTE — et c'est mesuré, pas choisi : à 62 % et 18 px, les verbes du flux se lisaient encore à travers la barre à côté de la marque, et un fantôme de lettre à cette taille ressemble à une tête de hibou. Elle est simplement portée par une plaque qui S'ÉTEINT vers le bas au lieu de s'arrêter. Le haut de la plaque touche le bord de l'écran, donc il n'a pas d'arête ; le bas se fond. */ background:none!important;border-bottom-color:transparent!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* ⚑ RIEN QUE DU FLOU (26/09/2026, cinquième passe, et c'est la bonne). Djalil : « il ne doit pas y avoir d'ombre, c'est uniquement du flou. Pas d'ombres noires, rien, pas de dégradé, juste du flou, et derrière on voit le texte rentrer dedans. » CE QUE J'AI COMPRIS TROP TARD : c'est le NOIR qui faisait la démarcation, pas le flou. J'ai passé quatre tours à ajouter du noir pour cacher la frontière du flou, en fabriquant à chaque fois le défaut que je voulais corriger. Un voile sombre posé sur une page a forcément un bas, et ce bas se voit d'autant mieux qu'il est sombre. Un flou sans teinte, lui, ne change pas la luminosité moyenne — il ne change que la netteté. Sa frontière ne peut pas dessiner de ligne de contraste ; elle ne fait que séparer du net et du flou, ce que l'œil lit comme de la profondeur, pas comme un bord. Un élément, une déclaration, aucun fond. */ /* ⚑ UN SEUL CALQUE, ET C'EST LE MASQUE QUI FAIT LE DÉGRADÉ (26/09/2026, septième passe, et la bonne). Djalil : « ce n'est pas uniforme, je sens deux ou trois couches, et même la dernière je vois la couture. C'est autre chose, il n'y a pas de bord défini. » ⚑ JE M'ÉTAIS TROMPÉ SUR UN BANC, ET J'AI CONSTRUIT CINQ CHOSES SUR CETTE ERREUR. J'avais conclu qu'un masque annulait le flou d'arrière-plan — parce que je l'avais mesuré à UN SEUL endroit, là où le masque était déjà en train de s'éteindre. Mesuré sur toute la hauteur, la vérité est l'inverse : rayon masque plein à mi-fondu presque parti sans flou 123,5 123,5 123,5 18 px et plus 0 61 115,7 Un masque ne tue pas le flou, il le MODULE. Là où il est plein le texte est entièrement dissous, là où il s'éteint le texte redevient net, et entre les deux la transition est CONTINUE — pas une marche. Donc : un élément, un flou, un masque. Aucune couture possible, puisqu'il n'y a rien à raccorder ; et aucun bord, puisqu'un masque n'en a pas. C'est ce qu'il décrivait depuis le début. Le rayon monte à 30 px : sous le masque il ne rend que sa pleine force en haut, et il faut qu'elle suffise à dissoudre une ligne de titre. */ .lentille-haut{display:none} body.v-accueil.condense .lentille-haut{display:block;position:fixed;left:0;right:0;top:0; height:max(112px, calc(var(--rh,900px) * 0.132));z-index:59;pointer-events:none; backdrop-filter:blur(48px);-webkit-backdrop-filter:blur(48px); -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30%,rgba(0,0,0,.88) 38%,rgba(0,0,0,.66) 54%, rgba(0,0,0,.42) 68%,rgba(0,0,0,.22) 81%,rgba(0,0,0,.08) 92%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 30%,rgba(0,0,0,.88) 38%,rgba(0,0,0,.66) 54%, rgba(0,0,0,.42) 68%,rgba(0,0,0,.22) 81%,rgba(0,0,0,.08) 92%,transparent 100%)} body.v-accueil.condense header .marque{translate:-12px 0} body.v-accueil.condense header #burger{translate:12px 0} @media (prefers-reduced-motion:reduce){ body.v-accueil header,body.v-accueil header .marque,body.v-accueil header #burger, body.v-accueil header .marque .fox{transition:none!important} } /* ⚑ LA MÊME TÊTE EN HAUT ET LA MÊME LENTILLE SUR LES AUTRES PAGES (26/09/2026). Djalil : « on a déjà un effet de zoom quand on baisse vers le bas et la barre elle reste tout en haut ; eh bien fais pareil pour formule, affiliation, etc. » Deux écarts avec l'accueil, et ils sont voulus tous les deux : — `sticky`, pas `fixed`. Sur l'accueil la tête vit dans la plaque du héros : elle n'occupe aucune place dans le flux, donc la rendre fixe ne coûte rien. Ici elle en occupe une. En `fixed` elle la perdrait et tout le contenu de la page remonterait de sa hauteur au chargement — un saut, pas un effet, et il faudrait rattraper la marge à la main sur chaque page, donc en oublier une. En `sticky` elle garde sa place, ne bouge pas d'un pixel au repos, et reste en haut dès qu'on descend. Rien à recalculer. — la tête NE SE RESSERRE PAS. Même cause : toute hauteur qu'elle perdrait en cours de défilement remonterait le contenu d'autant, en plein mouvement. Sur l'accueil c'est gratuit, ici ça se verrait. Reste exactement ce qu'il a nommé : la lentille qui avale le texte en haut, et l'écartement des deux objets qui dit qu'on descend. L'écartement fait 7 px et non 12 : ici la marque est collée au bord (18 px de retrait sur téléphone) au lieu d'être centrée sur un ancrage, et 12 px la poseraient à 6 px du bord. */ body.v-page header{position:sticky;top:0;z-index:60} /* ⚑ DEUX PIÈGES DANS CES QUATRE LIGNES, TROUVÉS EN LES RELISANT (26/09/2026). · `header .marque` en descendant : sur l'affiliation la marque vit DANS un groupe avec le bouton Retour. Le descendant déplaçait la marque à l'intérieur du groupe, donc l'écart entre le renard et le Retour changeait au défilement, alors que les deux doivent voyager ensemble. `>` règle ça : on ne bouge que ce qui est posé directement dans la tête, marque seule ou groupe entier. · `header nav` : le menu déroulant EST un `