/* ═══════════════════════════════════════════════════════════════════════════ structure.css — LA GRAMMAIRE, ET RIEN DE LA MARQUE ═══════════════════════════════════════════════════════════════════════════ Ce fichier est la part RÉUTILISABLE du thème : dispositions, composants, états, transitions, points de rupture. Il ne contient AUCUNE valeur littérale de charte — ni couleur, ni nom de police. Tout passe par les jetons que `peau.css` définit. C'est ce qui rend le thème rhabillable, et ce n'est pas une préférence : un site né de ce montage avec une autre marque ne doit garder aucune trace de celle-ci. Cinq couleurs écrites en dur suffisaient à ce qu'il en reste. ⚠️ LA RÈGLE EST TENUE PAR UNE PORTE, pas par la bonne volonté. `rail-design-tokens` compte les couleurs écrites hors d'une déclaration de jeton, et depuis le 22.10.2026 un site absent de sa ligne de base est jugé à ZÉRO. Ajouter un `#` ici fait rougir la porte. L'ORDRE DE CHARGEMENT COMPTE : `peau.css` passe AVANT, puisqu'il déclare ce que celui-ci consomme. `functions.php` l'exprime par une dépendance, et non par l'ordre d'écriture des appels — WordPress est seul juge de l'ordre. ═══════════════════════════════════════════════════════════════════════════ */ /* ── les mesures de structure ────────────────────────────────────────────── Des LONGUEURS, pas des couleurs : elles appartiennent à la grammaire et non à la marque, donc elles vivent ici et non dans la peau. `--end-rail` est la première colonne des pages de texte — celle qui porte le titre de section pendant que le texte court à sa droite. Elle était recopiée à la main partout où quelque chose devait s'y aligner, et elle a changé trois fois. Tout ce qui s'y aligne la LIT désormais. */ :root { --end-rail: 13rem; /* La largeur d'une page de texte. Elle était écrite « 65rem » à deux endroits, dont l'exergue — c'est-à-dire la même duplication que le rail, au même endroit. */ --end-page: 65rem; } /* ── le socle ──────────────────────────────────────────────────────────── */ :where(a, button, input, summary):focus-visible { outline: 2px solid var(--wp--preset--color--turquoise-texte); outline-offset: 3px; } [hidden] { display: none !important; } /* ── l'en-tête, collant ────────────────────────────────────────────────── */ .sb-l-entete { background: var(--wp--preset--color--papier); padding-block: calc(var(--wp--custom--rythme) * 2.25); } .sb-l-entete.est-collant { position: sticky; inset-block-start: 0; z-index: 50; } .sb-l-entete.a-defile { border-bottom: 1px solid var(--wp--preset--color--filet); box-shadow: 0 6px 20px rgba(10, 10, 10, 0.06); } /* Le logo est posé par le THÈME, pas par la médiathèque : WordPress refuse le SVG, et un logo est de la marque, pas du contenu. */ .sb-c-marque::before { content: ""; flex-shrink: 0; width: 175px; height: 34px; background: var(--end-logo-verrou-horizontal) left center / contain no-repeat; } .sb-l-nav a { color: var(--wp--preset--color--encre); font-weight: 700; text-decoration: none; } .sb-l-nav a:hover { color: var(--wp--preset--color--turquoise-texte); } .sb-l-nav .sb-c-nav-accent a, .sb-l-nav a.sb-c-nav-accent { display: inline-flex; align-items: center; min-height: 44px; padding-inline: calc(var(--wp--custom--rythme) * 2.5); border-radius: var(--wp--custom--rayon-rond); background: var(--end-plein); color: var(--end-plein-texte); } /* ── la une, en deux colonnes ──────────────────────────────────────────── */ .sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; column-gap: calc(var(--wp--custom--gouttiere) * 2); padding-block: calc(var(--wp--custom--rythme) * 8) calc(var(--wp--custom--rythme) * 6); overflow: hidden; } .sb-s-apropos-tete, .sb-s-episode-tete { align-items: start; } /* ── L'ACCUEIL N'A PLUS DE VISUEL — 24.10.2026 ────────────────────────── * * La grille à deux colonnes du dessus sert AUSSI « À propos » et la fiche * d'épisode, qui gardent leur portrait et leur pochette. L'accueil est le * seul à passer en une colonne : la règle est donc posée sur sa classe à * lui, jamais sur la commune. * * ⚠️ LE TEXTE GARDE SA MESURE ; il ne s'étale pas sur la colonne large. * Au-delà de 75 signes par ligne l'œil décroche — c'est ce qui a été corrigé * sur « À propos » le 23.10.2026, et l'étaler ici serait refaire la même * erreur à l'autre bout du site. * * ── LE HAUT DE PAGE PART DU BORD GAUCHE — 24.10.2026 ── * * Il a été centré une demi-journée. Vu au téléphone, le bloc se contredisait : * surtitre et titre centrés, chapô et boutons au fer à gauche, parce que deux * règles plus bas leur rendent leur alignement (`text-align: start` sous * 30 rem pour le chapô, `justify-content: flex-start` pour les commandes). * Un seul bord d'attaque pour les quatre éléments : celui de gauche, le même * que partout ailleurs sur le site. */ .sb-s-accueil-une { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: start; } .sb-s-accueil-une > * { max-width: 46rem; } .sb-s-accueil-une .sb-c-chapo { margin-inline: 0; max-width: 54ch; } .sb-s-accueil-une .sb-c-abonner { justify-content: flex-start; } /* ⚠️ `balance` RESTE, MÊME AU FER À GAUCHE. Mesuré au rendu : « Transmettre ce * qu'on a / appris. » laissait « a » en fin de première ligne et un mot seul * en seconde. Le défaut venait de la coupure, pas du centrage : il survit à * l'alignement à gauche. `balance` répartit les lignes d'un titre court ; * `pretty` évite au chapô de finir sur un mot orphelin. Les deux sont ignorés * par un navigateur qui ne les connaît pas — le texte reste lisible, il est * seulement moins bien coupé. */ .sb-s-accueil-une .sb-c-titre { text-wrap: balance; } .sb-s-accueil-une .sb-c-chapo { text-wrap: pretty; } .sb-s-accueil-une::before { content: ""; position: absolute; inset-block-start: -22%; inset-inline-start: -14%; width: 46%; height: auto; aspect-ratio: 1; background: var(--end-logo-encre) center / contain no-repeat; opacity: 0.045; pointer-events: none; } .sb-s-accueil-une > *, .sb-s-apropos-tete > *, .sb-s-episode-tete > * { grid-column: 1; } .sb-c-visuel, .sb-c-portrait, .sb-c-pochette-episode { grid-column: 2; grid-row: 1 / span 9; align-self: center; margin: 0; } .sb-c-visuel img, .sb-c-pochette-episode img { display: block; width: 100%; height: auto; border-radius: calc(var(--wp--custom--rayon) + 6px); box-shadow: 0 18px 44px rgba(10, 10, 10, 0.14); } .sb-c-portrait img { display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; border-radius: 50%; } .sb-c-surtitre { font-size: var(--wp--preset--font-size--surtitre); font-weight: 700; letter-spacing: var(--wp--custom--interlettre-surtitre); text-transform: uppercase; color: var(--wp--preset--color--ambre-texte); margin-block-end: calc(var(--wp--custom--rythme) * 2.25); } .sb-s-accueil-une .sb-c-titre { font-size: var(--wp--preset--font-size--affiche); margin-block: 0 calc(var(--wp--custom--rythme) * 3); } .sb-s-apropos-tete .sb-c-titre, .sb-s-episode-tete .sb-c-titre { font-size: var(--wp--preset--font-size--titre-page); margin-block: 0 calc(var(--wp--custom--rythme) * 3); } .sb-s-legal .sb-c-titre, .sb-s-cgu .sb-c-titre, .sb-s-donnees-personnelles .sb-c-titre, .sb-s-cookies .sb-c-titre { font-size: var(--wp--preset--font-size--titre-page); margin-block-end: calc(var(--wp--custom--rythme) * 4); } .sb-c-chapo { max-width: 54ch; margin-block-end: calc(var(--wp--custom--rythme) * 4.5); font-size: calc(var(--wp--preset--font-size--corps) + 3px); color: var(--wp--preset--color--encre-douce); } .sb-c-numero, .sb-c-date, .sb-c-invite, .sb-c-duree { display: inline-block; margin-block: 0 calc(var(--wp--custom--rythme) * 1); margin-inline-end: calc(var(--wp--custom--rythme) * 2.5); font-size: var(--wp--preset--font-size--legende); color: var(--wp--preset--color--encre-douce); } /* ── LE lecteur ────────────────────────────────────────────────────────── */ .sb-s-accueil-lecteur, .sb-s-episode-lecteur { display: flex; align-items: center; gap: calc(var(--wp--custom--rythme) * 3.25); margin-block: calc(var(--wp--custom--rythme) * 2); padding: calc(var(--wp--custom--rythme) * 3.25); border-radius: calc(var(--wp--custom--rayon) + 6px); background: var(--end-l-fond); color: var(--end-l-texte); border: 2px solid var(--end-l-filet); box-shadow: var(--end-l-ombre); transition: padding 180ms ease, border-radius 180ms ease; } .sb-s-accueil-lecteur.est-compact, .sb-s-episode-lecteur.est-compact { position: fixed; inset-inline: max(16px, calc(50vw - 38rem + var(--wp--custom--marge))); inset-block-end: 16px; z-index: 40; gap: calc(var(--wp--custom--rythme) * 2); padding: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 2); border-radius: var(--wp--custom--rayon-rond); box-shadow: 0 12px 32px rgba(10, 10, 10, 0.26); } /* LA POCHETTE DU LECTEUR EST EN 16:9, PAS EN CARRÉ — 24.10.2026. * * Les six pochettes d'épisode sont produites en 16:9 ; le lecteur les * recadrait en carré, donc en coupait les bords. Et le hero portait EN PLUS * une grande carte 16:9 du même épisode, à droite du texte — deux visuels * pour une seule chose, et le haut de page pris par l'un d'eux. La carte est * descendue ici, à la place du carré. * * La forme COMPACTE reste carrée et ronde : c'est la barre flottante, et un * 16:9 de 44 px y serait illisible. `aspect-ratio: auto` est écrit parce * qu'une largeur et une hauteur explicites ne suffisent pas à le dire au * lecteur qui relit cette règle. */ .sb-c-pochette { flex-shrink: 0; width: 196px; margin: 0; } .sb-c-pochette img { display: block; width: 196px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: calc(var(--wp--custom--rayon) - 2px); } .est-compact .sb-c-pochette, .est-compact .sb-c-pochette img { width: 44px; height: 44px; aspect-ratio: auto; border-radius: 50%; } .est-compact .sb-c-surtitre { display: none; } .est-compact .sb-c-piste { margin: 0; font-size: var(--wp--preset--font-size--legende); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .est-compact .sb-c-jouer { width: 42px; height: 42px; } .est-compact .sb-c-jouer svg { width: 18px; height: 18px; } .sb-l-lecteur-corps { flex-grow: 1; min-width: 0; } .sb-s-accueil-lecteur .sb-c-surtitre, .sb-s-episode-lecteur .sb-c-surtitre { color: var(--end-l-accent); margin-block-end: calc(var(--wp--custom--rythme) * 0.875); } .sb-c-piste { margin-block: 0 calc(var(--wp--custom--rythme) * 2); font-family: var(--wp--preset--font-family--titre); font-weight: 600; font-size: var(--wp--preset--font-size--titre-fiche); } .sb-l-lecteur-piste { display: flex; align-items: center; gap: calc(var(--wp--custom--rythme) * 1.75); } .sb-l-lecteur-piste .sb-c-duree, .sb-c-temps { margin: 0; font-size: var(--wp--preset--font-size--legende); font-variant-numeric: tabular-nums; color: var(--end-l-douce); } .sb-c-barre { position: relative; flex-grow: 1; height: 5px; border-radius: 3px; background: var(--end-l-rail); cursor: pointer; } .sb-c-barre-remplie { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 3px; background: var(--wp--preset--color--turquoise); } .sb-c-jouer { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 60px; height: 60px; border: none; border-radius: var(--wp--custom--rayon-rond); background: var(--end-plein); color: var(--end-plein-texte); cursor: pointer; } /* ── une fiche d'épisode ───────────────────────────────────────────────── */ .sb-l-episodes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: calc(var(--wp--custom--rythme) * 2.75); align-items: center; margin-block-start: calc(var(--wp--custom--rythme) * 1.25); /* LA FICHE S'EST RESSERRÉE le 03.10.2026. Mesurée à 161 px, dont 39 pour la seule ligne de la pastille — un quart de la carte pour un mot. Le resserrement porte sur le rythme vertical, jamais sur les gouttières : une liste dense et illisible n'est pas un gain. */ padding: calc(var(--wp--custom--rythme) * 1.75) calc(var(--wp--custom--rythme) * 3); border-radius: var(--wp--custom--rayon); background: var(--wp--preset--color--carte); } .sb-l-episodes .sb-c-invite { grid-column: 1; grid-row: 1 / span 4; width: 64px; height: 64px; margin: 0; border-radius: 50%; overflow: hidden; } .sb-l-episodes .sb-c-invite img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; display: block; } .sb-l-episodes .sb-c-rubrique { grid-column: 2; grid-row: 1; margin: 0 0 calc(var(--wp--custom--rythme) * 0.375); } .sb-l-episodes .sb-c-rubrique::before { content: attr(data-rubrique); } .sb-l-episodes .sb-c-titre { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--wp--preset--font-size--titre-fiche); } .sb-l-episodes .sb-c-pitch { grid-column: 2; grid-row: 3; margin-block-start: calc(var(--wp--custom--rythme) * 0.375); } .sb-l-episodes .sb-c-fiche { grid-column: 2; grid-row: 4; margin-block-start: calc(var(--wp--custom--rythme) * 0.75); } .sb-l-episodes .sb-c-duree { grid-column: 3; grid-row: 1 / span 4; margin: 0; } .sb-l-episodes .sb-c-ecouter { grid-column: 4; grid-row: 1 / span 4; } .sb-c-pitch { font-size: var(--wp--preset--font-size--legende); color: var(--wp--preset--color--encre-douce); max-width: var(--wp--custom--colonne); } /* La pastille de rubrique. Texte ENCRE dessus, jamais du blanc : mesuré à 2,6 sur le turquoise et 2,0 sur le doré, quand il en faut 4,5. */ .sb-l-episodes .sb-c-rubrique, .sb-s-episode-tete .sb-c-rubrique { display: inline-block; padding: 5px 11px; border-radius: var(--wp--custom--rayon-petit); font-family: var(--wp--preset--font-family--titre); font-size: var(--wp--preset--font-size--legende); font-weight: 700; color: var(--end-plein-texte); background: var(--end-plein); justify-self: start; } .sb-l-episodes .sb-c-rubrique { padding: 2px 9px; font-size: 12px; letter-spacing: 0.01em; } /* 🔴 L'AMBRE NE PORTE PAS DE BLANC. Le passage des aplats au texte blanc, le 21.10.2026, a emporté cette pastille avec les autres : blanc sur ambre mesure 2,12, contre 9,34 pour l'encre. L'ambre est une couleur CLAIRE — elle suit la règle inverse du turquoise, et il faut l'écrire ici, sans quoi la prochaine bascule globale la reprendra. */ /* ⚠️ ET `encre` NE SUFFIT PAS NON PLUS. En mode sombre, `encre` se renverse en #E8EEF4 — presque blanc — pendant que l'ambre, lui, ne bouge pas : la pastille retombait à 1,81. Un aplat qui ne se renverse jamais prend un texte qui ne se renverse jamais, écrit en clair. */ .sb-c-rubrique.est-recit { background: var(--wp--preset--color--ambre); color: var(--end-sur-ambre); } .sb-c-rubrique.est-analyse { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--papier); } /* La quatrième rubrique est cernée plutôt que pleine : la palette n'a pas de quatrième ton accessible, et un aplat de plus se lirait comme une couleur choisie au hasard. Texte encre, donc contraste tenu. */ .sb-c-rubrique.est-chronique { background: var(--wp--preset--color--carte); color: var(--wp--preset--color--encre); box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--filet); } .sb-s-episode-tete .sb-c-rubrique { margin-block-end: calc(var(--wp--custom--rythme) * 2); } /* ══ LE BOUTON PLEIN SUIT `--end-plein`, PAS LES PRESETS ════════════════ `theme.json` le peint avec `turquoise-texte` + `sur-accent`. Les deux sont des presets, et `turquoise-texte` se renverse en sombre (#5CCFE3) quand `sur-accent` reste blanc : « Tous les épisodes » mesurait 1,83. La paire `--end-plein` / `--end-plein-texte` se renverse ENSEMBLE — c'est sa raison d'être. Le front s'y raccroche ici. `theme.json` GARDE ses presets, et ce n'est pas un doublon : l'éditeur de blocs ne charge pas cette feuille, et un `var(--end-plein)` écrit là-bas rendrait un bouton transparent dans l'écran d'édition. */ .wp-element-button, .wp-block-button__link { background-color: var(--end-plein); color: var(--end-plein-texte); } .sb-c-fiche .wp-block-button__link, .sb-c-fiche a { padding: 0; border: 0; background: transparent; color: var(--wp--preset--color--turquoise-texte); font-size: var(--wp--preset--font-size--legende); font-weight: 700; text-decoration: none; } .sb-c-fiche .wp-block-button__link:hover { text-decoration: underline; background: transparent; } .sb-c-ecouter .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 0; border: 0; border-radius: var(--wp--custom--rayon-rond); background: var(--end-plein); color: var(--end-plein-texte); } .sb-c-ecouter .wp-block-button__link::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-inline-start: 3px; } .sb-c-ecouter .wp-block-button__link:hover { background: var(--end-plein-survol); } /* ── les blocs de conversion ───────────────────────────────────────────── */ .sb-s-accueil-abonner, .sb-s-episode-abonner, .sb-s-apropos-appel { margin-block: calc(var(--wp--custom--rythme) * 5); padding: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 5); border-radius: calc(var(--wp--custom--rayon) + 6px); background: var(--wp--preset--color--carte); } .sb-s-apropos-appel { background: transparent; border: 1.5px solid var(--wp--preset--color--filet); } .sb-s-accueil-abonner .sb-c-chapo, .sb-s-episode-abonner .sb-c-chapo, .sb-s-apropos-appel .sb-c-chapo { margin-block-end: calc(var(--wp--custom--rythme) * 3.5); font-size: var(--wp--preset--font-size--corps); } .sb-c-voir .wp-block-button__link { min-height: 44px; padding-inline: 0; background: transparent; color: var(--wp--preset--color--turquoise-texte); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; } .sb-c-appel .wp-block-button__link { min-height: 52px; padding-inline: calc(var(--wp--custom--rythme) * 3.5); background: var(--end-plein); color: var(--end-plein-texte); border-radius: var(--wp--custom--rayon-rond); font-weight: 700; } .sb-c-appel .wp-block-button__link:hover { background: var(--end-plein-survol); } /* ── le contenu courant ────────────────────────────────────────────────── */ .sb-c-texte, .sb-c-mention { max-width: var(--wp--custom--colonne); } .sb-c-mention { color: var(--wp--preset--color--encre-douce); } .sb-l-liens > * { padding-block: calc(var(--wp--custom--rythme) * 1.5); border-bottom: 1px solid var(--wp--preset--color--filet); } /* ── le pied ───────────────────────────────────────────────────────────── */ .sb-l-pied { margin-block-start: calc(var(--wp--custom--rythme) * 10); padding-block: calc(var(--wp--custom--rythme) * 5) calc(var(--wp--custom--rythme) * 12); border-top: 1px solid var(--wp--preset--color--filet); color: var(--wp--preset--color--encre-douce); } .sb-c-pied-marque::before { content: ""; display: block; width: 110px; height: 76px; margin-block-end: calc(var(--wp--custom--rythme) * 1.5); background: var(--end-logo-verrou-vertical) left center / contain no-repeat; } .sb-l-pied-liens a { color: var(--wp--preset--color--encre-douce); text-decoration: none; } .sb-l-pied-liens a:hover { color: var(--wp--preset--color--encre); } /* ── la modale d'abonnement ────────────────────────────────────────────── */ .sb-c-modale { width: min(32rem, calc(100vw - 32px)); padding: 0; border: 0; border-radius: calc(var(--wp--custom--rayon) + 6px); background: var(--wp--preset--color--carte); color: var(--wp--preset--color--encre); } .sb-c-modale::backdrop { background: rgba(10, 10, 10, 0.55); } .sb-c-modale__corps { position: relative; padding: calc(var(--wp--custom--rythme) * 5) calc(var(--wp--custom--rythme) * 4.5); } .sb-c-modale__fermer { position: absolute; inset-block-start: calc(var(--wp--custom--rythme) * 2); inset-inline-end: calc(var(--wp--custom--rythme) * 2); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--encre-douce); cursor: pointer; } .sb-c-modale__titre { margin-block: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 1); font-size: var(--wp--preset--font-size--titre-section); font-family: var(--wp--preset--font-family--titre); } .sb-c-modale__chapo { margin-block: 0 calc(var(--wp--custom--rythme) * 3); color: var(--wp--preset--color--encre-douce); } .sb-l-plateformes--modale { display: flex; flex-direction: column; gap: calc(var(--wp--custom--rythme) * 1.25); list-style: none; padding: 0; margin: 0; } .sb-c-plateforme { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 60px; padding: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 2.5); border: 1.5px solid var(--wp--preset--color--encre); border-radius: var(--wp--custom--rayon); color: var(--wp--preset--color--encre); text-decoration: none; } .sb-c-plateforme:hover { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--papier); } .sb-c-plateforme:hover .sb-c-plateforme__note { color: var(--wp--preset--color--papier); } .sb-c-plateforme--nu { border-style: dashed; } .sb-c-plateforme__nom { font-family: var(--wp--preset--font-family--titre); font-weight: 700; } .sb-c-plateforme__note { font-size: var(--wp--preset--font-size--legende); color: var(--wp--preset--color--encre-douce); } /* ── le téléphone ──────────────────────────────────────────────────────── */ @media (max-width: 60rem) { .sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--wp--custom--rythme) * 4); } .sb-c-visuel, .sb-c-portrait, .sb-c-pochette-episode { grid-column: 1; grid-row: auto; order: -1; } .sb-s-accueil-une::before { inset-inline-start: -200px; } .sb-s-accueil-lecteur, .sb-s-episode-lecteur { flex-wrap: wrap; } .sb-s-accueil-lecteur.est-compact, .sb-s-episode-lecteur.est-compact { inset-inline: 12px; inset-block-end: 12px; } .sb-l-episodes { grid-template-columns: auto minmax(0, 1fr); } .sb-l-episodes .sb-c-invite { grid-row: 1 / span 2; } .sb-l-episodes .sb-c-pitch, .sb-l-episodes .sb-c-fiche { grid-column: 1 / -1; grid-row: auto; } .sb-l-episodes .sb-c-duree { grid-column: 1; grid-row: auto; } .sb-l-episodes .sb-c-ecouter { grid-column: 2; grid-row: auto; justify-self: end; } } /* ── LE CENTRAGE QUI N'EN ÉTAIT PAS UN ─────────────────────────────────── */ /* * Mesuré le 03.10.2026 sur un iPhone : dans chaque fiche, le titre et le lien * apparaissaient centrés alors qu'aucune règle ne le demandait. * * La cause : WordPress pose `is-layout-constrained` sur chaque groupe, et sa * feuille donne `margin-inline: auto` à TOUS les enfants directs. Dans un * conteneur en flux normal, ça centre un bloc plus étroit que son parent — * c'est l'effet voulu. Dans une GRILLE, ça centre chaque élément dans sa * cellule, et la mise en page part de travers sans qu'aucune règle à nous * ne soit en cause. * * On rend donc leur alignement aux enfants des groupes qu'on passe en grille * ou en flex. `max-width: none` pour la même raison : la feuille de WordPress * borne les enfants à la largeur de contenu. */ .wp-block-group.sb-l-episodes > *, .wp-block-group.sb-s-accueil-une > *, .wp-block-group.sb-s-apropos-tete > *, .wp-block-group.sb-s-episode-tete > *, .wp-block-group.sb-s-accueil-lecteur > *, .wp-block-group.sb-s-episode-lecteur > * { margin-inline: 0; max-width: none; justify-self: stretch; } .sb-c-chapo, .sb-c-pitch, .sb-c-texte, .sb-c-mention { max-width: var(--wp--custom--colonne); } /* ── LE LECTEUR COMPACT : une barre, pas une carte ─────────────────────── */ /* * Il doit tenir sur UNE ligne, quelle que soit la largeur. Sans `nowrap`, la * règle `flex-wrap: wrap` du téléphone s'applique aussi à lui et le bouton * de lecture passe en dessous : la barre occupait la moitié de l'écran. */ .sb-s-accueil-lecteur.est-compact, .sb-s-episode-lecteur.est-compact { flex-wrap: nowrap; align-items: center; gap: calc(var(--wp--custom--rythme) * 1.5); padding: 10px 10px 10px 14px; min-height: 0; } .est-compact .sb-l-lecteur-corps { min-width: 0; } .est-compact .sb-c-piste { margin: 0 0 4px; font-size: var(--wp--preset--font-size--legende); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .est-compact .sb-l-lecteur-piste { gap: calc(var(--wp--custom--rythme)); } .est-compact .sb-c-temps, .est-compact .sb-l-lecteur-piste .sb-c-duree { font-size: 12px; } .est-compact .sb-c-barre { height: 3px; } /* La barre fixe recouvre la fin de la page : on lui fait sa place. */ body.a-lecteur-compact { padding-block-end: 96px; } @media (prefers-reduced-motion: reduce) { .sb-s-accueil-lecteur, .sb-s-episode-lecteur { transition: none; } } /* ── LE TÉLÉPHONE, REPRIS ──────────────────────────────────────────────── */ @media (max-width: 60rem) { .sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete { padding-block: calc(var(--wp--custom--rythme) * 3) calc(var(--wp--custom--rythme) * 4); } /* Le symbole en filigrane déborde et brouille la pochette : on le coupe. */ .sb-s-accueil-une::before { display: none; } .sb-s-accueil-une .sb-c-titre { font-size: clamp(32px, 9vw, 44px); } /* La fiche : la photo tient deux rangs, le reste suit en pleine largeur. */ .sb-l-episodes { grid-template-columns: 56px minmax(0, 1fr); column-gap: calc(var(--wp--custom--rythme) * 1.75); row-gap: 2px; padding: calc(var(--wp--custom--rythme) * 2); align-items: start; } .sb-l-episodes .sb-c-invite, .sb-l-episodes .sb-c-invite img { width: 56px; height: 56px; } .sb-l-episodes .sb-c-invite { grid-column: 1; grid-row: 1 / span 2; } .sb-l-episodes .sb-c-rubrique { grid-column: 2; grid-row: 1; justify-self: start; } .sb-l-episodes .sb-c-titre { grid-column: 2; grid-row: 2; } .sb-l-episodes .sb-c-pitch { grid-column: 1 / -1; grid-row: 3; margin-block-start: calc(var(--wp--custom--rythme) * 1.5); } .sb-l-episodes .sb-c-fiche { grid-column: 1 / -1; grid-row: 4; } .sb-l-episodes .sb-c-duree { grid-column: 1; grid-row: 5; align-self: center; margin-block-start: calc(var(--wp--custom--rythme) * 1.5); } .sb-l-episodes .sb-c-ecouter { grid-column: 2; grid-row: 5; justify-self: end; margin-block-start: calc(var(--wp--custom--rythme) * 1.5); } /* Une fiche sans invité : la colonne de la photo disparaît. */ .sb-l-episodes:not(:has(.sb-c-invite)) { grid-template-columns: minmax(0, 1fr); } .sb-l-episodes:not(:has(.sb-c-invite)) > * { grid-column: 1; } .sb-s-accueil-abonner, .sb-s-episode-abonner, .sb-s-apropos-appel { padding: calc(var(--wp--custom--rythme) * 4) calc(var(--wp--custom--rythme) * 2.5); } /* LA CARTE DE L'ÉPISODE GARDE SON RAPPORT À TOUTES LES LARGEURS. * Elle était carrée ici (72 × 72) du temps où elle portait la jaquette * de la marque. Elle porte maintenant la pochette de l'épisode, qui est * produite en 16:9 : une hauteur écrite recadrait de nouveau l'image. * Seule la LARGEUR change aux ruptures ; `aspect-ratio` fait le reste. */ .sb-c-pochette, .sb-c-pochette img { width: 152px; } .est-compact .sb-c-pochette, .est-compact .sb-c-pochette img { width: 40px; height: 40px; } .sb-c-jouer { width: 52px; height: 52px; } .est-compact .sb-c-jouer { width: 40px; height: 40px; } .est-compact .sb-c-jouer svg { width: 16px; height: 16px; } .sb-l-pied { padding-block-end: calc(var(--wp--custom--rythme) * 14); } } @media (max-width: 30rem) { .sb-s-accueil-lecteur, .sb-s-episode-lecteur { gap: calc(var(--wp--custom--rythme) * 2); padding: calc(var(--wp--custom--rythme) * 2); } .sb-c-pochette, .sb-c-pochette img { width: 120px; } /* AU TÉLÉPHONE, LE TITRE PREND LA LARGEUR QUI RESTE — ET IL LUI EN FAUT. * * Trois colonnes — carte, titre, bouton — tiennent jusqu'à 480 px. En * dessous, la carte en prend 120 et le bouton 52 : mesuré à 320 px, il * restait 44 px au titre, soit « Mehdi, Universal / Fitness, / sa propre / * légende » sur cinq lignes. * * Le bouton monte donc d'un rang, à côté du surtitre, et le titre s'étend * jusqu'au bord. Le même titre tient alors sur 112 px à 320 px et 179 px à * 390 px — sans toucher ni à la carte ni à la hauteur du bloc. */ .est-compact .sb-c-temps { display: none; } .est-compact .sb-l-lecteur-piste .sb-c-duree { display: none; } } /* ── L'EN-TÊTE RÉTRÉCIT QUAND ON DÉFILE ────────────────────────────────── */ .sb-l-entete { transition: padding 160ms ease; } .sb-l-entete .sb-c-marque::before { transition: width 160ms ease, height 160ms ease; } .sb-l-entete.a-defile { padding-block: calc(var(--wp--custom--rythme) * 1.25); } .sb-l-entete.a-defile .sb-c-marque::before { width: 140px; height: 27px; } @media (prefers-reduced-motion: reduce) { .sb-l-entete, .sb-l-entete .sb-c-marque::before { transition: none; } } /* ── LE LECTEUR EN GRAND, SUR TÉLÉPHONE ────────────────────────────────── */ /* * En colonne, il faisait 400 px de haut : pochette, textes, puis le bouton * centré tout en bas. Deux rangs valent mieux — la pochette et le bouton * encadrent le titre, la barre passe dessous sur toute la largeur. */ @media (max-width: 60rem) { .sb-s-accueil-lecteur, .sb-s-episode-lecteur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: calc(var(--wp--custom--rythme) * 2); row-gap: calc(var(--wp--custom--rythme) * 1.5); align-items: center; } .sb-s-accueil-lecteur .sb-c-pochette, .sb-s-episode-lecteur .sb-c-pochette { grid-column: 1; grid-row: 1 / span 2; } /* 🔴 LA BARRE N'A JAMAIS ÉTÉ UN ÉLÉMENT DE CETTE GRILLE — 24.10.2026. * * Le commentaire au-dessus annonce « la barre passe dessous sur toute la * largeur », et la règle `grid-column: 1 / -1` le dit aussi. Elle ne portait * sur rien : `lecteur.js` emboîte `.sb-l-lecteur-piste` DANS * `.sb-l-lecteur-corps`, et un placement de grille ne traverse pas un * parent. La barre vivait donc dans la colonne du milieu, et sa largeur * valait ce que la pochette et le bouton lui laissaient. * * Mesuré en ligne au téléphone : 11 px une fois la pochette passée en 16:9 * (120 px au lieu de 72). Inutilisable — et déjà trop étroite avant, à * 59 px, sans que personne l'ait mesurée. * * `display: contents` rend les enfants du corps à la grille. Les placements * qui suivent disent alors ce qu'ils ont toujours prétendu dire. * * ⚠️ PAS SOUS LA FORME COMPACTE : la barre flottante du bas est un `flex` * d'une seule ligne, et lui rendre ces enfants-là casserait sa mise en * ligne. */ .sb-s-accueil-lecteur:not(.est-compact) .sb-l-lecteur-corps, .sb-s-episode-lecteur:not(.est-compact) .sb-l-lecteur-corps { display: contents; } .sb-l-lecteur-piste { grid-column: 1 / -1; grid-row: 3; } .sb-c-jouer { grid-column: 3; grid-row: 2; } .sb-s-accueil-lecteur .sb-c-surtitre, .sb-s-episode-lecteur .sb-c-surtitre { grid-column: 2 / -1; grid-row: 1; font-size: 11px; margin-block-end: 4px; } /* Colonne 2 seule, et non « 2 / -1 » : le corps rendu à la grille, le * titre passerait SOUS le bouton de lecture qui occupe la colonne 3. */ .sb-c-piste { grid-column: 2; grid-row: 2; margin-block-end: 0; font-size: var(--wp--preset--font-size--corps); } /* La forme compacte reprend la main : une seule ligne. */ .sb-s-accueil-lecteur.est-compact, .sb-s-episode-lecteur.est-compact { display: flex; } } /* ── L'INTERLIGNE DES TITRES, POSÉ ICI ─────────────────────────────────── */ /* * `theme.json` le déclare dans `elements.h1`, et WordPress ne l'applique pas * à un titre qui porte une classe. Mesuré le 03.10.2026 : le titre de la une * s'affichait avec l'interligne du corps — deux lignes séparées par un vide * de la hauteur d'une troisième. */ .sb-c-titre, .sb-c-piste, .sb-c-modale__titre { line-height: var(--wp--custom--interligne-titre); letter-spacing: var(--wp--custom--interlettre-titre); } .sb-c-pitch, .sb-c-chapo, .sb-c-mention, .sb-c-texte { line-height: var(--wp--custom--interligne); } /* ── LES COMMANDES S'ALIGNENT À GAUCHE ─────────────────────────────────── */ /* * `wp:buttons` se rend en flex et centre son contenu par défaut. Un appel à * l'action qui flotte au milieu d'une colonne de texte alignée à gauche ne * se lit pas comme la suite de la phrase. */ .sb-c-abonner, .sb-c-appel, .sb-c-voir, .sb-c-fiche, .sb-c-ecouter, .sb-l-plateformes { justify-content: flex-start; } .sb-c-abonner .wp-block-button__link { min-height: 52px; padding-inline: calc(var(--wp--custom--rythme) * 3.5); border-radius: var(--wp--custom--rayon-rond); background: var(--end-plein); color: var(--end-plein-texte); font-weight: 700; } .sb-c-abonner .wp-block-button__link:hover { background: var(--end-plein-survol); } /* La une : les deux commandes sur une ligne, le lien à côté du bouton. */ .sb-s-accueil-une .sb-c-abonner { margin-block-start: calc(var(--wp--custom--rythme) * 1); } .sb-s-accueil-une .sb-c-voir { margin-block-start: calc(var(--wp--custom--rythme) * 2); } /* ── LE FILIGRANE, PLUS DISCRET ────────────────────────────────────────── */ /* * À 5 % et posé derrière le titre, les deux arcs se lisaient comme des taches * grises. Il descend sous le texte et perd encore un peu d'encre. */ .sb-s-accueil-une::before { inset-block-start: auto; inset-block-end: -28%; inset-inline-start: -10%; width: 38%; opacity: 0.035; } @media (max-width: 60rem) { .sb-s-accueil-une::before { display: none; } } /* ── LES ENFANTS DE LA UNE OCCUPENT LEUR COLONNE ───────────────────────── */ /* * Mesuré : le surtitre, le bouton et le lien se rétrécissaient à la largeur * de leur texte et se centraient dans la cellule, alors que `justify-self` * calculait bien `stretch` et que les marges étaient nulles. Le titre et le * paragraphe, eux, remplissaient la colonne. * * On ne cherche plus d'où vient le rétrécissement : on donne la largeur. * `width: 100%` sur un élément de grille est sans effet de bord ici — la * colonne est déjà bornée par `minmax(0, …fr)`. */ /* Le filigrane n'était plus qu'une tache grise. Il part. */ .sb-s-accueil-une::before { content: none; } /* Le témoin du lecteur : une hauteur, sinon la bascule ne se déclenche pas. */ .end-l-lecteur-ancre { height: 1px; } /* ── UNE FICHE SANS INVITÉ ─────────────────────────────────────────────── */ /* * Deux épisodes sur six sont des solos : pas d'invité, donc pas de photo. * La colonne de gauche disparaît — mais si on se contente de la retirer, la * durée et le bouton retombent dans la même cellule et se superposent. * Mesuré le 03.10.2026 : « 12:18 » s'affichait derrière le bouton de lecture. * Il faut donc REPLACER chaque enfant, pas seulement enlever une colonne. */ .sb-l-episodes:not(:has(.sb-c-invite)) { grid-template-columns: minmax(0, 1fr) auto; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-rubrique, .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-titre, .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-pitch, .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-fiche { grid-column: 1 / -1; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-rubrique { grid-row: 1; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-titre { grid-row: 2; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-pitch { grid-row: 3; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-fiche { grid-row: 4; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-duree { grid-column: 1; grid-row: 5; justify-self: start; align-self: center; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-ecouter { grid-column: 2; grid-row: 5; justify-self: end; } /* Sur grand écran, la fiche sans invité garde une seule ligne. */ @media (min-width: 60.01rem) { .sb-l-episodes:not(:has(.sb-c-invite)) { grid-template-columns: minmax(0, 1fr) auto auto; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-rubrique, .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-titre, .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-pitch, .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-fiche { grid-column: 1; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-duree { grid-column: 2; grid-row: 1 / span 4; align-self: center; } .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-ecouter { grid-column: 3; grid-row: 1 / span 4; align-self: center; } } /* /* /* ── POURQUOI IL N'Y A PLUS DE RUSTINE D'ALIGNEMENT ICI ───────────────── */ /* * Pendant une heure, le 03.10.2026, cette feuille a porté des `width: 100%` * et des marges forcées pour empêcher chaque élément de se centrer dans sa * cellule de grille. Aucune ne traitait la cause. * * La cause : les groupes compilés portaient `"layout":{"type":"constrained"}`, * et WordPress en tire `margin-left: auto !important` sur tous leurs enfants. * Dans une grille, ces marges absorbent l'espace libre et centrent tout — * et `!important` les rend imbattables depuis une feuille. * * `tools/composer-entredonner.py` retire maintenant la contrainte des seules * sections qu'on dessine en grille. Les autres la gardent : c'est elle qui * tient la mesure de lecture. * * Si l'alignement repart de travers un jour, c'est là qu'il faut regarder, * pas ici. */ .sb-s-accueil-une::before { content: none; } /* ── L'ALIGNEMENT, LÀ OÙ IL EST VOULU ──────────────────────────────────── */ /* * Par défaut, un élément de grille s'ÉTIRE dans sa cellule : c'est ce qu'il * faut pour un titre ou un paragraphe. `justify-self: start` le ferait au * contraire se rétrécir à son contenu — utile pour une pastille, néfaste * pour du texte. On ne le pose donc que sur ce qui est un objet. */ .sb-l-episodes > .sb-c-rubrique { justify-self: start; } .sb-l-episodes > .sb-c-duree { justify-self: start; } .sb-l-episodes > .sb-c-ecouter { justify-self: end; } .sb-s-episode-tete > .sb-c-rubrique { justify-self: start; } @media (max-width: 60rem) { .sb-l-episodes > .sb-c-duree { justify-self: start; } .sb-l-episodes > .sb-c-ecouter { justify-self: end; } } /* ── LES PLATEFORMES, AVEC LEURS VRAIES COULEURS ───────────────────────── */ /* * Les marques gardent leur couleur — c'est à ça qu'on les reconnaît d'un * coup d'œil, et c'est ce que demandent leurs chartes respectives. Le reste * de la ligne, lui, reste au dessin de la maison. * * ⚠️ Ces pictogrammes sont des REDESSINS simplifiés. Avant la mise en ligne, * chaque plateforme fournit ses propres fichiers de badge et impose des * règles d'usage — c'est là qu'il faudra les prendre. */ .sb-c-plateforme { display: flex; flex-direction: row; align-items: center; gap: calc(var(--wp--custom--rythme) * 2); min-height: 64px; } .sb-c-plateforme__icone { display: inline-flex; flex-shrink: 0; } .sb-c-plateforme__icone svg { display: block; border-radius: 6px; } .sb-c-plateforme__texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* ── LA BARRE : TROIS COMMANDES, ET LE TITRE EN BULLE ──────────────────── */ /* * En barre, le titre complet ne tient pas et le tronquer n'apprend rien. Il * passe en bulle, au survol et au focus clavier — et au doigt, en touchant * la pochette. Les trois commandes prennent la place : précédent, lecture, * suivant. */ .sb-c-saut { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--encre); cursor: pointer; } .sb-c-saut:hover:not(:disabled) { background: color-mix(in srgb, var(--wp--preset--color--encre) 10%, transparent); } .sb-c-saut:disabled { opacity: 0.3; cursor: default; } .est-compact .sb-c-saut { display: inline-flex; } .est-compact .sb-c-piste { display: none; } .sb-c-bulle { display: none; position: absolute; inset-block-end: calc(100% + 10px); inset-inline-start: 50%; transform: translateX(-50%); max-width: min(22rem, 80vw); padding: 8px 12px; border-radius: var(--wp--custom--rayon-petit); background: var(--wp--preset--color--encre); color: var(--wp--preset--color--papier); font-size: var(--wp--preset--font-size--legende); line-height: 1.35; text-align: center; box-shadow: 0 8px 22px rgba(10, 10, 10, 0.3); pointer-events: none; } .est-compact { position: fixed; } .est-compact:hover .sb-c-bulle, .est-compact:focus-within .sb-c-bulle, .est-compact.montre-bulle .sb-c-bulle { display: block; } /* En grand, le titre est écrit : la bulle n'a rien à dire. */ .sb-s-accueil-lecteur:not(.est-compact) .sb-c-bulle, .sb-s-episode-lecteur:not(.est-compact) .sb-c-bulle { display: none; } /* ── LE PIED, RANGÉ ────────────────────────────────────────────────────── */ .sb-l-pied-rang { gap: calc(var(--wp--custom--rythme) * 5); align-items: flex-start; } .sb-l-pied-mot { max-width: 34ch; } .sb-c-pied-marque::before { content: ""; display: block; width: 150px; height: 42px; margin-block-end: calc(var(--wp--custom--rythme) * 2); background: var(--end-logo-verrou-horizontal) left center / contain no-repeat; } .sb-c-pied-marque { margin-block-end: calc(var(--wp--custom--rythme) * 2); } .sb-c-pied-legal { color: var(--wp--preset--color--encre-douce); opacity: 0.8; } .sb-l-pied-liens .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: calc(var(--wp--custom--rythme) * 1.25); } /* ── MOINS D'AIR ───────────────────────────────────────────────────────── */ /* * Mesuré sur téléphone : entre un titre et son paragraphe, l'écart atteignait * 60 px — l'écart de bloc de WordPress (24) s'ajoutait aux marges propres de * chaque élément. L'écart global descend à 14 px, et les sections reprennent * la main sur leur rythme. */ .sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete { padding-block: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 4); } .sb-s-apropos-texte, .sb-s-apropos-pour-qui, .sb-s-episode-notes, .sb-s-accueil-episodes { padding-block: calc(var(--wp--custom--rythme) * 3); } .sb-c-surtitre { margin-block-end: calc(var(--wp--custom--rythme) * 1.5); } .sb-s-accueil-une .sb-c-titre { margin-block: 0 calc(var(--wp--custom--rythme) * 2); } .sb-c-chapo { margin-block-end: calc(var(--wp--custom--rythme) * 3); } .sb-c-texte p { margin-block: calc(var(--wp--custom--rythme) * 1.75); } /* Les méta d'un épisode tiennent sur une ligne. */ .sb-c-meta { margin-block: calc(var(--wp--custom--rythme) * 1) calc(var(--wp--custom--rythme) * 2); font-size: var(--wp--preset--font-size--legende); color: var(--wp--preset--color--encre-douce); } /* ── LE NOM CACHÉ À L'ŒIL, PAS AU LECTEUR D'ÉCRAN ──────────────────────── */ /* * Le verrou du pied est une image de fond : elle ne porte aucun texte pour * une synthèse vocale. Le nom existe donc en clair dans le document, et * seule la vue le cache. */ .sb-c-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sb-c-pied-marque { position: relative; display: block; } .sb-c-pied-marque::before { width: 190px; height: 38px; } /* ── L'EN-TÊTE : UNE LIGNE, UN SEUL BOUTON ─────────────────────────────── */ /* * Trois pastilles bordées pesaient autant que le logo et passaient à la * ligne sur un téléphone — l'en-tête faisait 124 px de haut. Deux liens de * texte et UNE pastille suffisent : seul « s'abonner » est une action, le * reste est de la navigation. Tout tient sur une ligne, partout. */ .sb-l-entete { padding-block: calc(var(--wp--custom--rythme) * 2); } .sb-l-entete-rang { flex-wrap: nowrap; gap: calc(var(--wp--custom--rythme) * 2); } /* La rangée est en `space-between` et porte TROIS enfants, donc la navigation se retrouvait suspendue au milieu — à 708 px sur une rangée de 112 à 1328. Une marge automatique avale tout l'espace libre avant que `justify-content` ne s'applique : la marque reste à gauche, les trois ronds viennent se ranger contre l'interrupteur de thème, séparés du seul `gap`. Demande du 22.10.2026. La marge est logique (`inline-start`), pas `left` : le jour où une version arabe arrive, le bloc bascule tout seul. ⚠️ LE SÉLECTEUR DOIT ÊTRE DESCENDANT, UNE SEULE CLASSE NE SUFFIT PAS. WordPress sert `.is-layout-flex > :is(*, div) { margin: 0 }`, et ce `:is(*, div)` n'est pas une maladresse : `:is()` prend la spécificité de son argument le plus fort, donc le `div` lui en donne (0,1,1) là où une classe seule plafonne à (0,1,0). `.sb-l-nav { margin-inline-start: auto }` perdait en silence — la règle était bien dans la feuille, la marge calculée valait 0. Mesuré par `CSS.getMatchedStylesForNode`, parce que la géométrie seule disait « rien n'a bougé » sans dire pourquoi. */ .sb-l-entete-rang > .sb-l-nav { margin-inline-start: auto; } .sb-c-marque::before { width: 168px; height: 33px; } .sb-l-nav .wp-block-navigation__container { flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: calc(var(--wp--custom--rythme) * 2.5); } /* ══ LES TROIS ONGLETS SONT DES RONDS, COMME L'INTERRUPTEUR DE THÈME ══════ Demande du 21.10.2026. Trois mots côte à côte prenaient 175 px de la barre et obligeaient à deux paliers de rétrécissement de police ; trois ronds de 40 px en prennent 136, quel que soit l'écran, et rien ne rapetisse. LE NOM N'EST PAS SUPPRIMÉ, IL EST DÉPLACÉ. C'est le `__label` lui-même qui devient l'infobulle — pas une chaîne recopiée dans le CSS, qu'un client ne pourrait plus corriger, et pas un `aria-label` qui doublerait le texte. Le mot reste donc le nom accessible du lien, et il reste éditable. ⚠️ `opacity` SEULE, JAMAIS `visibility: hidden` NI `display: none`. Les deux autres sortent l'élément de l'arbre d'accessibilité : le lien n'aurait alors plus aucun nom, et trois ronds muets se suivraient dans un lecteur d'écran. Une transparence, elle, ne retire rien à personne. L'INFOBULLE S'ANCRE SUR L'ONGLET, ET C'EST WORDPRESS QUI LE DÉCIDE. Le `__content` garde `position: static`, mais le `
  • ` au-dessus porte `position: relative` — c'est le bloc de navigation du cœur qui le pose sur `.wp-block-navigation-item`. Le bloc contenant de l'infobulle est donc l'onglet, pas la rangée, et chaque nom tombe sous son propre rond. Un commentaire antérieur affirmait l'inverse — « ancrée sur la rangée » — et il était faux : vérifié le 22.10.2026 en remontant la chaîne des ancêtres positionnés. Ne remets pas `.sb-c-onglet` en `static` en croyant que ça ne change rien : les trois noms iraient se superposer au bord droit de la barre. Ça tient parce que les ronds sont maintenant à droite et que l'infobulle s'étend vers la gauche : les quinze positions — trois onglets × 320, 360, 390, 430 et 1440 px — sont entièrement dans l'écran, mesurées au survol. */ .sb-l-nav { position: relative; } /* ══ UNE SEULE ÉCHELLE POUR TOUTES LES PASTILLES DE L'EN-TÊTE ═══════════ 🔴 Mesuré en ligne le 24.10.2026 : l'interrupteur de thème n'a JAMAIS eu la taille des onglets, à aucune largeur. 1440 px onglets 42 interrupteur 40 (−2) 430 px onglets 38 interrupteur 40 (+2) 390 px onglets 38 interrupteur 30 (−8) Deux causes, et aucune n'est une faute de frappe. Les onglets étaient en `content-box` — 40 px de boîte PLUS 1 px de bordure de chaque côté font 42 — quand le bouton, étant un `