/* ══ RÉGLAGES DU SITE ══ */ window.SITE_CHARGEMENT = { titre: 'ernestine.piks-l.com', image: 'https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/264bb430-9c27-4809-97c3-6338279e4dfc/kit/images/ernestine-allongee.png', intro: true, titreIntro: 'ERNESTINE', phraseIntro: 'Mon blog. Malheureusement public.', dureeIntro: 2350, }; /* ══ KIT ernestine_extraction — importé le 2026-08-20 ══ */ ;(() => { /* ── components.js ── */ /* ═══ COMPOSANTS ═══════════════════════════════════════════════ Comportements des composants : radio cassette, filtres du blog, livre d'or. Exposés via window.ernestineComposants.init(). ═════════════════════════════════════════════════════════════ */ (() => { /** Radio cassette : ouverture depuis l'en-tête, lecture, pause, bobines. */ function initRadio() { const radio = document.querySelector('.radio'); if (!radio || radio.dataset.pret === 'true') return; radio.dataset.pret = 'true'; const audio = radio.querySelector('audio'); const play = radio.querySelector('.radio__play'); const temoin = radio.querySelector('[data-radio-temoin]'); const statut = radio.querySelector('.radio__status'); const messages = { arret: "appuie sur ▶ — ça grésille un peu, c'est normal", lecture: "K7 · la mixtape, volume un", erreur: 'la cassette est coincée — réessaie' }; function etat(joue) { radio.classList.toggle('is-playing', joue); play.textContent = joue ? '❚❚' : '▶'; temoin.textContent = joue ? 'ON AIR' : 'STOP'; temoin.classList.toggle('chip--alert', joue); statut.textContent = joue ? messages.lecture : messages.arret; } document.querySelectorAll('[data-radio-toggle]').forEach((bouton) => { bouton.addEventListener('click', () => { radio.hidden = !radio.hidden; bouton.classList.toggle('chip--primary', !radio.hidden); }); }); radio.querySelector('[data-radio-close]').addEventListener('click', () => { radio.hidden = true; }); play.addEventListener('click', () => { if (audio.paused) audio.play().then(() => etat(true)).catch(() => { statut.textContent = messages.erreur; }); else { audio.pause(); etat(false); } }); etat(false); } /** Filtres de catégorie de la page Blog. */ function initEnteteBlog() { const section = document.querySelector('.section--entete-blog'); if (!section || section.dataset.pret === 'true') return; section.dataset.pret = 'true'; const filtres = section.querySelectorAll('[data-filtre]'); filtres.forEach((filtre) => { filtre.addEventListener('click', () => { filtres.forEach((f) => { f.classList.remove('is-actif'); f.setAttribute('aria-selected', 'false'); }); filtre.classList.add('is-actif'); filtre.setAttribute('aria-selected', 'true'); document.dispatchEvent(new CustomEvent('ernestine:filtre', { detail: { categorie: filtre.dataset.filtre } })); }); }); } /** Grille de billets : réagit au filtre émis par l'en-tête du blog. */ function initGrilleBillets() { const section = document.querySelector('.section--grille-billets'); if (!section || section.dataset.pret === 'true') return; section.dataset.pret = 'true'; const cases = section.querySelectorAll('[data-categorie]'); document.addEventListener('ernestine:filtre', (evenement) => { const categorie = evenement.detail.categorie; cases.forEach((element) => { element.hidden = categorie !== 'tout' && element.dataset.categorie !== categorie; }); }); } /** Livre d'or : ajoute la signature saisie, avec une réplique d'Ernestine. */ function initLivreDor() { const section = document.querySelector('.section--livre-dor'); if (!section || section.dataset.pret === 'true') return; section.dataset.pret = 'true'; const form = section.querySelector('[data-livre-dor-form]'); const liste = section.querySelector('[data-signatures]'); const compte = section.querySelector('[data-signatures-compte]'); const repliques = [ 'Noté. Sans suite.', "Merci. C'était inutile mais merci.", 'Votre avis compte. Un peu.', 'Transmis aux archives. Il n\'y a pas d\'archives.', 'Je valide, à contrecœur.' ]; form.addEventListener('submit', (evenement) => { evenement.preventDefault(); const nom = form.elements.nom.value.trim(); const message = form.elements.message.value.trim(); if (!message) return; const modele = liste.firstElementChild.cloneNode(true); modele.querySelector('.livre-dor__qui').textContent = nom || 'Anonyme (courageux)'; modele.querySelector('.livre-dor__date').textContent = "à l'instant"; modele.querySelector('.livre-dor__message').textContent = message; modele.querySelector('.livre-dor__reponse').textContent = 'Ernestine : ' + repliques[Math.floor(Math.random() * repliques.length)]; liste.prepend(modele); compte.textContent = String(liste.children.length); form.reset(); }); } function init() { initRadio(); initEnteteBlog(); initGrilleBillets(); initLivreDor(); } window.ernestineComposants = { init }; })(); /* ── animations.js ── */ /* ═══ ANIMATIONS ═══════════════════════════════════════════════ Apparition au défilement et boucle du bandeau. Exposé via window.ernestineAnimations.init(). ═════════════════════════════════════════════════════════════ */ (() => { /** Duplique la piste du bandeau pour que la boucle CSS soit continue. */ function initBandeau() { document.querySelectorAll('.marquee__track').forEach((piste) => { if (piste.dataset.double === 'true') return; const source = piste.querySelector('.marquee__list'); if (!source) return; const copie = source.cloneNode(true); copie.setAttribute('aria-hidden', 'true'); copie.querySelectorAll('[data-compteur]').forEach((n) => n.removeAttribute('data-compteur')); piste.appendChild(copie); piste.dataset.double = 'true'; }); } /** Révèle les éléments .reveal à leur entrée dans le viewport. */ function initApparition() { const cibles = document.querySelectorAll('.reveal:not(.is-visible)'); if (!cibles.length) return; if (!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { cibles.forEach((cible) => cible.classList.add('is-visible')); return; } const observateur = new IntersectionObserver((entrees) => { entrees.forEach((entree) => { if (!entree.isIntersecting) return; entree.target.classList.add('is-visible'); observateur.unobserve(entree.target); }); }, { rootMargin: '0px 0px -10% 0px', threshold: 0.08 }); cibles.forEach((cible) => observateur.observe(cible)); } function init() { initBandeau(); initApparition(); } window.ernestineAnimations = { init }; })(); /* ── global.js ── */ /* ═══ GLOBAL ═══════════════════════════════════════════════════ Initialisation et utilitaires transverses. Chargé après components.js et animations.js. ═════════════════════════════════════════════════════════════ */ /** Marque le lien de navigation correspondant à la page courante. */ function initNavCourante() { const fichier = window.location.pathname.split('/').pop() || 'index.html'; document.querySelectorAll('.site-nav__link').forEach((lien) => { const cible = lien.getAttribute('href').split('/').pop(); if (cible === fichier) lien.setAttribute('aria-current', 'page'); }); } /** Compteur de visites, incrémenté une fois par session. */ function initCompteur() { const cibles = document.querySelectorAll('[data-compteur]'); if (!cibles.length) return; const base = 14372; let vues = Number(sessionStorage.getItem('ern-vues') || '0'); if (!sessionStorage.getItem('ern-vue-page')) { vues += 1; sessionStorage.setItem('ern-vues', String(vues)); } sessionStorage.setItem('ern-vue-page', '1'); const valeur = String(base + vues).padStart(7, '0'); cibles.forEach((cible) => { cible.textContent = valeur; }); } function init() { initNavCourante(); initCompteur(); if (window.ernestineComposants) window.ernestineComposants.init(); if (window.ernestineAnimations) window.ernestineAnimations.init(); } if (document.readyState === 'loading') { (document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init()); } else { init(); } /* ── mecaniques.js ── */ /* ═══ MÉCANIQUES GLOBALES ══════════════════════════════════════ Le moteur des quatre mécaniques « perdues » de l'extraction, reconstruites pour DEUX terrains à la fois : - le kit STATIQUE (ces pages .html) : le dialogue de transfert intercepte les clics de navigation interne et diffère le changement d'URL le temps de l'animation — exactement le point d'accroche que l'extraction déclarait impossible ; - le CMS Piks-l : le site enfant émet `piksl:page` à chaque navigation (gabarit 7.74) — le dialogue s'y abonne, aucune interception nécessaire. Exposé via window.siteMecaniques = { init, intro, cascade, transfert }. Idempotent : init() peut être rappelé sans doubler d'écouteur. `prefers-reduced-motion` court-circuite tout ce qui bouge. ═════════════════════════════════════════════════════════════ */ (() => { 'use strict'; const REDUIT = window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ── 1. Le dialogue de transfert « 14,4 kbit/s » ───────────── */ let fenetre = null; let annule = false; /* Réglages du dialogue — `window.SITE_CHARGEMENT` prime. */ const REGLAGES = Object.assign({ titre: location.hostname.replace(/^www\./, ''), phrase: 'Je t\u00e9l\u00e9charge la page. \u00c7a prend le temps que \u00e7a prend.', debit: '14,4 kbit/s', poids: '84 Ko', image: '', duree: 750, }, window.SITE_CHARGEMENT || {}); function fenetreTransfert() { let boite = document.querySelector('.mecanique-transfert'); if (boite) return boite; boite = document.createElement('div'); boite.className = 'mecanique-transfert'; boite.setAttribute('aria-hidden', 'true'); boite.innerHTML = '

' + '

0 %' + '

' + '

'; boite.querySelector('.mecanique-transfert__titre span').textContent = REGLAGES.titre; boite.querySelector('.mecanique-transfert__phrase').textContent = REGLAGES.phrase; if (REGLAGES.image) { const img = document.createElement('img'); img.src = REGLAGES.image; img.alt = ''; boite.querySelector('.mecanique-transfert__vignette').appendChild(img); } boite.querySelector('.mecanique-transfert__annuler').addEventListener('click', () => { annule = true; boite.classList.remove('est-ouvert'); }); document.body.appendChild(boite); return boite; } function transfert(nomFichier) { if (REDUIT) return Promise.resolve(); const boite = fenetreTransfert(); annule = false; boite.querySelector('.mecanique-transfert__fichier').textContent = nomFichier + ' \u2014 ' + REGLAGES.debit; const reste = boite.querySelector('.mecanique-transfert__reste'); const barre = boite.querySelector('.mecanique-transfert__barre'); const pourcent = boite.querySelector('.mecanique-transfert__pourcent'); barre.style.width = '0%'; boite.classList.add('est-ouvert'); return new Promise((tenir) => { const debut = performance.now(); const pas = () => { if (annule) return tenir(); const avance = Math.min(1, (performance.now() - debut) / REGLAGES.duree); // Le modem n'avance jamais régulièrement : un bruit sur la courbe. const affiche = Math.min(100, Math.round(avance * 100 + (avance < 1 ? Math.sin(avance * 31) * 6 : 0))); barre.style.width = affiche + '%'; pourcent.textContent = affiche + ' % de ' + REGLAGES.poids; reste.textContent = 'temps restant : ' + Math.max(1, Math.ceil((1 - avance) * 9)) + ' s'; if (avance < 1) return requestAnimationFrame(pas); setTimeout(() => { boite.classList.remove('est-ouvert'); tenir(); }, 120); }; requestAnimationFrame(pas); /* rAF dort en arriere-plan : filet, sinon le dialogue reste ouvert. */ setTimeout(() => { if (boite.classList.contains('est-ouvert')) { boite.classList.remove('est-ouvert'); tenir(); } }, REGLAGES.duree + 500); }); } /* Le dialogue s'intercale devant chaque navigation interne. */ function intercepterNavigation() { /* La console n'intercepte rien ; le site enfant est AUSSI du Nuxt — tester `#__nuxt` écartait le vrai site (dialogue jamais montré). */ if (/(^|\.)piks-l\.com$/.test(location.hostname) && location.hostname.split('.')[0] === 'app') return; if (location.hostname === 'localhost' || location.pathname.startsWith('/apercu')) return; document.addEventListener('click', (evenement) => { if (REDUIT || evenement.defaultPrevented || evenement.button !== 0) return; if (evenement.metaKey || evenement.ctrlKey || evenement.shiftKey || evenement.altKey) return; const lien = evenement.target.closest && evenement.target.closest('a[href]'); if (!lien || lien.target === '_blank' || lien.hasAttribute('download')) return; const cible = lien.getAttribute('href') || ''; if (/^[a-z]+:/i.test(cible) || cible.indexOf('//') === 0 || cible.indexOf('#') === 0) return; if (lien.dataset.mecaniqueLaisser) return; // le clic rejoue apres le dialogue const interne = /\.html(#.*)?$/.test(cible) || cible.charAt(0) === '/'; if (!interne) return; if (cible.split('#')[0] === location.pathname) return; evenement.preventDefault(); const nom = ((cible.split('/').pop() || 'accueil').split('#')[0] || 'accueil') + (cible.indexOf('.') < 0 ? '.html' : ''); transfert(nom).then(() => { /* Rejouer le clic (le routeur SPA fait le reste), pas location.href. Le jeton dit a l annonce `piksl:page` qui suit que le dialogue a DEJA ete joue pour ce geste : sans lui, le modem repartait une seconde fois a l arrivee sur la page. */ poserJeton('clic'); lien.dataset.mecaniqueLaisser = '1'; lien.click(); delete lien.dataset.mecaniqueLaisser; }); }); } /* ── 2. La cascade d'apparition ────────────────────────────── */ const PAS_CASCADE = 70; // ms entre deux blocs const PLAFOND_CASCADE = 420; // au-delà, tout le monde part ensemble let observateur = null; function cascade() { const sections = document.querySelectorAll('main .section'); if (!sections.length) return; if (REDUIT || !('IntersectionObserver' in window)) { sections.forEach(s => s.querySelectorAll('.mecanique-reveal').forEach(n => n.classList.add('est-visible'))); return; } observateur = observateur || new IntersectionObserver((entrees) => { for (const entree of entrees) { if (!entree.isIntersecting) continue; entree.target.querySelectorAll('.mecanique-reveal').forEach(n => n.classList.add('est-visible')); observateur.unobserve(entree.target); } }, { rootMargin: '0px 0px -10% 0px' }); sections.forEach((section) => { if (section.dataset.mecaniqueCascade) return; // déjà orchestrée section.dataset.mecaniqueCascade = '1'; const hote = section.querySelector(':scope > .container') || section; [...hote.children].forEach((enfant, rang) => { enfant.classList.add('mecanique-reveal'); enfant.style.transitionDelay = Math.min(rang * PAS_CASCADE, PLAFOND_CASCADE) + 'ms'; }); observateur.observe(section); }); } /* ── 4. Les infobulles maison ──────────────────────────────── */ /* Un seul nœud global, délégation sur le document : les sections n'ont qu'à porter data-infobulle="…". Les textes d'origine se reposent au fil de l'eau — le MÉCANISME, lui, est revenu. */ let bulle = null; function poserInfobulles() { if (bulle) return; bulle = document.createElement('div'); bulle.className = 'mecanique-infobulle'; bulle.setAttribute('aria-hidden', 'true'); document.body.appendChild(bulle); const suivre = (evenement) => { const marge = 14; const x = Math.min(evenement.clientX + marge, window.innerWidth - bulle.offsetWidth - marge); const y = Math.min(evenement.clientY + 18, window.innerHeight - bulle.offsetHeight - marge); bulle.style.left = Math.max(marge, x) + 'px'; bulle.style.top = Math.max(marge, y) + 'px'; }; /* Porteur : `data-infobulle`, sinon `data-tip`, sinon un `title` (converti, pour ne pas doubler la bulle du navigateur). */ const infobulleDe = (cible) => { if (!cible || !cible.closest) return null; const parData = cible.closest('[data-infobulle]'); if (parData) return parData; /* `data-tip` : la convention de la maquette Claude Design. */ const parTip = cible.closest('[data-tip]'); if (parTip) { const texteTip = parTip.getAttribute('data-tip') || ''; if (texteTip.trim()) { parTip.setAttribute('data-infobulle', texteTip); return parTip; } } const parTitre = cible.closest('[title]'); if (!parTitre) return null; const texte = parTitre.getAttribute('title') || ''; if (!texte.trim()) return null; parTitre.setAttribute('data-infobulle', texte); parTitre.removeAttribute('title'); return parTitre; }; document.addEventListener('pointerover', (evenement) => { const porteur = infobulleDe(evenement.target); if (!porteur) return; bulle.textContent = porteur.getAttribute('data-infobulle') || ''; if (!bulle.textContent) return; bulle.classList.add('est-visible'); suivre(evenement); }); document.addEventListener('pointermove', (evenement) => { if (bulle.classList.contains('est-visible')) suivre(evenement); }); document.addEventListener('pointerout', (evenement) => { if (evenement.target.closest && evenement.target.closest('[data-infobulle]')) { bulle.classList.remove('est-visible'); } }); } /* ── 5. L'intro de première visite ────────────────────────── L écran jaune de la maquette : logo, image, barre qui marche, bouton pour passer. Une fois par session, jamais si le visiteur a demande moins de mouvement. */ function intro() { if (REDUIT || !REGLAGES.intro) return; try { if (sessionStorage.getItem('mecanique-intro')) return; sessionStorage.setItem('mecanique-intro', '1'); } catch (e) { /* stockage refuse : on joue l intro, sans memoire */ } const voile = document.createElement('div'); voile.className = 'mecanique-intro'; voile.innerHTML = '

' + '

connexion au serveur\u2026' + '0 %

' + '' + '

'; voile.querySelector('.mecanique-intro__logo').textContent = REGLAGES.titreIntro || REGLAGES.titre; voile.querySelector('.mecanique-intro__phrase').textContent = REGLAGES.phraseIntro || ''; if (REGLAGES.image) { const img = document.createElement('img'); img.src = REGLAGES.image; img.alt = ''; voile.querySelector('.mecanique-intro__vignette').appendChild(img); } const fermer = () => { voile.classList.add('est-sortie'); setTimeout(() => voile.remove(), 450); }; voile.querySelector('.mecanique-intro__passer').addEventListener('click', fermer); document.body.appendChild(voile); const ETAPES = ['connexion au serveur\u2026', 'negociation du modem\u2026', 'reception des billets\u2026', 'presque\u2026']; const barre = voile.querySelector('.mecanique-intro__barre'); const pourcent = voile.querySelector('.mecanique-intro__pourcent'); const etape = voile.querySelector('.mecanique-intro__etape'); const debut = performance.now(); const pas = () => { if (!voile.isConnected) return; const avance = Math.min(1, (performance.now() - debut) / (REGLAGES.dureeIntro || 2350)); const affiche = Math.round(avance * 100); barre.style.width = affiche + '%'; pourcent.textContent = affiche + ' %'; etape.textContent = ETAPES[Math.min(ETAPES.length - 1, Math.floor(avance * ETAPES.length))]; if (avance < 1) return requestAnimationFrame(pas); fermer(); }; requestAnimationFrame(pas); } /* ── LE DIALOGUE NE S OUVRE QU UNE FOIS PAR GESTE ─────────── Deux chemins menent au dialogue de transfert et ils se doublaient : 1. le clic sur un lien interne, intercepte ici — le dialogue passe AVANT la navigation, comme dans la maquette ; 2. l annonce `piksl:page` du CMS, qui suit la navigation. Un lien cliqué déclenchait donc les DEUX : le modem se relançait à l arrivée sur la page (constat de Piks-l, 21/08). Le geste pose un jeton, l annonce le consomme et se tait. Une navigation SANS clic (retour du navigateur, redirection) ne pose aucun jeton : elle garde son dialogue, qui est alors le seul. Le jeton se perime tout seul : si un clic intercepte ne debouche sur aucune navigation (ancre morte, routeur qui refuse), il ne doit pas avaler le dialogue du geste SUIVANT. Le drapeau est declare AVANT ses usages : une variable posee apres son premier appel tuerait tout le script (ReferenceError en zone morte) — arrive le 21/08 avec la duree du transfert, toutes les mecaniques mortes d un coup. */ let jetonNavigation = null; function poserJeton(raison) { jetonNavigation = raison; setTimeout(() => { if (jetonNavigation === raison) jetonNavigation = null; }, 3000); } /* ── 6. Le tri des billets ────────────────────────────────── Filtrer par rubrique n ouvre PAS le dialogue de transfert : la maquette montre une barre a cote du titre, le temps du tri. */ function poserTriBillets() { document.addEventListener('click', (evenement) => { /* 7.84 : la bande de filtres ECRITE EN DUR a ete retiree du blog — c est la barre du CMS qui filtre desormais. Sans ces deux classes, le tri « 0 % … 100 % » ne se jouait plus nulle part. */ const puce = evenement.target.closest && evenement.target.closest('.filtres-blog__puce, .site-filter-bar__chip, .site-filter-bar__tag'); if (!puce || REDUIT || evenement.defaultPrevented || evenement.button !== 0) return; if (evenement.metaKey || evenement.ctrlKey || evenement.shiftKey || evenement.altKey) return; if (puce.classList.contains('est-courante') || puce.classList.contains('is-active') || puce.dataset.mecaniqueLaisser) return; const ligne = document.querySelector('.entete-blog__ligne'); if (!ligne) return; evenement.preventDefault(); evenement.stopImmediatePropagation(); // le dialogue de transfert ne doit pas s en meler let tri = ligne.querySelector('.mecanique-tri'); if (!tri) { tri = document.createElement('div'); tri.className = 'mecanique-tri'; tri.innerHTML = '

' + 'tri des griefs\u2026 0 %'; ligne.appendChild(tri); } const barre = tri.querySelector('.mecanique-tri__barre'); const texte = tri.querySelector('.mecanique-tri__texte'); const debut = performance.now(); const pas = () => { const avance = Math.min(1, (performance.now() - debut) / (REGLAGES.dureeTri || 620)); const affiche = Math.round(avance * 100); barre.style.width = affiche + '%'; texte.textContent = 'tri des griefs\u2026 ' + affiche + ' %'; if (avance < 1) return requestAnimationFrame(pas); puce.dataset.mecaniqueLaisser = '1'; /* Le CMS va annoncer la page : sans ce jeton, le dialogue de transfert s ouvrirait PAR-DESSUS la barre de tri — les deux chargements en meme temps, ce que la maquette ne fait jamais. */ poserJeton('tri'); puce.click(); }; requestAnimationFrame(pas); }, true); // en CAPTURE : avant l interception de navigation } /* ── L'amorçage — les deux terrains ────────────────────────── */ let amorce = false; function init() { /* Le drapeau : il ARME le voile de la cascade. Pose ici, donc jamais si le script n a pas tourne — et un filet le leve de toute facon apres deux secondes, au cas ou un observateur manquerait sa cible. */ document.documentElement.setAttribute('data-mecaniques', ''); intro(); poserTriBillets(); compterBillets(); monterArchives(); garnirBoutique(); nommerRubrique(); poserIcones(); setTimeout(() => { document.querySelectorAll('.mecanique-reveal:not(.est-visible)') .forEach(e => e.classList.add('est-visible')); }, 2000); if (amorce) return; amorce = true; intercepterNavigation(); poserInfobulles(); cascade(); marquerMenu(); } window.siteMecaniques = { init, intro, cascade, transfert }; if (document.readyState === 'loading') (document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init()); else init(); /* Le CMS annonce chaque navigation : dialogue de transfert, puis nouvelle cascade une fois la page suivante rendue. */ /* RÉVISION (21/08) : Piks-l veut le dialogue AUSSI entre les pages du CMS. Il s ouvre sur l annonce de page — il accompagne le changement, il ne le retarde pas : retarder la navigation gelait la transition du gabarit et la page suivante restait blanche. */ let premierePage = true; window.addEventListener('piksl:page', () => { setTimeout(() => { cascade(); marquerMenu(); compterBillets(); monterArchives(); garnirBoutique(); nommerRubrique(); }, 80); if (premierePage) { premierePage = false; return; } // l arrivée n est pas un changement /* Le geste a deja montre son chargement — la barre de tri a cote du titre, ou le dialogue joue avant la navigation. Un second serait le meme telechargement affiche deux fois. */ if (jetonNavigation) { jetonNavigation = null; return; } transfert((location.pathname.split('/').filter(Boolean).pop() || 'accueil') + '.html'); }); /* ── Le compte de billets de l'entête du blog (7.84) ─────────── « 12 billets » etait ecrit en dur dans la section, comme les filtres qui l accompagnaient : le chiffre venait de la maquette, pas du site. Il est desormais relu sur la grille rendue par le CMS — publier un billet le fait avancer, filtrer le fait suivre. Silencieux si la pastille ou la grille manquent : une page sans blog n a rien a compter. */ async function compterBillets() { try { const pastilles = document.querySelectorAll('[data-compte-billets]'); if (!pastilles.length) return; /* Un filtre dans l adresse change ce que la page MONTRE : le compte doit alors decrire la grille rendue, pas le blog entier. Sans filtre, il vient de la liste complete — l entete du site le porte aussi sur des pages qui n ont aucune grille. */ const filtre = /[?&](categorie|tag|rubrique|mois)=/.test(location.search); const grille = document.querySelector('#billets-blog .grid'); const n = (filtre && grille) ? grille.querySelectorAll(':scope > a').length : (await chargerBillets()).length; if (!n) return; pastilles.forEach((p) => { p.textContent = n + (n > 1 ? ' billets' : ' billet'); }); } catch (erreur) { /* un compte faux ne vaut pas une page cassee */ } } /* ── Le titre du blog nomme la rubrique filtree (7.86) ───────── `/blog?categorie=famille` remplace la page `/categorie/famille` supprimee : sans ce rappel, deux adresses differentes affichaient le meme titre « Blog » et on ne savait plus ou l on etait. Le libelle est PRIS DANS la pastille active de la barre du CMS — jamais reconstruit a partir du slug, qui n a ni accent ni casse. */ function nommerRubrique() { try { const titre = document.querySelector('.section--entete-blog .page-title'); if (!titre) return; const ancien = titre.querySelector('.entete-blog__rubrique'); const active = document.querySelector('.site-filter-bar__chip.is-active'); const libelle = (active && active.dataset.libelle) || (active ? active.textContent.trim().replace(/\s*\d+$/, '') : ''); const filtree = /[?&]categorie=/.test(location.search) && libelle && libelle !== 'Tout'; if (ancien) ancien.remove(); if (!filtree) return; const marque = document.createElement('span'); marque.className = 'entete-blog__rubrique'; marque.textContent = '\u00a0\u00b7 ' + libelle; titre.appendChild(marque); } catch (erreur) { /* un titre nu vaut mieux qu une page cassee */ } } /* ── Les archives par mois, montées depuis le CMS (7.84) ─────── Le bloc « Rubriques et archives » du gabarit ne sait rendre que « Mai 2026 · 4 » : la carte par mois avec ses billets dessous demande une variante qui n est pas encore deployee sur ce site. En attendant, la section porte une COQUE VIDE et cette mecanique la remplit avec les vrais billets, aux classes du kit — publier un billet le fait donc apparaitre ici sans que personne edite quoi que ce soit. A retirer le jour ou la variante « archives » du bloc arrive : elle rend exactement la meme chose, sans requete. */ const ARCHIVES_SOURCE = 'https://app.piks-l.com/api/public/sites/264bb430-9c27-4809-97c3-6338279e4dfc/posts'; const ARCHIVES_MOIS = ['JANV', 'FÉVR', 'MARS', 'AVR', 'MAI', 'JUIN', 'JUIL', 'AOÛT', 'SEPT', 'OCT', 'NOV', 'DÉC']; const ARCHIVES_MOIS_LONG = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']; let archivesCache = null; function echapper(valeur) { return String(valeur == null ? '' : valeur) .replace(/&/g, '&').replace(//g, '>') .replace(/"/g, '"').replace(/'/g, '''); } function dessinerArchives(pile, billets) { const groupes = new Map(); billets.forEach((b) => { const d = new Date(b.published_at || b.created_at || ''); if (Number.isNaN(d.getTime())) return; const cle = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0'); let g = groupes.get(cle); if (!g) { const mois = ARCHIVES_MOIS_LONG[d.getMonth()]; g = { titre: (mois.charAt(0).toUpperCase() + mois.slice(1) + ' ' + d.getFullYear()).toUpperCase(), lignes: [], ordre: -d.getTime() }; groupes.set(cle, g); } g.lignes.push({ date: d.getDate() + ' ' + ARCHIVES_MOIS[d.getMonth()], titre: b.title || '', rubrique: (b.category && b.category.label) || '', lien: '/blog/' + (b.slug || ''), }); }); const liste = [...groupes.values()].sort((a, b) => a.ordre - b.ordre); if (!liste.length) { pile.innerHTML = ''; return; } pile.innerHTML = liste.map(g => '' + '

' + '

' + echapper(g.titre) + '

' + '' + g.lignes.length + (g.lignes.length > 1 ? ' BILLETS' : ' BILLET') + '' + '

' + '

' + '' + echapper(l.date) + '' + '' + echapper(l.titre) + '' + '' + echapper(l.rubrique) + '

' + '

').join(''); } /* Les billets, demandes UNE fois et partages : les archives les dessinent, la pastille les compte. Deux requetes pour la meme liste seraient deux fois le meme telechargement. */ let archivesPromesse = null; function chargerBillets() { if (archivesCache) return Promise.resolve(archivesCache); if (!archivesPromesse) { archivesPromesse = fetch(ARCHIVES_SOURCE, { headers: { accept: 'application/json' } }) .then(r => (r.ok ? r.json() : null)) .then((charge) => { archivesCache = Array.isArray(charge) ? charge : (charge && charge.posts) || []; return archivesCache; }) .catch(() => []); } return archivesPromesse; } async function monterArchives() { try { const pile = document.querySelector('[data-archives]'); if (!pile || pile.dataset.archivesFait === '1') return; const billets = await chargerBillets(); if (!billets.length) return; dessinerArchives(pile, billets); pile.dataset.archivesFait = '1'; } catch (erreur) { /* des archives absentes valent mieux qu une page cassee */ } } /* ── La boutique : le prix lisible, et le compte des articles (7.85) ── Le gabarit ecrit le prix « 8.00 EUR » : le point decimal et le code ISO sont ceux d un tableur, pas d une vitrine. Il est remis en francais ici plutot qu en base — la donnee (des centimes et une devise) est juste, c est son AFFICHAGE qui ne l etait pas. Un prix a zero n est pas un prix : la pastille le dit. */ function garnirBoutique() { try { const cartes = document.querySelectorAll('#produits-boutique .grid > a'); document.querySelectorAll('[data-compte-produits]').forEach((p) => { if (cartes.length) p.textContent = cartes.length + (cartes.length > 1 ? ' articles' : ' article'); }); const aFormater = [...cartes].map(c => c.querySelector('p')); /* La fiche du produit affiche le meme prix, au meme format brut. */ aFormater.push(document.querySelector('[data-type="contenu-detail"] [data-el="prix"]')); aFormater.forEach((prix) => { if (!prix || prix.dataset.prixFait === '1') return; const m = /^\s*(\d+)[.,](\d{2})\s*(EUR|€)?\s*$/.exec(prix.textContent || ''); if (!m) return; prix.textContent = (m[1] === '0' && m[2] === '00') ? 'prix à venir' : m[1] + ',' + m[2] + ' €'; prix.dataset.prixFait = '1'; }); } catch (erreur) { /* un prix mal mis ne vaut pas une page cassee */ } } /* ── Les icônes du site (7.88) ──────────────────────────────── Le gabarit ne pose ni favicon ni icone d ecran d accueil : ces fichiers vivent d ordinaire dans le `public/` du depot, hors de portee du CMS. Les liens sont donc poses ici, sur les fichiers deposes dans la mediatheque du site (dossier `seo/`). iPhone lit `apple-touch-icon` ; Android, faute de manifeste (qui exige un fichier de meme origine), prend la plus grande icone declaree — d ou le 192. */ const ICONES = 'https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/264bb430-9c27-4809-97c3-6338279e4dfc/seo/'; function poserIcones() { try { if (document.querySelector('link[data-piksl-icone]')) return; document.querySelectorAll('link[rel~="icon"], link[rel="apple-touch-icon"], meta[name="theme-color"]') .forEach(n => n.remove()); const lien = (rel, fichier, attrs) => { const l = document.createElement('link'); l.rel = rel; l.href = ICONES + fichier; Object.entries(attrs || {}).forEach(([k, v]) => l.setAttribute(k, v)); l.dataset.pikslIcone = '1'; document.head.appendChild(l); }; lien('icon', 'favicon.ico', { sizes: 'any' }); lien('icon', 'icone-32.png', { type: 'image/png', sizes: '32x32' }); lien('icon', 'icone-192.png', { type: 'image/png', sizes: '192x192' }); lien('icon', 'icone-512.png', { type: 'image/png', sizes: '512x512' }); lien('apple-touch-icon', 'icone-180.png', { sizes: '180x180' }); lien('apple-touch-icon-precomposed', 'icone-180.png', { sizes: '180x180' }); const meta = (nom, valeur) => { const m = document.createElement('meta'); m.setAttribute('name', nom); m.setAttribute('content', valeur); m.dataset.pikslIcone = '1'; document.head.appendChild(m); }; meta('theme-color', '#FFDB1E'); meta('apple-mobile-web-app-title', 'Ernestine'); meta('application-name', 'Ernestine'); meta('mobile-web-app-capable', 'yes'); } catch (erreur) { /* pas d icone ne vaut pas une page cassee */ } } /* ── La copie critique s efface quand la vraie feuille arrive (7.89) ── Le gabarit ne rend pas `css_global` cote serveur : la page se peint nue, puis tout saute. D ou la copie minifiee posee dans des blocs de l entete, eux rendus par le serveur. Elle part des que la vraie est la : une copie oubliee finirait par gagner contre une correction fraiche. Temoin `--site-t1-taille` : l API l ajoute a la vraie, il n est donc jamais dans la copie. */ function retirerCritique() { const copies = document.querySelectorAll('style[data-piksl-critique]'); if (!copies.length) return true; const vraie = Array.from(document.querySelectorAll('style:not([data-piksl-critique])')) .some((s) => (s.textContent || '').includes('--site-t1-taille')); if (!vraie) return false; copies.forEach((s) => { const section = s.closest('[data-bloc]'); if (section) section.style.display = 'none'; // la regle qui les cachait part avec la copie s.remove(); }); return true; } (function veilleCritique() { if (retirerCritique()) return; let essais = 40; const t = setInterval(() => { if (retirerCritique() || --essais <= 0) clearInterval(t); }, 200); })(); /* Le lien du menu qui correspond à la page courante se souligne. */ function marquerMenu() { document.querySelectorAll('.site-nav__link').forEach((lien) => { const cible = (lien.getAttribute('href') || '').split('#')[0]; const actif = !!cible && (cible === window.location.pathname || (cible === '/' && (window.location.pathname === '/' || /index\.html$/.test(window.location.pathname))) || (/\.html$/.test(cible) && window.location.pathname.endsWith(cible.replace(/^\.\//, '')))); if (actif) lien.setAttribute('aria-current', 'page'); else lien.removeAttribute('aria-current'); // la feuille du kit souligne [aria-current=page] }); } })(); })();

Tote bag – Ernestine – Sonic Youth

Ernestine se croit sur une pochette d’album de Sonic Youth !

Caractéristiques :