/* ========================================================================= NOVA POTENTIEL · raccord entre les blocs de Gutenberg et la maquette ========================================================================= La seule feuille propre au thème. tokens.css et site.css sont des copies conformes de la maquette et ne sont jamais retouchées : tout l'écart entre ce que la maquette écrit à la main et ce que WordPress produit se règle ici. Le principe est constant : les gabarits posent sur les blocs les classes de la maquette (.hero__stage, .rcards, .rcard__media, .pill), et cette feuille rattache le balisage que WordPress ajoute autour (.wp-block-post-template, .wp-block-post-featured-image, figure, ul, li). Sections : 01 · Neutralisations du gabarit de blocs 02 · Barre de navigation 03 · La une 04 · Grilles d'articles 05 · Pilule de lien, version sans balisage interne 06 · Page article 07 · Pagination, recherche, aperçus d'éditeur ========================================================================= */ /* ========================================================================= 01 · NEUTRALISATIONS ========================================================================= */ /* WordPress enveloppe la page dans .wp-site-blocks et pose un écart entre les blocs de premier niveau. Sans cette remise à zéro, un blanc de 24px s'installe entre la barre de navigation et la une, et la barre, qui est en hauteur nulle, ne se superpose plus à la photo. Le
des gabarits demande la même chose, et c'est ce qui manquait : les sections y sont enfants d'un conteneur de flux, donc chacune recevait à son tour les 24px de `:root :where(.is-layout-flow) > *`. La une descendait de 24px, et toute la page derrière elle. La maquette donne à chaque section sa propre respiration en padding, il n'y a rien à ajouter entre elles. */ .wp-site-blocks > *, .wp-site-blocks > main > * { margin-block-start: 0; margin-block-end: 0; } /* Même chose dans les conteneurs que site.css met en flex ou en grille : l'écart vient du gap, la marge automatique des blocs le doublerait. Les sélecteurs de WordPress sont écrits en :where(), de spécificité nulle, donc ces règles simples les emportent sans !important. */ .topbar__inner > *, .hero__copy > *, .hero__kicker > *, .head > *, .post__intro > *, .post__title > *, .post__meta > *, .post__facts > *, .post__split > *, /* La rangée du pied de page en est : sans cette ligne, le noyau posait 32px de marge haute sur les réseaux et sur les liens, mais pas sur la mention légale qui ouvre la rangée. Alignés au centre, les trois ne tombaient donc pas sur la même ligne, la mention restait une douzaine de pixels au-dessus. */ .foot__rule > *, .rcards > .wp-block-post > * { margin-block-start: 0; margin-block-end: 0; } /* La barre collante doit être posée sur l'enveloppe de la partie de modèle, et non sur .topbar. Un élément sticky ne peut se décaler qu'à l'intérieur de son bloc conteneur : .topbar a une hauteur nulle, par dessein, donc l'enveloppe qui l'entoure en a une aussi, et le décalage de 32px se trouvait écrasé à zéro. La barre se collait au bord haut de la fenêtre au lieu de flotter à 32px comme dans la maquette. Sur l'enveloppe, le bloc conteneur est .wp-site-blocks, assez haut pour que le décalage passe. */ header.wp-block-template-part { position: sticky; top: var(--s-8); z-index: 50; } .topbar { position: static; } /* Les figures de WordPress arrivent avec les marges de la feuille du noyau. */ .wp-block-post-featured-image { margin: 0; } .wp-block-post-featured-image a { display: block; height: 100%; } /* La boucle d'articles est une liste : ni puce, ni retrait. */ .wp-block-post-template { margin: 0; padding: 0; list-style: none; } /* ========================================================================= 02 · BARRE DE NAVIGATION ========================================================================= */ /* Le bloc Logo du site remplace le de la maquette : c'est son image qui porte la hauteur, la largeur suit. max-width: none annule la largeur que le bloc écrit en style en ligne. */ .topbar .wp-block-site-logo { margin: 0; } .topbar .wp-block-site-logo img { height: 52px; width: auto; max-width: none; } /* Le bloc Navigation produit nav > ul > li > a là où la maquette écrivait nav > a. Les déclarations sont celles de .nav a dans site.css. */ .nav .wp-block-navigation__container { display: flex; align-items: center; gap: var(--s-3); } .nav .wp-block-navigation-item__content { padding: 10px var(--s-4); /* Sans cette ligne, « Bien-être physique » se coupe en deux dans la barre : la maquette écrivait un seul par rubrique, dont le contenu ne pouvait pas se replier. Le bloc Navigation, lui, empile un ul et des li qui se replient volontiers. */ white-space: nowrap; font-size: var(--t-body); color: var(--ink); border-radius: var(--r-chip); text-decoration: none; transition: background .18s ease; } .nav .wp-block-navigation-item__content:hover { background: rgba(255, 255, 255, .55); text-decoration: none; } .nav .wp-block-navigation-item__content[aria-current] { font-weight: 700; } /* Les deux boutons du menu, ouvrir et fermer, reprennent l'allure du .burger de la maquette, en rond : la maquette dessine un bouton qui porte le mot « Menu », le bloc Navigation n'a qu'une icône de 24px, et les 20px de padding horizontal la laissaient flotter dans un rectangle de 64. Le seuil de WordPress est à 600px, celui de la maquette à 1200 : quatre intitulés de rubrique ne tiennent pas dans la barre en dessous. On rejoue donc la bascule à 1199, ce qui suppose de masquer le rail et de montrer le bouton. */ /* Pas de `display` ici : au-dessus de 600px le noyau met le bouton d'ouverture hors jeu, et une déclaration commune le rallumerait jusque sur desktop, à gauche du rail. Chacun reçoit son display là où il sert. */ .nav .wp-block-navigation__responsive-container-open, .nav .wp-block-navigation__responsive-container-close { width: 46px; height: 46px; padding: 0; align-items: center; justify-content: center; background: var(--card); border: 0; border-radius: var(--r-round); font-family: inherit; color: var(--ink); cursor: pointer; transition: background .18s ease; } .nav .wp-block-navigation__responsive-container-open:hover, .nav .wp-block-navigation__responsive-container-close:hover { background: var(--surface); } @media (max-width: 1199px) { .nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } /* Le bouton se pose à droite de la barre, où la maquette le range. WordPress porte le rail et le bouton dans un seul élément, .nav, que le space-between de .topbar__inner tient au milieu ; la maquette, elle, sépare les deux et met le bouton dans .topbar__end, à droite. Le rail replié, .nav ne contient plus que le bouton : la marge automatique pousse l'ensemble à droite et il retombe où la maquette le met. Le display est redonné ici parce que site.css cache .nav sous 1200px : là-bas .nav n'est que le rail, ici il porte aussi le bouton. */ .topbar__inner > .nav { display: flex; order: 1; } .topbar__inner > .nav .wp-block-navigation__responsive-container-open { display: flex; align-items: center; justify-content: center; } } /* Entre 768 et 1199, « Me contacter » est encore dans la barre. L'ordre est celui de la maquette, qui range son burger après le bouton contact : le bouton du menu ferme donc la barre, à tous les seuils. C'est ce qui permet à la croix du panneau de se caler dessus par une seule valeur, la seule chose qui la sépare du bord étant le padding droit de la barre. */ @media (min-width: 768px) and (max-width: 1199px) { .topbar__inner > .topbar__end { margin-left: auto; margin-right: var(--s-4); } } /* Sous 768 le bouton contact s'en va (site.css le cache) : sa boîte vide n'a plus lieu d'être, et elle fausserait le calage de la croix. */ @media (max-width: 767px) { .topbar__inner > .topbar__end { display: none; } .topbar__inner > .nav { margin-left: auto; } } /* Le menu déplié n'est plus la nappe plein écran du noyau mais un panneau posé sous la barre, à son aplomb et à sa largeur. .topbar__inner sert de repère : le panneau s'y cale par left et right à zéro, et le calc() sur top le décroche de la hauteur de la barre plus l'écart. Tout ce que le noyau pose pour sa nappe est donc défait : position fixed sur les quatre bords, z-index de 100000, padding en clamp(), et le fond blanc qu'il ne donne qu'au-dessus de 600px, ce qui laissait le panneau transparent sur téléphone. Le verre de la barre n'est pas repris : sous elle le panneau n'a plus la photo pour le porter, et du texte encre sur du blanc à 42 % posé sur une section claire ne tiendrait pas son contraste. Les sélecteurs portent .nav.wp-block-navigation parce que ceux du noyau montent à quatre classes. */ /* Le noyau verrouille le défilement de la page dès que le menu s'ouvre, par un overflow: hidden sur . C'est ce qu'il faut pour sa nappe plein écran, pas pour un panneau accroché à la barre, et l'effet de bord se voit : la barre de défilement disparaît, la fenêtre récupère ses ~15px, et tout ce qui est calé à droite, la barre et le panneau avec elle, s'élargit d'autant à l'ouverture. Le panneau est dans l'en-tête collant, il suit la page quand elle défile : il n'y a rien à verrouiller. */ html.has-modal-open { overflow: visible; } .topbar__inner { position: relative; } /* Et le bloc Navigation repasse en statique : le noyau lui pose un position: relative, et c'est donc lui qui servait de repère au panneau. Large du seul bouton, il le faisait sortir en colonne d'une lettre de large. */ .topbar__inner > .nav { position: static; } .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { position: absolute; top: calc(100% + var(--s-3)); right: 0; bottom: auto; left: 0; width: auto; /* Le noyau met le panneau en overflow: auto, ce qui rognerait la croix, qui en sort par le haut. Le débordement passe donc sur le contenu, qui est le seul à pouvoir s'allonger. */ overflow: visible; padding: var(--s-6); border-radius: 25px; background: var(--card); border: 1.5px solid var(--glass-edge); box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 10px 30px rgba(0, 0, 0, .10); color: var(--ink); z-index: 1; } /* La croix ne se pose pas dans le panneau mais à la place exacte du bouton du menu, dans la barre : c'est le même bouton qui change de signe, et non un second contrôle ailleurs. Le noyau la met déjà en absolu ; son repère est le panneau, il n'y a donc qu'à remonter d'où le panneau est descendu. · en hauteur : la moitié de la barre, plus la moitié de la croix (23px), plus l'écart qui décroche le panneau ; · en largeur : le bouton s'arrête au padding droit de la barre, la croix au bord du panneau. Le demi-pixel des deux côtés est le reliquat des filets de 1,5px, celui de la barre et celui du panneau, qui ne tombent pas sur la grille de pixels. Il est relevé à la capture : les deux boîtes occupent alors exactement les mêmes x 315..360 et y 42..85 en 390 de large. Le reste suit les jetons : si la hauteur de barre ou l'écart du panneau changent, le calage tient tout seul. */ /* Le repère de la croix doit être le panneau, et non le dialogue que le noyau glisse entre les deux avec un position: relative. Ce dialogue est posé dans la boîte de contenu du panneau : il décalait la croix des 24px de padding, dans les deux sens. */ .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: static; } .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; align-items: center; justify-content: center; top: calc(-1 * (var(--ctl-nav-h) / 2 + 23px + var(--s-3) + .5px)); right: calc(var(--s-3) - .5px); background: var(--card); z-index: 2; } @media (max-width: 767px) { .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { right: calc(var(--s-2) - .5px); } } /* Le bouton d'ouverture reste dans la barre pendant que le panneau est déplié, et le noyau ne lui donne pas de rôle de bascule : un second appui ne refermerait rien. Il s'efface donc, en visibility pour que la barre ne se réorganise pas derrière lui, et la croix reste le seul contrôle visible. */ .topbar__inner:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; } /* Dans le panneau, les liens s'empilent et prennent toute la largeur : la cible tactile va d'un bord à l'autre et non à la longueur du mot. Le noyau centre ce qu'il y met, puisque le rail est réglé sur « centre » dans la barre, et il remet le padding des liens à zéro dès que le menu est déplié : les deux sont défaits ici. La ligne réservée à la croix est prise sur le contenu. */ .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; /* Plus de ligne réservée à la croix, qui est remontée dans la barre : le padding du panneau suffit. C'est ici que se règle le débordement, faute de pouvoir le laisser sur le panneau. */ padding-top: 0; max-height: calc(100vh - var(--ctl-nav-h) - var(--s-15)); overflow-y: auto; } .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { flex-direction: column; align-items: stretch; gap: var(--s-1); width: 100%; } .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); font-size: 17px; white-space: normal; } .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { background: var(--surface); } /* ========================================================================= 03 · LA UNE ========================================================================= */ /* La une est un bloc Requête d'un seul article : la liste et son élément n'ont aucune épaisseur propre à donner. */ .hero .wp-block-post-template, .hero .wp-block-post { margin: 0; padding: 0; } /* .hero__bg est posé sur le bloc Image mise en avant, qui est une figure. Les déclarations de position viennent de site.css ; il reste à faire remplir la figure et son image, et à défaire la proportion que le bloc pose parfois. */ .hero__bg { height: 100%; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } /* Le titre de la une est un H2 depuis le passage sous WordPress : le H1 de la page est le nom du blog, invisible, en tête du gabarit. Les déclarations sont celles de .hero h1 dans site.css, jeton compris : --t-h1-une, et non --t-h1-art qui reste celui du titre de la page article. */ .hero .wp-block-post-title { font-size: var(--t-h1-une); font-weight: var(--fw-title); line-height: 1.1; letter-spacing: -.01em; color: #fff; margin: 0; text-wrap: balance; } /* Respiration sous le bloc de texte de la une, que WordPress supprimait. La maquette la donne par `margin-block: var(--s-10)` sur .hero__copy, soit 40px au-dessus et au-dessous. Mais le noyau écrit `:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }`, et .hero__copy est bien le dernier enfant de .hero__stage : cette règle pèse (0,2,0) contre (0,1,0) pour le sélecteur de la maquette, donc elle l'emportait et le bouton « Lire l'article » venait toucher le bord bas de la photo. La marge du haut, elle, tenait : elle vient d'une règle en (0,1,0) que site.css emporte à l'ordre. D'où ce rétablissement, à spécificité égale et plus loin dans la cascade. */ .hero__stage > .hero__copy { margin-block-end: var(--s-10); } /* Rubrique et date dans la ligne de contexte : ce sont des blocs, ils ont leur propre marge et leur propre couleur de lien à défaire. */ .hero__kicker .wp-block-post-terms, .hero__kicker .wp-block-post-date, .hero__kicker .wp-block-novapotentiel-temps-lecture { margin: 0; font-size: var(--t-body); color: #fff; } .hero__kicker .wp-block-post-terms a { color: #fff; text-decoration: none; } .hero__kicker .wp-block-post-terms a:hover { text-decoration: underline; } /* ========================================================================= 04 · GRILLES D'ARTICLES ========================================================================= */ /* .rcards et .rcards--quad sont posés sur la liste de la boucle : la grille de site.css s'y applique telle quelle. Reste la carte, qui est un
  • et non un
    : voici les déclarations de .rcard. */ /* La marge est remise à zéro sur la carte elle-même, et pas seulement sur son contenu : WordPress pose un écart de 24px sur tous les éléments de liste sauf le premier, et dans une grille cette marge décale l'élément dans sa rangée. Résultat avant correction : la première carte de chaque grille montait de 24px au-dessus des trois autres. */ .rcards > .wp-block-post { position: relative; display: flex; flex-direction: column; margin-block-start: 0; margin-block-end: 0; } /* Titre de carte, déclarations de .rcard h3. Le lien couvre toute la carte, comme dans la maquette : un seul lien par carte, et le repère « Lire l'article » reste un texte, pas un second lien vers la même cible. */ .rcards .rcard__titre { font-size: var(--t-h3); font-weight: var(--fw-title-sm); letter-spacing: 0; line-height: 1.3; color: var(--ink); margin: var(--s-5) 0 var(--s-2); text-wrap: balance; } .rcards .rcard__titre a { color: inherit; text-decoration: none; } .rcards .rcard__titre a::after { content: ''; position: absolute; inset: 0; z-index: 3; } /* Chapô : la marge basse est l'écart minimal avant le repère de lecture, elle ne peut pas vivre sur le repère, dont la marge haute est le auto qui l'envoie en pied de carte. */ .rcards .wp-block-post-excerpt { margin: 0 0 var(--s-4); } .rcards .wp-block-post-excerpt p { margin: 0; font-size: var(--t-body); color: var(--muted); } /* Chapô de carte plafonné à trois lignes. La maquette n'en avait pas besoin, ses chapôs étaient écrits à la bonne longueur ; WordPress, lui, sert un extrait de longueur quelconque. Sans ce plafond, un chapô long allonge la carte et pousse le « Lire l'article » vers le bas, alors que les cartes voisines gardent le leur en place. La coupe de mots des gabarits (excerptLength) évite d'expédier du texte que personne ne verra ; ce plafond garantit la ligne, elle non. */ .rcards .wp-block-post-excerpt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .rcards .wp-block-post-excerpt__more-text { display: none; } .rcards .dotlink { margin-top: auto; margin-bottom: 0; } .rcards .dotlink::after { transition: transform .25s ease; } .rcards > .wp-block-post:hover .dotlink::after { transform: scale(1.6); } /* Rubrique encore vide : le message tient la place de la grille sans la faire disparaître, et se lit comme un texte secondaire. */ .section__vide { margin: 0; font-size: var(--t-body); color: var(--muted); } /* Le lien de fin de section est un paragraphe, il arrive avec ses marges. */ .section__all { margin: 0; } /* ========================================================================= 05 · PILULE DE LIEN, VERSION SANS BALISAGE INTERNE ========================================================================= */ /* La pilule de la maquette contient un et un . Dans un contenu que le client peut modifier, ce balisage ne survivrait pas : l'éditeur de blocs nettoie le HTML des blocs de texte à l'enregistrement et retirerait le SVG. D'où cette variante : un lien nu, la flèche dessinée en CSS. Le disque qui se propage au survol reste celui de .pill::before, mutualisé avec le reste du site. */ .pill--lien { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--ctl-btn-pad); padding-left: var(--s-5); border-radius: var(--r-pill); font-size: var(--t-body); font-weight: 700; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; transition: transform .18s ease, color .28s ease .08s; } .pill--lien::after { content: ''; flex-shrink: 0; width: var(--ctl-btn); height: var(--ctl-btn); border-radius: var(--r-round); background: var(--jade) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23141414'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20transform='rotate%2845%2012%2012%29'%3E%3Cpath%20d='M7%2017%2017%207'/%3E%3Cpath%20d='M8%207h9v9'/%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat; transition: transform .4s cubic-bezier(.22, 1, .36, 1); } .pill--lien:hover, .pill--lien:focus-visible { color: var(--pill-spread-fg); } .pill--lien:hover::after, .pill--lien:focus-visible::after { transform: translateX(2px); } /* Version verre de la une : le fond et le filet viennent de .pill--glass, la pastille se vide comme le fait .pill--hollow, et la flèche est blanche au repos puisqu'elle est alors posée sur le verre. Au survol le disque vert passe dessous, la flèche et le texte basculent en encre, comme partout. */ .pill--glass.pill--lien { color: #fff; } /* Pastille vidée, comme .pill--hollow dans la maquette : c'est le disque vert de .pill::before, calé dessous, qui la colore au repos. La flèche est donc en encre dès le repos, et non en blanc, qui tomberait à 1,9:1 sur ce vert. */ .pill--glass.pill--hollow.pill--lien::after { background: transparent url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23141414'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20transform='rotate%2845%2012%2012%29'%3E%3Cpath%20d='M7%2017%2017%207'/%3E%3Cpath%20d='M8%207h9v9'/%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat; } .pill--glass.pill--lien:hover, .pill--glass.pill--lien:focus-visible { color: var(--ink); } /* Le retrait à rattraper n'est pas le même que dans la maquette : .pill--lien n'a pas de span intérieur, son texte est en retrait des seuls 20px de son padding gauche. site.css tire le bloc de 18px, la valeur de la maquette ; voici les 20 d'ici. */ @media (max-width: 767px) { .section__all { margin-inline-start: calc(-1 * var(--s-5)); } } /* ========================================================================= 06 · PAGE ARTICLE ========================================================================= */ /* Chapô : le bloc Extrait est une div qui contient le paragraphe, les déclarations de .post__lead vont donc sur celui-ci. */ .post__lead { margin: 0; } .post__lead p { font-size: var(--t-lead); line-height: 1.6; color: var(--muted); margin: 0; max-width: 68ch; } /* Signature : le bloc Auteur donne un avatar et un nom là où la maquette avait une image, un nom en gras et un rôle en gris. Le rôle est la biographie du compte, affichée seulement si elle est remplie. */ .byline { margin: 0; } .byline .wp-block-post-author__avatar { margin: 0; } .byline .wp-block-post-author__avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: var(--img-filter); display: block; } .byline .wp-block-post-author__name { display: block; margin: 0; font-size: var(--t-body); font-weight: 700; color: var(--ink); line-height: 1.3; } .byline .wp-block-post-author__bio { margin: 0; font-size: var(--t-body); color: var(--muted); line-height: 1.3; } /* Date de publication : même pastille sans fond que le temps de lecture, avec le pictogramme calendrier de la maquette dessiné en CSS. */ .mchip.wp-block-post-date { margin: 0; } .mchip--date::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236F6F6F'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%2010h18M8%203v4M16%203v4'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } .post__facts .wp-block-novapotentiel-temps-lecture { margin: 0; } /* Visuel de tête : la figure doit remplir le cadre que .post__media dessine. */ .post__media img { width: 100%; height: 100%; object-fit: cover; } /* Corps de l'article : le bloc Contenu porte la classe .prose de la maquette, il ne reste qu'à défaire la largeur que WordPress lui donnerait. */ .prose.wp-block-post-content { max-width: none; } .prose > *:first-child { margin-top: 0; } /* Sommaire : le bloc pose lui-même