/* Atelier Pollen — styles du thème. Les couleurs, tailles et espacements viennent de theme.json ; on ne trouve ici que ce qu'un theme.json ne sait pas exprimer : la géométrie de la barre, les déroulants et les états. Toute valeur écrite en dur ci-dessous est une dette qui rouvrira l'écart avec le mockup. */ /* ---------------------------------------------------------------- Socle -- */ html { -webkit-text-size-adjust: 100%; } /* Le mockup fige la page en clair. Un thème bloc expose sinon un mode sombre automatique qui casserait la palette crème. */ :root { color-scheme: light only; } /* La barre est collante : sans cette marge, une ancre amène le titre visé sous la barre au lieu de le poser dessous. */ [id] { scroll-margin-top: var(--wp--custom--barre--hauteur); } /* ---------------------------------------------------------------- Barre -- */ /* Une seule navigation, à toutes les largeurs. Le rail latéral de la v119 a été retiré : c'était un schéma de site éditorial et non de commerce, et il imposait trois systèmes différents — rail, barre, panneau — pour un même site. */ /* Le collant d'un élément est borné par son bloc conteneur, et celui de la barre était le
du template part : 113px de haut. La barre se décollait donc après 36px de défilement et quittait l'écran avec lui — ensuite le rail d'ancres, lui, restait seul en haut de la fenêtre. Dans le prototype la barre est fille de et tient sur toute la page. « display: contents » retire la boîte du gabarit sans toucher au balisage : la barre devient fille de .wp-site-blocks, haute de toute la page, et le collant porte jusqu'en bas. Le rôle « banner » ne se perd pas — .ap-barre est elle-même un
. */ .wp-site-blocks > header.wp-block-template-part { display: contents; } /* Sans cela, l'écart entre blocs de theme.json s'appliquerait aux deux morceaux désormais promus enfants directs de .wp-site-blocks, et glisserait 34px entre le bandeau d'annonce et la barre. */ .ap-annonce, .ap-barre { margin-block-start: 0; } /* Le même écart tombait à l'autre bout de la page, entre la dernière section et le pied. Là il ne se contentait pas d'espacer : le pied est à l'encre forêt et les sections de fin sont beiges, si bien que les 34px laissaient voir le crème du corps — une bande claire en travers de la page, qui se lit comme un défaut de chargement plutôt que comme une respiration. L'en-tête était déjà traité, le pied avait été oublié. */ .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; } /* Et le même écart encore, cette fois entre les sections d'une page. Quatre bandes claires sur l'accueil, dont une entre deux sections beiges — le crème du corps par-dessous, visible dans l'interstice. Ces sections-là peignent leur fond et posent leur propre rembourrage vertical : quatre-vingts pixels en haut pour la boutique et le tableau des taux, autant ailleurs. Les trente-quatre de WordPress ne s'y ajoutent pas, ils s'y intercalent, et la couleur du corps passe entre deux aplats qui devraient se toucher. Le prototype les fait se toucher. La liste est nommée plutôt que balayée d'un « > * » : « .ap-enveloppe », qui est l'autre enfant direct qu'on trouve à ce niveau, porte le texte courant des pages légales, où l'écart entre blocs a sa raison d'être. Le « .is-layout-flow > » n'est pas décoratif. WordPress pose l'écart par « :root :where(.is-layout-flow) > * », qui pèse une seule classe — autant qu'une classe seule de cette liste. À poids égal c'est l'ordre qui tranche, et ses styles en ligne sont écrits après cette feuille : la liste nue perdait. On reprend donc son conteneur, ce qui fait deux classes et désigne exactement l'endroit où l'écart est posé. */ .is-layout-flow > .ap-heros, .is-layout-flow > .ap-boutique, .is-layout-flow > .ap-socle, .is-layout-flow > .ap-puissance, .is-layout-flow > .ap-prix, .is-layout-flow > .ap-faq, .is-layout-flow > .ap-taux, .is-layout-flow > .ap-page-hero, .is-layout-flow > .ap-chapitre-gamme { margin-block-start: 0; } .ap-barre { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; /* La hauteur de la barre n'est pas seulement décrite par cette variable : le rail d'ancres et les ancres de titres s'y calent. Elle doit donc faire loi, faute de quoi un bouton de recherche qui grandit d'un pixel décale silencieusement tout ce qui se range dessous. */ min-height: var(--wp--custom--barre--hauteur); box-sizing: border-box; background: var(--wp--preset--color--creme); border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--encre) 10%, transparent); transition: transform .28s ease; } .ap-barre__liens { display: flex; align-items: center; gap: 26px; /* Un cran au-dessus du « ui » du prototype, à la demande du client : les quatre entrées sont la seule navigation du site, elles méritent d'être lues sans effort. On reste sur l'échelle de theme.json — « body », le cran suivant — plutôt que d'écrire 15px en dur. */ font-size: var(--wp--preset--font-size--body); font-weight: 500; color: var(--wp--preset--color--encre); /* Les blocs prennent toute la hauteur de la barre pour que le déroulant s'ouvre pile sous elle. Sans ce débordement des 16px de rembourrage, « top:100% » tombe au-dessus du filet et laisse un interstice où le survol se perd. */ align-self: stretch; align-items: stretch; margin-block: -16px; } .ap-barre__liens > li { position: relative; display: flex; align-items: center; } .ap-barre__liens a { padding-block: 4px; text-decoration: none; } /* ----------------------------------------------------------- Déroulants -- */ /* Sans déroulant, les références et les gammes ne seraient atteignables nulle part depuis la barre. */ .ap-barre__liens .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container, .ap-barre__liens .wp-block-navigation__submenu-container { top: calc(100% + 1px); left: -16px; min-width: 206px; padding-block: 10px; background: var(--wp--preset--color--creme); border: 1px solid color-mix(in srgb, var(--wp--preset--color--encre) 12%, transparent); border-radius: var(--wp--custom--rayon--surface); z-index: 45; } /* ---------------------------------------------------------------- Icônes -- */ .ap-barre__icones { display: flex; align-items: center; gap: 18px; } .ap-barre__icones .ap-icone { width: 18px; height: 18px; opacity: .8; transition: opacity .16s ease; } .ap-barre__icones a:hover .ap-icone, .ap-barre__icones a:focus-visible .ap-icone { opacity: 1; } /* --------------------------------------------------------------- Mobile -- */ /* 900px et non 782px : c'est la largeur où les quatre entrées, le logo et les trois icônes cessent de tenir sur une ligne. Le point de rupture par défaut de WordPress laisserait la barre se tasser entre les deux. */ @media (width <= 900px) { .ap-barre { padding: 16px 22px; } .ap-barre__liens { display: none; } /* La barre s'escamote en descendant et revient en remontant. Sur un écran de téléphone elle mange sinon un dixième de la hauteur utile en permanence. Réservé au mobile : sur grand écran la place ne manque pas et une barre qui disparaît désoriente plus qu'elle ne sert. */ .ap-barre.est-repliee { transform: translateY(-100%); } } /* ------------------------------------------------------------- Titrage -- */ /* Anton porte déjà sa graisse ; la demander en gras déclenche une graisse synthétique que le navigateur fabrique en épaississant les contours. */ h1, h2, h3, h4 { font-synthesis: none; } /* --------------------------------------------------------------- Gamme -- */ /* Chaque gamme propage sa teinte en cascade : les éléments internes lisent --gamme sans savoir laquelle est active. Ajouter une gamme ne demande alors qu'une règle de plus ici. */ .ap-gamme--fleurs { --gamme: var(--wp--preset--color--fleurs); --gamme-encre: var(--wp--preset--color--fleurs-encre); } .ap-gamme--pressees { --gamme: var(--wp--preset--color--pressees); --gamme-encre: var(--wp--preset--color--pressees); } .ap-gamme--enrichies { --gamme: var(--wp--preset--color--enrichies); --gamme-encre: var(--wp--preset--color--enrichies); } .ap-gamme--innovations { --gamme: var(--wp--preset--color--innovations); --gamme-encre: var(--wp--preset--color--innovations); } .ap-gamme__surtitre { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--gamme-encre, var(--wp--preset--color--encre)); text-transform: uppercase; letter-spacing: .18em; } /* --------------------------------------------------------- Accessibilité -- */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ap-barre { transition: none; } } /* -------------------------------------------------------------- Annonce -- */ /* Bandeau d'annonce, au-dessus de la barre. Livraison et analyses : les deux objections que se pose un acheteur de CBD avant toute autre. */ .ap-annonce { padding: 9px 20px; background: var(--wp--preset--color--encre); color: color-mix(in srgb, var(--wp--preset--color--creme) 80%, transparent); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); letter-spacing: .03em; text-align: center; } .ap-annonce p { margin: 0; } /* ----------------------------------------------------------- Enveloppe -- */ /* Reprise du .wrap du mockup. Les sections occupent toute la largeur et recentrent leur contenu elles-memes : c'est le modele du prototype, et il evite d'avoir a faire passer alignfull a travers post-content, ou le bloc retombait a la largeur de contenu par defaut. */ .ap-enveloppe { max-width: 1180px; margin-inline: auto; padding-inline: 40px; } @media (width <= 900px) { .ap-enveloppe { padding-inline: 22px; } } /* ---------------------------------------------------------------- Héros -- */ /* Le héros touche la barre. L'écart entre blocs de theme.json — 34px — est posé par « :where(.wp-site-blocks) > * » sur le
de l'accueil, et glissait une bande de crème entre le filet de la barre et la photo. Le prototype n'en a pas ; à cette place, la moindre bande se lit comme un défaut de chargement. La règle porte sur .ap-accueil, qui n'existe que sur l'accueil : les autres gabarits gardent l'écart, qui leur va. */ .ap-accueil { margin-block-start: 0; } .ap-heros { position: relative; padding-bottom: 52px; /* L'ecart entre blocs de theme.json inserait 34px entre la photo et la plaque, a rebours du chevauchement qu'on cherche. */ --wp--style--block-gap: 0; } /* Le prototype fige deux hauteurs franches et non une interpolation : 82svh au-dessus de 900px, 42svh en deçà. Le clamp qui tenait ici rendait 378px sur un écran de 900 de haut — la moitié de la photo attendue, et un héros qui ne portait plus la page. svh et non vh : sur téléphone, vh compte la barre d'adresse escamotable, et la photo déborde d'autant à l'arrivée. */ .ap-heros__bandeau { height: 42svh; overflow: hidden; } .ap-heros__bandeau, .ap-heros__bandeau figure { margin: 0; } .ap-heros__bandeau img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* La plaque remonte sur la photo : c'est ce chevauchement qui fait tenir la composition, pas la photo seule. La remontee porte sur l'enveloppe et non sur la plaque : une marge negative posee sur la plaque fusionne avec celle de son parent, qui n'a ni bordure ni rembourrage haut pour l'en separer, et ne deplace alors plus rien. */ .ap-heros .ap-enveloppe { position: relative; z-index: 2; margin-top: -104px; } .ap-heros__plaque { max-width: 660px; padding: 36px 40px 38px; background: var(--wp--preset--color--blanc-casse); } .ap-heros__surtitre { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); color: color-mix(in srgb, var(--wp--preset--color--encre) 50%, transparent); text-transform: uppercase; letter-spacing: .12em; } /* La seule taille hors de l'échelle des sept : le titre du héros est une affiche, pas un niveau de titre, et il doit suivre la largeur de l'écran. */ .ap-heros__titre { margin: 12px 0 18px; font-size: clamp(30px, 3.6vw, 50px); color: var(--wp--preset--color--encre); } /* Exclut le surtitre : dans le prototype c'est un , donc epargne par une regle visant les paragraphes. Ici tout est paragraphe, et sans cette exclusion le surtitre passait de 11,5 a 18px. */ .ap-heros__plaque p:not(.ap-heros__surtitre) { max-width: var(--wp--custom--justification--2); margin-bottom: 28px; font-size: var(--wp--preset--font-size--lead); line-height: 1.6; color: color-mix(in srgb, var(--wp--preset--color--encre) 70%, transparent); } /* Au-dessus de 900px, la plaque ne suit plus la photo : elle se pose dedans. Le heros fait alors 82svh en tout — la photo seule — et l'enveloppe vient se caler a 52px de son bas. C'est ce que fait le prototype, et c'est ce qui change tout : en flux, la plaque s'ajoutait a la photo et le heros pesait 1077px sur un ecran de 900 ; le titre et son bouton tombaient sous le pli alors qu'ils sont la raison d'etre du bandeau. La plaque se dimensionne sur son contenu plutot que sur 660px fixes : l'accroche tient sur deux lignes, jamais trois — « atelier » ne doit pas se retrouver seul en dessous — et c'est la plaque qui s'ajuste au titre, bornee a la colonne. */ @media (width >= 901px) { .ap-heros { padding-bottom: 0; } .ap-heros__bandeau { height: 82svh; } .ap-heros .ap-enveloppe { position: absolute; inset: auto 0 52px; margin-top: 0; } .ap-heros__plaque { width: max-content; max-width: 100%; } .ap-heros__titre { white-space: nowrap; } } /* Sous 900px, c'est le seuil qui commande : avec le bandeau d'annonce, la barre, un surtitre de trois lignes et un titre de trois, le bouton partait a 798px sur un ecran de 844. Le prototype tranche en trois gestes — la plaque mord 150px sur la photo au lieu de 56, le surtitre disparait, le paragraphe aussi. Les deux textes retires ne sont pas perdus : le paragraphe dit ce que les trois volets du recit redisent juste apres. */ @media (width <= 900px) { .ap-heros { padding-bottom: 34px; } .ap-heros .ap-enveloppe { margin-top: -150px; } .ap-heros__plaque { max-width: none; padding: 26px 24px 28px; } /* Restreint au héros. « .ap-heros__surtitre » porte le nom du bloc où le style est né, mais c'est le surtitre de tout le site : la boutique, la traçabilité, la grille tarifaire et la FAQ s'en servent aussi. Écrite sans portée, cette règle les effaçait tous les quatre sur téléphone — le prototype ne retire que celui du bandeau. */ .ap-heros .ap-heros__surtitre, .ap-heros__plaque p:not(.ap-heros__surtitre) { display: none; } } /* ------------------------------------------------------------ Recherche -- */ /* Le bloc Recherche de WordPress rend un bouton plein, herite du style des boutons du theme. Dans la barre il doit etre une icone posee parmi les autres, pas un pave sombre. */ .ap-barre__icones .wp-block-search__button { padding: 0; background: transparent; border: 0; color: var(--wp--preset--color--encre); opacity: .8; transition: opacity .16s ease; } .ap-barre__icones .wp-block-search__button:hover, .ap-barre__icones .wp-block-search__button:focus-visible { background: transparent; opacity: 1; } /* Le bouton est un conteneur flex, et son contenu s'y calait en haut : la colonne fait 44px — c'est le champ de saisie masqué qui la dimensionne — alors que l'icône n'en fait que dix-huit. La loupe flottait donc neuf pixels au-dessus du compte et du panier, qui sont, eux, centrés. */ .ap-barre__icones .wp-block-search__button { align-items: center; justify-content: center; } /* « min-width » autant que « width » : WordPress pose un plancher de 24px sur cette icône, et un plancher l'emporte sur la largeur demandée. La règle avait donc l'air correcte et ne changeait rien — la loupe restait d'un tiers plus grosse que les deux autres pictogrammes. */ .ap-barre__icones .wp-block-search__button svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; fill: currentColor; } .ap-barre__icones .wp-block-search { margin: 0; } /* La loupe rejoint le compte et le panier sur leur cible tactile. Le champ masqué donnait déjà 44px de haut, mais dix-huit de large : trois pictogrammes côte à côte dont un seul se manque au doigt. */ @media (pointer: coarse) { .ap-barre__icones .wp-block-search__button { min-width: 44px; min-height: 44px; } } /* ------------------------------------------------------------- Boutique -- */ .ap-boutique { padding: 80px 0 104px; } /* Hors de l'échelle des sept, comme le titre du héros : à cette place le texte est une affiche et suit la largeur de l'écran. */ .ap-boutique__titre { max-width: none; margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -.02em; } /* En ch et non en px : la mesure qui compte pour la lisibilité est le nombre de caractères par ligne, pas une largeur absolue. */ .ap-boutique__chapo { max-width: 54ch; margin: 0 0 34px; font-size: 15.5px; line-height: 1.62; opacity: .84; } /* --------------------------------------------------------------- Ancres -- */ /* La barre reste accrochée pendant la descente : on sait toujours dans quelle gamme on se trouve. Elle ancre, elle ne filtre pas — les quatre gammes restent affichées à la suite. */ .ap-ancres { position: sticky; /* Le rail se glisse de 16px sous la barre : son filet supérieur passe derrière elle, et les deux bandes se lisent comme une seule pièce. Posé pile à la hauteur de la barre, il laissait paraître une ligne entre les deux. */ top: calc(var(--wp--custom--barre--hauteur) - 16px); z-index: 30; /* Flex, comme le