@charset "UTF-8"; /* --------------------------------------------------------------------------------------------- titres-seo.css — brique « titres-seo » (JulienWeb, 03/10/2026). Servie seulement sur l'accueil, /artist/, /event/, /agenda-event//, /agenda-artist//, /news/ et /news-en/ (brique.php, jws_titres_seo_file), après les feuilles du thème et commun.css. Seuls sélecteurs du thème touchés : les quatre marges du paragraphe 1 bis (06/10), qui ne valent que juste après une rubrique. 1. Le cartouche de rubrique, en h1 ou en h2 : l'allure du h3 du thème 1 bis. L'air autour du cartouche : trois gabarits et /artist/ ramenés à la mesure du site 2. La ligne de l'accueil : la phrase en h1, sous le carrousel --------------------------------------------------------------------------------------------- */ /* -- 1. Le cartouche de rubrique ---------------------------------------------------------------- Le thème habille le h3 (style.css, mesuré le 03/09 puis relu le 03/10) : h1…h6 { font-family: 'Poppins', serif; font-weight: 800 } .section-row h3 { background: #312783; color: #fff; font-size: 22px; text-transform: uppercase; display: inline-block; padding: 10px 15px; position: absolute; top: -45px } .a-propos-post h3 idem, top: -52px (le mur des artistes) Le mur des artistes ne suit plus sa règle (05/10) : -52 px le posait 7 px plus haut que les autres rubriques de l'accueil, le filet à 30 px du haut du cartouche au lieu de 23. Il prend ici le dessin de .section-row h3, comme les actus et l'agenda. Deux choses ne sont pas écrites dans ces règles et font pourtant le rendu : - la marge par défaut du h3, 1em, donc 22 px ici : le cartouche est en réalité à -45 + 22 = -23 px. Un h1 a 0,67em de marge, un h2 0,83em : sans la marge écrite ci-dessous, le cartouche remonterait de 7 px et de 4 px ; - l'interligne hérité de .section-row et de .a-propos-post (1.425em, soit 22,8 px en longueur héritée) : le cartouche mesure 42,8 px de haut, il est hérité de la même façon par un h1. Le cartouche est centré par son parent, une rangée flex en justify-content: center : sa position horizontale n'est pas écrite ici non plus. Téléphone d'abord. Sous 576 px, « AGENDA KADER TARHANINE » en 22 px mesure 380 px : le h3 du thème sort de l'écran. Ici le cartouche est ancré par le BAS sur le filet (même position au pixel pour un titre d'une ligne : 19,8 px sous le filet) ; un titre long passe à la ligne et grandit vers le haut, dans la marge de la rubrique. À partir de 576 px, ce sont les règles de .section-row h3, à la lettre. */ .jws-titres-seo-cartouche { position: absolute; top: auto; bottom: 100%; display: inline-block; box-sizing: border-box; /* déjà la règle du thème (bootstrap-grid : * { box-sizing: inherit }) */ max-width: calc(100% - 20px); margin: 0 0 -19.8px; padding: 10px 15px; background: var(--jws-indigo, #312783); color: var(--jws-sur-indigo, #fff); font-family: 'Poppins', serif; font-size: 22px; font-weight: 800; /* la graisse du h3 du thème, pas un gras de plus */ text-align: center; text-transform: uppercase; overflow-wrap: anywhere; } @media (min-width: 576px) { .jws-titres-seo-cartouche { top: -45px; bottom: auto; max-width: none; margin: 22px 0; /* la marge par défaut du h3 de 22 px */ text-align: inherit; overflow-wrap: normal; } } /* -- 1 bis. L'air autour du cartouche (06/10/2026) ----------------------------------------------- Le thème pose le contenu à 49 px du filet : 1 px de filet, 1em de marge intérieure dans .section-row-content, 2em sous .section-row, et le bloc suivant commence là. Le cartouche descendant à 19,8 px sous le filet, il a 29,2 px d'air au-dessous : c'est la mesure de l'accueil (artistes, vidéos, agenda, carte), des fiches et de /news/. Trois gabarits y ajoutaient une marge à eux (relevé du 06/10 à 1280 et 375 px, FR et EN, outils/mesure_cartouches.mjs) ; ils reviennent à 29,2 px : - accueil, « news » : .news-home a 2em de marge intérieure haute 61,2 px - /event/ : le h4 de la colonne des années garde sa marge par défaut (1.33em) 50,5 px - /agenda-event// et /agenda-artist// : le bouton de retour, .is-btn-jelly, a 7 px de marge 36,2 px Au-dessus : en tête de page, les gabarits du thème écrivent un
avant la rubrique, d'où 31 px entre l'en-tête et le cartouche. /artist/ n'a pas ce
et n'en laissait que 9 : sa marge haute passe de 2em à 54 px (les 32 px, plus les 22 px de la ligne vide). */ .section-row ~ .news-home { padding-top: 0; } .section-row + .container .col-md-4 > .event-annees-nav:first-child > h4:first-child, .section-row + .container .col-md-4 > .is-btn-jelly:first-child { margin-top: 0; } .post-type-archive-artist .artist-wall { margin-top: 54px; } /* -- 2. La ligne de l'accueil ------------------------------------------------------------------- Sous le carrousel, avant le mur des artistes : rien n'est posé sur la photo. Une ligne fine, en Poppins 400 (la graisse des titres d'actu en liste), indigo sur blanc (12,01:1), centrée. Le thème met tous les h1 en 800 : la graisse est ramenée à 400 ici. La tesselle orange est décorative (pseudo-élément, rien à lire) : une au-dessus de la phrase tant qu'elle peut passer à la ligne, une de chaque côté quand elle tient sur une ligne. Pas de marge basse : le mur des artistes qui suit apporte la sienne (2em + 2em). */ .jws-titres-seo-accueil { margin: 0; padding: 20px 16px 0; text-align: center; } .jws-titres-seo-accueil__phrase { max-width: 44em; margin: 0 auto; padding: 0; color: var(--jws-indigo, #312783); font-family: var(--jws-police-titre, 'Poppins', 'Open Sans', sans-serif); font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: .01em; } .jws-titres-seo-accueil__phrase::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto 12px; rotate: 45deg; /* « rotate », pas « transform » : la grammaire du thème */ background-color: var(--jws-orange, #f39200); } @media (min-width: 768px) { .jws-titres-seo-accueil { padding-top: 26px; } .jws-titres-seo-accueil__phrase { font-size: 18px; } } @media (min-width: 992px) { .jws-titres-seo-accueil__phrase::before, .jws-titres-seo-accueil__phrase::after { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 16px; vertical-align: .14em; rotate: 45deg; background-color: var(--jws-orange, #f39200); } }