/** * Pearl Theme — styles non exprimables dans theme.json. * * Règle : si une valeur peut vivre dans theme.json, elle y vit. Ce fichier ne * contient que des états d'interaction, du comportement de défilement et des * décorations — jamais de couleur ni de taille en dur. * * Voir docs/adr/0004-interactions-et-animations.md. */ /* ------------------------------------------------------------------------- * 1. Interactions — vocabulaire commun (ADR-0004) * ---------------------------------------------------------------------- */ :where(a, button, .wp-block-button__link, summary) { transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease), background-color var(--wp--custom--duration--fast) var(--wp--custom--ease), opacity var(--wp--custom--duration--fast) var(--wp--custom--ease); } /* Le focus visible n'est jamais supprimé, y compris là où le hover ne fait rien. */ :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* Lien texte : le soulignement se redéploie depuis la gauche au survol. */ .pearl-link { position: relative; display: inline-block; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--small); font-weight: 500; letter-spacing: var(--wp--custom--tracking--link); text-decoration: none; text-transform: uppercase; } /* Trait court, toujours visible sous le libellé, qui s'étend en pleine largeur au survol. Aligné à gauche par défaut ; `.pearl-link--centered` le recentre pour les libellés centrés. */ .pearl-link::before { background-color: currentColor; block-size: 1px; content: ""; inline-size: 1.75rem; inset-block-end: -0.45em; inset-inline-start: 0; position: absolute; transition: inline-size var(--wp--custom--duration--base) var(--wp--custom--ease); } .pearl-link:hover::before, .pearl-link:focus-visible::before { inline-size: 100%; } .pearl-link--centered::before, .pearl-section-header--align-center .pearl-link::before { inset-inline-start: 50%; transform: translateX(-50%); } /* Bouton bordé : le fond se remplit au survol. */ .wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } /* ------------------------------------------------------------------------- * 2. Typographie — variantes de casse * * La casse est un choix de style, jamais de saisie : le client ne doit pas taper * un titre en capitales, ce qui dégraderait lecteurs d'écran et SEO. * ---------------------------------------------------------------------- */ .pearl-display { letter-spacing: var(--wp--custom--tracking--display); text-transform: uppercase; } .pearl-eyebrow { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: var(--wp--custom--tracking--eyebrow); line-height: 1; } /* ------------------------------------------------------------------------- * 3. Défilement — base commune du bloc pearl/collection (ADR-0003) * * Le comportement mobile est en CSS pur. Le JS ne sert qu'aux flèches desktop * et à la barre de progression. * ---------------------------------------------------------------------- */ .pearl-scroller { -ms-overflow-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .pearl-scroller::-webkit-scrollbar { display: none; } .pearl-scroller > * { scroll-snap-align: start; } /* ------------------------------------------------------------------------- * 3-bis. Sections de page — les deux bascules mobiles relevées en maquette * * Portées par le thème, pas par les patterns : un pattern est détaché dès qu'il * est inséré, et une valeur écrite dans ses attributs deviendrait dix copies * impossibles à corriger. Ici, une seule règle vaut pour toutes les pages. * * Les deux comportements viennent de CONTEXT.md § C-bis, relevés sur la frame * 402 px : le header de page est encarté au lieu d'être full-bleed, et l'encart * de texte cesse de chevaucher l'image. * ---------------------------------------------------------------------- */ /* Deux bandes pleine largeur se touchent. Sans cette règle, l'écart de bloc du flux laisse voir le fond de page entre elles : mesuré à 30 px entre deux sections crème consécutives, là où la maquette montre une bande continue. Le rythme vertical est porté par le padding de chaque section, pas par l'espace qui les sépare. */ .wp-site-blocks .alignfull + .alignfull { margin-block-start: 0; } /* Même raison entre les trois régions de la page : l'écart de bloc de la racine posait 32 px de fond de page entre le contenu et le pied de page, visible en filet blanc au-dessus du bordeaux. En-tête, contenu et pied de page se touchent. */ .wp-site-blocks > * + * { margin-block-start: 0; } /* Les maquettes n'envoient pas l'image d'ouverture tout à fait bord à bord : elles lui laissent une gouttière d'environ 24 px de chaque côté, qui la détache du bord de l'écran et la rattache à la page. Le padding est posé sur la figure, pas sur l'image : la figure garde sa largeur pleine, seule l'image se rétracte — le fond reste continu. L'accueil n'est pas concerné : son ouverture est un `pearl/hero-video` sous `.pearl-hero-wrap`, qui doit rester plein écran. */ .pearl-page-header { padding-inline: 24px; } @media (max-width: 781px) { /* Sous 782 px la gouttière s'élargit au rythme du reste de la page. */ .pearl-page-header { padding-inline: var(--wp--preset--spacing--30); } } /* L'encart remonte sur l'image. La valeur est en `rem` et non en preset : c'est un chevauchement optique, pas un rythme vertical du design system. Sa largeur est bornée à 58 % de l'image : sur la maquette l'encart couvre un peu plus de la moitié de la photo, et laissé libre il s'étalait jusqu'à la largeur de texte du groupe, ce qui écrasait le débord. La borne est calculée sur `wide-size`, pas exprimée en pourcentage : un pourcentage se résout sur le conteneur pleine largeur de la section, pas sur l'image « large » qu'il doit recouvrir — mesuré à 789 px au lieu des 696 attendus. */ .pearl-feature__card { margin-block-start: -6rem; margin-inline: auto; max-inline-size: calc(0.58 * var(--wp--style--global--wide-size, 1200px)); } @media (max-width: 781px) { .pearl-feature__card { margin-block-start: 0; max-inline-size: none; } } /* ------------------------------------------------------------------------- * 3-quinquies. En-tête * * Trois zones en grille `1fr auto 1fr` et non un `space-between` : le logo est * centré sur la page dans les maquettes, pas au milieu de ce qui reste entre le * menu et le bouton — mesuré, les deux extrémités n'ont pas la même largeur. * ---------------------------------------------------------------------- */ .pearl-header { background-color: var(--wp--preset--color--base-alt); } /* La largeur du logo est ici et non dans le pattern : le même fichier sert les deux contextes, et une largeur inline empêcherait de les distinguer. Relevé en maquette : 121 px en en-tête, 180 px en pied de page. */ .pearl-brand img { inline-size: 180px; } .pearl-header .pearl-brand img { inline-size: 121px; } .pearl-header__bar { align-items: center; display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: 1fr auto 1fr; /* La moitié du `block-gap` retiré ci-dessous, répartie en haut et en bas plutôt que concentrée en haut : la barre respire sans repousser le logo hors du centrage vertical. */ padding-block: calc(var(--wp--preset--spacing--40) / 2); } /* Le cœur de la grille garde le `margin-block-start` que WordPress pose sur les enfants d'un groupe en flux (`is-layout-flow > * + *`) : la classe reste sur la balise même une fois le conteneur passé en grille. Sans quoi le logo — deuxième colonne — se retrouve poussé vers le bas au lieu d'être centré sur la hauteur de la barre. */ .pearl-header__bar > * { margin-block-start: 0; } .pearl-header__start, .pearl-header__end { align-items: center; } .pearl-header__link { margin: 0; } .pearl-header__link a { color: inherit; text-decoration: none; } .pearl-header__link a:hover, .pearl-header__link a:focus-visible { text-decoration: underline; } /* Le sélecteur de langue de Polylang sort en `nav > ul > li` : une liste, ce qu'il est. On lui retire les puces et on le pose en ligne, sans rien changer à sa structure — c'est elle qui porte `hreflang` et `aria-current`. */ .pearl-header__languages ul, ul.pearl-header__languages { display: flex; gap: var(--wp--preset--spacing--20); list-style: none; margin: 0; padding: 0; } .pearl-header__languages a { color: inherit; font-size: var(--wp--preset--font-size--small); letter-spacing: var(--wp--custom--tracking--link); text-decoration: none; } /* La langue courante reste lisible mais cesse d'inviter au clic : la maquette marque « EN • FR » avec une des deux en retrait. */ .pearl-header__languages .current-lang > a { opacity: 0.55; } .pearl-header__languages a:hover, .pearl-header__languages a:focus-visible { text-decoration: underline; } /* Bouton Book now fixé en bas d'écran, caché tant qu'on n'est pas sous 782 px : posée avant la media query pour que la bascule mobile (plus bas dans ce fichier, même spécificité `body .classe`) l'emporte à cascade égale. */ body .pearl-header__book-fixed { display: none; } /* Sous 782 px, les trois zones ne tiennent plus : mesuré, la colonne centrale tombait à 15 px et le logo disparaissait. Les deux liens directs rejoignent le menu — ils y sont déjà — et le sceau sort de l'en-tête : il reste en pied de page, avec les autres labels. */ @media (max-width: 781px) { .pearl-header__link, .pearl-header__label { display: none; } .pearl-header .pearl-brand img { inline-size: 100px; } /* Book now sort de l'en-tête : coincée dans une en-tête déjà à l'étroit en mobile, elle rejoint le menu plein écran plutôt que d'y garder sa place. Spécificité `body .pearl-header__book` et non `.pearl-header__book` seul : les styles de layout du cœur WordPress posent `body .is-layout-flex { display: flex }`, plus spécifique qu'une simple classe. */ body .pearl-header__book { display: none; } /* Reste caché tant que le menu n'est pas ouvert : `is-menu-open` est la classe que `wp-block-library-view.js` pose sur la modale du menu. Z-index au-dessus des 100000 de la modale (mesuré) pour rester cliquable par-dessus elle plutôt que dessous. */ body:has(.wp-block-navigation__responsive-container.is-menu-open) .pearl-header__book-fixed { background-color: var(--wp--preset--color--base); border-block-start: 1px solid var(--wp--preset--color--base-alt); color: var(--wp--preset--color--contrast); display: flex; inset-block-end: 0; inset-inline: 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom)); position: fixed; z-index: 100001; } .pearl-header__book-fixed .wp-block-button { inline-size: 100%; } .pearl-header__book-fixed .wp-block-button__link { justify-content: center; width: 100%; } } /* L'en-tête est posé sur le hero, sans bande, quand la page en ouvre un — uniquement l'accueil aujourd'hui. La bascule tient à la présence du hero dans la page, pas à un réglage par page : une page qui gagnera un hero prendra le comportement toute seule. `position: absolute` et non `fixed` : la maquette ne montre pas d'en-tête collant, et il disparaît dès qu'on quitte la photo. */ .wp-site-blocks { position: relative; /* `50vw` compte la barre de défilement verticale, `100%` non : une piste qui déborde jusqu'au bord de l'écran (pearl/collection, dispositions « débordantes ») dépasse donc de la largeur de cette barre, et la page gagne un défilement horizontal parasite. `clip` et non `hidden` : `hidden` ferait de ce conteneur un contexte de défilement, ce qui décollerait l'en-tête `position: sticky`. */ overflow-x: clip; } .wp-site-blocks:has(.pearl-hero) > header { inset-block-start: 0; inset-inline: 0; position: absolute; z-index: 10; } .wp-site-blocks:has(.pearl-hero) > header .pearl-header { background-color: transparent; color: var(--wp--preset--color--base); } /* Le logo est noir sur fond clair : sur la photo, il passe en blanc. Le sceau garde ses propres couleurs partout, il n'est pas concerné. */ .wp-site-blocks:has(.pearl-hero) > header .pearl-brand img { filter: brightness(0) invert(1); } /* --- En-tête collant --------------------------------------------------- */ /* Hors page à hero, l'en-tête est `sticky` et non `fixed` : il garde sa place dans le flux, donc le contenu ne remonte jamais d'un cran au moment où il se colle. Sur une page à hero il est déjà hors flux (règle ci-dessus), et c'est `is-stuck` qui le passe en `fixed`. */ .wp-site-blocks > header { inset-block-start: 0; position: sticky; z-index: 10; } .pearl-header { transition: background-color var(--wp--custom--duration--base) var(--wp--custom--ease), color var(--wp--custom--duration--base) var(--wp--custom--ease); } /* Fond blanc une fois collé, quelle que soit la page : c'est le seul état où l'en-tête passe devant du contenu quelconque, et la transparence n'y est plus lisible. Le filet est en crème plutôt qu'une ombre : pas d'opacité en dur, et la maquette ne montre aucune ombre portée. */ .wp-site-blocks > header.is-stuck .pearl-header { background-color: var(--wp--preset--color--base); border-block-end: 1px solid var(--wp--preset--color--base-alt); color: var(--wp--preset--color--contrast); } .wp-site-blocks:has(.pearl-hero) > header.is-stuck { position: fixed; } /* Sur le hero, le logo était inversé en blanc : collé sur fond blanc, il reprend son encre d'origine. Le sceau garde ses propres couleurs. */ .wp-site-blocks:has(.pearl-hero) > header.is-stuck .pearl-brand img { filter: none; } /* L'en-tête entre par le haut plutôt que d'apparaître : à ce moment du défilement il vient de quitter l'écran, et une apparition sèche se lit comme un défaut d'affichage. */ .wp-site-blocks:has(.pearl-hero) > header.is-stuck { animation: pearl-header-drop var(--wp--custom--duration--base) var(--wp--custom--ease); } @keyframes pearl-header-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .wp-site-blocks:has(.pearl-hero) > header.is-stuck { animation: none; } } /* --- Barre d'ancres collante ------------------------------------------- */ /* La barre se cale sous l'en-tête au lieu de disparaître avec le haut de page : sur une page longue, la navigation intra-page ne sert à rien si elle n'est plus là quand on parcourt les sections qu'elle annonce. `sticky` et non `fixed`, pour la même raison que l'en-tête : la barre garde sa place dans le flux, donc rien ne remonte d'un cran au moment où elle se colle. **Elle doit être un enfant direct de `post-content`.** Un élément collant ne voyage que dans le bloc qui le contient : rangée dans le groupe crème de l'introduction, comme elle l'était d'abord, elle se décollait au bas de ce groupe — c'est-à-dire tout de suite. Les patterns la posent donc dans une section à elle, au premier niveau de la page, dont la boîte court jusqu'au pied de page. Le décalage est la hauteur de l'en-tête, publiée par `header.js` : aucune règle CSS ne sait lire la hauteur d'un élément voisin. Le repli de 98 px est la valeur mesurée en bureau ; sans JavaScript la barre glisse de douze pixels sous l'en-tête à 402 px, ce qui reste lisible. Le pixel retranché n'est pas un ajustement à l'œil. `offsetHeight` rend un entier — 99 px pour un en-tête qui en mesure 98,4 — et la barre se calait donc un pixel trop bas : un liseré par lequel on voyait défiler le contenu. Mieux vaut un pixel de chevauchement, que l'en-tête recouvre puisqu'il est au-dessus, qu'un pixel de jour, que rien ne bouche. */ .pearl-anchor-bar { inset-block-start: calc(var(--pearl-header-height, 98px) - 1px); position: sticky; /* Sous l'en-tête, qui est à 10 : quand les deux se rejoignent, c'est la barre qui passe derrière. */ z-index: 9; } /* Un clic dans la barre amenait la section visée **sous** elle : le navigateur aligne la cible sur le haut de la fenêtre, sans rien savoir de ce qui la recouvre. Mesuré avant correction, les cinq sections arrivaient masquées de 183 px — la hauteur de l'en-tête plus celle de la barre, que `header.js` publie ensemble sous `--pearl-sticky-offset`. La règle vise les cibles, pas la barre : `scroll-margin` est une propriété de ce vers quoi on défile. Elle vaut aussi pour un lien d'ancre écrit à la main dans une page, et pour l'arrivée sur une URL qui porte déjà un fragment. */ .pearl-section-header[id], .wp-block-group[id] { scroll-margin-block-start: var(--pearl-sticky-offset, 98px); } /* ------------------------------------------------------------------------- * 3-sexies. Menu plein écran (overlay du burger) * * Relevé sur `docs/mockup/menu.jpg` : fond crème pleine page, croix de fermeture * en haut à gauche, entrées alignées à gauche en deux tailles, et une image à * droite qui change au survol de chaque entrée. * * La modale reste celle du bloc `core/navigation` — ouverture, fermeture, piège * à focus, `inert` sur le reste de la page. On ne réécrit que son apparence. Ce * qui explique la densité de sélecteurs du cœur ci-dessous : ce sont les siens, * pas les nôtres. * ---------------------------------------------------------------------- */ /* Le bouton d'ouverture : l'icône de la maquette — trois barres pleines de largeur égale, extrémités arrondies, 24 × 16 — à la place des trois filets de 1,5 px du cœur (#35). Posée en `mask-image` sur le bouton plutôt qu'en filtrant le rendu du bloc : le cœur garde son balisage, donc son `aria-label`, son `aria-expanded` et sa bascule, et rien ne se casse à la prochaine mise à jour de WordPress — au pire le `` masqué change de forme sans qu'on le voie. Le tracé de la maquette porte un `fill="white"` en dur : un masque le laisse suivre la couleur de l'en-tête, qui n'est pas toujours sur fond sombre. */ .wp-block-navigation__responsive-container-open { /* Le `` du cœur reste dans le balisage (il porte le dimensionnement du bouton) mais ne se voit plus : c'est le masque qui dessine. */ background-color: currentColor; block-size: 16px; inline-size: 24px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M22.6667 6.66667H1.33333C0.533333 6.66667 0 7.2 0 8C0 8.8 0.533333 9.33333 1.33333 9.33333H22.6667C23.4667 9.33333 24 8.8 24 8C24 7.2 23.4667 6.66667 22.6667 6.66667ZM1.33333 2.66667H22.6667C23.4667 2.66667 24 2.13333 24 1.33333C24 0.533333 23.4667 0 22.6667 0H1.33333C0.533333 0 0 0.533333 0 1.33333C0 2.13333 0.533333 2.66667 1.33333 2.66667ZM22.6667 13.3333H1.33333C0.533333 13.3333 0 13.8667 0 14.6667C0 15.4667 0.533333 16 1.33333 16H22.6667C23.4667 16 24 15.4667 24 14.6667C24 13.8667 23.4667 13.3333 22.6667 13.3333Z'/%3E%3C/svg%3E"); mask-position: center; mask-repeat: no-repeat; mask-size: 24px 16px; padding: 0; } /* Le tracé du cœur est masqué par le masque lui-même ; on le sort du flux pour qu'il ne dicte plus la taille du bouton. */ .wp-block-navigation__responsive-container-open > svg { display: none; } /* Le `:not()` reprend mot pour mot le sélecteur du cœur — qui pose sur la modale ouverte une gouttière tirée du `padding` racine de `theme.json`. Il n'est pas là pour exclure quoi que ce soit : il est là pour peser le même poids que lui, sans quoi la gouttière l'emporte et s'ajoute au retrait posé plus bas. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--wp--preset--color--base-alt); color: var(--wp--preset--color--contrast); padding: 0; } /* La croix passe à gauche, comme en maquette, et prend la teinte rose du sceau plutôt que le noir du texte : c'est un geste de sortie, pas une entrée de menu. Le cœur la pose à droite avec un `right` en dur. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--rose); /* `fixed` et non `absolute` : la croix se cale sur le bord de l'écran, pas sur la colonne de texte, qui est retraitée de 16 %. */ inset-block-start: var(--wp--preset--spacing--50); inset-inline: var(--wp--preset--spacing--50) auto; position: fixed; } /* Deux colonnes : les entrées à gauche, l'image à droite. La colonne d'image est déclarée ici bien qu'elle soit peuplée par un panneau posé par-dessus (voir plus bas) : elle réserve la place, et les entrées ne s'étalent pas sous l'image sur les libellés longs. */ /* Le cœur centre ce bloc dans une largeur « wide » (1200 px, marges automatiques). L'overlay de la maquette n'a pas de conteneur : les entrées se calent sur le bord de l'écran, pas sur une colonne centrée. On rend donc au bloc toute la largeur avant de poser le retrait, sans quoi celui-ci s'ajouterait aux 88 px de marge et à la gouttière du conteneur — mesuré, le texte partait à 350 px au lieu de 230. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { block-size: 100%; margin-inline: 0; max-inline-size: none; /* Retrait relevé en proportion sur la maquette — 16 % à gauche pour les entrées — puis plafonné : au-delà de ~2000 px l'écran s'élargit sans que la colonne ait à s'éloigner davantage du bord. */ padding-inline-start: min(16vw, 320px); width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { align-items: center; block-size: 100%; display: flex; margin: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; display: flex; inline-size: 100%; justify-content: flex-start; /* La colonne de texte s'arrête avant l'image : un libellé long doit passer à la ligne, pas courir dessous. */ padding-inline-end: 45%; } /* Le cœur centre la liste et la met en colonne ; la maquette l'aligne à gauche et l'espace de moitié plus. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--heading-l); font-weight: 300; line-height: 1.45; padding: 0; text-decoration: none; } /* Le survol n'a pas de soulignement : c'est l'image de droite qui répond. Le texte se contente de reprendre du contraste — les entrées au repos sont légèrement en retrait en maquette. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--muted); transition: color var(--wp--custom--duration--base) var(--wp--custom--ease); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--contrast); } /* Le cœur donne le focus à la première entrée dès l'ouverture — c'est ce qu'il faut pour le clavier, et on n'y touche pas. Mais Chrome traite ce focus posé par script comme un focus clavier : la première entrée s'ouvre encadrée, alors que la souris vient d'ouvrir le menu, ce que la maquette ne montre pas. L'anneau n'est donc pas supprimé : il est mis en veille pour ce seul cas, celui d'un menu ouvert à la souris, et `nav-overlay.js` retire l'attribut à la première touche pressée. Le premier `Tab` rend l'anneau, et un menu ouvert au clavier ne l'a jamais perdu. */ /* `:focus` et non `:focus-visible` seul : `theme.json` donne aux liens un anneau sur `:focus` (styles → elements → link), et c'est lui qu'on voit ici — un focus posé par script ne satisfait pas toujours `:focus-visible`. Les deux sont neutralisés ensemble, sinon la mise en veille ne veille sur rien. */ .wp-block-navigation__responsive-container.is-menu-open[data-pearl-focus-quiet] .wp-block-navigation-item__content:focus, .wp-block-navigation__responsive-container.is-menu-open[data-pearl-focus-quiet] .wp-block-navigation-item__content:focus-visible { outline: none; } /* Les entrées secondaires de la maquette : même colonne, petit corps, détachées du bloc principal. Marquées `is-secondary` dans « Apparence → Menus ». */ .wp-block-navigation__responsive-container.is-menu-open .pearl-nav__item--secondary .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--small); line-height: 2; } /* Le décrochement entre les deux tiers se pose sur la première entrée secondaire, désignée comme celle qui suit une entrée principale — `:first-of-type` compte les `
  • `, pas les classes, et ne l'aurait pas trouvée. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.pearl-nav__item--secondary) + .pearl-nav__item--secondary { margin-block-start: var(--wp--preset--spacing--40); } /* --- Le panneau d'images ------------------------------------------------ */ /* Le panneau est rendu à côté du bloc de navigation et non dedans (ses blocs internes sortiraient en `
  • ` du menu). Il n'existe donc à l'écran que pendant que la modale est ouverte, et se pose par-dessus elle. `pointer-events: none` : rien ne s'y clique, et sans cette ligne il volerait le survol aux entrées qui passent dessous sur les écrans étroits. */ .pearl-nav-media { display: none; } body:has(.wp-block-navigation__responsive-container.is-menu-open) .pearl-nav-media { display: block; inset: 0; pointer-events: none; position: fixed; z-index: 100001; } .pearl-nav-media__item { aspect-ratio: 43 / 53; inline-size: min(28vw, 430px); inset-block-start: 50%; /* 12 % du bord droit en maquette, plafonné pour la même raison que le retrait de gauche. */ inset-inline-end: min(12vw, 240px); margin: 0; opacity: 0; position: absolute; transform: translateY(-50%); transition: opacity var(--wp--custom--duration--slow) var(--wp--custom--ease); } .pearl-nav-media__item.is-active { opacity: 1; } .pearl-nav-media__item img { block-size: 100%; display: block; inline-size: 100%; object-fit: cover; } /* Sous 782 px il n'y a pas la place pour deux colonnes : le menu reprend toute la largeur et l'image sort — la maquette est une vue de bureau. */ @media (max-width: 781px) { .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-inline-end: 0; } body:has(.wp-block-navigation__responsive-container.is-menu-open) .pearl-nav-media { display: none; } } /* Mouvement réduit : le fondu est un mouvement de moins que les autres, mais c'en est un. Les images se remplacent alors sans transition. */ @media (prefers-reduced-motion: reduce) { .pearl-nav-media__item { transition: none; } } /* ------------------------------------------------------------------------- * 3-ter. Pied de page * * Les intitulés de colonne ne réutilisent pas le preset `eyebrow` : celui-ci * vaut 1,25 rem, taille du surtitre qui coiffe un titre de section. En pied de * page, la maquette montre un intitulé nettement plus petit que le corps. * ---------------------------------------------------------------------- */ .pearl-footer__heading { letter-spacing: var(--wp--custom--tracking--eyebrow); opacity: 0.7; text-transform: uppercase; } /* La bande « Our group » suit la casse normale de la maquette — pas de majuscules, contrairement aux intitulés de colonne (OUR HOTEL, MORE…). L'intitulé et le visuel qu'il annonce forment un ensemble, et l'écart se pose ici, une fois, plutôt que sur chacun des trois éléments qui suivent. Sans cette règle il était irrégulier : la rangée de sigils héritait des 32 px de `blockGap` du conteneur, mais les deux logos centrés y échappaient — le cœur du bloc `core/image` remet les marges à zéro sur une figure `aligncenter` — et collaient donc à leur intitulé (issue #39). */ .pearl-footer__group .pearl-footer__heading { margin-block-end: var(--wp--preset--spacing--40); text-transform: none; } /* Les colonnes de liens sont des listes pour des raisons sémantiques — c'est bien une liste de liens — mais rien dans la maquette n'affiche de puce. */ .pearl-footer__links { list-style: none; padding-inline-start: 0; } /* Les liens reprennent la couleur du texte. La couleur de lien du thème est pensée pour un fond clair : sur le bordeaux du pied de page, elle tombait à un contraste illisible. */ .pearl-footer a, .pearl-footer__group a { color: inherit; text-decoration: none; } .pearl-footer a:hover, .pearl-footer a:focus-visible, .pearl-footer__group a:hover, .pearl-footer__group a:focus-visible { text-decoration: underline; } /* Les logos de marque sont livrés en SVG noir, faits pour un fond clair. Plutôt qu'une seconde version blanche de chaque fichier — donc un fichier de plus à remplacer le jour où un logo change — on les retourne. `brightness(0)` d'abord : cela aplatit toute couleur résiduelle en noir avant l'inversion, sans quoi un tracé gris ressortirait coloré. Rééchantillonné le 14 août 2026 sur `Pages/Homepage.png` : la bande « Our group » est aussi sombre (`contrast`, #161111) que le reste du pied de page, pas crème comme le laissait croire `Composants/Footer.png` — ses logos sont donc retournés eux aussi. */ .pearl-footer .pearl-brand img, .pearl-footer__group img { filter: brightness(0) invert(1); } /* Les sigils de la bande « Our group » se calent sur leur hauteur, pas sur leur largeur. Les six fichiers (`bob`, `tah`, `tkh`, `nkh`, `vpi`, `pearl-resorts`) sont dessinés sur une grille de 72 px de haut, mais leurs largeurs vont de 114 à 165 px : une largeur commune de 130 px — ce que posait le pattern en inline — donnait une rangée dont chaque logo tombait à une hauteur différente, de 57 à 82 px. 72 px pour tous, largeur libre : c'est la taille native des tracés, donc celle où ils sont le plus nets. Les deux logos isolés suivent la même règle, et c'est un choix : Pearl Resorts (150 px de large en inline, soit 68 px de haut) et Vahine Private Island (130 px, soit 81 px) n'étaient rien d'autre que deux approximations de cette même hauteur, l'une un peu en dessous, l'autre un peu au-dessus. Les aligner ne les banalise pas — le rang du groupe se dit par la place et par l'intitulé, pas par quatre pixels de plus. */ .pearl-footer__group img { block-size: 72px; inline-size: auto; max-inline-size: 100%; } /* Les filets du pied de page : du blanc à 30 %, sur toute la hauteur du pied de page — échantillonné `#674C4C` sur la bande d'inscription en maquette, soit exactement `base` à 0,3 sur `#270C0D`. La bande « Our group » suit la même règle depuis qu'elle est reconnue sombre (`contrast`) et non crème — voir le commentaire de `.pearl-footer__group img` ci-dessus. La couleur est nommée et non `currentColor` : theme.json pose déjà `rose` sur `core/separator`, donc `currentColor` y valait rose partout — mesuré à `rgb(78, 50, 51)` sur le bordeaux au lieu du gris rosé attendu. */ .pearl-footer .wp-block-separator, .pearl-footer__group .wp-block-separator { border: 0; border-block-start: 1px solid var(--wp--preset--color--base); margin-block: var(--wp--preset--spacing--30); opacity: 0.3; } /* Le bouton d'inscription porte une flèche, comme en maquette : elle porte la moitié de sa largeur (169 px relevés contre 126 px pour le seul libellé). Dessinée et non écrite en caractère : `⟶` n'existe pas dans Krub et serait remplacé par une police de repli, à une autre graisse. Deux pseudo-éléments, donc — le fût puis la pointe, remise en fin de ligne par `order`. Purement décorative : rien n'est ajouté à ce que lit un lecteur d'écran. */ .pearl-button--arrow .wp-block-button__link { align-items: center; display: inline-flex; gap: 0.375rem; } .pearl-button--arrow .wp-block-button__link::after { background-color: currentColor; block-size: 1px; content: ""; inline-size: 1.75rem; margin-inline-start: 0.375rem; } .pearl-button--arrow .wp-block-button__link::before { block-size: 0.4rem; border-block-start: 1px solid currentColor; border-inline-end: 1px solid currentColor; content: ""; inline-size: 0.4rem; margin-inline-start: -0.45rem; order: 1; transform: rotate(45deg); } /* En mobile, la rangée se range en 2 × 2 — c'est ce que faisait l'ancienne largeur commune de 130 px. À hauteur égale les sigils sont plus larges (jusqu'à 165 px pour Le Nuku Hiva) et l'écart `L` de 48 px suffisait à faire déborder la seconde paire, qui repartait alors sur deux rangées d'un seul logo. L'écart se resserre plutôt que la hauteur : la règle de l'issue, c'est 72 px. */ @media (max-width: 781px) { .pearl-footer__brands { gap: var(--wp--preset--spacing--30); } } /* Reveal du pied de page : deux bandes empilées, la seconde cachée derrière la première. La bande groupe (`pearl-footer__group`) est collée en bas de la fenêtre par un `position: sticky` ; le pied de page de l'hôtel (`pearl-footer`), opaque et posé au-dessus dans l'ordre d'empilement, la recouvre. En fin de défilement le pied de page de l'hôtel remonte et découvre la bande, qui n'a pas bougé. Aucun JavaScript, et aucune hauteur écrite en dur. `sticky` borne l'élément à la boîte de son parent : le `