/* ═══════════════════════════════════════════════════════════════════ commun.css — CE QUI EST VRAI DES 44 PAGES, et rien d'autre. Produit par _build/porter-les-44-pages.py depuis les maquettes. Deux gestes, tous deux mesurés (CHANTIER MKT-A §4) : ① LES 3 HK NOVA SORTENT DU HTML. Elles pesaient 236 580 o de base64 DANS CHAQUE PAGE — 89 % du CSS d'une page, rechargés à chaque navigation. En WOFF2 servies d'ici : 94052 o au total, demandées UNE fois pour toute la visite. ⚖️ HK Nova — sujet clos par Pedro le 08.08 : « on va rien changer pour hk nova, tu fais avec ». On construit avec, telle quelle. ② LE TRONC COMMUN : 86 règles, présentes dans LES 44 pages, dans le même ordre partout (vérifié, sinon le script s'arrête). Le delta de chaque page reste en ligne dans la page : 28 empreintes CSS distinctes sur 44 pages, le delta est réel, il ne se force pas à zéro. ⛔ NE PAS ÉDITER À LA MAIN : la source est la maquette, ce fichier est une sortie. Relancer le script après toute reprise de maquette. ⚠️ MKT-AM, 13.08.2026 — CET INTERDIT NE TIENT PLUS, et il faut le dire. Le script lit `oggo-web/_maquettes/oggo-site-cliquable`, figé au 09.08. Depuis, HUIT chantiers (MKT-Y à MKT-AM) ont écrit directement dans `src/` : relancer le portage aujourd'hui EFFACERAIT leur travail. La source de vérité est désormais `src/`, ce fichier s'édite à la main, et le script est une archive. Ne le relance pas sans avoir reporté les huit chantiers dans les maquettes. ═══════════════════════════════════════════════════════════════════ */ @font-face{font-family:'HK Nova';font-weight:400;font-style:normal;font-display:swap;src:url(/polices/HKNova-Regular.woff2) format('woff2')} @font-face{font-family:'HK Nova';font-weight:500;font-style:normal;font-display:swap;src:url(/polices/HKNova-Medium.woff2) format('woff2')} @font-face{font-family:'HK Nova';font-weight:600;font-style:normal;font-display:swap;src:url(/polices/HKNova-SemiBold.woff2) format('woff2')} /* ⛏️ MKT-AM §4.3 — SPACE MONO, SOUS-ENSEMBLÉE AUX 7 GLYPHES DE « by WTTM* ». ⚖️ « Le crédit d'une marque sœur porte SES signes propres, posés à l'ENCRE du site qui l'accueille : la typo voyage, la couleur non. » ⛔ N'EMBARQUE JAMAIS LA POLICE ENTIÈRE POUR SEPT CARACTÈRES : elle pèse 99 356 o ; le sous-ensemble servi ici en fait 912. Source maison `oggo-erp/public/fonts/documents/SpaceMono-Regular.ttf`, licence SIL OFL copiée à côté dans `/polices/SpaceMono-LICENSE.txt`. `font-display:swap` : le crédit est un filigrane, il n'attend personne. */ /* ⛏️ MKT-AZ ⑤d, 19.08.2026 — la @font-face de Space Mono est RETIRÉE : la signature d'agence était son seul consommateur dans les 46 pages, et elle passe à la vague de mac-sos.ch, qui n'emploie pas de police propre. ⛔ Les fichiers `/polices/SpaceMono-Subset.woff2` et sa licence SIL OFL restent en place, orphelins et signalés au CR — pas supprimés à l'aveugle. */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} .nav{display:flex; gap:var(--s4); margin-left:var(--s6)} .nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1); transform-origin:left} .hdr-end{margin-left:auto; display:flex; align-items:center; gap:var(--s3)} .tel svg{width:13px;height:13px;stroke:var(--red);stroke-width:1.6;fill:none} .lede b{font-weight:500; color:var(--ink)} .tel-b::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)} .tel-b:hover::after{transform:scaleX(1); transform-origin:left} .line-act .u:hover{border-bottom-color:var(--red)} .line-f{margin-top:16px; font-size:13px; color:var(--mute)} /* ── LE MENU « CE QU'ON FAIT » ──────────────────────────────────────────── ⛔ AUCUN SCRIPT. Il s'ouvre au survol ET au clavier (`:focus-within`) : un menu qui dépend de JS est mort dans un aperçu, avec un bloqueur, ou sur réseau coupé — règle de la QA maison. */ .nav{position:static} .nav-w{position:relative; display:flex; align-items:center} .mega{position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 18px 34px rgba(11,11,12,.07); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:60} .hdr:hover .mega, .hdr:focus-within .mega{opacity:1; visibility:visible; transform:none} .mega-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr); column-gap:clamp(var(--s6),4vw,var(--s10)); padding-block:var(--s6)} .mg-l{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px var(--s5)} .mg-i{display:block; padding:12px 14px; margin-left:-14px; border-radius:10px; transition:background .18s var(--ease)} .mg-i:hover{background:var(--surf)} .mg-t{display:block; font-family:var(--ui); font-weight:600; font-size:15.5px; letter-spacing:-.02em; color:var(--ink)} .mg-d{display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--mute); max-width:40ch} .mg-on .mg-t{color:var(--red)} .mg-audit{display:block; padding:var(--s4); border-left:1px solid var(--rule)} .mg-k{display:block; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--mute)} .mg-a{display:block; margin-top:6px; font-family:var(--hk); font-weight:600; font-size:17px; letter-spacing:-.025em; color:var(--ink)} .mg-p{display:block; margin-top:8px; font-family:var(--hk); font-weight:600; font-size:30px; line-height:1; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums} .mg-p i{font-family:var(--ui); font-style:normal; font-weight:400; font-size:.4em; color:var(--mute); vertical-align:.5em} .mg-audit .mg-d{margin-top:10px} .mg-audit:hover .mg-a{color:var(--red)} @media (max-width:980px){ .mega{display:none} } @media (prefers-reduced-motion:reduce){ .mega{transition:none} } /* ══════════════════════════════════════════════════════════════════════════ LE MENU « PAR OÙ COMMENCER » — direction 06, validée par Pedro le 06.08.2026 ⛔ AUCUN SCRIPT. Une case à cocher + `:has()`. Un menu qui dépend de JS est mort dans un aperçu, derrière un bloqueur, ou sur réseau coupé. La colonne de GAUCHE (les cinq phrases) ne bouge jamais : c'est la navigation. La colonne de DROITE est un EMPLACEMENT — quatre gabarits possibles, un seul à la fois, deux dates qui le font expirer. Les quatre gabarits sont dessinés dans _maquettes/oggo-v2/MENU-diagnostic_encart_v1.html ══════════════════════════════════════════════════════════════════════════ */ input.dg-sw{position:absolute; opacity:0; pointer-events:none} .dg-t{display:inline-flex; align-items:center; cursor:pointer; user-select:none; font-size:14.5px; color:var(--body); padding:6px 0; position:relative} .dg-t:hover{color:var(--ink)} .dg-t .chev{display:inline-block; width:7px; height:7px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); margin-left:7px; transition:transform .3s var(--ease)} .hdr:has(.dg-sw:checked) .dg-t .chev{transform:rotate(225deg) translate(-2px,-2px)} .dg{position:absolute; left:0; right:0; top:100%; background:var(--paper); z-index:60; border-bottom:1px solid transparent; box-shadow:none; display:grid; grid-template-rows:0fr; transition:grid-template-rows .58s var(--settle), box-shadow .45s var(--ease), border-color .45s var(--ease)} .hdr:has(.dg-sw:checked) .dg{grid-template-rows:1fr; border-bottom-color:var(--rule); box-shadow:0 24px 44px rgba(11,11,12,.09)} .dg>div{overflow:hidden; min-height:0} .dg-in{padding-block:var(--s6) var(--s8); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:var(--s10)} .dg-q{font-family:var(--hk); font-weight:500; font-size:27px; letter-spacing:-.022em; margin:0 0 6px; opacity:0; transform:translateY(8px); transition:opacity .42s var(--ease) .08s, transform .5s var(--settle) .08s} .dg-s{font-size:13.5px; color:var(--mute); margin:0 0 24px; opacity:0; transition:opacity .42s var(--ease) .14s} .hdr:has(.dg-sw:checked) .dg-q,.hdr:has(.dg-sw:checked) .dg-s{opacity:1; transform:none} .dg-l{display:grid} .dg-i{display:flex; align-items:center; gap:16px; padding:16px 14px 16px 0; border-top:1px solid var(--rule); position:relative; opacity:0; transform:translateX(-10px); transition:opacity .42s var(--ease), transform .5s var(--settle), background .25s} .dg-i:last-child{border-bottom:1px solid var(--rule)} .hdr:has(.dg-sw:checked) .dg-i{opacity:1; transform:none} .dg-i:nth-child(1){transition-delay:.18s} .dg-i:nth-child(2){transition-delay:.24s} .dg-i:nth-child(3){transition-delay:.30s} .dg-i:nth-child(4){transition-delay:.36s} .dg-i:nth-child(5){transition-delay:.42s} .dg-i .say{font-size:16.5px; line-height:1.35; letter-spacing:-.01em; transition:transform .4s var(--settle)} .dg-i .go{margin-left:auto; display:flex; align-items:center; gap:9px; flex:none; font-size:12.5px; color:var(--mute); opacity:0; transform:translateX(-10px); transition:opacity .32s var(--ease), transform .42s var(--settle)} .dg-i .go b{font-weight:600; color:var(--red)} .dg-i:hover{background:var(--surf)} .dg-i:hover .say{transform:translateX(9px)} .dg-i:hover .go{opacity:1; transform:none} .dg-i .tick{position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .46s var(--settle)} .dg-i:hover .tick{transform:scaleX(1)} .dg-r{border-left:1px solid var(--rule); padding-left:var(--s8); align-self:start; opacity:0; transform:translateY(12px); transition:opacity .48s var(--ease) .42s, transform .54s var(--settle) .42s} .hdr:has(.dg-sw:checked) .dg-r{opacity:1; transform:none} .dg-r .lead{font-size:14px; line-height:1.6; color:var(--body); margin:0 0 20px} .dg-fig{color:var(--ink); display:block; width:124px; margin-bottom:20px} .dg-fig svg{width:100%; height:auto; display:block} .dg-mini{list-style:none; margin:22px 0 0; padding:0; display:flex; gap:var(--s4); font-size:13.5px; color:var(--body)} .dg-mini a:hover{color:var(--red)} .cAud{display:block; border:1px solid var(--rule); border-radius:10px; padding:22px 24px; transition:border-color .3s} .cAud:hover{border-color:var(--ink)} .cAud .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--mute); font-weight:600; display:block; margin-bottom:12px} .cAud .t{font-family:var(--hk); font-weight:500; font-size:23px; letter-spacing:-.02em; display:block} .cAud .p{font-family:var(--hk); font-weight:600; font-size:38px; color:var(--red); letter-spacing:-.028em; display:block; line-height:1.1; margin:4px 0 10px} .cAud .p i{font-style:normal; font-size:14px; font-weight:500; color:var(--body)} .cAud .d{font-size:13px; line-height:1.55; color:var(--mute); display:block} @media (max-width:900px){ .dg-in{grid-template-columns:minmax(0,1fr); row-gap:var(--s6)} .dg-r{border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:var(--s5)} } /* ═══════════════════════════════════════════════════════════════════════════════ LOGO D'EN-TÊTE · tracés officiels 01_Logotype/Logo · un span par glyphe. `--pli` vaut 0 (ligne) ou 1 (carré). Il passe à 1 quand le header est COLLÉ, et le survol prend l'inverse de l'état courant — c'est le « vice versa » : en haut de page le survol replie, header collé il déplie. Rien ne bouge sur le reste de la page. Les deux premières lettres ne se déplacent pas : elles sont déjà à leur place. ═══════════════════════════════════════════════════════════════════════════════ */ :root{--sc:0} .hdr.is-pli{--sc:1} /* ⛏️ MKT-AM §3① — le rouge revient ICI, et seulement ici : au survol et à l'appui. L'appui compte — sur un téléphone il n'y a pas de survol. */ .mark:hover,.mark:active{color:var(--red)} .mark:hover{--pli:calc(1 - var(--sc))} .mark .g{position:absolute;top:0;left:0;width:20px;height:20px;display:block; will-change:transform;transition:transform .42s cubic-bezier(.65,.02,.28,1)} .mark .g svg{display:block;width:100%;height:100%} /* y de la ligne = 11.4 ; y du carré = 0 pour le haut, 22.8 pour le bas */ .g-o1{transform:translate(0, calc(11.4px * (1 - var(--pli))))} .g-g1{transform:translate(22.8px, calc(11.4px * (1 - var(--pli))))} .g-g2{transform:translate(calc(45.6px * (1 - var(--pli))), calc(11.4px + 11.4px * var(--pli)))} .g-o2{transform:translate(calc(68.41px - 45.61px * var(--pli)), calc(11.4px + 11.4px * var(--pli)));transition-delay:90ms} @media (prefers-reduced-motion: reduce){.mark .g{transition:none}}