/* Theme Name: Piano Jazz Concept Theme URI: https://www.pianojazzconcept.com Description: Theme enfant de Storefront pour Piano Jazz Concept : bandeau compact, CSS et scripts propres au site. Author: Etienne Guereau Template: storefront Version: 1.1.0 Text Domain: storefront-child */ /* ========================================================================== BANDEAU COMPACT - une seule barre marine La structure vient de functions.php : un seul .col-full.pjc-barre contient le logo, le menu, la recherche et le panier. ========================================================================== */ :root { --pjc-marine: #24314d; --pjc-or: #ffbe00; --pjc-bandeau: 86px; } body .site-header { background-color: var(--pjc-marine) !important; padding: 0 !important; margin-bottom: 32px !important; } body .site-header .pjc-barre { display: flex; align-items: center; gap: 28px; max-width: 1170px; margin: 0 auto; padding: 0 2.617924em; /* 16/09 : le retrait du conteneur .col-full du theme, pour que la barre s aligne sur le contenu des pages */ min-height: var(--pjc-bandeau); } /* Les quatre blocs de la barre, dans l ordre voulu. */ body .pjc-barre .site-branding { order: 1; flex: 0 0 auto; } body .pjc-barre .main-navigation { order: 2; flex: 1 1 auto; min-width: 0; } body .pjc-barre .site-search { order: 3; flex: 0 0 230px; } body .pjc-barre #site-header-cart { order: 4; flex: 0 0 auto; } body .pjc-barre .site-search { width: 230px !important; } /* Storefront habille ces blocs en flottants avec des largeurs en pourcentage. */ body .pjc-barre .site-branding, body .pjc-barre .main-navigation, body .pjc-barre .site-search, body .pjc-barre #site-header-cart { float: none !important; margin: 0 !important; max-width: none !important; width: auto !important; } /* Les liens d evitement ne doivent pas occuper de place dans la barre. */ body .pjc-barre .skip-link { position: absolute !important; } /* Logo : carre de 58 px. */ body .site-branding a.custom-logo-link, body .site-branding img.custom-logo { width: 58px !important; height: 58px !important; max-width: 58px !important; max-height: 58px !important; border-radius: 8px; display: block; object-fit: contain; } body .site-header .site-branding .site-title, body .site-header .site-branding .site-description { display: none !important; } /* Menu sur une ligne. */ body .pjc-barre .main-navigation ul.menu, body .pjc-barre .main-navigation ul.nav-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; float: none; } body .pjc-barre .main-navigation ul.menu > li { margin: 0; float: none; } body .pjc-barre .main-navigation ul.menu > li > a { padding: 10px 0; font-size: 17px; white-space: nowrap; } /* L entree de la page courante est marquee en jaune. */ body .pjc-barre .main-navigation ul.menu > li.current-menu-item > a, body .pjc-barre .main-navigation ul.menu > li.current-menu-ancestor > a, body .pjc-barre .main-navigation ul.menu > li.current_page_item > a, body .pjc-barre .main-navigation ul.menu > li.current_page_ancestor > a { color: var(--pjc-or) !important; box-shadow: inset 0 -2px 0 0 var(--pjc-or); } /* Champ de recherche en pilule. */ body .pjc-barre .site-search .widget { margin: 0 !important; padding: 0 !important; } body .pjc-barre .site-search input[type="search"], body .pjc-barre .site-search input.search-field { height: 34px; padding: 0 16px 0 38px; border-radius: 26px; } body .pjc-barre .site-search .widget_product_search form::before, body .pjc-barre .site-search form::before { left: 14px; } /* Panier. */ body .pjc-barre #site-header-cart .cart-contents { padding: 0; white-space: nowrap; } /* L icone du panier est un ::after en flux : elle se colle au texte, il faut l ecarter par une marge et non par un calage absolu. */ body .pjc-barre #site-header-cart .cart-contents::after { margin-left: 10px; } /* -------------------------------------------------------------------------- Mobile : empilement simple. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body .site-header .pjc-barre { display: block; min-height: 0; padding: 12px 20px; } body .pjc-barre .site-search { width: auto; } body .site-branding a.custom-logo-link, body .site-branding img.custom-logo { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; } } /* ========================================================================== La barre reste en haut de l ecran pendant le defilement. ========================================================================== */ body .site-header { position: sticky; top: 0; z-index: 500; } /* Connecte, la barre d administration occupe deja les 32 premiers pixels. */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* L onde est dessinee sous la barre : elle doit passer au-dessus du contenu. */ body .site-header::after { z-index: 1; } /* Le site pose overflow-x: hidden sur body et #page, ce qui fabrique un conteneur de defilement et empeche position: sticky de fonctionner. overflow-x: clip coupe de la meme facon sans creer ce conteneur. */ body, body #page { overflow-x: clip; overflow-y: visible; } /* ========================================================================== DEUX ETATS : banniere au repos, barre fine des que l on defile. ========================================================================== */ /* Au repos : la banniere reprend sa place et le logo grandit. */ body .site-header { background-size: cover; background-position: center bottom; /* 15/09 : ancre en bas, pour que la bande unie du bas de la banniere reste visible au-dela de 1508 px de large */ background-repeat: no-repeat; transition: background-color .25s ease; } body .site-header .pjc-barre { flex-wrap: wrap; align-items: center; padding-top: 16px; padding-bottom: 0; min-height: 0; } /* Au repos, le logo occupe sa propre ligne, comme dans l ancienne banniere : le menu, la recherche et le panier passent dessous. */ body .site-header .pjc-barre .site-branding { flex: 0 0 100% !important; } body .site-branding a.custom-logo-link, body .site-branding img.custom-logo { width: 130px !important; height: 130px !important; max-width: 130px !important; max-height: 130px !important; border-radius: 0; transition: width .2s ease, height .2s ease; } /* -------------------------------------------------------------------------- ETAT COMPACT (body.pjc-compact, pose par functions.php sur toutes les pages sauf l accueil FR et EN) : le bandeau y est d emblee la barre fine, sans banniere ni onde. Chaque regle de l etat defile a donc son equivalent en .pjc-compact, et les regles de l etat deploye sont neutralisees. -------------------------------------------------------------------------- */ /* Une fois defilee : la banniere s efface, la barre se resserre. */ body .site-header.pjc-defile, body.pjc-compact .site-header { background-image: none !important; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); } body .site-header.pjc-defile .pjc-barre, body.pjc-compact .site-header .pjc-barre { flex-wrap: nowrap; min-height: var(--pjc-bandeau); align-items: center; padding-top: 0; } body .site-header.pjc-defile .pjc-barre .site-branding, body.pjc-compact .site-header .pjc-barre .site-branding { flex: 0 0 auto !important; } /* Logo agrandi sur les pages interieures (17/09/2026). Une remarque exterieure a releve que l'identite « Piano Jazz Concept » ne se lit nulle part avant le pied de page. A 58 px le nom dans le disque n'est deja plus dechiffrable. 76 px est la limite de cette barre : elle est fixee a 86 px, donc le logo grandit dedans sans rien deplacer — barre, corps du menu et debut du contenu sont identiques a 58 et a 76, mesures. Il reste 5 px d'air en haut et en bas. A 80 il n'en reste que 3 et le disque affleure ; a 90 il pousse la barre a 90 et la touche des deux cotes. Volontairement limite a pjc-compact, c'est-a-dire tout sauf l'accueil : la banniere d'accueil a ses propres tailles (130 px sur l'ancienne, 52 dans la barre de la banniere photo, ou 76 n'entrerait pas — sa barre ne fait que 84 px). Ceci ne resout pas le fond du probleme : un disque doit empiler trois mots la ou un logotype horizontal les mettrait sur une ligne. A reprendre avec Yrgane Ramon. */ body .site-header.pjc-defile .site-branding a.custom-logo-link, body .site-header.pjc-defile .site-branding img.custom-logo, body.pjc-compact .site-header .site-branding a.custom-logo-link, body.pjc-compact .site-header .site-branding img.custom-logo { width: 76px !important; height: 76px !important; max-width: 76px !important; max-height: 76px !important; border-radius: 8px; } /* L onde ne se justifie qu au repos, sous la banniere. */ body .site-header.pjc-defile::after, body.pjc-compact .site-header::after { display: none; } @media (prefers-reduced-motion: reduce) { body .site-header, body .site-header .pjc-barre, body .site-branding img.custom-logo { transition: none !important; } } /* Entre 768 et 1100 px, la ligne menu + recherche + panier ne tient pas : le champ de recherche s efface plutot que de renvoyer le panier a la ligne. */ @media (min-width: 768px) and (max-width: 1099px) { body .pjc-barre .site-search { display: none !important; } } body .pjc-barre .site-search { flex: 0 1 230px !important; min-width: 0; } /* Position du logo dans la banniere. Cale a gauche, sur la meme verticale que le texte qui le suit et que le contenu de la page. Les 9 px de retrait negatif sont une correction optique : le logo est un losange, seule sa pointe touche la marge, et sans ce decalage sa masse parait rentree. */ body .site-header .pjc-barre { padding-top: 0; } body:not(.pjc-compact) .site-header:not(.pjc-defile) .pjc-barre .site-branding { padding-left: 0; } body:not(.pjc-compact) .site-header:not(.pjc-defile) .pjc-barre .site-branding a.custom-logo-link { margin: 0 0 14px -9px !important; display: block; } /* Selecteur de langue : le drapeau et son chevron doivent rester sur une ligne. La regle historique passe l image en block, ce qui renvoyait le chevron dessous. */ body .pjc-barre li.pll-parent-menu-item > a { display: flex !important; align-items: center; } body .pjc-barre li.pll-parent-menu-item > a img { display: inline-block !important; vertical-align: middle; } body .pjc-barre li.pll-parent-menu-item > a::after { margin-left: 8px !important; } /* Le menu ne doit pas etre colle a la vague : un peu d air sous la ligne, uniquement quand le bandeau est deploye. */ body:not(.pjc-compact) .site-header:not(.pjc-defile) .pjc-barre { padding-top: 8px; padding-bottom: 8px; } /* -------------------------------------------------------------------------- CORRECTIONS D ALIGNEMENT DE LA BARRE (16/09/2026) Storefront glisse dans .col-full deux liens d evitement et un pseudo-element de nettoyage. Dans une rangee flex ils comptent comme des elements et decalaient tout le contenu de la barre de 56 px vers la droite, sur toutes les pages. Le liseré bas de l en-tete etait, lui, au rose par defaut de Storefront, jamais personnalise. -------------------------------------------------------------------------- */ body .site-header .pjc-barre::before, body .site-header .pjc-barre::after { display: none !important; content: none !important; } body .site-header .pjc-barre > .skip-link { display: none !important; } body .site-header { border-bottom: 0 !important; } /* -------------------------------------------------------------------------- ACCUEIL : le titre de la page et l etiquette de rubriques vivent dans la banniere. Le bloc est ecrit par functions.php juste apres le logo ; il prend sa propre ligne de la barre et disparait des que le bandeau se condense. -------------------------------------------------------------------------- */ body .site-header .pjc-barre .pjc-bloc { order: 1; flex: 0 0 100%; width: 100%; max-width: none; } body .site-header .pjc-barre .pjc-bloc > * { max-width: 470px; } body .site-header.pjc-defile .pjc-bloc, body.pjc-compact .site-header .pjc-bloc { display: none !important; } .pjc-bloc .pjc-sur { margin: 0 0 12px; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; } .pjc-bloc .pjc-sur::after { content: ""; display: block; width: 48px; height: 3px; background: var(--pjc-or); margin-top: 10px; } .pjc-bloc h1.pjc-t { margin: 0; padding: 0; color: #fff; font-weight: 400; font-size: 32px; line-height: 1.16; text-transform: none; } .pjc-bloc h1.pjc-t span { font-size: 24px; color: rgba(255, 255, 255, .86); } /* La zone bleue de la banniere se resserre avec la largeur de l ecran : le bloc doit suivre, sinon il finit par mordre sur le portrait. */ @media (max-width: 1100px) { body .site-header .pjc-barre .pjc-bloc > * { max-width: 340px; } .pjc-bloc h1.pjc-t { font-size: 28px; } .pjc-bloc h1.pjc-t span { font-size: 21px; } } @media (max-width: 900px) { body .site-header .pjc-barre .pjc-bloc > * { max-width: 300px; } .pjc-bloc h1.pjc-t { font-size: 25px; } .pjc-bloc h1.pjc-t span { font-size: 19px; } .pjc-bloc .pjc-sur { font-size: 11.5px; letter-spacing: .12em; } } @media (max-width: 767px) { body .site-header .pjc-barre .pjc-bloc > * { max-width: none; } .pjc-bloc .pjc-sur { font-size: 11px; letter-spacing: .1em; margin-bottom: 10px; } .pjc-bloc .pjc-sur::after { width: 40px; height: 2px; margin-top: 8px; } .pjc-bloc h1.pjc-t { font-size: 26px; line-height: 1.2; } .pjc-bloc h1.pjc-t span { font-size: 19px; } .pjc-bloc h1.pjc-t br { display: none; } .pjc-bloc h1.pjc-t span::before { content: "\A"; white-space: pre; } body:not(.pjc-compact) .site-header:not(.pjc-defile) .site-branding a.custom-logo-link, body:not(.pjc-compact) .site-header:not(.pjc-defile) .site-branding img.custom-logo { width: 96px !important; height: 96px !important; max-width: 96px !important; max-height: 96px !important; } } /* Titres de section portes de 22 a 26 px le 16/09/2026 : a 22 ils ne se distinguaient plus du chapo de 18 px. Contact fait exception — ses deux H2 tiennent l equilibre de ses colonnes et pesaient plus que son titre de page. */ .page .entry-content h2.wp-block-heading { font-size: 26px; } #post-152 .entry-content h2.wp-block-heading { font-size: 22px; } /* Sur l accueil, le premier titre de section ouvre la page au lieu de la decouper : il se rapproche du bandeau. */ body.home .entry-content h2.wp-block-heading:first-of-type { margin-top: 16px; } /* Ces deux lignes sont desormais dans la banniere : on les retire du corps de la page. */ body.home .pjc-rubriques, body.home .signature-accueil { display: none !important; } /* ===================================================================== TITRAGE — Alegreya Sans 16/09/2026 --------------------------------------------------------------------- La fonte est chargee dans functions.php (handle « pjc-titrage »). Elle ne touche QUE les titres. Restent en Source Sans Pro : le menu, le panier, les boutons, les champs, le texte courant, le surtitre du bandeau (« Methodes · Harmonisations · Partitions ») et les noms de produits de la boutique — tout ce qui sert a circuler. Les corps montent d'environ deux points et la graisse des titres de section descend de 600 a 500 : Alegreya Sans tombe plus petit et plus dense que Source Sans Pro a corps egal, il faut le compenser pour que la hierarchie reste identique a l'oeil. Specificite : les regles de titrage vivent dans le CSS additionnel, servi APRES cette feuille. Les selecteurs ci-dessous sont donc prefixes de « body » pour l'emporter par specificite, pas par ordre. ===================================================================== */ body .site-header .pjc-barre .pjc-bloc h1.pjc-t, body .site-header .pjc-barre .pjc-bloc h1.pjc-t span, body .entry-title, body .entry-content h2.wp-block-heading, body .entry-content h3.wp-block-heading { font-family: "Alegreya Sans", "Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Bandeau d'accueil */ body .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 36px; line-height: 1.14; font-weight: 400; } body .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 27px; } /* Titre de page. Le selecteur ne porte PAS .page (17/09/2026) : ainsi ecrit, il ne couvrait que les pages WordPress. Les forums bbPress (post-type-archive-forum, single-forum, single-topic), les articles en page individuelle et les fiches produit gardaient les 2,617924 em de Storefront, soit 41,89 px en graisse 300 — visiblement plus gros que les 38 px des autres pages. Le titre de la banniere d'accueil n'est pas touche : il porte h1.pjc-t. */ body h1.entry-title { /* !important depuis le 17/09/2026 : le CSS additionnel de l'Outil de personnalisation porte « .page h1.entry-title { font-size: 34px } ». En retirant .page d'ici pour couvrir les forums, on est passe sous sa specificite et les pages sont tombees a 34 pendant que les forums restaient a 38. L'importance tranche sans dependre du selecteur. */ font-size: 38px !important; font-weight: 400 !important; /* ALIGNEMENT OPTIQUE (17/09/2026). Titre, sous-titre et premier paragraphe commencent tous a la meme abscisse — mesure au texte, pas a la boite. Mais le blanc lateral d'une lettre est proportionnel a sa taille : a 38 px le « E » a devant lui bien plus de blanc que le « P » du sous-titre a 17, et le titre paraissait rentre. On aligne donc l'encre plutot que les boites. Deux pixels, invisibles en soi. */ margin-left: -2px !important; } /* Titres de section */ body.page .entry-content h2.wp-block-heading { /* 27 px depuis le 17/09/2026. A 24 (valeur issue du passage en Alegreya Sans) le rapport au chapo de 18 px n'etait plus que de 1,33 — le meme defaut qui les avait fait monter de 22 a 26 le 16/09. Compare en brouillon a 26, 28 puis 27 ; 28 a ete ecarte parce que le rapport au titre de page de 38 px tombait a 1,36 sur Agenda. A 27 : 1,50 contre le chapo, 1,41 contre le titre de page, 1,93 contre celui de la banniere. Contact reste a 22, epingle par #post-152. */ /* Porte a 30 px le 17/09/2026, apres la refonte de la banniere : a 27 le titre de section paraissait maigre sous un slogan de 52 px. Rapports a 30 : 1,67 contre le chapo de 18, 1,27 contre le titre de page de 38, 1,73 contre le slogan. Au-dela de 34 on cree deux niveaux de titre qui se disputent la page. */ font-size: 30px; font-weight: 500; } @media (max-width: 1100px) { body .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 32px; } body .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 24px; } } @media (max-width: 900px) { body .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 28px; } body .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 21px; } } @media (max-width: 767px) { body .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 29px; } body .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 23px; } body h1.entry-title { font-size: 30px !important; } body.page .entry-content h2.wp-block-heading { font-size: 28px; } } /* ===================================================================== ECARTS ENTRE SECTIONS — page d'accueil 16/09/2026 --------------------------------------------------------------------- Constat d'Etienne : la section encadree du recueil paraissait plus serree que les autres. Mesure faite de la derniere encre au titre suivant : 111 px apres une grille de produits, 72 px apres l'encadre, 125 px ailleurs — alors que toutes les marges declarees valaient 48. La cause n'est pas l'encadre, c'est WooCommerce : chaque li.product porte 3.706em (~59 px) de marge basse, qui sert a separer les rangees mais qui subsiste aussi sous la DERNIERE rangee, ou elle ne separe plus rien. Elle s'ajoutait aux 48 px du titre suivant. On ne touche donc pas a la marge des produits (elle ferait alors collapser les rangees entre elles, ici comme sur la boutique) : on retire les 48 px du titre et on ne garde que ce qu'il faut pour arriver a 80 px d'encre a encre, valeur retenue avec Etienne. L'encadre, lui, n'a pas cette marge parasite mais a 22 px de remplissage interieur : 56 + 22 + bordure = 80 egalement. Specificite : ces selecteurs doivent l'emporter sur « .page .entry-content h2.wp-block-heading » du CSS additionnel, servi apres cette feuille. D'ou le prefixe « body ». ===================================================================== */ body.page .entry-content .woocommerce + h2.wp-block-heading { margin-top: 17px; } body.page .entry-content .encadre-recueil + h2.wp-block-heading { margin-top: 56px; } /* ===================================================================== PAGE BLOG (index des articles) 16/09/2026 --------------------------------------------------------------------- Cette page n'avait aucun H1 : le seul de la page appartenait au logo. L'en-tete est injecte par functions.php (crochet loop_start), et mis au meme format que les titres de page du reste du site. Le body porte la classe « blog » et non « page » : les regles de titrage scopees a body.page ne l'atteignent pas, d'ou la reprise ici. ===================================================================== */ body.blog .pjc-entete-blog { margin: 0 0 36px; padding: 0; border: 0; } body.blog .pjc-entete-blog h1.entry-title { margin: 0 0 10px; font-size: 38px; font-weight: 400; color: #2b344c; line-height: 1.2; } body.blog .pjc-entete-blog .pjc-chapo-blog { margin: 0; font-size: 18px; color: #777; } /* Fil d'ariane : « Accueil > Blog » au-dessus d'un titre « Blog ». Meme motif que sur l'accueil, les pages et le forum — c'est le conteneur entier qu'on masque, sinon il reste 45 px de padding. */ body.blog .storefront-breadcrumb { display: none; } @media (max-width: 767px) { body.blog .pjc-entete-blog { margin-bottom: 26px; } body.blog .pjc-entete-blog h1.entry-title { font-size: 30px; } } /* Index du blog : on retire la ligne « Publié le … par … » et le lien de commentaire. Ce sont des mentions d'administration : sur une liste, elles arrivent AVANT le titre et se lisent donc en premier. Les pages d'article les gardent (body.single-post n'est pas vise ici). */ body.blog .site-main article.post > header.entry-header .posted-on, body.blog .site-main article.post > header.entry-header .post-author, body.blog .site-main article.post > header.entry-header .post-comments { display: none; } /* Punaise des articles epingles (Font Awesome, posee par Storefront en ::before du titre). « content: none » empeche la generation du pseudo-element ; l'ancienne regle du CSS additionnel ne faisait que le redimensionner. */ body .sticky .entry-title::before { content: none; } /* ===================================================================== GRILLE D'ARTICLES (blog et archives) 16/09/2026 --------------------------------------------------------------------- Meme format que les vignettes produits : carre, arrondi 14 px, liseré 2 px. Titre seul dessous, pas de date — les mentions « Publié le … » restent servies dans le HTML mais masquees ici ; les pages d'article les conservent. ===================================================================== */ body.pjc-grille-articles #main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px 26px; align-items: start; } /* En-tete de page et pagination : toute la largeur */ body.pjc-grille-articles #main > .pjc-entete-blog, body.pjc-grille-articles #main > nav, body.pjc-grille-articles #main > .storefront-sorting, body.pjc-grille-articles #main > header:not(.entry-header), body.pjc-grille-articles #main > .no-results { grid-column: 1 / -1; } body.pjc-grille-articles #main article.post { margin: 0; padding: 0; border: 0; } body.pjc-grille-articles .pjc-vignette { display: block; line-height: 0; } body.pjc-grille-articles .pjc-vignette img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid #dcdcdc; border-radius: 14px; transition: transform .25s ease, box-shadow .25s ease; } /* Article sans image mise en avant : vignette « maison », le logo sur le marine de la banniere. Pose automatiquement par pjc_vignette_article(), donc valable pour tout futur article publie sans image. */ body.pjc-grille-articles .pjc-vignette-maison { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #24314d; border: 2px solid #24314d; border-radius: 14px; overflow: hidden; } body.pjc-grille-articles .pjc-vignette-maison img { width: 56%; height: auto; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; } body.pjc-grille-articles article.post > header.entry-header { margin: 12px 0 0; padding: 0; border: 0; } body.pjc-grille-articles article.post h2.entry-title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; } body.pjc-grille-articles article.post h2.entry-title a { color: #2b344c; text-decoration: none; } /* Mentions d'administration : masquees en liste, gardees sur l'article */ body.pjc-grille-articles article.post .posted-on, body.pjc-grille-articles article.post .post-author, body.pjc-grille-articles article.post .post-comments, body.pjc-grille-articles article.post .cat-links, body.pjc-grille-articles article.post .edit-link { display: none; } /* Survol, comme les vignettes produits */ body.pjc-grille-articles article.post:hover .pjc-vignette img { transform: scale(1.03); box-shadow: 0 10px 22px rgba(0, 0, 0, .13); } body.pjc-grille-articles article.post:hover h2.entry-title a { color: #3a5f9e; } @media (prefers-reduced-motion: reduce) { body.pjc-grille-articles .pjc-vignette img { transition: none; } body.pjc-grille-articles article.post:hover .pjc-vignette img { transform: none; } } @media (max-width: 1100px) { body.pjc-grille-articles #main { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { body.pjc-grille-articles #main { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } body.pjc-grille-articles article.post h2.entry-title { font-size: 17px; } body.blog .pjc-entete-blog .pjc-chapo-blog { font-size: 16px; } } /* ===================================================================== BOUTON « REVENIR EN HAUT » 16/09/2026 --------------------------------------------------------------------- Pose par functions.php sur les listes d'articles, qui n'ont plus de pagination. Cache tant qu'on n'a pas defile de 600 px : la classe pjc-haut-vu est ajoutee par le script. ===================================================================== */ .pjc-haut { position: fixed; right: 26px; bottom: 26px; z-index: 90; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #24314d; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease; } .pjc-haut.pjc-haut-vu { opacity: 1; visibility: visible; transform: none; } .pjc-haut:hover, .pjc-haut:focus { background: #2b344c; } .pjc-haut:focus-visible { outline: 2px solid #ffbe00; outline-offset: 3px; } .pjc-haut svg { width: 22px; height: 22px; fill: currentColor; display: block; margin: 0 auto; } @media (prefers-reduced-motion: reduce) { .pjc-haut { transition: none; } } /* Sur mobile, Storefront pose une barre fixe en bas de l'ecran : le bouton se place au-dessus, sinon il la recouvre. */ @media (max-width: 767px) { .pjc-haut { right: 16px; bottom: 76px; width: 42px; height: 42px; } } /* ===================================================================== LOGO DU PIED DE PAGE 16/09/2026 --------------------------------------------------------------------- Marque detouree, centree, en couleur (17/09/2026). Le fichier a disque plein a ete remplace par logo_PJC_bleu_jaune (id 19793), version sans fond d'Yrgane Ramon : marine, « JAZZ » en dore. Le pied de page est le seul endroit du site ou les deux couleurs de la marque se posent sans concurrence — la banniere et le menu ont pris le dore. Le gris avait ete essaye et ecarte du temps du disque ; la question ne se pose plus. La BOITE passe de 130 a 202 px alors que la marque grandit peu : le fichier est carre (2560) et la marque n'en occupe que 74,25 % en hauteur. 202 x 0,7425 = 150 px de marque reelle. Le decalage de 3 % rattrape le centrage : la marque n'est pas centree dans son carre (20,25 % de vide a gauche, 14,25 % a droite). L'ombre portee a ete RETIREE : dessinee pour un disque, elle suivait sur une forme detouree chaque angle du trace et salissait les contours. ===================================================================== */ .pjc-logo-pied { display: block; width: 202px; margin: 6px auto 24px; line-height: 0; } .pjc-logo-pied img { display: block; width: 100%; height: auto; max-width: none; filter: none; border-radius: 0; transform: translateX(-3%); } @media (max-width: 767px) { .pjc-logo-pied { width: 162px; margin-bottom: 20px; } } /* ===================================================================== PAGE D'ARTICLE 16/09/2026 --------------------------------------------------------------------- Fil d'ariane supprime : il affichait « Accueil / Categorie / Titre », donc sa racine renvoyait a la boutique et jamais a la liste des articles d'ou l'on vient. Le retour au blog est dans le menu depuis qu'il est passe en premier niveau. La categorie prend sa place au-dessus du titre, en etiquette de rubrique — meme traitement que le surtitre du bandeau. ===================================================================== */ body.single-post .storefront-breadcrumb, body.category .storefront-breadcrumb, body.tag .storefront-breadcrumb, body.author .storefront-breadcrumb, body.date .storefront-breadcrumb { display: none; } /* Les archives de la boutique (tax-product_cat) et les fiches produit gardent leur fil d'ariane : elles, elles ont une vraie hierarchie. */ .pjc-rubrique-article { margin: 0 0 12px; font-size: 17px; font-variant: small-caps; letter-spacing: .08em; color: #777; } .pjc-rubrique-article a { color: #777; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .pjc-rubrique-article a:hover, .pjc-rubrique-article a:focus { color: #2b344c; border-bottom-color: #2b344c; } /* Le titre remonte au-dessus des mentions « Publie le … par … », qui passent sous lui. L'en-tete est mis en flex : le h1 prend toute la largeur en premier, les trois spans restent sur une seule ligne. */ body.single-post .entry-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; } body.single-post .entry-header h1.entry-title { order: -1; width: 100%; margin: 0 0 8px; } /* L'auteur est de nouveau affiche sur les articles : les 23 textes d'Alain Gerber lui sont attribues depuis le 16/09/2026 (compte 1240), la signature dit donc la verite et rend sa page d'auteur atteignable d'un clic. Elle avait ete masquee quelques minutes plus tot, quand tout etait encore publie sous le compte d'Etienne. */ .pjc-rubrique-article + .entry-header .post-author a { font-weight: 600; } /* ===================================================================== BANNIERE PHOTO — ETAT BROUILLON 16/09/2026 --------------------------------------------------------------------- Visible du seul administrateur connecte (classe body.pjc-photo posee par functions.php). Structure inversee : barre de menu EN HAUT, photo dessous, sans toucher au HTML. .site-header -> la photo, plus la bande marine du menu en premiere couche de fond .site-header::after -> le voile horizontal + le fondu vers le blanc .pjc-bloc -> le titre, en absolu a droite La barre reste non positionnee : c'est ce qui permet au bloc de titre de se caler sur la banniere entiere et non sur les 84 px de la barre. ===================================================================== */ body.pjc-photo { --pjc-bande: 84px; --pjc-photo-h: 560px; } body.pjc-photo .site-header { /* sticky et non relative : « body .site-header » pose deja position: sticky + top: 0 (32 px avec la barre d'administration). En passant en relative, ce top devenait un vrai deplacement — 32 px de blanc au-dessus de la barre — et la barre ne se collait plus en haut au defilement. Sticky est positionne, donc le bloc de titre en absolu s'y cale toujours. */ position: sticky; background-color: var(--pjc-marine) !important; background-image: linear-gradient(to bottom, var(--pjc-marine) 0 var(--pjc-bande), rgba(0,0,0,0) var(--pjc-bande)), var(--pjc-photo) !important; background-repeat: no-repeat, no-repeat !important; /* Cadrage pilote par la HAUTEUR, non par la largeur (17/09/2026). Avec « 112% auto », l'image etait mise a l'echelle sur la LARGEUR : sa hauteur affichee grandissait avec l'ecran, donc la tranche visible changeait a chaque largeur et l'oeil montait ou descendait. Mesure : 67 px trop haut a 1101, 32 a 1280, juste a 1440, 95 px trop bas a 1920, 221 a 2560. Aucune valeur unique de calage ne pouvait tenir — d'ou les deux paliers, et le projet (abandonne) de recadrer le fichier. En figeant la hauteur d'affichage a 1075,45 px — exactement celle qu'elle avait a 1440 px, la largeur sur laquelle le calage a ete regle avec Etienne — la tranche visible devient la meme a toutes les largeurs et le rendu a 1440 est inchange au pixel. Le max() prend le relais au-dela de ~1612 px, ou 1075 px de haut ne couvrent plus la largeur : l'image repasse a l'echelle sur la largeur (66,68 vw = 1 / 1,4997, le rapport du fichier) et le calage vertical suit par le min() ci-dessous. Les deux se referent au meme vw, donc ils restent coherents meme si la barre de defilement en fausse la valeur. Aucun recadrage du fichier 19777 n'est necessaire. */ background-size: 100% 100%, auto max(1075.45px, 66.68vw) !important; /* -8,63 px : l'offset vertical qu'avait « 2 % » a 1440 px. Au-dela de 1612 px l'image grandit, l'offset doit descendre d'autant : oeil = 0,27935 x hauteur + offset, qu'on veut constant a 291,8 px du haut de l'en-tete (position de l'oeil mesuree a 1440 px), d'ou offset = 291,8 - 18,63 vw. Le titre, lui, est 5 px au-dessus. A RECALCULER si on change la hauteur de banniere ou le calage. */ background-position: 0 0, 100% min(-8.63px, 291.8px - 18.63vw) !important; padding-bottom: var(--pjc-photo-h) !important; /* 24 px, plus les 16 px du premier titre : 40 px d'ecart visuel. Le chevauchement qui avait motive les 40 px venait du position: relative, corrige depuis par le passage en sticky. */ margin-bottom: 24px !important; overflow: hidden; } /* Sepia leger sur la photo (17/09/2026). Le ::before, jusqu'ici neutralise, sert de couche de reprise : backdrop-filter applique le filtre a tout ce qui est peint derriere lui, c'est-a-dire la photo seule. Avantage sur les autres pistes : une seule regle, aucune reprise des tailles et positions de fond dans les trois paliers, et le bandeau marine, le filet dore et le titre n'y touchent pas — la boite commence sous la barre. Valeur choisie avec Etienne sur maquette (18, 35 et 55 % compares), arrondie a 20. Au-dela de 50 % le sepia ecrase les noirs du pull. Un sepia garde l'image monochrome : le filet dore reste la seule note saturee du bandeau, ce que la version couleur lui faisait perdre. Si un navigateur ne connait pas backdrop-filter, l'image reste neutre. */ body.pjc-photo .site-header::before { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; top: var(--pjc-bande); bottom: 0; width: auto; height: auto; /* z-index 0 comme ::after, mais il vient avant dans l'ordre du document : il se fond avec la photo, puis ::after pose le voile par-dessus. Le bloc de titre est a z-index 2, il n'est pas filtre. */ z-index: 0; pointer-events: none; -webkit-backdrop-filter: sepia(.20); backdrop-filter: sepia(.20); } /* Une fois defile, la photo disparait : plus rien a teinter. */ body.pjc-photo .site-header.pjc-defile::before { display: none !important; } /* Voile horizontal + fondu vers le blanc sur les 38 derniers pixels */ body.pjc-photo .site-header::after { content: ""; display: block !important; position: absolute; left: 0; right: 0; top: var(--pjc-bande); bottom: 0; z-index: 0; pointer-events: none; width: auto; height: auto; /* Fondu vers le blanc supprime le 16/09 : essaye a 38, 22 puis 12 px, puis abandonne — « une photographie a deja son cadre ». Il ne reste que le voile horizontal, et le bas de l'image est un bord franc. */ background: linear-gradient(90deg, rgba(8,12,20,0) 18%, rgba(8,12,20,.30) 48%, rgba(8,12,20,.62) 100%); } /* La barre : une seule ligne, logo reduit, aucun positionnement */ body.pjc-photo .site-header:not(.pjc-defile) .pjc-barre, body.pjc-photo .site-header .pjc-barre { position: static; flex-wrap: nowrap; align-items: center; /* 0 : une regle de l'ancienne banniere ajoutait 8 px en haut et en bas, la barre faisait donc 100 px pour une bande marine de 84 — le menu se centrait 8 px trop bas et la barre debordait sur la photo. */ padding-top: 0 !important; padding-bottom: 0 !important; min-height: var(--pjc-bande); height: var(--pjc-bande); } /* Le logo gardait la marge basse de 14 px et le decalage optique de -9 px de la banniere deployee : sans remise a zero il se centre 7 px plus haut que le menu. */ body.pjc-photo .site-header .pjc-barre .site-branding, body.pjc-photo .site-header:not(.pjc-defile) .pjc-barre .site-branding a.custom-logo-link, body.pjc-photo .site-header:not(.pjc-defile) .pjc-barre .site-branding img.custom-logo { /* Le selecteur doit reprendre :not(.pjc-defile) et .pjc-barre pour l'emporter sur la regle de la banniere deployee, qui pose « margin: 0 0 14px -9px » avec !important — deux !important, c'est la specificite qui tranche, pas l'ordre. */ margin: 0 !important; } body.pjc-photo .site-header .pjc-barre .site-branding { flex: 0 0 auto !important; } /* LOGO DANS LE BLOC DE TITRE (17/09/2026) --------------------------------------------------------------------- Remplace la MEDAILLE, retiree ce jour. Rappel du probleme : une remarque exterieure signalait que l'identite « Piano Jazz Concept » ne se lisait nulle part sur l'accueil avant le pied de page. On a d'abord agrandi le logo dans la barre, puis pose un disque marine derriere lui pour qu'il deborde sur la photo : une reparation, pas une composition. La solution retenue vient d'Etienne — sortir le logo de la barre sur le seul accueil et le poser en tete du bloc de titre. On lit alors de haut en bas : identite, promesse, offre. Le logo n'est plus une vignette d'angle, il fait partie de la phrase. Tout ce qui suit ne vaut que sur l'accueil (body.pjc-photo). Sur les autres pages et sur la barre fine du defilement, le logo rond garde sa place : c'est pourquoi on le MASQUE avec :not(.pjc-flottante) au lieu de le retirer du DOM. Fichier employe : logo_PJC_sansfond02, id 19797 — la seule version claire d'Yrgane Ramon. Dans les versions marine ou noires, « PIANO » et « CONCEPT » ne sont pas des lettres peintes mais des decoupes : sur fond sombre elles laissent voir le fond et les deux mots disparaissent. Le fichier est carre (2560) alors que la marque ne l'est pas : elle occupe 65,5 % de la largeur et 74,25 % de la hauteur, decalee de 20,25 % a gauche et de 8,5 % en haut. D'ou le cadrage par background-size et background-position, en valeurs ENTIERES : en fractionnaire le navigateur reechantillonne et les traits fins deviennent flous. image affichee = hauteur du logo / 0,7425 decalage x = -0,2025 x image decalage y = -0,085 x image A RECALCULER si on change la taille du logo ou si le fichier est recadre. L'URL du fichier est posee en style inline par pjc_bloc_accueil() (functions.php), pas ici : elle suit ainsi la mediatheque. */ body.pjc-photo .site-header:not(.pjc-flottante) .site-branding { display: none !important; } /* Le bloc cesse d'etre centre verticalement : il part du haut, a 42 px sous la barre, et le decalage de 60 px a gauche compense le centrage interne (les lignes courtes partaient trop a droite). */ body.pjc-photo .site-header .pjc-barre .pjc-bloc { justify-content: flex-start !important; align-items: flex-start !important; padding-top: 42px !important; padding-bottom: 0 !important; transform: translateX(-60px) !important; } body.pjc-photo .pjc-pile { display: inline-block; text-align: center; } body.pjc-photo .pjc-logo-photo { display: block; margin: 0 auto 30px; height: 131px; width: 116px; background-repeat: no-repeat; background-size: 176px 176px; background-position: -36px -15px; /* Ombre courte et peu floue : a 12 px de rayon elle mangeait les contours. */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); } body.pjc-photo .site-header .pjc-barre .pjc-bloc .pjc-t { text-align: center !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc .pjc-sur { text-align: center !important; margin: 20px 0 0 !important; color: #fff !important; } /* Le filet dore ne sert plus : la ligne d'offre joue le meme role. */ body.pjc-photo .site-header .pjc-barre .pjc-bloc .pjc-sur::after { display: none !important; } /* Points medians : seul rappel de dore de la ligne, les mots restent blancs. Le point median se place a hauteur d'x, pas a mi-hauteur des capitales : en grossissant il monte, d'ou les 4 px de rattrapage. */ body.pjc-photo .pjc-pt { color: var(--pjc-or); font-weight: 700; font-size: 1.75em; line-height: 0; display: inline-block; transform: translateY(4px); } /* Sous 1100 la banniere tombe a 440 px : sans ce palier il ne restait que 8 px sous la ligne d'offre. */ @media (max-width: 1100px) { body.pjc-photo .site-header .pjc-barre .pjc-bloc { padding-top: 30px !important; } body.pjc-photo .pjc-logo-photo { height: 104px; width: 92px; background-size: 140px 140px; background-position: -28px -12px; margin-bottom: 22px; } body.pjc-photo .site-header .pjc-barre .pjc-bloc .pjc-sur { margin-top: 16px !important; } } /* Telephone : le bloc occupe toute la largeur, donc pas de decalage a gauche — il poussait le titre hors de l'ecran (« mprendre l'harmonie »). */ @media (max-width: 767px) { body.pjc-photo .site-header .pjc-barre .pjc-bloc { transform: none !important; align-items: center !important; padding-top: 20px !important; } body.pjc-photo .pjc-logo-photo { height: 88px; width: 78px; background-size: 118px 118px; background-position: -24px -10px; margin-bottom: 18px; } body.pjc-photo .site-header .pjc-barre .pjc-bloc .pjc-sur { margin-top: 14px !important; } } /* Le bloc de titre quitte la barre et se place a droite, sur la photo */ body.pjc-photo .site-header .pjc-barre .pjc-bloc { position: absolute; z-index: 2; top: var(--pjc-bande); height: var(--pjc-photo-h); /* Position horizontale en POURCENTAGE, pas en pixels (17/09/2026). Le bloc faisait 580 px fixes dans un bandeau de largeur variable : son bord gauche tombait a 57 % de la largeur a 1440 px, mais a 43 % a 1089 — c'est le texte qui avancait vers la main d'Etienne, pas l'inverse. La tranche de photo visible, elle, est constante (la taille de fond est en % de la largeur). En calant le bord gauche sur un pourcentage, l'ecart avec la main devient le meme a toutes les largeurs, et une seule valeur remplace le compromis entre paliers. Le min-width evite que le titre se casse sur les ecrans etroits. */ right: 0; left: 56%; width: auto !important; min-width: 400px; display: flex; flex-direction: column; justify-content: center; /* Le retrait bas remonte le bloc. La valeur n'est pas esthetique mais calculee : elle aligne le centre du « o » de « Comprendre » sur le centre de l'oeil d'Etienne sur la photo. Mesure faite au pixel, ligne de base reconstituee a partir des metriques de la fonte. 152 px au-dessus de 1100 px de large, 186 en dessous (voir plus bas) : l'image, la hauteur de banniere et le corps du titre changent tous les trois avec la largeur, donc le calage aussi. Le 17/09 Etienne a demande 5 px de plus vers le haut que l'alignement strict : 142 -> 152 et 176 -> 186 (le retrait bas remonte le bloc, il faut donc le double de la remontee voulue, le contenu etant centre). Valeur laterale arretee a 56 % le meme jour : c'est la seule qui laisse « Comprendre l'harmonie » sur UNE ligne jusqu'a 1239 px de large (1298 px a 58 %, 1363 px a 60 %). Des que le titre passe a deux lignes, le bloc grandit et le calage sur l'oeil ne vaut plus. A RECALCULER si on recadre la photo, si on change le corps du titre ou la hauteur de la banniere. */ padding: 0 2.617924em 152px 0; margin: 0; flex: 0 0 auto !important; } /* Le decalage lateral conditionne a 1300 px a ete retire le 17/09/2026 : il corrigeait un symptome (le bloc en pixels fixes) et non la cause. La position en pourcentage ci-dessus le rend inutile. */ body.pjc-photo .site-header .pjc-barre .pjc-bloc > * { max-width: none !important; } body.pjc-photo .pjc-bloc .pjc-sur { margin: 0 0 14px; /* Il avait ete mis en gras parce qu'il etait illisible (blanc a 72 %, fort interlettrage). Allege a 500 le 16/09 a la demande d'Etienne — « en gras, ils se lisent mal ». La lisibilite est recuperee ailleurs : un point de corps en plus, un interlettrage reduit de .16 a .13 em (large, il disloquait les mots des que la graisse baissait) et une double ombre, une proche pour detacher, une diffuse pour asseoir. */ font-size: 15.5px; font-weight: 500; letter-spacing: .13em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 14px rgba(0,0,0,.55); } /* Filet sous le surtitre. Les 56 px d'avant ne mesuraient rien : choisis a l'oeil. 254 px est la fin exacte de « Harmonisations », mesuree sur le texte rendu — le filet souligne les deux premieres rubriques et s'eteint avant la troisieme. A recalculer si le surtitre change de mots. Degrade plein a gauche, eteint a droite : le trait semble naitre du texte et pousse l'oeil vers le titre. Bord gauche arrondi, extremite droite franche puisqu'elle s'efface d'elle-meme. */ body.pjc-photo .pjc-bloc .pjc-sur::after { width: 254px; height: 3px; margin-top: 12px; background: linear-gradient(90deg, #ffbe00 0%, rgba(255, 190, 0, 0) 100%); border-radius: 3px 0 0 3px; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t, body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t span { /* Storefront pose letter-spacing: -1px sur tous ses H1. Imperceptible a 34 px, visible a 52 — et Alegreya Sans est deja etroite. Porte a +0,02 em pour ce seul titre : les titres de page et de section n'y touchent pas. En em et non en px, pour que l'ecart suive la taille d'un palier a l'autre. Au-dela de 0,04 em on entre dans le registre de l'etiquette (le surtitre est a 0,16) et le titre se lit lettre a lettre. */ letter-spacing: .02em !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 52px !important; line-height: 1.1; /* Meme double ombre que le surtitre : une serree qui detache la lettre du fond, une diffuse qui l'assoit. Avec une seule ombre large, le titre paraissait mou a cote du surtitre, plus decoupe que lui. */ text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.45); } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 38px !important; color: rgba(255,255,255,.88); text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.45); } /* -------------------------------------------------------------------------- DEFILEMENT — MODELE JAZZADVICE / OPEN STUDIO 17/09/2026 -------------------------------------------------------------------------- Avant : l'en-tete etait collant (sticky). Comme la barre de menu est en HAUT de l'en-tete et la photo en bas, coller l'en-tete revenait a coller ses 644 px entiers. La seule facon de recuperer la barre seule etait donc de faire disparaitre la photo d'un coup, a 60 px de defilement — d'ou un saut de 560 px du contenu, releve par Etienne : « la photo saute et disparait ». Constat sur quatre sites comparables (PianoGroove, Open Studio, Piano With Jonny, Jazzadvice) : chez aucun la barre ne fait partie de la banniere. Elle est soit fixe depuis le premier pixel et l'image glisse dessous, soit elle s'en va avec la page et une version plus fine revient plus tard. Aucun ne reduit ni ne fait disparaitre quoi que ce soit. Retenu : le modele Jazzadvice. L'en-tete n'est plus collant, la banniere sort de l'ecran comme n'importe quelle banniere ; une fois la photo passee, la barre revient seule, plus fine, en glissant depuis le haut. -------------------------------------------------------------------------- */ body.pjc-photo .site-header { /* « top: auto » est indispensable : body .site-header pose top: 0, qui vaut 32 px avec la barre d'administration. Sans collage, ce top deviendrait un vrai deplacement — la bande blanche de 32 px rencontree le 16/09. */ position: relative; top: auto; } /* Barre revenue : l'en-tete se reduit a la barre et passe en position fixe. */ /* 86 px comme la barre fine de toutes les autres pages : la barre qui revient sur l'accueil ne doit pas etre un troisieme format. */ body.pjc-photo { --pjc-barre-fine: 86px; } body.pjc-photo .site-header.pjc-flottante { position: fixed; top: 0; left: 0; right: 0; z-index: 600; height: var(--pjc-barre-fine); min-height: 0; padding-bottom: 0 !important; margin-bottom: 0 !important; background-image: none !important; /* overflow VISIBLE depuis le 17/09/2026. Il etait a hidden pour empecher le bloc de titre de deborder sous la barre reduite a 86 px — mais ce bloc est deja masque dans l'etat flottant, et hidden decoupait surtout les sous-menus au survol : « Presse » sous « Bio » etait inatteignable des que la barre fine etait en place. Signale par Etienne. */ overflow: visible; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); /* Posee hors ecran, puis ramenee a zero a l'image suivante par le script : c'est ce decalage d'une image qui permet a la transition de jouer. */ transform: translateY(-100%); } body.admin-bar.pjc-photo .site-header.pjc-flottante { top: 32px; } body.pjc-photo .site-header.pjc-flottante.pjc-descendue { transform: translateY(0); transition: transform .28s ease-out; } body.pjc-photo .site-header.pjc-flottante::before, body.pjc-photo .site-header.pjc-flottante::after { display: none !important; } body.pjc-photo .site-header.pjc-flottante .pjc-barre .pjc-bloc { display: none !important; } body.pjc-photo .site-header.pjc-flottante .pjc-barre { height: var(--pjc-barre-fine); min-height: var(--pjc-barre-fine); } body.pjc-photo .site-header.pjc-flottante .site-branding a.custom-logo-link, body.pjc-photo .site-header.pjc-flottante .site-branding img.custom-logo { width: 76px !important; height: 76px !important; max-width: 76px !important; max-height: 76px !important; } /* L'en-tete quitte le flux : on rend au corps exactement la hauteur qu'il occupait, sinon tout le contenu remonte d'un coup — le defaut qu'on corrige. Les deux variables sont posees sur le corps, donc la compensation suit les paliers sans avoir a etre repetee. */ /* + 24 px : la marge basse de l'en-tete. Une fois l'en-tete en position fixe, sa marge ne compte plus dans le flux — sans ce terme le contenu remonte de 24 px au passage du seuil. Mesure : repere a 572 px au lieu de 596. */ body.pjc-photo.pjc-decalee { padding-top: calc(var(--pjc-bande) + var(--pjc-photo-h) + 24px); } /* Si le script ne s'execute pas, aucune classe n'est posee : l'en-tete defile simplement avec la page. Degradation acceptable, rien n'est masque. */ /* 1101-1239 px : « Comprendre l'harmonie » ne tient plus sur une ligne a 52 px (il lui faut 503 px, et le bloc n'en offre que 0,44 x largeur - 42). Un titre sur deux lignes fait grandir le bloc et decale le calage de 34 px. Un cran de corps en dessous le remet sur une ligne, et le retrait bas est recalcule pour la meme raison. Mesure : 5,2 px au-dessus de l'oeil a 1101 comme a 1152. */ @media (max-width: 1239px) and (min-width: 1101px) { body.pjc-photo .site-header .pjc-barre .pjc-bloc { padding-bottom: 161px; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 44px !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 33px !important; } } @media (max-width: 1100px) { body.pjc-photo { --pjc-photo-h: 440px; } /* La banniere passe de 644 a 524 px de haut. En gardant la hauteur d'image de la version large, on ne verrait plus que le haut du cadrage : on la reduit dans le meme rapport (524/644) pour montrer exactement la meme tranche, en plus petit. 875,1 = 1075,45 x 0,8137 ; -7,02 = -8,63 x 0,8137 ; l'oeil tombe alors a 237,4 px du haut. */ body.pjc-photo .site-header { background-size: 100% 100%, auto max(875.1px, 66.68vw) !important; background-position: 0 0, 100% min(-7.02px, 237.4px - 18.63vw) !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc { padding-bottom: 155px; } } /* 768-975 px : le bloc est trop etroit pour le titre en une ligne, meme a 40 px — il passe a deux lignes, ce qui remonte la premiere de 9,7 px. Ecart mesure identique a 790 et a 900, donc une seule compensation. Reduire le retrait bas de 19,4 px redescend le bloc de 9,7. */ @media (max-width: 975px) and (min-width: 768px) { body.pjc-photo .site-header .pjc-barre .pjc-bloc { padding-bottom: 136px; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 40px !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 30px !important; } } @media (max-width: 767px) { body.pjc-photo { --pjc-photo-h: 320px; } body.pjc-photo .site-header { background-size: 100% 100%, cover !important; background-position: 0 0, 72% 18% !important; } body.pjc-photo .site-header::after { /* Fondu vers le blanc retire le 17/09 : sur ordinateur il avait ete abandonne (« une photographie a deja son cadre »), le mobile suit. Il ne reste que le voile vertical, qui porte le titre en bas. */ background: linear-gradient(180deg, rgba(8,12,20,.10) 0%, rgba(8,12,20,.62) 100%); } body.pjc-photo .site-header .pjc-barre .pjc-bloc { width: auto !important; max-width: none; left: 0; right: 0; justify-content: flex-end; padding: 0 20px 28px; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t { font-size: 29px !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc h1.pjc-t span { font-size: 23px !important; } body.pjc-photo .pjc-bloc .pjc-sur { font-size: 12.5px; margin-bottom: 10px; } } /* Credit photo : derniere ligne du pied de page, accueil seulement. Aligne sur le copyright, un cran plus discret. */ .site-footer .pjc-credit { margin: 8px 0 0; padding: 0; /* Meme corps et meme gris que la ligne de copyright, juste au-dessus. */ font-size: 16px; color: #6d6d6d; line-height: 1.5; } /* ===================================================================== BANNIERE — CADRAGE LARGE ET FONDU AU MARINE 17/09/2026 --------------------------------------------------------------------- Troisieme etat du cadrage, et le plus simple des trois. Etat precedent : la photo couvrait toute la largeur, hauteur figee a 1075,45 px, ancree a droite, avec un voile sombre pour rendre le titre lisible. Etienne a voulu dezoomer pour montrer la scene — le piano, le casque. Mais dezoomer retrecit l'image, et comme elle etait ancree a droite, son visage revenait vers le centre : les deux reglages etaient le meme bouton. Solution : on cesse de demander a la photo de couvrir la largeur. Elle est dezoomee de 30 % (752,82 px de haut au lieu de 1075,45), calee a GAUCHE, et le marine prend le relais a droite par un fondu. Le titre se pose desormais sur du marine plein : sa lisibilite ne depend plus de ce qu'il y a derriere, ce qui supprime d'un coup toute la fragilite du cadrage — c'est le vrai gain, au-dela de l'esthetique. Le fondu suit une courbe en S sur onze paliers. Un degrade CSS ordinaire fait varier l'opacite lineairement : l'oeil voit alors une bande nette la ou il demarre (effet de Mach), ce qu'Etienne a repere immediatement. Il court de 729 a 1069 px, soit 340 px, et se termine exactement sur le bord droit de la photo (1129 px de large - 60 px de decalage). A RECALCULER ensemble si l'un des trois nombres change. La bande marine du menu est placee AVANT le fondu dans la liste des couches, donc peinte PAR-DESSUS : sans cela le fondu teintait la barre de navigation sur sa droite. Sous 768 px, rien de tout ceci ne s'applique : le cadrage precedent reprend la main. Sur un telephone la photo ne fait que 375 px de large, un fondu lateral n'a pas de sens et le visage sortait du cadre. ===================================================================== */ @media (min-width: 768px) { body.pjc-photo .site-header { background-image: linear-gradient(to bottom, var(--pjc-marine) 0 var(--pjc-bande), rgba(0, 0, 0, 0) var(--pjc-bande)), linear-gradient(to right, rgba(36, 49, 77, 0.000) 729.0px, rgba(36, 49, 77, 0.028) 763.0px, rgba(36, 49, 77, 0.104) 797.0px, rgba(36, 49, 77, 0.216) 831.0px, rgba(36, 49, 77, 0.352) 865.0px, rgba(36, 49, 77, 0.500) 899.0px, rgba(36, 49, 77, 0.648) 933.0px, rgba(36, 49, 77, 0.784) 967.0px, rgba(36, 49, 77, 0.896) 1001.0px, rgba(36, 49, 77, 0.972) 1035.0px, rgba(36, 49, 77, 1.000) 1069.0px ), var(--pjc-photo) !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-size: 100% 100%, 100% 100%, auto 752.82px !important; background-position: 0 0, 0 0, -60px 56.52px !important; } } /* ===================================================================== SOUS-TITRE DE PAGE — UNE SEULE FORME 17/09/2026 --------------------------------------------------------------------- Etienne a releve que Bio et Contact ne traitaient pas leur sous-titre de la meme facon. De fait ce n'etait pas le meme objet : sur Bio un paragraphe p.pjc-rubriques en petites capitales grises de 14 px, sur Contact un h2.titre-rubrique marine de 22 px. Meme role, deux natures. Forme retenue : celle de Bio, portee de 14 a 15,5 px et alignee sur le sous-titre de la banniere d'accueil (« Methodes · Harmonisations · Partitions »), meme corps et meme interlettrage — c'est ce qui fait la cohesion entre l'accueil et les pages interieures. Sur Contact seule la ligne de rubriques change d'apparence ; « Nous ecrire », qui titre l'encadre du formulaire, n'est pas concerne. Le h2 reste un h2 dans le balisage : seule son apparence change. IMPORTANCE NECESSAIRE : la regle d'origine de p.pjc-rubriques vit dans le CSS additionnel avec !important, et celle de Contact est epinglee par un selecteur d'identifiant. On passe devant les deux. ===================================================================== */ body .entry-content p.pjc-rubriques, body #post-152 .entry-content h2.wp-block-heading.titre-rubrique { /* 17 px et non 15,5 : valide a l'ecran sur Contact le 17/09/2026. On s'ecarte donc de 1,5 px du sous-titre de la banniere — assume. */ font-size: 17px !important; font-weight: 400 !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: #777777 !important; line-height: 1.4 !important; /* 28 px et non 8 (17/09/2026). Les 8 px d'origine convenaient a une ligne de 14 px suivie d'un paragraphe. Sur Bio le sous-titre precede une image, dont la marge haute est nulle : les deux se touchaient. Sur Contact la valeur est reprise plus bas a 30. Portee de 8 a 28 puis 42 le meme jour, en regardant a l'ecran. */ margin: 0 0 42px !important; } /* Contact reprend 30 px et non 42 : sur Bio le sous-titre precede une image, un bloc massif qui demande de l'air ; sur Contact il precede du texte, qui se raccroche naturellement. Deux valeurs, une raison. */ body #post-152 .entry-content h2.wp-block-heading.titre-rubrique { margin-bottom: 30px !important; } /* Fil d'ariane masque aussi sur les pages de cours LearnDash (18/09/2026). Il affichait « Accueil / Cours / ». Le maillon du milieu pointait vers /courses/, l'archive que LearnDash genere tout seul (« Archives : Cours ») — une page technique, absente du menu, jamais mise en forme — et non vers la page Cours du site, qui est /cours/. Le dernier maillon repetait le H1, et le retour au catalogue est deja dans le menu (Cours, Mes cours). Meme motif que l'accueil, les pages, le blog et le forum : c'est le conteneur entier qu'on masque, sinon il reste 45 px de padding et une retombee de marge. CONSERVE volontairement sur les fiches produit (single-product) et les pages de categorie : la categorie y est une information que le menu ne donne pas, et son lien fonctionne. Non touche non plus sur les lecons, ou remonter au cours a un sens. */ body.single-sfwd-courses .storefront-breadcrumb, body.post-type-archive-sfwd-courses .storefront-breadcrumb { display: none; } /* Vignette du cours ramenee de 500 a 300 px (18/09/2026). Sur une page de cours l'image a une raison d'etre — c'est la vignette que l'acheteur a deja vue sur la grille et dans la boutique, elle confirme qu'il est au bon endroit — mais a 500 px elle repoussait la barre de progression et le sommaire hors du premier ecran. A 300, titre, image, progression et premiere lecon tiennent ensemble. Pas plus bas : le texte inscrit dans la vignette redouble deja le titre sans etre plus lisible que lui ; plus petite, elle ne dirait plus rien. Le 500 px d'origine est dans le CSS additionnel du Personnalisateur, avec les regles du forum et du blog ; on ne l'y touche pas, on passe devant avec un selecteur d'un cran plus specifique (body en tete). Premier pas du rapatriement vers le theme enfant. */ body.single-sfwd-courses .wp-post-image { /* !important indispensable : le CSS additionnel porte « .entry-content img { max-width: 500px !important } », qui l'emporte sur n'importe quel selecteur sans importance. */ max-width: 300px !important; } /* Fil d'ariane retire aussi des FICHES PRODUIT (18/09/2026). Il y affichait « Accueil / Methodes / ». Etienne a releve que la categorie figure deja sous la fiche, dans le bloc « Categorie : Methodes » — et c'est exactement le meme lien, /categorie-produit/methodes/. Le bloc du bas est meme le meilleur des deux : il porte aussi les etiquettes, et il tombe la ou l'oeil va apres le prix et le descriptif. Le fil, lui, repetait encore le titre en troisieme position. Restent affichees : les pages de categorie et d'etiquette produit. */ body.single-product .storefront-breadcrumb { display: none; } /* Les 24 px rendus apres le retrait du fil d'ariane (18/09/2026). Masquer le conteneur du fil supprime aussi ses 45 px de padding, qui servaient de respiration : le titre tombait a 32 px du bandeau au lieu des 56 du reste du site. Etienne l'a vu tout de suite sur la fiche du cours. On rend l'ecart par un padding, sur les deux gabarits ou le fil vient d'etre retire. Si le fil disparait un jour des pages de categorie, d'etiquette et de recherche, il faudra leur ajouter la meme compensation. */ body.single-product #content, body.single-sfwd-courses #content { padding-top: 24px; } /* ===================================================================== FIL D'ARIANE — NE RESTE QUE SUR LES ARTICLES 18/09/2026 --------------------------------------------------------------------- Decision d'Etienne apres inventaire de ce qu'il affichait reellement : il ne travaille que sur un article de blog, ou il donne la CATEGORIE (« Accueil / Histoire du jazz / ») — une information qui ne figure nulle part ailleurs sur la page, avec un lien vers la rubrique. Partout ailleurs il repetait le H1 : « Accueil / Methodes » sur une page dont le titre est deja Methodes, « Accueil / Resultats de recherche pour X » sur une page qui le dit en grand, « Accueil / Erreur 404 ». Regle generale du site : toutes les pages sont a un seul niveau sous l'accueil, et le menu couvre le retour — le fil n'a donc rien a y apprendre a personne. Comme ailleurs c'est le CONTENEUR qu'on masque, sinon restent 45 px de padding ; et on rend ces 45 px sous forme de 24 px de padding pour retrouver les 56 px bandeau-titre du reste du site. ===================================================================== */ body.tax-product_cat .storefront-breadcrumb, body.tax-product_tag .storefront-breadcrumb, body.post-type-archive-product .storefront-breadcrumb, body.search .storefront-breadcrumb, body.error404 .storefront-breadcrumb { display: none; } body.tax-product_cat #content, body.tax-product_tag #content, body.post-type-archive-product #content, body.search #content, body.error404 #content { padding-top: 24px; } /* ===================================================================== MENU SUR TELEPHONE — REPARATION 18/09/2026 --------------------------------------------------------------------- Signale par Etienne : sur telephone le menu s'ouvrait EN LIGNE au lieu de s'empiler. « Accueil Cours Agenda Blog Bio » filaient vers la droite et sortaient de l'ecran ; Contact, Mon compte et le selecteur de langue etaient inatteignables. Cause : la barre horizontale de la banniere pose « display: flex » sur « body .pjc-barre .main-navigation ul.menu », et cette regle a ete ecrite SANS media-requete. Elle s'appliquait donc aussi au menu deroulant du telephone — qui n'est pas le meme element : Storefront en rend deux, « .primary-navigation » (masque sous 768) et « .handheld-navigation » (celui qu'ouvre le bouton). Le selecteur ul.menu attrapait les deux. On rend ici a Storefront son comportement sous 768 px : menu masque au repos, empile quand .main-navigation porte .toggled, entrees en pleine largeur, sous-menus en retrait plutot qu'en panneau flottant. A RETENIR : toute regle de la barre horizontale doit etre bornee a min-width 768, sinon elle deborde sur le menu du telephone. ===================================================================== */ @media (max-width: 767px) { /* Barre sur UNE ligne, 84 px, comme sur l'accueil et comme au bureau (18/09/2026). Elle etait passee en block le temps de reparer le menu ; le logo et le bouton s'empilaient alors, et le bandeau montait a 120 px sur toutes les pages sauf l'accueil — ou il reste a 84 puisque le logo y est dans la banniere, pas dans la barre. Ecart releve par Etienne. Le flex ne pose plus de probleme depuis que le panneau du menu est en absolu : il n'a plus besoin de prendre la largeur dans le flux. */ body .site-header .pjc-barre { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 84px !important; } body .pjc-barre .site-branding { flex: 0 0 auto !important; } body .pjc-barre .main-navigation { width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; } body .pjc-barre .menu-toggle { margin: 0 !important; } body .pjc-barre .main-navigation ul.menu, body .pjc-barre .main-navigation ul.nav-menu { display: none !important; } body .pjc-barre .main-navigation.toggled ul.menu, body .pjc-barre .main-navigation.toggled ul.nav-menu { display: block !important; gap: 0 !important; width: 100% !important; } body .pjc-barre .main-navigation ul.menu li { float: none !important; display: block !important; width: 100% !important; } body .pjc-barre .main-navigation ul.menu li a { display: block !important; padding: 12px 0 !important; white-space: normal !important; } /* Panneau deroulant, et non bandeau pleine largeur (18/09/2026). Sur l'accueil le menu ouvert se posait sur la PHOTO, sans fond : les entrees se melangeaient au titre et au logo de la banniere. Ailleurs le defaut ne se voyait pas, l'en-tete y etant deja marine — c'est la banniere photo qui l'a revele. Premiere correction : un fond marine sur toute la largeur. Ecarte par Etienne, trop de bleu — le panneau est donc ramene a droite, sous le bouton qui l'ouvre, largeur au contenu avec un plancher a 210 px. */ /* Le panneau FLOTTE au lieu de pousser (18/09/2026, signale par Etienne sur la fiche produit). En flux, il agrandissait l'en-tete : on obtenait un grand rectangle marine dont le panneau, marine lui aussi avec son ombre, ne se distinguait pas — d'ou l'impression d'un artefact. En absolu, l'en-tete garde sa hauteur et le menu se lit comme un deroulant pose sur la page, partout pareil. L'accueil demande en plus overflow: visible : son en-tete est en overflow: hidden pour la banniere, ce qui coupait le bas du panneau au niveau du selecteur de langue. Sans effet sur le cadrage de la photo, qui est un fond et ne deborde pas. */ body.pjc-photo .site-header { overflow: visible !important; } body .pjc-barre .main-navigation { position: relative !important; } body .pjc-barre .main-navigation.toggled { z-index: 20 !important; } body .pjc-barre .main-navigation.toggled ul.menu { display: block !important; width: fit-content !important; min-width: 210px !important; max-width: none !important; /* -20px a droite : la gouttiere de .col-full, pour venir au bord. */ position: absolute !important; top: calc(100% + 6px) !important; right: -20px !important; margin: 0 !important; z-index: 40 !important; padding: 8px 20px 12px 22px !important; background: var(--pjc-marine) !important; border-radius: 12px 0 0 12px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .35) !important; } body .pjc-barre .main-navigation.toggled ul.menu li { width: auto !important; } body .pjc-barre .main-navigation ul.sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; box-shadow: none !important; padding-left: 16px !important; } } /* ===================================================================== ACCUEIL SUR TELEPHONE — BARRE TRANSPARENTE 18/09/2026 --------------------------------------------------------------------- Sur telephone l'en-tete de l'accueil occupait 404 px sur 812, soit la moitie de l'ecran : 84 px de barre marine plus 320 px de photo, et le bloc de titre par-dessus. Etienne a demande comment font les autres. Releve : Open Studio garde une barre de 86 px, Jazzadvice une barre plus fine — mais tous deux posent leur TITRE SUR LA PHOTO, une seule zone au lieu de deux. C'est cela qu'on paie, pas la barre. Retenu : sur l'accueil et sur telephone seulement, la bande marine disparait (--pjc-bande: 0) et la barre passe en absolu par-dessus la photo, le bouton sur un fond noir translucide pour rester lisible. La photo commence en haut de l'ecran et gagne meme 10 px de hauteur, tandis que l'en-tete tombe de 404 a 330 px — 41 % de l'ecran au lieu de 50, et la premiere section apparait sans defiler. Le padding du bloc de titre passe a 96 px : il compensait 84 px de bande plus 20 de respiration, il doit maintenant les porter seul. Au defilement, rien ne change dans le principe : la barre marine se colle en haut avec le logo a gauche et le bouton a droite, identique a toutes les pages — et a la MEME hauteur qu'elles (86 px). Toute autre valeur fait deborder .pjc-barre hors du .site-header, dont le fond marine est plus court : le logo tombe alors sur le blanc. RESTE A TRANCHER : au repos l'accueil n'a plus de barre du tout alors que les autres pages en ont une. Assume chez les deux references, mais c'est une decision a prendre franchement. ===================================================================== */ @media (max-width: 767px) { body.pjc-photo { --pjc-bande: 0px; --pjc-photo-h: 330px; --pjc-barre-fine: 86px; /* 18/09 : alignee sur la barre des autres pages (86). A 64, la barre flottante debordait de 22 px et le logo tombait sur le blanc. */ } body.pjc-photo .site-header .pjc-barre { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 6 !important; } body.pjc-photo .site-header .pjc-barre .pjc-bloc { padding-top: 96px !important; } /* Le bloc de titre (z-index 2, absolute, pleine largeur) recouvrait le bouton Menu : le clic partait dans le bloc et rien ne s'ouvrait. La navigation doit passer au-dessus. */ body.pjc-photo .site-header .pjc-barre .main-navigation { position: relative !important; z-index: 7 !important; } /* CADRAGE DU HAUT D'ACCUEIL SUR TELEPHONE (18/09) Le logo centre tombait sur la main levee du sujet, le geste le plus lisible de la photo : on le decale de 58 px pour le poser sur le fond flou. Le bouton Menu remonte dans le coin (14 px du haut, 14 du bord) pour degager le champ, et le panneau deroulant suit de 14 px afin que les deux bords droits s'alignent. Borne a l'etat au repos : des que la barre marine flottante apparait, le bouton doit reprendre sa place centree dans la barre. */ body.pjc-photo .pjc-logo-photo { /* 94 px a droite et 22 px plus haut : le logo se cale sous le bouton Menu. Il tombe alors sur une zone claire de la photo, d'ou l'ombre portee renforcee (deux couches) qui redecoupe le trait dore. */ transform: translate(94px, -22px) !important; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .8)) drop-shadow(0 0 16px rgba(0, 0, 0, .55)) !important; } body.pjc-photo .site-header:not(.pjc-flottante) .pjc-barre .menu-toggle { transform: translate(34px, -7px) !important; } body.pjc-photo .site-header:not(.pjc-flottante) .pjc-barre .main-navigation.toggled ul.menu { right: -34px !important; } body.pjc-photo .menu-toggle { background: rgba(0, 0, 0, .28) !important; -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; } } /* ===================================================================== LOGO DE LA BARRE — VERSION SANS FOND 18/09/2026 --------------------------------------------------------------------- La barre affichait logo_PJC_VALIDE_OK_ALLGOOD, la marque sur un disque marine : le disque se voyait sur le fond de la barre, et a 76 px dans une barre de 86 il ne restait que 5 px de marge — Etienne l'a vu comme un debordement. On passe a logo_PJC_sansfond02 (id 19797), la version tout doree deja employee dans la banniere : la meme marque partout. Le reglage custom_logo du theme n'est PAS touche — il alimente aussi la vignette de repli des articles sans image. On remplace ici a l'affichage seulement : l'img est masquee, le lien porte le fichier en fond. Cadrage, meme methode que dans la banniere : le fichier est carre (2560) alors que la marque occupe 65,5 % de la largeur et 74,25 % de la hauteur, decalee de 20,25 % a gauche et 8,5 % en haut. marque 60 px -> image 81 px (60 / 0,7425), boite 53 x 60, decalage -16 px (-0,2025 x 81) et -7 px (-0,085 x 81) Valeurs ENTIERES, sinon le navigateur reechantillonne et les traits fins deviennent flous. On sert la taille 300 de la mediatheque et non le fichier de 2560 : 17 Ko au lieu de 210, et une reduction douce au lieu d'une division par quarante, qui mange les traits fins. translateY(-6px) : centrage OPTIQUE, valide par Etienne. La marque a son socle « CONCEPT » en bas et sa fleche qui monte a droite, donc sa masse visuelle est basse — centree geometriquement elle parait tomber. Specificite : la regle des 76 px (.pjc-defile / .pjc-compact) compte quatre classes et porte !important. Celle-ci en compte autant et vient apres, c'est l'ordre qui tranche — ne pas la deplacer plus haut. ===================================================================== */ /* Selecteur volontairement redondant (classe repetee) : il ne doit PAS dependre de l'ordre du fichier. La regle des 76 px a la meme specificite, et sur l'iPhone d'Etienne le logo sortait a 76 px, deborde vers le bas — quelque chose reordonne les regles avant de les servir (LiteSpeed sait generer une feuille optimisee distincte pour mobile). En repetant la classe on gagne par specificite, quel que soit l'ordre. */ body .site-header .pjc-barre .site-branding a.custom-logo-link.custom-logo-link { width: 53px !important; height: 60px !important; max-width: 53px !important; max-height: 60px !important; border-radius: 0 !important; background-image: url("https://www.pianojazzconcept.com/wp-content/uploads/2026/09/logo_PJC_sansfond02-300x300.png") !important; background-size: 81px 81px !important; background-position: -16px -7px !important; background-repeat: no-repeat !important; /* L'ESPACE VIENT D'ICI, PAS DE LA BARRE (18/09/2026). Sur le Safari d'Etienne (iPhone X) la barre reste a 64 px : ni sa hauteur, ni son min-height, ni son padding ne prennent — alors que les regles de ce logo-ci s'appliquent, elles (fichier, taille, cadrage : tout est juste sur ses captures). On met donc la marge sur l'element dont on sait qu'il obeit, et hors media-requete pour ne dependre de rien. Ou la barre a une hauteur fixe, le centrage absorbe ces marges et rien ne change ; la ou elle se dimensionne sur son contenu, elles creent l'espace. 60 + 13 + 13 = 86, la hauteur voulue. La remontee optique de 6 px est retiree : elle ne s'appliquait pas sur son telephone de toute facon, et Etienne avait prefere le centrage franc en la voyant a l'oeuvre. */ margin-top: 13px !important; margin-bottom: 13px !important; } body .site-header .pjc-barre .site-branding img.custom-logo.custom-logo { display: none !important; } /* Barre du telephone : 86 px et centrage franc du logo (18/09/2026). Le logo y paraissait colle en haut — la remontee optique de 6 px, reglee au bureau, pesait trop lourd sur une barre vue de pres. Essais avec Etienne : 96 px (12/24), 90 px avec -3 (12/18), puis 86 px avec -1 (12/14), valide. A 12/14 la correction ne fait plus rien : on la retire, le centrage franc donne 13/13, indiscernable, et une regle de moins. Ne vaut PAS pour l'accueil : sa barre est transparente et ne porte pas de logo, lui donner de la hauteur reprendrait de la place a la photo. */ /* (La surcharge mobile du transform a ete retiree le 18/09/2026 : il n'y a plus de transform a annuler.) */ /* Hauteur de la barre du telephone rendue INDEPENDANTE (18/09/2026). Sur l'iPhone d'Etienne le logo restait colle au bas du bandeau, que je ne reproduis ni dans l'emulateur a 375 ni a 430. Mesure sur sa capture, a l'echelle donnee par la largeur de l'image produit : logo 60 px — donc la regle du logo s'applique bien — mais bandeau 67 px au lieu de 86. C'est la HAUTEUR de la barre qui ne prend pas, pas le logo ; 67 correspond a la hauteur naturelle du contenu, comme si « height » etait ignore. Plutot que de chercher qui l'ignore, on cesse d'en dependre : un min-height et surtout un PADDING vertical, qui cree l'espace meme si la hauteur imposee saute. Selecteur redondant pour ne pas dependre non plus de l'ordre du fichier. */ @media (max-width: 767px) { body .site-header .pjc-barre.pjc-barre { box-sizing: border-box !important; min-height: 86px !important; padding-top: 13px !important; padding-bottom: 13px !important; } } /* ===================================================================== SURVOL DES VIGNETTES DE COURS (18/09/2026) La grille LearnDash de la page Cours etait la seule grille du site sans reaction au survol. On reprend exactement le geste des vignettes produits : la carte se souleve de 3 px, l'image grandit de 3 %. Une difference : article.course porte overflow:hidden, donc une ombre posee sur l'image serait rognee — elle va sur la carte. ===================================================================== */ .ld-course-list-items article.course { transition: transform .25s ease, box-shadow .25s ease; } .ld-course-list-items article.course img.wp-post-image { transition: transform .3s ease; } .ld-course-list-items article.course:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .13); } .ld-course-list-items article.course:hover img.wp-post-image { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .ld-course-list-items article.course, .ld-course-list-items article.course img.wp-post-image { transition: none; } .ld-course-list-items article.course:hover, .ld-course-list-items article.course:hover img.wp-post-image { transform: none; } }