/* ═══════════════════════════════════════════════════════════════════════════ ASap FC — La marque, en haut et en bas. Écrit le 21/08/2026. Une seule forme sur tout le site : l'ICÔNE, puis le TEXTE À SA DROITE. Barre du haut et pied de page portent le même objet, à deux tailles. ── Les fichiers ─────────────────────────────────────────────────────────── Les sources d'`assets/logo/` ne sont jamais modifiées. Le site sert des fichiers DÉRIVÉS, produits par `node scripts/preparer-logos.mjs` : icone-nu.png texte-nu.png les deux logos DÉTOURÉS (fond transparent) icone-32.png icone-180.png les carrés de l'icône de page Le détourage remplace le `mix-blend-mode:lighten` de la première version. Ce mode marchait sur la barre du haut, dont le bleu est presque celui du logo, et échouait au pied de page, plus sombre : la plaque y restait visible. Un vrai canal alpha rend la pose indépendante de ce qu'il y a derrière — vérifié sur trois fonds, dont un rouge. ── Les repères, relevés dans les images et non estimés ──────────────────── icone.png — 237 × 204, dessin x 22→213, y 13→199 texte.png — 218 × 70, dessin x 9→206, y 5→65 · le filet jaune sous « ASap FC » : x 81→135, y 61→64, soit 37,16 % / 87,14 % / 25,23 % / 5,71 % de l'image. ── Le filet jaune animé ─────────────────────────────────────────────────── On ne le recouvre pas et on ne le redessine pas : un reflet passe par-dessus, découpé au pixel sur son rectangle, plus un halo un peu plus large qui déborde autour. À 5,71 % de la hauteur de `texte.png`, il est cinq fois plus épais en proportion que dans l'ancien logo tout-en-un — c'est pour ça que le geste se lit enfin à taille de barre. ═══════════════════════════════════════════════════════════════════════════ */ .marque{ --i:34px; /* hauteur de l'icône */ display:inline-flex; align-items:center; gap:calc(var(--i) * .30); line-height:0; } /* L'icône est recadrée sur son dessin (x 22→213, y 13→199 sur 237×204) : largeur = i × 192/187 = i × 1,0267 image = i × 204/187 = i × 1,0909 (hauteur) décalage x = −22/237 × largeur img = −i × 0,1178 décalage y = −13/204 × hauteur img = −i × 0,0695 */ .marque .icone{ position:relative; display:block; overflow:hidden; flex:none; height:var(--i); width:calc(var(--i) * 1.0267); } .marque .icone img{ position:absolute; max-width:none; width:auto; height:calc(var(--i) * 1.0909); left:calc(var(--i) * -.1178); top:calc(var(--i) * -.0695); } /* Le texte est recadré sur son dessin (x 9→206, y 5→65 sur 218×70), plus deux pixels sous le filet pour que son halo ait où déborder : fenêtre x 7→208 (201 de large), y 3→68 (65 de haut). largeur = h × 201/65 = h × 3,0923 image = h × 70/65 = h × 1,0769 (hauteur) décalage x = −7/218 × largeur img = −h × 0,2166 décalage y = −3/70 × hauteur img = −h × 0,0462 */ /* ⚠️ Le cadre du texte contient DEUX choses : le mot-symbole (y 5→45) et le filet jaune (y 61→64). Centré sur le cadre, l'ensemble est géométriquement juste et optiquement faux — l'œil ne compte pas le filet, et lit le mot comme trop haut. On redescend donc le cadre de l'écart entre les deux centres : (35,5 − 25) / 65 = 0,1615 × --h. Signalé par Silva. Un `transform` et non une marge : c'est une correction optique, elle ne doit pas changer la hauteur de la marque. */ .marque .texte{ --h:calc(var(--i) * .62); position:relative; display:block; overflow:visible; flex:none; height:var(--h); width:calc(var(--h) * 3.0923); transform:translateY(calc(var(--h) * .1615)); } .marque .texte img{ position:absolute; max-width:none; width:auto; height:calc(var(--h) * 1.0769); left:calc(var(--h) * -.2166); top:calc(var(--h) * -.0462); /* Le recadrage se fait au découpage et non par `overflow:hidden` : le halo du filet doit pouvoir déborder du cadre du texte, ce qu'un conteneur `overflow:hidden` interdirait. */ clip-path:inset(calc(var(--h) * .0462) 0 0 calc(var(--h) * .2166)); } /* Le rectangle du filet, au pixel près sur l'image recadrée : gauche = −0,2166 + 3,0923 × 0,3716 = 0,9327 haut = −0,0462 + 1,0769 × 0,8714 = 0,8921 largeur = 3,0923 × 0,2523 = 0,7802 hauteur = 1,0769 × 0,0571 = 0,0615 (× --h) */ .marque .filet{ position:absolute; pointer-events:none; left:calc(var(--h) * .9327); top:calc(var(--h) * .8921); width:calc(var(--h) * .7802); height:calc(var(--h) * .0615); } .marque .filet i{ position:absolute; inset:0; overflow:hidden; display:block; } .marque .filet i::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:100%; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,.4) 70%, rgba(255,255,255,0) 100%); transform:translateX(-170%); animation:filet-reflet 5.2s cubic-bezier(.55,0,.45,1) infinite; } /* Le halo déborde volontairement autour du filet : c'est lui qui rend le passage lisible quand le trait ne fait qu'un ou deux pixels de haut. */ .marque .filet::after{ content:''; position:absolute; left:-14%; width:128%; top:-320%; bottom:-320%; background:radial-gradient(ellipse at center, rgba(232,255,58,.55) 0%, rgba(232,255,58,.16) 46%, rgba(232,255,58,0) 74%); opacity:0; animation:filet-halo 5.2s ease-in-out infinite; } @keyframes filet-reflet{ 0% { transform:translateX(-170%); } 30%,100% { transform:translateX(170%); } } @keyframes filet-halo{ 0%,10% { opacity:0; } 20% { opacity:1; } 34%,100% { opacity:0; } } /* ── Les trois emplacements ─────────────────────────────────────────────── */ /* Barre du haut : petit. Le mot-symbole typographique qu'il remplace faisait 23 px de haut ; à 32 px, la marque occupe la même place optique sans faire grossir la barre. */ .top .marque{ --i:32px; } .lien-haut{ display:inline-flex; align-items:center; text-decoration:none; } /* Pages secondaires : la barre alignait ses éléments sur la LIGNE DE BASE — juste avec du texte, faux avec une image. Alignement au centre, et un filet pour dire que « by ASap Works » est un second objet et non la suite du premier. */ .brand{ align-items:center; gap:14px; } .brand .marque{ --i:30px; } .brand > span:last-child{ align-self:center; padding-left:14px; border-left:1px solid rgba(255,255,255,.20); } /* Pied de page : posée nue, sans cartouche — le détourage la fait prendre la couleur du pied de page, quelle qu'elle soit. ⚠️ Le centrage de la rangée (`​.foot{align-items:center}`) est posé dans le