/* Theme Name: FMT Fragrances Theme URI: https://fournisseur-musc-tahara.com Author: Fournisseur Musc Tahara Description: Thème bloc sur-mesure de Fournisseur Musc Tahara, habillé du système de design « FMT Fragrances » (guide de marque V1.1, septembre 2026) : pétrole, ivoire, lin et cuivre, Fraunces et Manrope, filets fins, boutons à 4 px. « La précision, tout en douceur. » Même contenu et mêmes fonctions que le thème FMT Lab, dont il est la copie. Version: 1.3.3 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fmt-fragrances Tags: full-site-editing, block-patterns, e-commerce, one-column */ /* ═══════════════════════════════════════════════════════════════════════════ FONDATIONS Source de vérité : le kit « FMT Fragrances Design System », décompressé dans `contenu/fmt fragrances system/` (`tokens/*.css`). Mode d'emploi : `docs/DESIGN-SYSTEM-FRAGRANCES.md` à la racine du dépôt. Les teintes, les polices, les tailles et les espacements vivent dans theme.json, que WordPress publie en `--wp--preset--*`. On les reprend ici sous les noms courts du kit (`--petrole`, `--ivoire`…) et on ajoute ce que theme.json ne sait pas exprimer : voiles, alias sémantiques, rayons, filets, ombres, durées. ATTENTION — le kit nomme `--text-body` à la fois une couleur (colors.css) et une taille (typography.css) ; la seconde écrase la première. Ici, `--text-*` désigne TOUJOURS une couleur. Les tailles passent par `--wp--preset--font-size--*`. Nommage : `.fmt-__<élément>--`. Les classes sont posées sur les blocs WordPress ; la mise en page est ici, jamais en style en ligne. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ——— Palette de marque (répartition : 60 % ivoire, 25 % pétrole, 10 % lin, 5 % cuivre) ——— */ --petrole: var(--wp--preset--color--petrole); --petrole-survol: var(--wp--preset--color--petrole-survol); --petrole-appui: var(--wp--preset--color--petrole-appui); --ivoire: var(--wp--preset--color--ivoire); --ivoire-clair: var(--wp--preset--color--ivoire-clair); --lin: var(--wp--preset--color--lin); --lin-survol: var(--wp--preset--color--lin-survol); --cuivre: var(--wp--preset--color--cuivre); --cuivre-survol: var(--wp--preset--color--cuivre-survol); --cuivre-appui: var(--wp--preset--color--cuivre-appui); --encre: var(--wp--preset--color--encre); --sauge: var(--wp--preset--color--sauge); /* ——— Voiles : aucune teinte n'est créée pour les états, on voile le pétrole ——— */ --petrole-04: rgba(20, 60, 64, .04); --petrole-08: rgba(20, 60, 64, .08); --petrole-12: rgba(20, 60, 64, .12); --petrole-18: rgba(20, 60, 64, .18); --petrole-32: rgba(20, 60, 64, .32); --petrole-64: rgba(20, 60, 64, .64); --ivoire-12: rgba(245, 241, 232, .12); --ivoire-24: rgba(245, 241, 232, .24); --ivoire-64: rgba(245, 241, 232, .64); /* ——— Surfaces ——— */ --surface-page: var(--ivoire); --surface-secondary: var(--lin); --surface-raised: var(--wp--preset--color--surface-relevee); --surface-card: var(--ivoire); --surface-inverse: var(--petrole); --surface-accent: var(--cuivre); --surface-hover: var(--petrole-04); --surface-etiquette: var(--wp--preset--color--etiquette); /* ——— Textes (des couleurs, jamais des tailles) ——— */ --text-heading: var(--petrole); --text-display-2: var(--sauge); /* seconde voix des accroches, 40 px minimum */ --text-body: var(--encre); --text-muted: var(--wp--preset--color--texte-discret); --text-accent: var(--cuivre); /* décor et grands caractères uniquement : 3,43:1 */ --text-on-inverse: var(--ivoire); --text-on-inverse-muted: var(--ivoire-64); --text-on-accent: var(--ivoire); --text-link: var(--petrole); /* Le cuivre ne tient que 3,43:1 sur ivoire : au survol, il ne colore que le soulignement (`--border-accent`) ; le texte fonce en pétrole survol. */ --text-link-hover: var(--wp--preset--color--petrole-survol); /* ——— Traits ——— */ --border-hairline: var(--petrole-18); --border-quiet: var(--petrole-12); --border-strong: var(--petrole); --border-accent: var(--cuivre); --border-on-inverse: var(--ivoire-24); /* Contour des champs de formulaire, cases à cocher et boutons radio. Le filet à 18 % du kit ne tient que 1,4:1 : un champ ne s'identifierait plus (WCAG 1.4.11 demande 3:1). 64 % est le premier voile pétrole qui dépasse 3:1 sur tous les fonds — 3,9:1 sur ivoire, 3,6:1 sur lin. */ --border-champ: var(--petrole-64); /* ——— Délimitation par la teinte ——— Règle du client (19 septembre 2026) : aucune carte, case, tuile ni bouton secondaire n'est cerné d'un trait. Un contenant se détache de la bande qui le porte par un beige plus foncé ou plus clair. Sur une bande ivoire, le contenant est en lin ; sur une bande lin, il est en surface relevée. Les bandes redéfinissent ces deux jetons (`.fmt-section--lin`), les composants ne font que les lire. Seuls les champs de formulaire et les cases à cocher gardent un contour : sans lui ils ne s'identifient plus (WCAG 1.4.11). */ --surface-contenant: var(--lin); --surface-contenant-survol: var(--wp--preset--color--lin-survol); /* ——— Divers ——— */ --focus-ring: var(--cuivre); --selection-bg: var(--lin); --sillage-fill: var(--wp--preset--color--sillage); --sillage-fill-inverse: rgba(245, 241, 232, .10); /* ——— Typographie ——— */ --font-display: var(--wp--preset--font-family--display); --font-sans: var(--wp--preset--font-family--sans); --font-technique: var(--wp--preset--font-family--technique); /* Instance Fraunces du guide : SOFT 80, WONK 1. Taille optique 48 pour les titres de section, 144 pour les accroches de 56 px et plus. */ --fraunces-axes: "SOFT" 80, "WONK" 1, "opsz" 48; --fraunces-axes-grand: "SOFT" 80, "WONK" 1, "opsz" 144; --fraunces-axes-petit: "SOFT" 80, "WONK" 0, "opsz" 14; --lh-display: 1.02; --lh-section: 1.08; --lh-subsection: 1.2; --lh-lead: 1.5; --lh-body: 1.65; --lh-ui: 1.4; --lh-caption: 1.45; --track-display: -0.035em; --track-section: -0.025em; --track-subsection: -0.015em; --track-ui: 0.01em; --track-eyebrow: 0.16em; --track-logotype: 0.38em; --track-technique: 0.08em; --track-technique-wide: 0.18em; /* ——— Rythme (unité dominante 8 px) ——— */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* ——— Grille : contenu ≈ 1 240 px, gouttières 24 px (mobile) à 32 px ——— */ --content-max: 1240px; --gutter: clamp(24px, 4vw, 32px); --measure-prose: 62ch; /* Une section = une bande pleine largeur. Le contenu est borné par le rembourrage latéral, sans enveloppe supplémentaire dans le balisage. */ --bande-y: clamp(56px, 7vw, 96px); --bande-x: max(var(--gutter), calc((100% - var(--content-max)) / 2)); /* ——— Rayons : 4 px est la valeur de référence ——— */ --radius-0: 0px; --radius-2: 2px; /* cases à cocher, images */ --radius-4: 4px; /* boutons, champs, puces, cartes */ --radius-8: 8px; /* cartouches */ --radius-12: 12px; /* blocs */ --radius-16: 16px; /* vignettes produit, plaques d'étiquette */ --radius-pill: 999px; /* uniquement les repères explicitement ronds */ /* ——— Filets ——— */ --hairline: 1px; --rule-strong: 1.5px; /* ——— Ombres : chaudes, très basses, rares ——— */ --shadow-soft: var(--wp--preset--shadow--douce); --shadow-lift: var(--wp--preset--shadow--detachee); --shadow-etiquette: var(--wp--preset--shadow--etiquette); /* ——— Voiles de protection sous un texte posé sur photographie ——— */ --scrim-bottom: linear-gradient(to top, rgba(20, 60, 64, .72), rgba(20, 60, 64, 0) 62%); --scrim-left: linear-gradient(to right, rgba(20, 60, 64, .64), rgba(20, 60, 64, 0) 58%); /* ——— Mouvement : une seule courbe, aucune animation permanente ——— */ --dur-instant: 120ms; --dur-quick: 180ms; --dur-ui: 240ms; --dur-enter: 560ms; --dur-enter-long: 700ms; --dur-enter-short: 450ms; --stagger: 90ms; --ease-soft: cubic-bezier(.22, .61, .36, 1); --lift-hover: -1px; --scale-press: .985; /* Hauteur mesurée de la barre de navigation collante, publiée par entete.js. La valeur ci-dessous n'est qu'un repli, juste tant que les polices de secours sont en place ; elle sert aux `scroll-padding` des ancres. */ --fmt-nav-h: 80px; } @media (min-width: 1100px) { :root { --fmt-nav-h: 108px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-enter: 1ms; --dur-enter-long: 1ms; --dur-enter-short: 1ms; --dur-ui: 1ms; --dur-quick: 1ms; --stagger: 0ms; } } *, *::before, *::after { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: var(--selection-bg); color: var(--petrole); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } img { max-width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHIE Fraunces pour les titres et les prises de parole, Manrope pour le texte et l'interface. Courier Prime n'habille que les mentions techniques — lot, INCI, références — à la manière d'une étiquette de laboratoire. ═══════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-variation-settings: var(--fraunces-axes); text-wrap: pretty; } .fmt-display, .is-style-fmt-display { font-family: var(--font-display); font-variation-settings: var(--fraunces-axes); font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--text-heading); text-wrap: pretty; } /* Au-delà de 56 px, la taille optique monte à 144 : c'est l'instance des accroches du guide. */ .fmt-display.has-display-xl-font-size, .fmt-display.has-display-l-font-size, .is-style-fmt-display.has-display-xl-font-size, .is-style-fmt-display.has-display-l-font-size { font-variation-settings: var(--fraunces-axes-grand); } /* Accroche à deux voix : la seconde ligne en sauge. La sauge ne tient que 3,76:1 sur l'ivoire — réservée aux titres de 40 px et plus. */ .fmt-accroche__suite { display: block; color: var(--text-display-2); } .fmt-accroche__suite + br, br:has(+ .fmt-accroche__suite) { display: none; } /* Sur-titre : capitales espacées, la seule majuscule autorisée du système. Toujours au-dessus d'un titre, jamais seul. */ .fmt-eyebrow, .is-style-fmt-eyebrow { font-family: var(--font-sans); font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; line-height: 1.3; color: var(--petrole); margin: 0; } /* Chiffres : prix, quantités, paliers. Manrope en chiffres tabulaires — le kit n'a pas de chasse fixe pour l'interface. La classe garde son ancien nom parce qu'un contenu en base peut déjà la porter. */ .fmt-mono, .is-style-fmt-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: var(--track-ui); } /* Mention technique, façon étiquette de laboratoire. */ .fmt-technique { font-family: var(--font-technique); font-weight: 400; letter-spacing: var(--track-technique); text-transform: uppercase; } .fmt-lede { font-size: var(--wp--preset--font-size--large); line-height: var(--lh-lead); color: var(--text-body); } /* Liens du texte courant : pétrole, soulignés d'un voile, cuivre au survol. Les boutons, les cartes-liens et la navigation ne sont pas concernés : seul un lien sans classe dans un paragraphe ou une liste reçoit le trait. */ :where(p, li, dd, td) > a:where(:not([class])) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--petrole-32); text-underline-offset: .22em; transition: color var(--dur-quick) var(--ease-soft), text-decoration-color var(--dur-quick) var(--ease-soft); } :where(p, li, dd, td) > a:where(:not([class])):hover { color: var(--text-link-hover); text-decoration-color: var(--border-accent); } /* ═══════════════════════════════════════════════════════════════════════════ MISE EN PAGE Des bandes pleine largeur qui se touchent, alternant ivoire et lin ; le pétrole est réservé à une seule prise de parole par page, plus le pied de page. Le contenu est borné à 1 240 px par le rembourrage de la bande. ═══════════════════════════════════════════════════════════════════════════ */ /* * WordPress espace automatiquement les frères d'une mise en page « flux » de * `--wp--style--block-gap`, soit 24 px. Entre deux bandes, cette marge ferait * apparaître le fond de page comme une troisième couleur. On la neutralise à la * racine de la page et à l'intérieur de l'accueil ; chaque bande porte son * propre rembourrage. */ .wp-site-blocks > *, .fmt-home > * { margin-block-start: 0; } .fmt-section { margin-block-start: 0; padding-block: var(--bande-y); padding-inline: var(--bande-x); background-color: var(--surface-page); } .fmt-section--lin { --surface-contenant: var(--surface-raised); --surface-contenant-survol: var(--ivoire-clair); background-color: var(--surface-secondary); } .fmt-section--petrole { background-color: var(--surface-inverse); color: var(--text-on-inverse); } .fmt-section--tight { padding-block-start: var(--space-48); } .fmt-shell { max-width: none; margin-inline: auto; } /* Bloc : un contenant à l'intérieur d'une bande — rayon 12 px, sans trait ni ombre, détaché par sa teinte. Une section qui n'était qu'un panneau devient la bande elle-même (classes `fmt-section--*`), elle ne garde pas de bloc. */ .fmt-panel { border-radius: var(--radius-12); padding: clamp(24px, 4vw, 48px); background: var(--surface-contenant); } .fmt-panel--sunken, .fmt-panel--accent-soft { background: var(--surface-contenant); } .fmt-panel--accent { background: var(--surface-inverse); color: var(--text-on-inverse); } /* Carte : rayon 4 px (16 px si elle porte une image), sans trait ni ombre — c'est la teinte qui la détache de sa bande. Au survol, quand elle est un lien : la teinte fonce d'un cran et la carte monte d'un pixel. */ .fmt-card { background: var(--surface-contenant); border: 0; border-radius: var(--radius-4); box-shadow: none; transition: background-color var(--dur-ui) var(--ease-soft), transform var(--dur-ui) var(--ease-soft); } a.fmt-card:hover, .fmt-card:has(> a:first-child:hover) { background: var(--surface-contenant-survol); } .fmt-card--media { border-radius: var(--radius-16); overflow: hidden; } /* En-tête de section : le sur-titre, le titre, et une note à droite alignée sur la ligne de base. Pas de filet en tête : l'alternance des bandes sépare déjà les sections. */ .fmt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24) clamp(24px, 5vw, 64px); flex-wrap: wrap; } .fmt-head__main { display: flex; flex-direction: column; gap: var(--space-16); max-width: 46rem; min-width: 0; } .fmt-head .fmt-eyebrow, .fmt-head .is-style-fmt-eyebrow { font-size: var(--wp--preset--font-size--micro); color: var(--text-muted); } .fmt-head__aside { font-size: var(--wp--preset--font-size--medium); color: var(--text-muted); max-width: 21rem; text-align: right; } @media (max-width: 900px) { .fmt-head__aside { text-align: left; } } /* Filet fin, et le motif récurrent du guide : le libellé inscrit dans le filet (trait — texte en capitales espacées — trait). À employer avec parcimonie : le client ne veut pas de traits partout. Jamais pour cerner un contenant. */ .fmt-filet { height: 0; border: 0; border-block-start: var(--hairline) solid var(--border-hairline); } .fmt-filet--fort { border-block-start: var(--rule-strong) solid var(--border-strong); } .fmt-filet--libelle { display: flex; align-items: center; gap: var(--space-16); border: 0; height: auto; font-family: var(--font-sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .fmt-filet--libelle::before, .fmt-filet--libelle::after { content: ""; flex: 1; border-block-start: var(--hairline) solid var(--border-hairline); } /* ═══════════════════════════════════════════════════════════════════════════ CONTRÔLES Boutons à 4 px. Pétrole plein pour l'action principale ; la seconde est un aplat beige — la teinte du contenant de la bande —, pas un contour : le client ne veut pas de cases cernées d'un trait. Le filet d'un pixel reste déclaré, de la couleur du fond, pour que toutes les variantes aient exactement la même taille. Appui : échelle 0,985, pas de rebond. ═══════════════════════════════════════════════════════════════════════════ */ .fmt-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-16); height: 46px; padding: 0 22px; border: var(--hairline) solid var(--petrole); border-radius: var(--radius-4); background: var(--petrole); color: var(--text-on-inverse); font-family: var(--font-sans); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: var(--track-ui); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft), transform var(--dur-quick) var(--ease-soft); } .fmt-btn:active, .wp-block-button__link:active { transform: scale(var(--scale-press)); } .fmt-btn svg, .wp-block-button__link svg { flex: 0 0 auto; width: 15px; height: 15px; } /* Principal : pétrole plein. `is-style-fmt-accent` portait l'action principale des accroches ; il reste le bouton principal. */ .fmt-btn--primary, .is-style-fmt-accent .wp-block-button__link { background: var(--petrole); border-color: var(--petrole); color: var(--text-on-inverse); } .fmt-btn:hover, .fmt-btn--primary:hover, .wp-block-button__link:hover, .is-style-fmt-accent .wp-block-button__link:hover { background: var(--petrole-survol); border-color: var(--petrole-survol); color: var(--text-on-inverse); } /* Second : aplat beige, texte pétrole. */ .fmt-btn--ghost, .is-style-fmt-ghost .wp-block-button__link { background: var(--surface-contenant); border-color: transparent; color: var(--petrole); } .fmt-btn--ghost:hover, .is-style-fmt-ghost .wp-block-button__link:hover { background: var(--surface-contenant-survol); border-color: transparent; color: var(--petrole); } /* Discret : sans contour, pour une action tertiaire posée à côté d'un titre. */ .fmt-btn--discret { background: transparent; border-color: transparent; color: var(--petrole); } .fmt-btn--discret:hover { background: var(--petrole-08); border-color: transparent; color: var(--petrole); } /* Inverse : ivoire sur pétrole. */ .fmt-btn--inverse { background: var(--ivoire); border-color: var(--ivoire); color: var(--petrole); } .fmt-btn--inverse:hover { background: var(--ivoire-clair); border-color: var(--ivoire-clair); color: var(--petrole); } .fmt-btn--sm { height: 36px; padding: 0 16px; gap: 10px; font-size: 13px; } .fmt-btn--lg { height: 56px; padding: 0 28px; gap: 18px; } /* Puce (`Badge` du kit) : un poids, un format, une mention. Rayon 4 px, jamais de pilule, jamais de contour. Par défaut sur lin ; `--accent` en pétrole ; `--outline` (nom hérité) prend la teinte du contenant de la bande. */ .fmt-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-4); background: var(--lin); color: var(--petrole); font-family: var(--font-sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; line-height: 1; white-space: nowrap; } .fmt-chip--accent { background: var(--petrole); color: var(--text-on-inverse); } .fmt-chip--outline { background: var(--surface-contenant); color: var(--petrole); } /* ═══════════════════════════════════════════════════════════════════════════ SURFACE PÉTROLE La prise de parole unique de la page, et le pied de page. WordPress continue de servir ses couleurs de texte : on force la descendance, sinon chaque bloc devrait porter sa propre couleur. Le cuivre (3,11:1 sur pétrole) n'y sert jamais de texte. ═══════════════════════════════════════════════════════════════════════════ */ .fmt-invert, .fmt-section--petrole { --surface-contenant: var(--ivoire-12); --surface-contenant-survol: var(--ivoire-24); } .fmt-invert { background: var(--surface-inverse); color: var(--text-on-inverse); } .fmt-invert :where(h1, h2, h3, h4, h5, h6), .fmt-invert .fmt-display, .fmt-invert .is-style-fmt-display { color: var(--text-on-inverse); } .fmt-invert .fmt-accroche__suite { color: var(--text-on-inverse-muted); } .fmt-invert .fmt-eyebrow, .fmt-invert .is-style-fmt-eyebrow { color: var(--text-on-inverse); } .fmt-invert :where(a) { color: var(--text-on-inverse); } .fmt-invert :where(p, li, dd, td) > a:where(:not([class])) { text-decoration-color: var(--ivoire-64); } .fmt-invert :where(p, li, dd, td) > a:where(:not([class])):hover { color: var(--text-on-inverse); text-decoration-color: var(--ivoire); } /* Sur pétrole, l'action principale passe en ivoire — le pétrole plein y serait invisible — et la seconde en voile ivoire, toujours sans contour. */ .fmt-invert .fmt-btn--primary, .fmt-invert .is-style-fmt-accent .wp-block-button__link, .fmt-invert .wp-block-button:not(.is-style-fmt-ghost) .wp-block-button__link { background: var(--ivoire); border-color: var(--ivoire); color: var(--petrole); } .fmt-invert .fmt-btn--primary:hover, .fmt-invert .is-style-fmt-accent .wp-block-button__link:hover, .fmt-invert .wp-block-button:not(.is-style-fmt-ghost) .wp-block-button__link:hover { background: var(--ivoire-clair); border-color: var(--ivoire-clair); color: var(--petrole); } .fmt-invert .fmt-btn--ghost, .fmt-invert .is-style-fmt-ghost .wp-block-button__link { background: var(--ivoire-12); border-color: transparent; color: var(--text-on-inverse); } .fmt-invert .fmt-btn--ghost:hover, .fmt-invert .is-style-fmt-ghost .wp-block-button__link:hover { background: var(--ivoire-24); border-color: transparent; color: var(--text-on-inverse); } .fmt-invert .fmt-chip { background: var(--ivoire-12); color: var(--text-on-inverse); } /* ═══════════════════════════════════════════════════════════════════════════ LOGOTYPE Le fichier officiel « FMT / FRAGRANCES », imprimé en ligne par `fmt_fragrances_logo()` (functions.php) : son remplissage suit la couleur de `.fmt-logo`, pétrole par défaut, ivoire sur le pétrole. La taille se règle par `--fmt-logo-h`, la hauteur du dessin ; la largeur en découle (rapport 2,64). Repères de la maquette du kit : 55 px dans la barre du bureau, 44 px sur un téléphone. ═══════════════════════════════════════════════════════════════════════════ */ .fmt-logo { --fmt-logo-h: 44px; display: inline-flex; color: var(--petrole); } .fmt-logo__dessin { display: block; block-size: var(--fmt-logo-h); inline-size: auto; aspect-ratio: 1382 / 523; } .fmt-logo--ivoire { color: var(--ivoire); } /* ═══════════════════════════════════════════════════════════════════════════ SILLAGE Le motif abstrait tiré du creux du M : une grande courbe au pied d'une prise de parole pétrole ou d'une vignette de conditionnement. Une seule par écran, jamais sous un paragraphe. Imprimé par `fmt_fragrances_sillage()`. Courbe reconstruite d'après les faces d'étiquette : à remplacer par le vecteur officiel dès qu'il existe. ═══════════════════════════════════════════════════════════════════════════ */ .fmt-sillage { display: block; width: 100%; height: 72px; fill: var(--sillage-fill); pointer-events: none; } .fmt-invert .fmt-sillage, .fmt-section--petrole .fmt-sillage { fill: var(--sillage-fill-inverse); } .fmt-sillage__onde--arriere { opacity: .45; } /* ═══════════════════════════════════════════════════════════════════════════ MOUVEMENT Apparition douce, une seule fois, jamais au retour ; un léger décalage entre deux éléments qui arrivent ensemble. Le repli sans JavaScript est l'état visible — la classe `.fmt-js` n'est posée que si le script s'exécute. ═══════════════════════════════════════════════════════════════════════════ */ .fmt-js .fmt-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-enter) var(--ease-soft), transform var(--dur-enter) var(--ease-soft); } .fmt-js .fmt-reveal ~ .fmt-reveal { transition-delay: var(--stagger); } .fmt-js .fmt-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .fmt-js .fmt-reveal { opacity: 1; transform: none; } } /* Barre de défilement escamotée sur les rails horizontaux mobiles. */ .fmt-rail { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .fmt-rail::-webkit-scrollbar { display: none; } /* * Lien d'évitement. * * WordPress en pose un d'office sur tout thème bloc, en tout premier élément du * document, ciblant l'ancre `fmt-contenu` que portent les onze gabarits. Le * thème n'en ajoute donc PAS un second : deux liens d'évitement à la suite, un * lecteur au clavier les tabule tous les deux pour le même résultat. * * On se contente de l'habiller. WordPress écrit ses propres règles dans une * balise