/** * SS4Y — styles de base. * * Ne contient QUE ce qui est global : polices, réglages transverses, styles * de blocs cœur et mise en page header / footer. Tout ce qui appartient à une * section vit dans blocks//style.css. * * Les couleurs, espacements et rayons viennent de theme.json * (--wp--preset--*, --wp--custom--*) : ne pas écrire de valeur en dur ici. */ /* ─── Polices ─────────────────────────────────────────────────────────────── Déposer les .woff2 de la charte dans assets/fonts/, décommenter, puis activer le préchargement dans inc/assets.php. @font-face { font-family: 'SS4Y Heading'; src: url('../fonts/heading-600.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: 'SS4Y Body'; src: url('../fonts/body-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } ─────────────────────────────────────────────────────────────────────────── */ /* ─── Réglages globaux ───────────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Les ancres de section se décalent déjà de la barre (`scroll-margin-top`) : on ajoute la hauteur du bandeau d'annonce épinglé, s'il y en a un. */ scroll-padding-block-start: var(--ss4y-notice-height, 0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; /* Le bandeau d'annonce épinglé est hors flux : on lui rend sa place. */ padding-block-start: var(--ss4y-notice-height, 0); } img, video { max-width: 100%; height: auto; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--primary-light); outline-offset: 2px; } /* Lien d'évitement : affiché uniquement au clavier. */ .skip-link:focus { background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); padding: 0.75rem 1.25rem; z-index: 100000; } /* ─── Rythme vertical des sections ───────────────────────────────────────── Le rythme vient uniquement du padding des sections, jamais d'une marge : on remet à zéro à chacun des trois niveaux où WordPress en pose une. */ /* * Niveau page : le cœur écarte de 1.5rem chaque enfant direct sauf le premier, * ce qui glissait une bande de fond nue entre l'en-tête et le contenu, puis * entre le contenu et le pied de page. */ .wp-site-blocks > * { margin-block-start: 0; } /* Niveau contenu. */ .ss4y-main > * { margin-block: 0; } .ss4y-main > .wp-block-group:not(.alignfull), .ss4y-main > .wp-block-columns { padding-block: var(--wp--preset--spacing--section); } .ss4y-main--full > .wp-block-post-content > * { margin-block-start: 0; } /* * Niveau bloc : chaque section porte son propre padding vertical, la marge de * flux ferait double emploi entre deux sections qui se suivent. * * `[class]` en plus n'est pas décoratif : la règle du cœur * (`:root :where(.is-layout-flow) > *`) a la même spécificité qu'un sélecteur * de classe, et l'ordre des feuilles ne garantit pas qui gagne. Le second * sélecteur tranche. Une marge réglée à la main dans l'éditeur passe malgré * tout, WordPress l'écrivant en style inline. */ [class*="wp-block-ss4y-"][class] { margin-block-start: 0; } .ss4y-page-title, .ss4y-main > .wp-block-query-title { margin-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md); } /* ─── En-tête ──────────────────────────────────────────────────────────────── Barre flottante en pilule, fixée en haut de l'écran et posée par-dessus le contenu. La hauteur vient de theme.json : le décalage du contenu et les ancres de section s'y réfèrent. */ .ss4y-header { position: fixed; inset-inline: 0; /* Bandeau d'annonce épinglé au-dessus : la barre descend d'autant. */ inset-block-start: var(--ss4y-notice-height, 0); z-index: 100; padding-block: 0.85rem; padding-inline: var(--wp--custom--section--padding-inline); pointer-events: none; } /* Deux classes : les styles de mise en page du cœur en ont une, il faut passer devant pour l'espacement et les marges. */ .ss4y-header .ss4y-header__bar { position: relative; max-width: var(--wp--style--global--wide-size, 1400px); margin-inline: auto; gap: var(--wp--preset--spacing--md); padding: 0.45rem 0.45rem 0.45rem 1.35rem; border: 1px solid rgb(16 48 58 / 6%); border-radius: var(--wp--custom--radius--pill); box-shadow: var(--wp--custom--shadow--md); /* Seule la pilule capte le clic : le reste de la bande laisse passer. */ pointer-events: auto; } /* * Fond et flou portés par un pseudo-élément, et non par la pilule elle-même. * `backdrop-filter` fait de l'élément qui le porte le référent des positions * fixes de sa descendance : posé sur la barre, il enfermait le menu déroulé * dans la pilule au lieu de le laisser couvrir l'écran. */ .ss4y-header .ss4y-header__bar::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: rgb(255 255 255 / 82%); backdrop-filter: blur(14px); } .ss4y-header__brand { gap: 0.75rem; flex-shrink: 0; } .ss4y-header__brand .wp-block-site-title a { color: var(--wp--preset--color--primary); text-decoration: none; } /* Le logo porte déjà le nom de la marque : le titre ne sert que de secours. */ .ss4y-header__brand:has(.wp-block-site-logo) .wp-block-site-title { display: none; } /* WordPress recopie la classe sur le