/* Voiles de hero — memes valeurs et meme emplacement que le site de
reference : ces jetons vivent dans le CSS du theme, msa-tokens.css restant
la source de verite de la marque, non modifiee. */
:root {
--msa-veil-1: rgba(9, 9, 9, 0.94);
--msa-veil-2: rgba(9, 9, 9, 0.82);
--msa-veil-3: rgba(9, 9, 9, 0.15);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-width: 320px;
margin: 0;
background: var(--msa-black);
color: var(--msa-white);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-body);
line-height: var(--msa-lh-body);
text-rendering: optimizeLegibility;
}
html[data-univers="moto"],
.msa-site-shell[data-univers="moto"] {
--msa-accent: var(--msa-orange);
--msa-accent-ui: var(--msa-orange-deep);
--msa-accent-2: var(--msa-blue);
}
html[data-univers="marine"],
.msa-site-shell[data-univers="marine"] {
--msa-accent: var(--msa-blue);
--msa-accent-ui: var(--msa-blue);
--msa-accent-2: var(--msa-orange);
}
html[data-univers="ssv"],
.msa-site-shell[data-univers="ssv"] {
--msa-accent: var(--msa-orange);
--msa-accent-ui: var(--msa-orange-deep);
--msa-accent-2: var(--msa-blue);
}
/* --- Aplats de bouton ----------------------------------------------------
Décision client du 21/08/2026 : les boutons portent --msa-orange, l'orange
du logo, et non plus --msa-orange-deep. Libellé blanc, demandé le même jour
après un premier essai en noir.
⚠ CET ÉCART EST DÉLIBÉRÉ ET NON CONFORME. Ce n'est pas un oubli.
--msa-orange-deep n'existait que pour tenir le seuil WCAG AA sous un libellé
blanc — 4,97:1. Blanc sur --msa-orange donne **3,2:1**, sous les 4,5:1
exigés pour du texte normal. Le noir y donnait 6,2:1 ; le client a préféré
le blanc en connaissance de cause. Voir docs/DECISIONS.md D-020.
Ne pas « corriger » en revenant à --msa-orange-deep ni en repassant au noir
sans le lui redemander. Deux sorties conformes existent si la question
revient : repasser le libellé en noir, ou porter les libellés à 19 px en
gras — au-delà de 18,66 px gras, le seuil tombe à 3:1 et le blanc passe.
Marine n'est pas concerné : son accent est le bleu de marque, sur lequel le
blanc est conforme.
Ces jetons sont déclarés ICI, dans le CSS du thème, et non dans
msa-tokens.css : ce dernier est livré par la charte et remplacé tel quel à
chaque mise à jour. Un jeton propre au thème n'y a pas sa place.
Le texte d'accent, lui, garde --msa-accent-ui. */
:root {
--msa-btn-surface: var(--msa-orange);
--msa-btn-label: var(--msa-white);
/* Forme retenue le 21/08/2026 après comparatif : coins adoucis et léger
relief. Le rayon de charte --msa-radius-sm (2 px) reste celui des cartes
et des champs — seuls les boutons s'en écartent. Détail en fin de
fichier, section « Forme des boutons ». */
--msa-btn-radius: 6px;
/* Voile de la fenêtre « Nous écrire » (25/08/2026). Déclaré ici pour la même
raison que les jetons ci-dessus : msa-tokens.css est livré par la charte,
qui ne prévoit pas de composant modal. L'opacité tient le fond lisible
sans le noyer — la photo du produit reste devinable derrière. */
--msa-overlay: rgba(9, 9, 9, 0.62);
}
html[data-univers="marine"],
.msa-site-shell[data-univers="marine"] {
--msa-btn-surface: var(--msa-blue);
--msa-btn-label: var(--msa-white);
}
img,
svg,
video,
canvas {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--msa-link-invert);
text-underline-offset: 0.18em;
transition: color var(--msa-duration) var(--msa-ease);
}
a:hover {
color: var(--msa-white);
}
a[aria-current="page"],
.current-menu-item > a,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
color: var(--msa-white);
text-decoration-color: var(--msa-accent);
text-decoration-line: underline;
text-decoration-thickness: var(--msa-stroke-rule);
text-underline-offset: var(--msa-space-8);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: var(--msa-stroke-rule) solid var(--msa-accent);
outline-offset: var(--msa-space-4);
}
::selection {
background: var(--msa-accent-ui);
color: var(--msa-white);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
color: var(--msa-white);
font-family: var(--msa-font-display);
line-height: var(--msa-lh-heading);
}
h1 {
font-size: var(--msa-fs-h1);
}
h2 {
font-size: var(--msa-fs-h2);
}
h3 {
font-size: var(--msa-fs-h3);
}
p {
margin-top: 0;
}
.msa-site-shell {
min-height: 100vh;
overflow-x: clip;
border-left: var(--msa-stroke-rule) solid var(--msa-accent);
background: var(--msa-black);
color: var(--msa-white);
}
.msa-site-header {
position: sticky;
z-index: 100;
top: 0;
border-bottom: var(--msa-stroke-hair) solid var(--msa-white-14);
background: var(--msa-black-96);
}
.msa-site-header__inner,
.msa-site-main,
.msa-site-footer__inner {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
margin-inline: auto;
}
.msa-site-header__inner {
display: flex;
height: var(--msa-header-h);
align-items: center;
justify-content: space-between;
gap: var(--msa-space-24);
}
.msa-site-brand {
display: inline-flex;
min-height: 44px;
align-items: center;
flex: 0 0 auto;
}
.msa-site-logo {
width: 146px;
min-width: 120px;
}
.msa-primary-navigation {
flex: 1 1 auto;
justify-content: flex-end;
}
.msa-header-whatsapp {
display: none;
min-height: 44px;
align-items: center;
border: var(--msa-stroke-card) solid var(--msa-whatsapp);
border-radius: var(--msa-radius-sm);
padding-inline: var(--msa-space-12);
background: var(--msa-whatsapp);
color: var(--msa-whatsapp-text);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
letter-spacing: var(--msa-ls-eyebrow);
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
}
.msa-header-whatsapp:hover {
color: var(--msa-whatsapp-text);
text-decoration: underline;
text-decoration-thickness: var(--msa-stroke-hair);
text-underline-offset: var(--msa-space-4);
}
.msa-primary-navigation .wp-block-navigation__container,
.msa-footer-navigation .wp-block-navigation__container {
gap: var(--msa-space-16);
}
.msa-primary-navigation .msa-nav-secondary {
display: none;
}
.msa-primary-navigation .wp-block-navigation-item__content,
.msa-footer-navigation .wp-block-navigation-item__content,
.msa-site-footer__legal a {
min-height: 44px;
min-width: var(--msa-tap-min);
align-items: center;
color: var(--msa-border);
display: inline-flex;
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
letter-spacing: var(--msa-ls-eyebrow);
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
}
.msa-primary-navigation .wp-block-navigation-item__content:hover,
.msa-footer-navigation .wp-block-navigation-item__content:hover,
.msa-site-footer__legal a:hover {
color: var(--msa-white);
}
.msa-primary-navigation a[aria-current="page"],
.msa-footer-navigation a[aria-current="page"] {
color: var(--msa-white);
text-decoration-color: var(--msa-accent);
text-decoration-line: underline;
text-decoration-thickness: var(--msa-stroke-rule);
text-underline-offset: var(--msa-space-8);
}
.msa-primary-navigation .msa-nav-whatsapp > .wp-block-navigation-item__content,
.msa-footer-navigation .msa-nav-whatsapp > .wp-block-navigation-item__content {
min-height: 48px;
border: var(--msa-stroke-card) solid var(--msa-whatsapp);
border-radius: var(--msa-radius-sm);
padding-inline: var(--msa-space-16);
background: var(--msa-whatsapp);
color: var(--msa-whatsapp-text);
}
.msa-primary-navigation .msa-nav-whatsapp > .wp-block-navigation-item__content:hover,
.msa-footer-navigation .msa-nav-whatsapp > .wp-block-navigation-item__content:hover {
color: var(--msa-whatsapp-text);
text-decoration: underline;
text-decoration-thickness: var(--msa-stroke-hair);
text-underline-offset: var(--msa-space-4);
}
/* ---- Groupes de categories dans un sous-menu ---------------------------
Marine et SSV melangent des engins differents : leur sous-menu se lit par
categorie (Jet-ski / Bateau, SSV / ATV / Quad) plutot qu'a plat. Quand des
marques se rangent sous une categorie, celle-ci porte .msa-nav-groupe et
devient un intertitre ; les marques portent .msa-nav-marque et se decalent.
Moto n'a pas de groupes : un seul type d'engin, la categorie n'apprend rien
a qui est deja sur la page Moto.
Les selecteurs portent cinq classes, et non quatre. WordPress pose le
retrait du sous-menu avec un selecteur a quatre classes charge apres le
theme ; a specificite egale il gagnait, les marques s'alignaient sur leur
categorie et le groupement ne se voyait plus. Reprendre .has-child et le
« > » de sa regle nous met un cran au-dessus.
L'intertitre reste un lien — il mene au catalogue filtre sur la categorie.
D'ou le blanc plein plutot que le gris d'un libelle inerte. */
.msa-primary-navigation .has-child .wp-block-navigation__submenu-container > .msa-nav-groupe > .wp-block-navigation-item__content {
color: var(--msa-white);
font-size: var(--msa-fs-caption);
letter-spacing: var(--msa-ls-eyebrow);
}
/* Un filet separe deux groupes. Pas avant le premier : il suivrait
« Tout Marine » et se lirait comme un trait de fin de menu. */
.msa-primary-navigation .has-child .wp-block-navigation__submenu-container > .msa-nav-marque + .msa-nav-groupe > .wp-block-navigation-item__content {
margin-top: var(--msa-space-8);
border-top: var(--msa-stroke-hair) solid var(--msa-white-14);
}
/* Gris de second plan, et non un blanc affaibli : #6B6B6E ne tient pas le
contraste sur noir, d'ou le token dedie. */
.msa-primary-navigation .has-child .wp-block-navigation__submenu-container > .msa-nav-marque > .wp-block-navigation-item__content {
padding-left: var(--msa-space-24);
color: var(--msa-steel-legible);
font-size: var(--msa-fs-caption);
letter-spacing: 0.08em;
}
.msa-primary-navigation .has-child .wp-block-navigation__submenu-container > .msa-nav-marque > .wp-block-navigation-item__content:hover,
.msa-primary-navigation .has-child .wp-block-navigation__submenu-container > .msa-nav-marque > .wp-block-navigation-item__content:focus-visible {
color: var(--msa-white);
}
/* Deplie en mobile, le sous-menu reste ouvert et le retrait doit toujours
distinguer une marque de sa categorie.
WordPress y calcule le retrait en em : les entrees a 12px se retrouvaient
moins decalees que celles a 14px, et un intertitre finissait 5 px a gauche
de ses voisins de meme niveau. On repose donc les deux niveaux en pixels. */
/* Deplie en mobile, WordPress met l'entree parente en colonne avec
« align-items: flex-end » et laisse le sous-menu a la largeur de son
contenu : les marques se retrouvaient plaquees dans la moitie droite de
l'ecran, filets de separation compris, comme un fragment de menu detache.
On le remet a pleine largeur, et le retrait redevient l'affaire des
entrees elles-memes. */
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
align-items: stretch;
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
width: 100%;
padding-left: 0;
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding-left: var(--msa-space-16);
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .msa-nav-marque > .wp-block-navigation-item__content {
padding-left: var(--msa-space-32);
color: var(--msa-steel-legible);
}
/* L'overlay souligne deja chaque ligne. Le filet de separation des groupes,
utile dans le menu deroulant du bureau, s'y ajoutait au trait precedent et
donnait un double filet. */
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .msa-nav-marque + .msa-nav-groupe > .wp-block-navigation-item__content {
margin-top: 0;
border-top: 0;
}
.msa-primary-navigation .wp-block-navigation__responsive-container-open,
.msa-primary-navigation .wp-block-navigation__responsive-container-close {
min-width: 44px;
min-height: 44px;
color: var(--msa-white);
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
min-height: 100vh;
padding: var(--msa-space-32) var(--msa-margin);
background: var(--msa-black);
color: var(--msa-white);
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
align-items: stretch;
padding-top: var(--msa-space-64);
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
align-items: stretch;
gap: 0;
width: 100%;
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .msa-nav-secondary {
display: flex;
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
min-height: var(--msa-space-64);
border-bottom: var(--msa-stroke-hair) solid var(--msa-white-14);
justify-content: flex-start;
width: 100%;
}
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .msa-nav-whatsapp > .wp-block-navigation-item__content {
justify-content: center;
margin-top: var(--msa-space-24);
}
.msa-site-main {
padding-block: var(--msa-space-80);
}
.msa-foundation {
display: grid;
gap: var(--msa-space-32);
min-height: 52vh;
align-content: center;
}
.msa-foundation__eyebrow {
margin: 0;
color: var(--msa-accent);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
letter-spacing: var(--msa-ls-eyebrow);
text-transform: uppercase;
}
.msa-foundation h1 {
max-width: 12ch;
margin-bottom: 0;
font-size: var(--msa-fs-display);
letter-spacing: var(--msa-ls-display);
line-height: var(--msa-lh-display);
}
.msa-foundation p {
max-width: 58ch;
margin-bottom: 0;
color: var(--msa-border);
font-size: var(--msa-fs-body);
}
.msa-foundation__panel {
max-width: 820px;
border-top: var(--msa-stroke-card) solid var(--msa-white-18);
padding-top: var(--msa-space-24);
}
.msa-site-footer {
border-top: var(--msa-stroke-hair) solid var(--msa-white-14);
background: var(--msa-graphite);
}
.msa-site-footer__inner {
display: grid;
grid-template-columns: minmax(min(180px, 100%), 1fr) minmax(220px, 2fr) minmax(min(180px, 100%), 1fr);
gap: var(--msa-space-48);
padding-block: var(--msa-space-48);
color: var(--msa-border);
}
.msa-site-footer__brand {
display: grid;
align-content: start;
gap: var(--msa-space-16);
}
.msa-site-footer p {
margin: 0;
}
.msa-site-footer__brand p,
.msa-site-footer__legal {
color: var(--msa-border);
font-size: var(--msa-fs-small);
}
.msa-site-footer__contact,
.msa-site-footer__legal {
display: grid;
align-content: start;
gap: var(--msa-space-8);
}
.msa-site-footer__contact a {
min-height: 44px;
align-items: center;
color: var(--msa-border);
display: inline-flex;
font-family: var(--msa-font-display);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-bold);
letter-spacing: var(--msa-ls-eyebrow);
text-decoration: none;
text-transform: uppercase;
}
.wp-site-blocks {
min-height: 100vh;
}
.wp-block-woocommerce-customer-account {
display: none;
}
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart__drawer {
display: none;
}
.wp-block-post-title a {
color: inherit;
}
.wp-block-post-content :where(p, ul, ol) {
max-width: 820px;
}
.msa-catalogue-main {
color: var(--msa-black);
}
body.woocommerce .msa-site-shell {
background: var(--msa-white);
}
.msa-catalogue-hero {
display: grid;
gap: var(--msa-space-16);
margin-bottom: var(--msa-space-48);
border-top: var(--msa-stroke-rule) solid var(--msa-accent-ui);
padding-top: var(--msa-space-24);
}
.msa-catalogue-hero__eyebrow,
.msa-catalogue-empty__eyebrow {
margin: 0;
color: var(--msa-orange-deep);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
letter-spacing: var(--msa-ls-eyebrow);
text-transform: uppercase;
}
.msa-catalogue-hero h1,
.msa-catalogue-empty h2 {
margin: 0;
color: var(--msa-black);
}
.msa-catalogue-hero p,
.msa-catalogue-empty p {
max-width: 58ch;
margin: 0;
color: var(--msa-steel);
}
.msa-catalogue-filters {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--msa-space-16);
margin-bottom: var(--msa-space-24);
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-16);
background: var(--msa-light);
}
.msa-catalogue-filters__field {
display: grid;
gap: var(--msa-space-8);
min-width: 0;
color: var(--msa-black);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-semibold);
}
.msa-catalogue-filters__field span {
text-transform: uppercase;
}
.msa-catalogue-filters select {
width: 100%;
min-height: var(--msa-tap-min);
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding-inline: var(--msa-space-12);
background: var(--msa-white);
color: var(--msa-black);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-body);
}
.msa-catalogue-filters__actions {
display: flex;
align-items: end;
gap: var(--msa-space-12);
}
.msa-catalogue-filters__submit,
.msa-catalogue-filters__reset,
.msa-catalogue-empty__reset {
display: inline-flex;
min-height: var(--msa-tap-min);
align-items: center;
justify-content: center;
border: var(--msa-stroke-card) solid var(--msa-black);
border-radius: var(--msa-radius-sm);
padding-inline: var(--msa-space-16);
font-family: var(--msa-font-display);
/* Meme correction que pour les CTA : 15 px, valeur de `.msa-btn`. */
font-size: 0.9375rem;
font-weight: var(--msa-fw-bold);
letter-spacing: 0.05em;
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
}
.msa-catalogue-filters__submit {
background: var(--msa-black);
color: var(--msa-white);
cursor: pointer;
}
.msa-catalogue-filters__reset,
.msa-catalogue-empty__reset {
background: var(--msa-white);
color: var(--msa-black);
}
.msa-catalogue-filters__submit:hover {
color: var(--msa-white);
}
.msa-catalogue-filters__reset:hover,
.msa-catalogue-empty__reset:hover {
color: var(--msa-black);
}
.msa-catalogue-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--msa-space-24);
margin-bottom: var(--msa-space-32);
border-block: var(--msa-stroke-hair) solid var(--msa-border);
padding-block: var(--msa-space-16);
}
.msa-catalogue-toolbar .woocommerce-result-count,
.msa-catalogue-toolbar .woocommerce-ordering {
margin: 0;
}
.msa-catalogue-toolbar select {
min-height: var(--msa-tap-min);
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding-inline: var(--msa-space-12);
background: var(--msa-white);
color: var(--msa-black);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-body);
}
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--msa-space-24);
margin: 0 0 var(--msa-space-48);
padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none;
width: auto;
margin: 0;
}
.msa-product-card {
min-width: 0;
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
overflow: hidden;
background: var(--msa-white);
transition: box-shadow var(--msa-duration) var(--msa-ease);
}
.msa-product-card:hover,
.msa-product-card:focus-within {
box-shadow: var(--msa-shadow-card);
transform: none;
}
.msa-product-card__link {
display: grid;
min-height: 100%;
color: var(--msa-black);
text-decoration: none;
}
.msa-product-card__link:hover {
color: var(--msa-black);
}
.msa-product-card__media {
position: relative;
aspect-ratio: 4 / 3;
margin: 0;
background: var(--msa-light);
}
.msa-product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.msa-product-card__placeholder {
display: grid;
width: 100%;
height: 100%;
place-items: center;
background: var(--msa-light);
color: var(--msa-steel);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-h2);
font-weight: var(--msa-fw-black);
}
.msa-product-card__body {
display: grid;
gap: var(--msa-space-12);
padding: var(--msa-space-16);
}
.msa-product-card__badge {
position: absolute;
top: var(--msa-space-12);
left: var(--msa-space-12);
z-index: 1;
justify-self: start;
border-radius: var(--msa-radius-md);
padding: var(--msa-space-4) var(--msa-space-8);
/* Le badge reste orange sur tous les univers, Marine compris : c'est un
marqueur de catalogue, pas une surface d'accent. Valeurs écrites en clair
et non via --msa-btn-surface, qui bascule au bleu côté Marine.
Libellé blanc pour suivre les boutons — même écart délibéré, voir D-020. */
background: var(--msa-orange);
color: var(--msa-white);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
letter-spacing: 0.1em;
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-product-card__meta {
margin: 0;
color: var(--msa-steel);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.16em;
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-product-card__title {
margin: 0;
color: var(--msa-black);
font-size: var(--msa-fs-h3);
}
.msa-product-card__price,
.msa-product-card__price .price {
color: var(--msa-black);
font-family: var(--msa-font-display);
font-size: 22px;
font-weight: var(--msa-fw-black);
font-variant-numeric: tabular-nums;
line-height: var(--msa-lh-heading);
}
.msa-product-card__price del {
color: var(--msa-steel);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-semibold);
}
.msa-product-card__price ins {
color: var(--msa-error);
text-decoration: none;
}
.msa-price-consult {
color: var(--msa-black);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-price);
font-weight: var(--msa-fw-black);
font-variant-numeric: tabular-nums;
line-height: var(--msa-lh-heading);
}
.msa-catalogue-empty {
display: grid;
gap: var(--msa-space-16);
max-width: 820px;
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-32);
background: var(--msa-light);
}
.woocommerce-pagination {
margin-top: var(--msa-space-32);
}
.woocommerce-pagination ul.page-numbers {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-8);
margin: 0;
padding: 0;
border: 0;
}
.woocommerce-pagination ul.page-numbers li {
border: 0;
list-style: none;
}
/* La sélection est volontairement plus spécifique que celle de WooCommerce
(`.woocommerce nav.woocommerce-pagination ul li a`), qui impose
`display: block` et `min-width: 16px` : les numéros de page mesuraient 27 px
de large, sous la cible tactile de 44 px de la règle R10 de la charte. La
hauteur, elle, passait déjà. */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
.woocommerce-pagination .page-numbers {
display: inline-flex;
min-width: var(--msa-tap-min);
min-height: var(--msa-tap-min);
align-items: center;
justify-content: center;
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
color: var(--msa-black);
font-family: var(--msa-font-display);
font-weight: var(--msa-fw-bold);
text-decoration: none;
}
.woocommerce-pagination .page-numbers.current {
border-color: var(--msa-black);
background: var(--msa-black);
color: var(--msa-white);
}
.msa-product-main {
background: var(--msa-black);
color: var(--msa-white);
}
body.single-product .msa-site-shell {
background: var(--msa-black);
}
.msa-product-detail {
display: grid;
gap: var(--msa-space-48);
width: min(100% - (2 * var(--msa-space-24)), var(--msa-container));
margin: 0 auto;
padding: var(--msa-space-32) 0 var(--msa-space-64);
}
.msa-product-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-8);
margin: 0;
padding: 0;
color: var(--msa-text-muted);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-small);
list-style: none;
}
.msa-product-breadcrumb li {
display: inline-flex;
min-width: 0;
align-items: center;
gap: var(--msa-space-8);
}
.msa-product-breadcrumb li:not(:last-child)::after {
color: var(--msa-accent);
content: "/";
}
.woocommerce-breadcrumb a,
.msa-product-breadcrumb a {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
color: var(--msa-white);
text-decoration-color: transparent;
text-decoration-line: underline;
text-decoration-thickness: var(--msa-stroke-rule);
text-underline-offset: var(--msa-space-4);
}
.msa-product-breadcrumb a:hover,
.msa-product-breadcrumb a:focus-visible {
color: var(--msa-white);
text-decoration-color: var(--msa-accent);
}
.msa-product-hero {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: var(--msa-space-48);
align-items: start;
}
.msa-product-hero__media,
.msa-product-hero__summary {
min-width: 0;
}
.msa-product-gallery {
display: grid;
gap: var(--msa-space-16);
margin: 0;
}
.msa-product-gallery__stage,
.msa-product-gallery__placeholder {
display: grid;
aspect-ratio: 4 / 3;
align-items: center;
border: var(--msa-stroke-card) solid var(--msa-white-18);
background: var(--msa-graphite);
justify-items: center;
overflow: hidden;
}
.msa-product-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.msa-product-gallery__placeholder span {
color: var(--msa-white);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-h2);
font-weight: var(--msa-fw-black);
letter-spacing: 0;
}
.msa-product-gallery__thumbs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(72px, 100%), 92px));
gap: var(--msa-space-12);
}
.msa-product-gallery__thumb {
display: grid;
aspect-ratio: 1;
min-width: var(--msa-tap-min);
min-height: var(--msa-tap-min);
padding: 0;
border: var(--msa-stroke-card) solid var(--msa-white-22);
border-radius: var(--msa-radius-sm);
background: var(--msa-black);
cursor: pointer;
overflow: hidden;
}
.msa-product-gallery__thumb.is-active {
border-color: var(--msa-accent);
}
.msa-product-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.msa-product-hero__summary {
display: grid;
gap: var(--msa-space-24);
border-top: var(--msa-stroke-rule) solid var(--msa-accent);
padding-top: var(--msa-space-24);
}
.msa-product-hero__eyebrow,
.msa-product-card__meta {
overflow-wrap: anywhere;
}
.msa-product-hero__eyebrow {
margin: 0;
color: var(--msa-accent);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
text-transform: uppercase;
}
.msa-product-hero__terms {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-8);
}
.msa-product-term {
display: inline-flex;
min-height: var(--msa-tap-min);
align-items: center;
border: var(--msa-stroke-card) solid var(--msa-white-24);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-8) var(--msa-space-12);
color: var(--msa-white);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-semibold);
text-decoration: none;
}
.msa-product-term:hover,
.msa-product-term:focus-visible {
border-color: var(--msa-accent);
color: var(--msa-white);
}
/* MASQUÉ VOLONTAIREMENT depuis le 01/10/2026. Le gabarit affiche le logo de
la marque dès qu'il existe ; il n'en existait aucun jusqu'à l'arrivée des
logos officiels pour la bande de l'accueil. Visible, il ajoutait un bloc à
la fiche validée par le client (D-021 → R2), doublait la pastille de marque
juste au-dessus, et pesait de 180×19 (Sea-Doo) à 180×71 (KTM) selon la
fiche. Pour le réactiver, sur décision du client : retirer `display: none`. */
.msa-product-brand-logo {
display: none;
max-width: 180px;
}
.msa-product-brand-logo__image {
width: auto;
max-width: 100%;
max-height: 72px;
object-fit: contain;
}
.msa-product-title {
margin: 0;
color: var(--msa-white);
font-size: var(--msa-fs-h1);
overflow-wrap: anywhere;
}
.msa-product-price,
.msa-product-price .price,
.msa-product-price .msa-price-consult {
color: var(--msa-white);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-price);
font-weight: var(--msa-fw-black);
font-variant-numeric: tabular-nums;
line-height: var(--msa-lh-heading);
}
.msa-product-price del {
color: var(--msa-text-muted);
font-size: var(--msa-fs-body);
font-weight: var(--msa-fw-semibold);
}
.msa-product-price ins {
color: var(--msa-error);
text-decoration: none;
}
.msa-product-short-description {
color: var(--msa-light);
font-size: var(--msa-fs-body);
line-height: var(--msa-lh-body);
}
.msa-product-short-description p {
margin: 0;
}
.msa-product-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--msa-space-12);
}
.msa-product-action {
min-height: var(--msa-tap-min);
border: var(--msa-stroke-card) solid var(--msa-accent);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-12) var(--msa-space-16);
background: var(--msa-accent);
color: var(--msa-black);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-semibold);
}
.msa-product-action--secondary {
border-color: var(--msa-white-28);
background: transparent;
color: var(--msa-white);
}
.msa-product-action:disabled {
cursor: not-allowed;
opacity: 0.74;
}
.msa-product-editorial,
.msa-product-related {
display: grid;
gap: var(--msa-space-24);
border-top: var(--msa-stroke-rule) solid var(--msa-white-18);
padding-top: var(--msa-space-48);
}
.msa-product-editorial h2,
.msa-product-related h2 {
margin: 0;
color: var(--msa-white);
}
.msa-product-editorial__content {
max-width: 860px;
color: var(--msa-light);
line-height: var(--msa-lh-body);
}
.msa-product-editorial__content > *:first-child {
margin-top: 0;
}
.msa-product-editorial__content > *:last-child {
margin-bottom: 0;
}
.msa-product-editorial__content h2,
.msa-product-editorial__content h3,
.msa-product-editorial__content h4 {
color: var(--msa-white);
}
.msa-product-editorial__content a {
color: var(--msa-white);
text-decoration-color: var(--msa-accent);
}
.msa-product-editorial__content table {
width: 100%;
border-collapse: collapse;
}
.msa-product-editorial__content th,
.msa-product-editorial__content td {
border-bottom: var(--msa-stroke-card) solid var(--msa-white-18);
padding: var(--msa-space-12);
text-align: left;
vertical-align: top;
}
.msa-product-related .products {
margin: 0;
}
@media (max-width: 768px) {
.msa-site-header__inner,
.msa-site-main,
.msa-site-footer__inner {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
}
.msa-site-header__inner {
height: var(--msa-header-h);
}
.msa-site-logo {
width: 132px;
}
.msa-foundation h1 {
font-size: var(--msa-fs-display);
}
.msa-site-footer__inner {
grid-template-columns: 1fr;
gap: var(--msa-space-32);
}
.msa-catalogue-toolbar {
align-items: stretch;
flex-direction: column;
}
.msa-catalogue-filters {
grid-template-columns: 1fr;
}
.msa-catalogue-filters__actions {
align-items: stretch;
flex-direction: column;
}
.woocommerce ul.products {
grid-template-columns: 1fr;
}
.msa-product-detail {
width: min(100% - (2 * var(--msa-space-16)), var(--msa-container));
gap: var(--msa-space-32);
padding: var(--msa-space-24) 0 var(--msa-space-48);
}
.msa-product-hero {
grid-template-columns: 1fr;
gap: var(--msa-space-32);
}
.msa-product-actions {
grid-template-columns: 1fr;
}
.msa-product-gallery__thumbs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1180px) {
.msa-header-whatsapp {
display: inline-flex;
}
.msa-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none;
}
.msa-primary-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: inline-flex;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.msa-catalogue-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.woocommerce ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.msa-product-hero {
grid-template-columns: 1fr;
}
}
@media (min-width: 1024px) and (max-width: 1319px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.msa-product-actions {
grid-template-columns: 1fr;
}
}
.skip-link.screen-reader-text {
min-width: var(--msa-tap-min);
min-height: var(--msa-tap-min);
}
/* Les pages d'univers passent desormais par le gabarit unique page-univers :
leur titre est compose dans le hero, pas decore d'un filet d'accent en tete
de page. Voir la section « Pages univers » en fin de feuille. */
html[data-univers] body.page .wp-block-post-content {
display: grid;
gap: var(--msa-space-48);
}
.msa-universe-intro {
max-width: 720px;
margin: 0;
color: var(--msa-light);
font-size: var(--msa-fs-body);
line-height: var(--msa-lh-body);
}
.msa-universe-sections {
display: grid;
gap: var(--msa-space-48);
}
.msa-universe-section,
.msa-universe-cta {
display: grid;
gap: var(--msa-space-24);
border-top: var(--msa-stroke-rule) solid var(--msa-white-18);
padding-top: var(--msa-space-48);
}
.msa-universe-section--light {
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-32);
background: var(--msa-light);
color: var(--msa-black);
}
.msa-universe-section__heading {
display: grid;
gap: var(--msa-space-8);
max-width: 720px;
}
.msa-universe-section__heading h2,
.msa-universe-cta h2 {
margin: 0;
}
.msa-universe-section--light .msa-universe-section__heading h2 {
color: var(--msa-black);
}
.msa-universe-eyebrow {
margin: 0;
color: var(--msa-accent);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-universe-section--light .msa-universe-eyebrow {
color: var(--msa-accent-ui);
}
.msa-universe-term-grid,
.msa-universe-brand-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--msa-space-16);
}
.msa-universe-term-card,
.msa-universe-brand {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-16);
font-family: var(--msa-font-display);
font-weight: var(--msa-fw-bold);
text-decoration: none;
}
.msa-universe-term-card {
justify-content: space-between;
background: var(--msa-white);
color: var(--msa-black);
}
.msa-universe-term-card:hover,
.msa-universe-term-card:focus-visible {
border-color: var(--msa-accent-ui);
color: var(--msa-black);
}
.msa-universe-brand {
justify-content: center;
min-height: 88px;
background: var(--msa-white);
color: var(--msa-black);
}
.msa-universe-brand img {
max-width: 160px;
max-height: 56px;
object-fit: contain;
}
.msa-universe-products .products {
margin: 0;
}
.msa-universe-cta {
border-color: var(--msa-accent);
max-width: 860px;
}
.msa-universe-cta p {
max-width: 58ch;
margin: 0;
color: var(--msa-light);
}
.msa-universe-cta__actions {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-12);
}
.msa-universe-button,
.msa-universe-link {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
justify-content: center;
border: var(--msa-stroke-card) solid var(--msa-accent);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-12) var(--msa-space-16);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
}
.msa-universe-button {
background: var(--msa-accent);
color: var(--msa-black);
}
.msa-universe-link {
background: transparent;
color: var(--msa-white);
}
.msa-universe-button:hover {
color: var(--msa-black);
}
.msa-universe-link:hover {
color: var(--msa-white);
}
@media (max-width: 768px) {
html[data-univers] body.page .msa-site-main {
gap: var(--msa-space-32);
padding-bottom: var(--msa-space-48);
}
html[data-univers] body.page .wp-block-post-title {
margin-top: var(--msa-space-48);
padding-top: var(--msa-space-24);
font-size: var(--msa-fs-display);
}
.msa-universe-term-grid,
.msa-universe-brand-grid {
grid-template-columns: 1fr;
}
.msa-universe-section--light {
padding: var(--msa-space-24);
}
.msa-universe-cta__actions {
align-items: stretch;
flex-direction: column;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.msa-universe-term-grid,
.msa-universe-brand-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phase 7: neutral MSA homepage. */
.msa-home-main {
width: 100%;
padding-block: 0;
}
.msa-home-main .wp-block-post-content {
display: grid;
gap: var(--msa-space-80);
}
.msa-home-hero,
.msa-home-section,
.msa-home-final {
width: min(100%, var(--msa-container));
margin-inline: auto;
}
.msa-home-hero {
position: relative;
display: grid;
min-height: calc(100vh - var(--msa-header-h));
align-content: center;
gap: var(--msa-space-32);
overflow: hidden;
border-top: var(--msa-stroke-rule) solid var(--msa-white-18);
padding-block: var(--msa-space-80);
}
.msa-home-hero__content {
position: relative;
z-index: 1;
display: grid;
gap: var(--msa-space-24);
max-width: 900px;
}
.msa-home-eyebrow,
.msa-home-kicker {
margin: 0;
color: var(--msa-accent);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-home-hero h1 {
max-width: 13ch;
margin: 0;
color: var(--msa-white);
font-size: var(--msa-fs-display);
letter-spacing: var(--msa-ls-display);
line-height: var(--msa-lh-display);
}
.msa-home-hero p,
.msa-home-section__heading p,
.msa-home-intro p,
.msa-home-orientation p,
.msa-home-final p {
max-width: 720px;
margin: 0;
color: var(--msa-light);
font-size: var(--msa-fs-body);
line-height: var(--msa-lh-body);
}
.msa-home-actions,
.msa-home-section__actions {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-12);
}
.msa-home-button,
.msa-home-link {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
justify-content: center;
border: var(--msa-stroke-card) solid var(--msa-white);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-12) var(--msa-space-16);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
}
.msa-home-button {
border-color: var(--msa-white);
background: var(--msa-white);
color: var(--msa-black);
}
.msa-home-link {
background: transparent;
color: var(--msa-white);
}
.msa-home-button:hover {
color: var(--msa-black);
}
.msa-home-link:hover {
color: var(--msa-white);
}
.msa-home-intro,
.msa-home-orientation,
.msa-home-final {
display: grid;
gap: var(--msa-space-24);
border-top: var(--msa-stroke-rule) solid var(--msa-white-18);
padding-top: var(--msa-space-48);
}
.msa-home-section {
display: grid;
gap: var(--msa-space-24);
}
.msa-home-section__heading {
display: grid;
gap: var(--msa-space-8);
max-width: 780px;
}
.msa-home-section h2,
.msa-home-intro h2,
.msa-home-orientation h2,
.msa-home-final h2 {
margin: 0;
}
.msa-home-universe-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--msa-space-24);
}
.msa-home-universe-card {
--msa-card-accent: var(--msa-orange);
--msa-card-accent-ui: var(--msa-orange-deep);
display: grid;
min-width: 0;
gap: var(--msa-space-16);
border-top: var(--msa-stroke-rule) solid var(--msa-card-accent);
padding-top: var(--msa-space-24);
}
.msa-home-universe-card--marine {
--msa-card-accent: var(--msa-blue-light);
--msa-card-accent-ui: var(--msa-blue);
}
.msa-home-universe-card h3 {
margin: 0;
color: var(--msa-white);
}
.msa-home-universe-card p {
margin: 0;
color: var(--msa-light);
}
.msa-home-universe-card .msa-home-link {
justify-self: start;
border-color: var(--msa-card-accent);
}
.msa-home-dynamic {
display: grid;
gap: var(--msa-space-80);
}
.msa-home-products {
color: var(--msa-black);
}
.msa-home-products .msa-home-section__heading h2 {
color: var(--msa-white);
}
.msa-home-products .msa-home-product-grid {
margin: 0;
}
.msa-home-products .msa-home-section__actions {
margin-top: var(--msa-space-8);
}
.msa-home-brands {
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-32);
background: var(--msa-light);
color: var(--msa-black);
}
.msa-home-brands .msa-home-eyebrow {
color: var(--msa-orange-deep);
}
.msa-home-brands h2,
.msa-home-brands .msa-home-section__heading p {
color: var(--msa-black);
}
.msa-home-brand-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--msa-space-16);
}
.msa-home-brand {
display: inline-flex;
min-height: 96px;
min-width: var(--msa-tap-min);
align-items: center;
justify-content: center;
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-16);
background: var(--msa-white);
color: var(--msa-black);
font-family: var(--msa-font-display);
font-weight: var(--msa-fw-bold);
text-align: center;
text-decoration: none;
}
.msa-home-brand:hover,
.msa-home-brand:focus-visible {
border-color: var(--msa-black);
color: var(--msa-black);
}
.msa-home-brand__logo {
width: auto;
max-width: 160px;
max-height: 56px;
object-fit: contain;
}
.msa-home-final {
margin-bottom: var(--msa-space-80);
border-color: var(--msa-accent);
}
@media (max-width: 768px) {
.msa-home-main .wp-block-post-content {
gap: var(--msa-space-48);
}
.msa-home-hero {
min-height: calc(100svh - var(--msa-header-h));
padding-block: var(--msa-space-64);
}
.msa-home-hero h1 {
font-size: var(--msa-fs-display);
}
.msa-home-actions,
.msa-home-section__actions {
align-items: stretch;
flex-direction: column;
}
.msa-home-universe-grid,
.msa-home-brand-grid {
grid-template-columns: 1fr;
}
.msa-home-brands {
padding: var(--msa-space-24);
}
.msa-home-final {
margin-bottom: var(--msa-space-48);
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.msa-home-universe-grid,
.msa-home-brand-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phase 8: commercial conversion forms and CTAs. */
.msa-product-action,
.msa-conversion-action,
.msa-form-submit {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
justify-content: center;
border: var(--msa-stroke-card) solid var(--msa-accent);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-12) var(--msa-space-16);
font-family: var(--msa-font-display);
/*
* 15 px, la valeur de `.msa-btn` dans msa-site.css (0.9375rem). Ces boutons
* etaient a --msa-fs-caption, soit 12 px : sous la valeur de charte, et meme
* sous celle de la variante compacte `.msa-btn--sm` (13 px). Ce sont
* pourtant les trois appels a l'action commerciaux du site.
* Aucun jeton ne vaut 15 px — la charte l'ecrit elle aussi en litteral.
*/
font-size: 0.9375rem;
font-weight: var(--msa-fw-bold);
letter-spacing: 0.05em;
line-height: var(--msa-lh-heading);
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
/*
* Aplat de bouton : --msa-btn-surface / --msa-btn-label, jamais un couple
* écrit à la main. Le duo est défini en tête de fichier et bascule tout seul
* côté Marine, où le libellé doit rester blanc sur le bleu de marque.
*/
.msa-product-action,
.msa-form-submit,
.msa-conversion-action {
border-color: var(--msa-btn-surface);
background: var(--msa-btn-surface);
color: var(--msa-btn-label);
}
.msa-product-action:hover,
.msa-form-submit:hover,
.msa-conversion-action:hover {
color: var(--msa-btn-label);
}
.msa-product-action--secondary,
.msa-conversion-action--secondary,
.msa-conversion-action--call {
border-color: var(--msa-white-28);
background: transparent;
color: var(--msa-white);
}
.msa-product-action--secondary:hover,
.msa-conversion-action--secondary:hover,
.msa-conversion-action--call:hover {
color: var(--msa-white);
}
.msa-product-action--whatsapp,
.msa-conversion-action--whatsapp {
border-color: var(--msa-whatsapp);
background: var(--msa-whatsapp);
color: var(--msa-whatsapp-text);
}
.msa-product-action--whatsapp:hover,
.msa-conversion-action--whatsapp:hover {
color: var(--msa-whatsapp-text);
}
.msa-conversion-actions {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-12);
}
.msa-lead-form-section {
display: grid;
gap: var(--msa-space-24);
border-top: var(--msa-stroke-rule) solid var(--msa-white-18);
padding-top: var(--msa-space-48);
}
.msa-lead-form-section__heading {
display: grid;
gap: var(--msa-space-8);
max-width: 760px;
}
.msa-lead-form-section__heading h2,
.msa-lead-form-section__heading p {
margin: 0;
}
.msa-lead-form-section__heading p {
color: var(--msa-light);
}
.msa-conversion-eyebrow {
margin: 0;
color: var(--msa-accent);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-lead-form {
display: grid;
gap: var(--msa-space-16);
max-width: 720px;
}
.msa-form-field {
display: grid;
gap: var(--msa-space-8);
margin: 0;
}
.msa-form-field label {
color: var(--msa-white);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-semibold);
}
.msa-form-field input,
.msa-form-field select,
.msa-form-field textarea {
width: 100%;
min-height: var(--msa-tap-min);
border: var(--msa-stroke-card) solid var(--msa-white-28);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-12);
background: var(--msa-white);
color: var(--msa-black);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-body);
}
.msa-form-field textarea {
min-height: 128px;
resize: vertical;
}
.msa-form-field--honeypot {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.msa-form-submit {
justify-self: start;
cursor: pointer;
}
.msa-form-notice {
max-width: 720px;
border: var(--msa-stroke-card) solid currentColor;
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-16);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-body);
font-weight: var(--msa-fw-semibold);
}
.msa-form-notice--success {
color: var(--msa-success);
background: var(--msa-white);
}
.msa-form-notice--error {
color: var(--msa-error);
background: var(--msa-white);
}
body.page-id-20 .wp-block-post-content {
display: grid;
gap: var(--msa-space-48);
}
body.page-id-20 .msa-contact-shell {
display: grid;
gap: var(--msa-space-32);
}
body.page-id-20 .msa-contact-shell > p {
max-width: 720px;
color: var(--msa-light);
}
@media (max-width: 768px) {
.msa-conversion-actions,
.msa-product-actions {
align-items: stretch;
grid-template-columns: 1fr;
}
.msa-product-action,
.msa-conversion-action,
.msa-form-submit {
width: 100%;
}
.msa-lead-form-section {
gap: var(--msa-space-16);
padding-top: var(--msa-space-32);
}
}
/* Phase 12 + 13: institutional pages and launch footer. */
.msa-footer-launch-nav {
display: flex;
flex-direction: column;
gap: var(--msa-space-8);
}
.msa-footer-launch-nav a {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
color: var(--msa-border);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
}
.msa-footer-launch-nav a:hover,
.msa-footer-launch-nav a:focus-visible {
color: var(--msa-white);
}
body.page-id-18 .wp-block-post-content,
body.page-id-19 .wp-block-post-content {
display: grid;
gap: var(--msa-space-64);
}
.msa-institutional-shell {
display: grid;
gap: var(--msa-space-64);
margin-bottom: var(--msa-space-80);
}
.msa-institutional-hero,
.msa-institutional-section {
display: grid;
gap: var(--msa-space-24);
border-top: var(--msa-stroke-rule) solid var(--msa-white-18);
padding-top: var(--msa-space-48);
}
.msa-institutional-hero > p,
.msa-institutional-section > p {
max-width: 760px;
margin: 0;
color: var(--msa-light);
}
.msa-institutional-section h2,
.msa-institutional-card h3 {
margin: 0;
}
.msa-institutional-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--msa-space-24);
}
.msa-institutional-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.msa-institutional-card {
display: grid;
min-width: 0;
gap: var(--msa-space-16);
border-top: var(--msa-stroke-rule) solid var(--msa-orange);
padding-top: var(--msa-space-24);
}
.msa-institutional-card--marine {
border-top-color: var(--msa-blue-light);
}
.msa-institutional-card p,
.msa-institutional-card li {
margin: 0;
color: var(--msa-light);
}
.msa-institutional-card a {
font-family: var(--msa-font-display);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-bold);
text-transform: uppercase;
}
.msa-institutional-list {
display: grid;
gap: var(--msa-space-8);
margin: 0;
padding-left: var(--msa-space-24);
}
.msa-institutional-section--light {
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-32);
background: var(--msa-light);
color: var(--msa-black);
}
.msa-institutional-section--light h2,
.msa-institutional-section--light p {
color: var(--msa-black);
}
.msa-institutional-final {
border-top-color: var(--msa-accent);
}
@media (max-width: 768px) {
body.page-id-18 .wp-block-post-content,
body.page-id-19 .wp-block-post-content,
.msa-institutional-shell {
gap: var(--msa-space-48);
}
.msa-institutional-grid,
.msa-institutional-grid--two {
grid-template-columns: 1fr;
}
.msa-institutional-section--light {
padding: var(--msa-space-24);
}
}
/* Phase 12 + 13 QA: enforce tactile link targets inside institutional content. */
.msa-home-button .wp-block-button__link,
.msa-home-link .wp-block-button__link,
.msa-institutional-card p > a {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
}
.msa-institutional-card p > a {
padding-block: var(--msa-space-8);
}
/* Claude Design reference integration. */
.msa-header {
min-height: var(--msa-header-h);
}
.msa-header-actions {
display: flex;
align-items: center;
gap: var(--msa-space-24);
min-width: 0;
}
.msa-btn-whatsapp {
display: inline-flex;
min-height: var(--msa-tap-min);
min-width: var(--msa-tap-min);
align-items: center;
justify-content: center;
gap: 9px;
border: var(--msa-stroke-card) solid var(--msa-whatsapp);
border-radius: var(--msa-radius-sm);
padding: 0 18px;
background: var(--msa-whatsapp);
color: var(--msa-whatsapp-text);
font-family: var(--msa-font-display);
font-size: 13px;
font-weight: var(--msa-fw-bold);
letter-spacing: 0.05em;
line-height: var(--msa-lh-heading);
text-decoration: none;
text-transform: uppercase;
transition: background var(--msa-duration) var(--msa-ease);
}
.msa-btn-whatsapp:hover,
.msa-btn-whatsapp:focus-visible {
background: var(--msa-whatsapp-hover);
color: var(--msa-whatsapp-text);
}
.msa-header-whatsapp {
display: inline-flex;
}
.msa-icon {
display: inline-block;
width: 24px;
height: 24px;
color: currentColor;
fill: none;
}
.msa-icon--accent {
color: var(--msa-accent);
}
.msa-eyebrow-accent {
color: var(--msa-orange);
}
html[data-univers="marine"] .msa-eyebrow-accent {
color: var(--msa-blue-light);
}
.msa-hero-accueil {
position: relative;
overflow: hidden;
}
.msa-hero-accueil::before {
position: absolute;
z-index: 1;
top: -260px;
right: -160px;
width: 760px;
height: 760px;
border: 34px solid var(--msa-accent);
border-radius: 50%;
content: "";
opacity: 0.20;
pointer-events: none;
}
.msa-section-claude {
padding-block: var(--msa-space-80);
}
.msa-section-heading-claude {
align-items: flex-end;
border-bottom: 2px solid var(--msa-white);
padding-bottom: 14px;
}
.msa-section-heading-claude h2 {
margin: 0;
font-size: var(--msa-fs-h2);
font-weight: var(--msa-fw-black);
letter-spacing: -0.015em;
text-transform: uppercase;
}
.msa-section-heading-claude p {
color: var(--msa-light);
}
.msa-carte-univers {
display: grid;
overflow: hidden;
border: var(--msa-stroke-card) solid var(--msa-border);
border-top: 5px solid var(--msa-orange);
border-radius: var(--msa-radius-sm);
background: var(--msa-white);
color: var(--msa-black);
transition: box-shadow var(--msa-duration) var(--msa-ease);
}
.msa-carte-univers:hover,
.msa-carte-univers:focus-within {
box-shadow: var(--msa-shadow-card);
}
.msa-carte-univers--marine {
border-top-color: var(--msa-blue);
}
.msa-carte-univers__media {
display: grid;
min-height: 172px;
place-items: center;
background: var(--msa-graphite);
color: var(--msa-white);
}
.msa-carte-univers__media .msa-icon {
width: 54px;
height: 54px;
opacity: 0.9;
}
.msa-carte-univers h3,
.msa-carte-univers p {
color: var(--msa-black);
}
.msa-carte-univers h3,
.msa-carte-univers p,
.msa-carte-univers > .msa-home-link {
margin-inline: var(--msa-space-24);
}
.msa-carte-univers h3 {
margin-top: var(--msa-space-24);
text-transform: uppercase;
}
.msa-carte-univers > .msa-home-link {
justify-self: start;
margin-bottom: var(--msa-space-24);
border-color: var(--msa-black);
color: var(--msa-black);
}
.msa-bande-services {
width: 100%;
padding-block: var(--msa-space-64);
background: var(--msa-black);
color: var(--msa-white);
}
.msa-bande-services__grid {
display: grid;
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
margin-inline: auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--msa-space-48);
}
.msa-bande-services section {
display: grid;
gap: var(--msa-space-8);
}
.msa-bande-services .msa-icon {
width: 34px;
height: 34px;
margin-bottom: var(--msa-space-8);
}
.msa-bande-services h3 {
margin: 0;
font-size: 19px;
text-transform: uppercase;
}
.msa-bande-services p {
margin: 0;
color: var(--msa-steel-legible);
font-size: 15px;
line-height: var(--msa-lh-body);
}
.msa-cta-claude {
border-top-color: var(--msa-accent);
background: var(--msa-light);
color: var(--msa-black);
padding: var(--msa-space-64) var(--msa-margin);
}
.msa-cta-claude h2,
.msa-cta-claude p {
color: var(--msa-black);
}
.msa-footer-claude {
width: 100%;
padding: var(--msa-space-64) var(--msa-margin) var(--msa-space-32);
background: var(--msa-black);
color: var(--msa-white);
}
.msa-footer-claude__grid,
.msa-footer-claude__rule,
.msa-footer-claude__legal {
width: min(100%, var(--msa-container));
margin-inline: auto;
}
/* Les titres de colonne sont passés de h3 à h2 pour éviter un saut de niveau
sur les pages dont le corps ne porte qu'un h1. L'apparence ne change pas. */
.msa-footer-claude h2,
.msa-footer-claude h3 {
margin: 0 0 var(--msa-space-16);
font-size: 14px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.msa-footer-claude p {
color: var(--msa-steel-legible);
font-size: 15px;
line-height: 1.8;
}
.msa-footer-claude a {
color: var(--msa-steel-legible);
}
/* Les liens des colonnes Contact et de la ligne légale sont posés dans des
paragraphes séparés par des : ils restaient de simples boîtes inline de
18 px de haut, loin des 44 px de la règle R10. Les passer en inline-flex leur
donne la hauteur de cible sans changer l'empilement. */
.msa-footer-claude p a,
.msa-footer-claude__legal a {
display: inline-flex;
align-items: center;
min-height: var(--msa-tap-min);
}
.msa-footer-claude a:hover,
.msa-footer-claude a:focus-visible {
color: var(--msa-white);
}
.msa-footer-claude__rule {
border-color: var(--msa-graphite);
margin-block: var(--msa-space-48) var(--msa-space-24);
}
.msa-footer-claude__legal {
color: var(--msa-steel-legible);
font-family: var(--msa-font-cond);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 900px) {
.msa-bande-services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.msa-header {
min-height: 64px;
}
.msa-header-actions {
gap: var(--msa-space-12);
}
.msa-btn-whatsapp {
min-height: 44px;
padding-inline: var(--msa-space-12);
font-size: 12px;
}
.msa-hero-accueil::before {
top: -140px;
right: -190px;
width: 380px;
height: 380px;
border-width: 20px;
}
.msa-section-claude,
.msa-bande-services,
.msa-cta-claude {
padding-block: var(--msa-space-48);
}
.msa-bande-services__grid {
grid-template-columns: 1fr;
}
}
/* Claude Design QA refinements. */
.msa-primary-navigation .msa-nav-whatsapp {
display: none;
}
.msa-cta-claude .msa-conversion-action--call,
.msa-cta-claude .msa-conversion-action--secondary {
border-color: var(--msa-black);
background: transparent;
color: var(--msa-black);
}
.msa-cta-claude .msa-conversion-action--call:hover,
.msa-cta-claude .msa-conversion-action--secondary:hover,
.msa-cta-claude .msa-conversion-action--call:focus-visible,
.msa-cta-claude .msa-conversion-action--secondary:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
.msa-footer-claude__grid {
gap: var(--msa-space-48);
}
/* Claude reference correction: homepage hero is black with brand arc, no media image. */
.msa-home-hero {
min-height: 620px;
background: var(--msa-black);
}
.msa-home-hero::after {
content: none;
}
/* Claude Design strict alignment: homepage visual reference. */
.msa-site-header {
min-height: var(--msa-header-h);
}
.msa-site-header__inner {
min-height: var(--msa-header-h);
}
.msa-site-brand {
display: inline-flex;
min-height: var(--msa-tap-min);
align-items: center;
}
.msa-site-logo {
width: 140px;
height: auto;
max-height: 52px;
object-fit: contain;
}
.msa-home-main .wp-block-post-content {
gap: 0;
}
.msa-home-hero,
.msa-home-section,
.msa-home-final,
.msa-bande-services {
width: min(100%, var(--msa-container));
margin-inline: auto;
}
.msa-section-claude,
.msa-cta-claude {
position: relative;
isolation: isolate;
}
.msa-section-claude::before,
.msa-cta-claude::before {
position: absolute;
z-index: -1;
inset-block: 0;
inset-inline: calc(50% - 50vw);
content: "";
pointer-events: none;
}
.msa-section-claude::before {
background: var(--msa-white);
}
.msa-cta-claude::before {
background: var(--msa-light);
}
.msa-home-hero.msa-hero-accueil {
position: relative;
min-height: 620px;
align-content: center;
overflow: hidden;
border-top: 0;
padding: var(--msa-space-80) var(--msa-margin);
background: var(--msa-black);
clip-path: none;
}
.msa-home-hero.msa-hero-accueil::before,
.msa-home-hero.msa-hero-accueil::after {
position: absolute;
z-index: 0;
box-sizing: border-box;
border-style: solid;
border-radius: 50%;
background: transparent;
content: "";
pointer-events: none;
}
.msa-home-hero.msa-hero-accueil::before {
top: -260px;
right: -160px;
width: 760px;
height: 760px;
border-width: 34px;
border-color: var(--msa-orange);
opacity: 0.22;
}
.msa-home-hero.msa-hero-accueil::after {
right: 140px;
bottom: -560px;
width: 920px;
height: 920px;
border-width: 30px;
border-color: var(--msa-blue);
opacity: 0.18;
}
.msa-home-hero__content {
z-index: 1;
max-width: 820px;
}
.msa-home-kicker.msa-eyebrow-accent {
color: var(--msa-orange);
font-size: 12px;
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.2em;
}
.msa-home-hero h1 {
max-width: 12ch;
color: var(--msa-white);
font-size: 56px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
text-transform: uppercase;
}
.msa-home-hero p {
max-width: 720px;
color: var(--msa-steel-legible);
font-size: 19px;
line-height: 1.55;
}
.msa-home-actions {
margin-top: var(--msa-space-16);
}
.msa-home-button,
.msa-home-link {
min-height: 48px;
padding: 15px 24px;
border-radius: var(--msa-radius-sm);
font-size: 15px;
letter-spacing: 0.05em;
}
.msa-home-button {
border-color: var(--msa-orange-deep);
background: var(--msa-orange-deep);
color: var(--msa-white);
}
.msa-home-button:hover,
.msa-home-button:focus-visible {
border-color: var(--msa-black);
background: var(--msa-white);
color: var(--msa-black);
}
.msa-home-link {
border-color: var(--msa-white);
background: transparent;
color: var(--msa-white);
}
.msa-home-link:hover,
.msa-home-link:focus-visible {
background: var(--msa-white);
color: var(--msa-black);
}
.msa-section-claude {
padding: var(--msa-space-80) 0;
background: var(--msa-white);
color: var(--msa-black);
clip-path: none;
}
.msa-section-heading-claude {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--msa-space-24);
border-bottom: 2px solid var(--msa-black);
margin-bottom: var(--msa-space-32);
padding-bottom: 14px;
}
.msa-section-heading-claude h2 {
color: var(--msa-black);
font-size: 30px;
font-weight: 800;
letter-spacing: -0.015em;
text-transform: uppercase;
}
.msa-section-heading-claude p {
color: var(--msa-steel);
font-size: 15px;
}
.msa-home-universe-grid {
gap: var(--msa-space-24);
}
.msa-home-universe-card.msa-carte-univers {
display: block;
overflow: hidden;
border: 1.5px solid var(--msa-border);
border-top: 5px solid var(--msa-orange);
border-radius: var(--msa-radius-sm);
padding: 0;
background: var(--msa-white);
color: var(--msa-black);
transition: box-shadow var(--msa-duration) var(--msa-ease);
}
.msa-home-universe-card.msa-carte-univers--marine {
border-top-color: var(--msa-blue);
}
.msa-home-universe-card.msa-carte-univers:hover {
box-shadow: var(--msa-shadow-card);
}
.msa-carte-univers__media {
display: flex;
aspect-ratio: 16 / 9;
align-items: flex-end;
justify-content: flex-start;
padding: var(--msa-space-12);
background: var(--msa-graphite);
color: var(--msa-steel-legible);
font-family: var(--msa-font-cond);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.msa-home-universe-card > :not(.msa-carte-univers__media) {
margin: 0 var(--msa-space-24);
}
.msa-home-universe-card > :nth-child(2) {
margin-top: var(--msa-space-24);
}
.msa-home-universe-card > :last-child {
margin-bottom: var(--msa-space-24);
}
.msa-home-universe-card h3 {
color: var(--msa-black);
font-size: 22px;
text-transform: uppercase;
}
.msa-home-universe-card p {
color: var(--msa-black);
font-size: 15px;
line-height: 1.6;
}
.msa-home-universe-card .msa-home-link {
display: inline-flex;
min-height: 44px;
border-color: var(--msa-black);
color: var(--msa-black);
font-size: 14px;
}
.msa-home-universe-card .msa-home-link:hover,
.msa-home-universe-card .msa-home-link:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
.msa-bande-services {
padding: var(--msa-space-64) 0;
background: var(--msa-black);
clip-path: none;
}
.msa-cta-claude {
margin-bottom: 0;
border-top: 5px solid var(--msa-orange);
padding: var(--msa-space-64) var(--msa-margin);
background: var(--msa-light);
color: var(--msa-black);
clip-path: none;
}
.msa-cta-claude h2,
.msa-cta-claude p {
color: var(--msa-black);
}
@media (max-width: 768px) {
.msa-site-logo {
width: 104px;
max-height: 42px;
}
.msa-home-hero.msa-hero-accueil {
min-height: calc(100svh - var(--msa-header-h));
padding: var(--msa-space-48) var(--msa-margin);
}
.msa-home-hero.msa-hero-accueil::before {
top: -140px;
right: -210px;
width: 420px;
height: 420px;
border-width: 20px;
}
.msa-home-hero.msa-hero-accueil::after {
right: -40px;
bottom: -310px;
width: 520px;
height: 520px;
border-width: 18px;
}
.msa-home-hero h1 {
font-size: 36px;
}
.msa-home-hero p {
font-size: 16px;
}
.msa-home-button,
.msa-home-link {
min-height: 52px;
width: 100%;
}
.msa-section-claude,
.msa-bande-services,
.msa-cta-claude {
padding-block: var(--msa-space-48);
}
.msa-section-heading-claude {
align-items: flex-start;
flex-direction: column;
gap: var(--msa-space-8);
}
}
/* Claude Design visual tune: keep the second arc clear of hero reading zone. */
.msa-home-hero.msa-hero-accueil::after {
right: -180px;
bottom: -610px;
}
@media (max-width: 768px) {
.msa-home-hero.msa-hero-accueil::after {
right: -220px;
bottom: -310px;
}
.msa-cta-claude h2 {
font-size: 24px;
line-height: 1.15;
}
}
/* ==========================================================================
Claude Design fidelity layer - presentation only.
Keeps WordPress, WooCommerce, msa-core, URLs and SEO intact.
========================================================================== */
body,
.wp-site-blocks,
.msa-site-shell {
background: var(--msa-black);
}
.msa-site-shell {
overflow-x: clip;
border-left: 0;
}
.msa-site-header {
min-height: var(--msa-header-h);
border-bottom: var(--msa-stroke-hair) solid var(--msa-graphite);
background: var(--msa-black);
}
.msa-site-header__inner {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
min-height: var(--msa-header-h);
margin-inline: auto;
padding-inline: 0;
}
.msa-header-actions {
display: flex;
align-items: center;
gap: var(--msa-space-24);
}
.msa-site-logo {
width: 140px;
max-height: 44px;
}
.msa-primary-navigation .wp-block-navigation__container {
gap: var(--msa-space-24);
}
.msa-primary-navigation .wp-block-navigation-item__content {
font-size: 13px;
letter-spacing: 0.05em;
}
.msa-btn-whatsapp,
.msa-header-whatsapp {
min-height: 44px;
gap: var(--msa-space-8);
padding-inline: var(--msa-space-16);
border: 0;
background: var(--msa-whatsapp);
color: var(--msa-whatsapp-text);
}
.msa-btn-whatsapp:hover,
.msa-btn-whatsapp:focus-visible,
.msa-header-whatsapp:hover,
.msa-header-whatsapp:focus-visible {
background: var(--msa-whatsapp-hover);
color: var(--msa-whatsapp-text);
}
.msa-home-main {
width: 100%;
padding-block: 0;
}
.msa-home-main .wp-block-post-content {
display: block;
}
.msa-home-hero.msa-hero-accueil,
.msa-section-claude,
.msa-bande-services,
.msa-cta-claude {
width: 100%;
max-width: none;
margin-inline: 0;
}
.msa-home-hero.msa-hero-accueil > *,
.msa-section-claude > *,
.msa-bande-services > *,
.msa-cta-claude > * {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
margin-inline: auto;
}
.msa-home-hero.msa-hero-accueil {
position: relative;
display: grid;
min-height: 620px;
align-content: center;
overflow: hidden;
padding-block: var(--msa-space-80);
padding-inline: 0;
border-top: 0;
background: var(--msa-black);
}
.msa-home-hero.msa-hero-accueil::before {
content: none;
}
.msa-home-hero.msa-hero-accueil::after {
position: absolute;
top: -260px;
right: -160px;
bottom: auto;
z-index: 0;
width: 760px;
height: 760px;
box-sizing: border-box;
border: 34px solid var(--msa-orange);
border-radius: 50%;
background: transparent;
opacity: 0.20;
content: "";
pointer-events: none;
}
.msa-home-hero__content {
position: relative;
z-index: 1;
display: grid;
gap: var(--msa-space-24);
max-width: 820px;
}
.msa-home-kicker.msa-eyebrow-accent {
margin: 0;
color: var(--msa-orange);
font-size: 12px;
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.2em;
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-home-hero h1 {
max-width: 12ch;
margin: 0;
color: var(--msa-white);
font-size: 56px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
text-transform: uppercase;
}
.msa-home-hero p {
max-width: 720px;
margin: 0;
color: var(--msa-steel-legible);
font-size: 19px;
line-height: 1.55;
}
.msa-home-actions {
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-12);
margin-top: var(--msa-space-16);
}
.msa-home-button,
.msa-home-link {
min-height: 48px;
padding: var(--msa-space-12) var(--msa-space-24);
border-radius: var(--msa-radius-sm);
font-size: 15px;
letter-spacing: 0.05em;
}
.msa-home-button {
border-color: var(--msa-orange-deep);
background: var(--msa-orange-deep);
color: var(--msa-white);
}
.msa-home-link {
border-color: var(--msa-white);
background: transparent;
color: var(--msa-white);
}
.msa-section-claude {
padding-block: var(--msa-space-80);
background: var(--msa-white);
color: var(--msa-black);
}
.msa-section-claude::before,
.msa-cta-claude::before {
content: none;
}
.msa-section-heading-claude {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--msa-space-24);
margin-bottom: var(--msa-space-48);
padding-bottom: var(--msa-space-16);
border-bottom: 2px solid var(--msa-black);
}
.msa-section-heading-claude h2 {
margin: 0;
color: var(--msa-black);
font-size: 30px;
font-weight: 800;
letter-spacing: -0.015em;
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-section-heading-claude p {
margin: 0;
color: var(--msa-steel);
font-size: 15px;
}
.msa-home-universe-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--msa-space-24);
}
.msa-home-universe-card.msa-carte-univers {
display: grid;
grid-template-rows: auto 1fr;
min-width: 0;
overflow: hidden;
border: var(--msa-stroke-card) solid var(--msa-border);
border-top: 5px solid var(--msa-orange);
border-radius: var(--msa-radius-sm);
padding: 0;
background: var(--msa-white);
color: var(--msa-black);
}
.msa-home-universe-card.msa-carte-univers--marine {
border-top-color: var(--msa-blue);
}
/* Emplacement photo : composition reprise telle quelle du Design System —
aplat graphite 16/9, libelle en Barlow Condensed aligne en bas a gauche.
Le pictogramme d'univers reste masque : la reference ne montre pas d'icone
dans cette zone, elle attend une photographie. */
.msa-carte-univers__media {
position: relative;
display: flex;
aspect-ratio: 16 / 9;
align-items: flex-end;
justify-content: flex-start;
padding: var(--msa-space-12);
background: var(--msa-graphite);
/* Même correction que pour l'emplacement des cartes produit : sur graphite,
--msa-steel tombe à 3,34:1. */
color: var(--msa-steel-legible);
font-family: var(--msa-font-cond);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.msa-carte-univers__media::after {
content: "Emplacement photo";
}
.msa-carte-univers__media svg,
.msa-carte-univers__media span {
display: none;
}
.msa-home-universe-card > :not(.msa-carte-univers__media) {
margin-inline: var(--msa-space-24);
}
.msa-home-universe-card > :nth-child(2) {
margin-top: var(--msa-space-24);
}
.msa-home-universe-card > :last-child {
margin-bottom: var(--msa-space-24);
}
.msa-home-universe-card h3 {
margin-bottom: var(--msa-space-8);
color: var(--msa-black);
font-size: 22px;
font-weight: var(--msa-fw-bold);
line-height: 1.3;
text-transform: uppercase;
}
.msa-home-universe-card p {
color: var(--msa-black);
font-size: 15px;
line-height: 1.6;
}
.msa-home-universe-card .msa-home-link {
justify-self: start;
margin-top: var(--msa-space-16);
border-color: var(--msa-black);
color: var(--msa-black);
font-size: 14px;
}
.msa-bande-services {
padding-block: var(--msa-space-64);
background: var(--msa-black);
color: var(--msa-white);
}
.msa-bande-services__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--msa-space-48);
}
.msa-bande-services section {
display: block;
}
.msa-bande-services h3 {
margin: var(--msa-space-16) 0 var(--msa-space-8);
color: var(--msa-white);
font-size: 19px;
font-weight: var(--msa-fw-bold);
text-transform: uppercase;
}
.msa-bande-services p {
margin: 0;
color: var(--msa-steel-legible);
font-size: 15px;
line-height: 1.6;
}
.msa-cta-claude {
margin: 0;
padding-block: var(--msa-space-64);
border-top: 0;
background: var(--msa-light);
color: var(--msa-black);
}
.msa-cta-claude .msa-home-eyebrow {
color: var(--msa-black);
}
.msa-cta-claude h2 {
color: var(--msa-black);
font-size: 26px;
line-height: 1.2;
}
.msa-site-footer.msa-footer-claude {
padding-block: var(--msa-space-64) var(--msa-space-48);
border-top: var(--msa-stroke-hair) solid var(--msa-graphite);
background: var(--msa-black);
}
.msa-footer-claude__grid,
.msa-footer-claude__rule,
.msa-footer-claude__legal {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
margin-inline: auto;
}
.msa-footer-claude__grid {
gap: var(--msa-space-48);
}
.msa-footer-claude p,
.msa-footer-claude a {
color: var(--msa-steel-legible);
}
.msa-footer-claude h2,
.msa-footer-claude h3 {
color: var(--msa-white);
font-size: 14px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@media (max-width: 1023px) {
.msa-home-universe-grid,
.msa-bande-services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.msa-site-header {
min-height: 64px;
}
.msa-site-header__inner {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
min-height: 64px;
}
.msa-site-logo {
width: 104px;
}
.msa-home-hero.msa-hero-accueil {
min-height: calc(100svh - 64px);
padding-block: var(--msa-space-48);
}
.msa-home-hero.msa-hero-accueil::after {
top: -140px;
right: -210px;
width: 380px;
height: 380px;
border-width: 20px;
}
.msa-home-hero h1 {
font-size: 36px;
}
.msa-home-hero p {
font-size: 16px;
}
.msa-home-actions {
flex-direction: column;
}
.msa-home-button,
.msa-home-link {
width: 100%;
min-height: 52px;
}
.msa-section-claude,
.msa-bande-services,
.msa-cta-claude,
.msa-site-footer.msa-footer-claude {
padding-block: var(--msa-space-48);
}
.msa-section-heading-claude {
align-items: flex-start;
flex-direction: column;
gap: var(--msa-space-8);
margin-bottom: var(--msa-space-32);
}
.msa-home-universe-grid,
.msa-bande-services__grid,
.msa-footer-claude__grid {
grid-template-columns: 1fr;
}
}
/* Claude Design fidelity: override Gutenberg constrained layout caps. */
.msa-site-header > .msa-site-header__inner,
.msa-site-header__inner,
.msa-home-hero.msa-hero-accueil > *,
.msa-section-claude > *,
.msa-bande-services > *,
.msa-cta-claude > *,
.msa-footer-claude__grid,
.msa-footer-claude__rule,
.msa-footer-claude__legal {
max-width: var(--msa-container) !important;
}
.msa-site-header > .msa-site-header__inner,
.msa-site-header__inner {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container)) !important;
}
/* Claude Design fidelity: hero content aligns to the same visual column as sections. */
.msa-home-hero.msa-hero-accueil > .msa-home-hero__content,
.msa-home-hero__content {
width: min(100% - (var(--msa-margin) * 2), 820px) !important;
max-width: 820px !important;
margin-left: max(var(--msa-margin), calc((100vw - var(--msa-container)) / 2)) !important;
margin-right: auto !important;
}
/* ==========================================================================
Alignement sur le site de reference (MSA_Brand_Identity_Master/site).
Valeurs relevees dans assets/css/msa-site.css.
========================================================================== */
/* Emplacements photo — un seul traitement partout.
Le libelle est en --msa-steel-legible : sur l'aplat graphite, --msa-steel
ne donne que 3,34:1. La reference le signale explicitement. */
.msa-carte-univers__media,
.msa-product-card__placeholder,
.msa-product-main .msa-product-gallery__placeholder,
.msa-page-hero__media {
display: flex;
align-items: flex-end;
justify-content: flex-start;
overflow: hidden;
padding: var(--msa-space-12);
background: var(--msa-graphite);
color: var(--msa-steel-legible);
font-family: var(--msa-font-cond);
font-size: var(--msa-fs-small);
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.msa-product-card__placeholder span,
.msa-product-main .msa-product-gallery__placeholder span {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
/* Hero : la photo occupe tout le cadre, un voile degrade la couvre pour que
le texte reste lisible, l'arc passe au-dessus. « Une grande photo » est la
cinquieme des cinq regles de la charte. */
.msa-home-hero.msa-hero-accueil,
.msa-page-hero {
position: relative;
overflow: hidden;
}
/* La photo et son voile couvrent tout le hero : ils doivent echapper a la
mise a la largeur du conteneur appliquee aux enfants directs. */
.msa-home-hero.msa-hero-accueil > .msa-page-hero__media,
.msa-home-hero.msa-hero-accueil > .msa-page-hero__veil,
.msa-page-hero > .msa-page-hero__media,
.msa-page-hero > .msa-page-hero__veil {
width: auto !important;
max-width: none !important;
margin-inline: 0 !important;
}
.msa-page-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.msa-page-hero__veil {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(
90deg,
var(--msa-veil-1) 0%,
var(--msa-veil-2) 42%,
var(--msa-veil-3) 100%
);
pointer-events: none;
}
/* Filet de titre de section : lignes de base alignees, retrait de 32px. */
.msa-section-heading-claude,
.msa-home-dynamic .msa-home-section__heading,
.msa-page-body .msa-universe-section__heading,
.woocommerce-products-header {
align-items: baseline;
margin-bottom: var(--msa-space-32);
}
/* Arc : epaisseur de 32px, sur l'echelle base 8. */
.msa-home-hero.msa-hero-accueil::after {
border-width: var(--msa-space-32);
}
.msa-page-hero::after {
right: auto;
bottom: -380px;
left: -260px;
width: 800px;
height: 800px;
border-width: var(--msa-space-32);
}
/* Mesure du hero : la reference laisse le titre occuper les 820px de la
colonne — il tient en deux lignes, pas quatre. */
.msa-home-hero h1 {
max-width: none;
}
.msa-home-hero p {
max-width: 52ch;
}
@media (max-width: 768px) {
.msa-page-hero::after {
bottom: -260px;
left: -180px;
width: 380px;
height: 380px;
border-width: var(--msa-space-24);
}
}
/* ==========================================================================
Recette visuelle — corrections mesurees contre le Design System.
========================================================================== */
/* La base du theme est sombre : les titres y sont declares en blanc. Sur les
surfaces claires cette declaration l'emportait sur la couleur heritee du
conteneur — le H1 du catalogue s'affichait blanc sur blanc, donc invisible.
Sur ces surfaces, les titres reprennent la couleur du texte courant. */
.msa-catalogue-main,
.msa-search-main,
.msa-page-body,
.msa-home-dynamic,
.msa-section-claude,
.msa-cta-claude,
.msa-product-card,
.msa-institutional-shell,
.msa-contact-shell {
color: var(--msa-black);
}
/*
* --msa-light est un jeton de FOND de section claire, pas une couleur de
* texte. Il servait de texte secondaire sur les surfaces sombres ; sur les
* surfaces claires il donne du gris tres pale sur blanc, illisible.
* Sur ces surfaces le texte secondaire reprend --msa-steel, 5,0:1 sur blanc.
*/
body .msa-page-body .msa-contact-shell > p,
body .msa-page-body .msa-universe-intro,
body .msa-page-body .msa-universe-cta p,
body .msa-page-body .msa-institutional-hero > p,
body .msa-page-body .msa-institutional-section > p,
body .msa-page-body .msa-institutional-card p,
body .msa-page-body .msa-institutional-card li,
body .msa-page-body .msa-lead-form-section__heading p,
body .msa-product-main .msa-lead-form-section__heading p {
color: var(--msa-steel);
}
.msa-catalogue-main :where(h1, h2, h3, h4, h5, h6),
.msa-search-main :where(h1, h2, h3, h4, h5, h6),
.msa-page-body :where(h1, h2, h3, h4, h5, h6),
.msa-home-dynamic :where(h1, h2, h3, h4, h5, h6),
.msa-section-claude :where(h1, h2, h3, h4, h5, h6),
.msa-cta-claude :where(h1, h2, h3, h4, h5, h6),
.msa-product-card :where(h1, h2, h3, h4, h5, h6),
.msa-institutional-shell :where(h1, h2, h3, h4, h5, h6),
.msa-contact-shell :where(h1, h2, h3, h4, h5, h6) {
color: inherit;
}
/* Les conteneurs ci-dessous sont des grilles CSS, mais Gutenberg les rend en
layout « flow » et ajoute --wp--style--block-gap (16px) en margin-block-start
a chaque frere. Cumule au gap de la grille, cela decalait les colonnes 2 et 3
de 16px vers le bas et cassait l'alignement des trois cartes d'univers,
des quatre services et des colonnes de pied de page. */
.msa-home-universe-grid > *,
.msa-bande-services__grid > *,
.msa-home-product-grid > *,
.msa-footer-claude__grid > *,
.msa-institutional-grid > *,
.msa-universe-term-grid > *,
.msa-universe-brand-grid > *,
.msa-home-brand-grid > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* Sections dynamiques de la page d'accueil (bloc msa/home-dynamic).
Elles suivent le meme rythme que « Nos univers » : surface blanche pleine
largeur, contenu ramene au conteneur de 1320px, titre souligne d'un filet
noir de 2px. Sans cela la selection produits heritait du fond noir du shell
et se collait a la bande de services, ce qui donnait deux aplats noirs
consecutifs — hors du dosage 70/20/10. */
.msa-home-dynamic {
width: 100%;
background: var(--msa-white);
color: var(--msa-black);
}
/* Les sections de la page d'accueil sont des aplats jointifs : le block-gap de
Gutenberg laissait passer une bande noire de 16px entre chacune. */
.msa-home-main .wp-block-post-content > * {
margin-block: 0;
}
/* Le contenu rendu par msa-core n'est pas passe par la mise en page Gutenberg :
il heritait de la largeur de contenu de 820px au lieu du conteneur de 1320px. */
.msa-home-dynamic .msa-home-section > *,
.msa-home-dynamic .msa-home-section__heading {
width: 100%;
max-width: none;
}
.msa-home-dynamic .msa-home-section {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
max-width: var(--msa-container);
margin-inline: auto;
padding-block: var(--msa-space-80);
}
.msa-home-dynamic .msa-home-section + .msa-home-section {
padding-top: 0;
}
.msa-home-dynamic .msa-home-section__heading {
display: grid;
gap: var(--msa-space-8);
margin-bottom: var(--msa-space-48);
padding-bottom: var(--msa-space-16);
border-bottom: 2px solid var(--msa-black);
}
.msa-home-dynamic .msa-home-eyebrow {
color: var(--msa-accent-ui);
letter-spacing: var(--msa-ls-eyebrow);
}
/* Le titre de section de la reference est une rangee : H2 a gauche, mention
secondaire a droite, le tout souligne d'un filet noir de 2px. Il etait
empile ici, ce qui ne correspondait pas a « Nos univers » juste au-dessus. */
.msa-home-dynamic .msa-home-section__heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: var(--msa-space-24);
}
.msa-home-dynamic .msa-home-section__heading .msa-home-eyebrow,
.msa-home-dynamic .msa-home-section__heading h2 {
grid-column: 1;
}
.msa-home-dynamic .msa-home-section__heading p:not(.msa-home-eyebrow) {
grid-column: 2;
grid-row: 2;
text-align: right;
}
/* Lien « Tout le catalogue → » : Archivo 14px 700 capitales, comme la
reference. Il remplace le bouton isole qui suivait la grille. */
.msa-home-dynamic .msa-home-section__more {
font-family: var(--msa-font-display);
font-size: 14px;
font-weight: var(--msa-fw-bold);
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.msa-home-dynamic .msa-home-section__more a {
display: inline-flex;
min-height: var(--msa-tap-min);
align-items: center;
color: var(--msa-black);
text-decoration: none;
}
.msa-home-dynamic .msa-home-section__more a:hover,
.msa-home-dynamic .msa-home-section__more a:focus-visible {
color: var(--msa-black);
text-decoration: underline;
text-decoration-color: var(--msa-accent);
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
@media (max-width: 768px) {
.msa-home-dynamic .msa-home-section__heading {
grid-template-columns: minmax(0, 1fr);
}
.msa-home-dynamic .msa-home-section__heading p:not(.msa-home-eyebrow) {
grid-column: 1;
grid-row: auto;
text-align: left;
}
}
/* Cible le titre de SECTION uniquement : « .msa-home-section h2 » attrapait
aussi le titre des cartes produit, qui se composait alors en capitales. */
.msa-home-dynamic .msa-home-section__heading h2 {
margin: 0;
color: var(--msa-black);
font-size: var(--msa-fs-h2);
font-weight: var(--msa-fw-black);
letter-spacing: -0.015em;
text-transform: uppercase;
}
.msa-home-dynamic .msa-home-section__heading p {
color: var(--msa-steel);
font-size: 15px;
}
.msa-home-dynamic .msa-home-section__actions {
margin-top: var(--msa-space-48);
}
/* « Nos marques » etait une carte grise encadree, en retrait du conteneur.
La reference ne cadre pas une section : elle la pose sur la meme surface et
la separe par son filet de titre. */
.msa-home-dynamic .msa-home-brands {
border: 0;
border-radius: 0;
padding-inline: 0;
background: transparent;
}
.msa-home-dynamic .msa-home-button {
border-color: var(--msa-black);
background: transparent;
color: var(--msa-black);
font-size: 14px;
letter-spacing: 0.05em;
padding: var(--msa-space-12) var(--msa-space-24);
}
.msa-home-dynamic .msa-home-button:hover,
.msa-home-dynamic .msa-home-button:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
/* Marques : la zone neutre imposee par la charte de co-branding — pas de
couleur derriere un logo constructeur, une simple bordure et du vide. */
.msa-home-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
gap: var(--msa-space-24);
}
.msa-home-brand {
display: grid;
min-height: 96px;
place-items: center;
border: var(--msa-stroke-card) solid var(--msa-border);
border-radius: var(--msa-radius-sm);
padding: var(--msa-space-16);
color: var(--msa-black);
font-family: var(--msa-font-display);
font-size: 17px;
font-weight: var(--msa-fw-bold);
letter-spacing: 0.05em;
text-decoration: none;
text-transform: uppercase;
transition: border-color var(--msa-duration) var(--msa-ease);
}
.msa-home-brand:hover,
.msa-home-brand:focus-visible {
border-color: var(--msa-black);
color: var(--msa-black);
}
/* La grille produit de la page d'accueil est rendue hors du conteneur
.woocommerce : la regle de grille du catalogue ne l'atteignait pas et les
cartes s'empilaient en pleine largeur.
Largeur de colonne minimale plutot que nombre fixe : une grille de quatre
colonnes avec deux produits parait cassee. */
/*
* Le minimum d'un minmax() est enveloppe dans min(…, 100%) : sans cela la
* piste se resout a sa valeur fixe dans un conteneur plus etroit et deborde
* horizontalement au viewport de reference de 390px. Regle appliquee a
* TOUTES les grilles, pas seulement a celle qui deborderait aujourd'hui.
*/
.msa-home-product-grid,
.msa-universe-products .products,
.msa-product-related .products,
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: var(--msa-space-24);
margin: 0;
padding: 0;
list-style: none;
}
.msa-home-product-grid > li,
.msa-universe-products .products > li,
.msa-product-related .products > li,
.woocommerce ul.products > li.product {
float: none;
width: auto;
margin: 0;
}
/*
* WooCommerce cible ses cartes par `ul.products[class*="columns-"] li.product`,
* un cran plus specifique que la regle ci-dessus : ses largeurs en pourcentage
* l'emportaient donc. Le float est sans effet dans une grille, mais pas la
* largeur — et `woocommerce-smallscreen.css` impose 48%. Resultat sur mobile :
* des cartes de 168 px dans une colonne de 350, la moitie droite de l'ecran
* vide, sur le catalogue comme sur toutes les archives.
*/
.woocommerce ul.products[class*="columns-"] > li.product,
.woocommerce-page ul.products[class*="columns-"] > li.product {
float: none;
width: auto;
margin: 0;
}
/*
* Même conflit sur le titre de la carte. La référence l'écrit
* `
`, soit 22 px — le thème le déclarait
* bien, mais WooCommerce le ramène à `font-size: 1em` avec un sélecteur plus
* spécifique. Le nom du produit se retrouvait à 16 px sous un prix à 22 px :
* sur une carte pleine largeur en mobile, l'information cherchée était la plus
* discrète des trois lignes.
*/
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
font-size: var(--msa-fs-h3);
font-weight: var(--msa-fw-bold);
line-height: var(--msa-lh-heading);
}
/* Les cartes sont des elements de grille : sans min-width, la largeur
min-content de leur contenu leur faisait deborder leur colonne. */
.msa-product-card,
.msa-product-card__link,
.msa-product-card__media,
.msa-product-card__body {
min-width: 0;
}
.msa-product-card__media {
width: 100%;
}
/* Emplacement photo du produit : meme traitement que les cartes d'univers et
que la carte produit du Design System — aplat graphite, libelle en bas a
gauche. Un aplat clair marque « MSA » se lisait comme un logo manquant. */
.msa-product-card__placeholder {
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: var(--msa-space-12);
background: var(--msa-graphite);
/* --msa-steel ne donne que 3,34:1 sur le graphite, sous le seuil de 4,5:1
exigé à 13 px. Le jeton --msa-steel-legible existe précisément pour le
texte secondaire posé sur une surface sombre : il y monte à 6,3:1. */
color: var(--msa-steel-legible);
font-family: var(--msa-font-cond);
font-size: 13px;
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.msa-product-card__placeholder span {
font: inherit;
letter-spacing: inherit;
}
/* Carte produit — valeurs relevees sur le site de reference :
corps a 24px, titre en Archivo 700 (et non 800), badge en 11px. */
.msa-product-card__body {
padding: var(--msa-space-24);
}
.msa-product-card__title {
font-weight: var(--msa-fw-bold);
}
.msa-product-card__badge {
padding: var(--msa-space-4) var(--msa-space-12);
border-radius: var(--msa-radius-none);
font-size: 11px;
letter-spacing: 0.1em;
}
/* Deux badges au maximum, empiles a 12px du coin superieur gauche. */
.msa-product-card__badges {
position: absolute;
z-index: 1;
top: var(--msa-space-12);
left: var(--msa-space-12);
display: flex;
flex-wrap: wrap;
gap: var(--msa-space-8);
}
.msa-product-card__badges .msa-product-card__badge {
position: static;
}
/* Un prix barre reste du texte secondaire, et le prix courant garde la couleur
du texte : le rouge est reserve aux erreurs. */
.msa-product-card__price ins,
.msa-product-price ins {
color: var(--msa-black);
text-decoration: none;
}
/* Cartes d'univers : la reference termine chaque carte par un LIEN texte
« Voir l'univers moto → » en Archivo 14px 700 capitales, pas par un bouton
encadre. La cible tactile de 44px est conservee sans dessiner de cadre. */
.msa-home-universe-card .msa-home-link {
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--msa-black);
text-underline-offset: 0.2em;
}
.msa-home-universe-card .msa-home-link:hover,
.msa-home-universe-card .msa-home-link:focus-visible {
background: transparent;
color: var(--msa-black);
text-decoration: underline;
text-decoration-color: var(--msa-accent);
text-decoration-thickness: 2px;
}
/* Bande de services : gouttiere de 32px, comme la reference. */
.msa-bande-services__grid {
gap: var(--msa-space-32);
}
/* ==========================================================================
Pages univers — gabarit unique, accent pilote par .
Meme rythme que la page d'accueil : hero noir avec un seul arc, puis les
sections de contenu sur surface blanche.
========================================================================== */
/* Le main du site est ramene au conteneur : les bandes de la page univers
doivent au contraire occuper toute la largeur, comme sur l'accueil. */
.msa-site-main.msa-page-main {
width: 100%;
max-width: none;
margin-inline: 0;
padding-block: 0;
}
.msa-page-main > * {
margin-block: 0;
}
.msa-page-hero {
position: relative;
display: grid;
width: 100%;
min-height: 280px;
align-content: center;
overflow: hidden;
padding-block: var(--msa-space-80);
background: var(--msa-black);
}
/* Un seul arc par composition, a l'accent de l'univers courant. */
.msa-page-hero::after {
position: absolute;
z-index: 0;
right: -220px;
bottom: -520px;
width: 800px;
height: 800px;
box-sizing: border-box;
border: 30px solid var(--msa-accent);
border-radius: 50%;
background: transparent;
opacity: 0.20;
content: "";
pointer-events: none;
}
.msa-page-hero__content {
position: relative;
z-index: 1;
display: grid;
gap: var(--msa-space-24);
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
max-width: var(--msa-container);
margin-inline: auto;
}
.msa-page-hero__eyebrow {
margin: 0;
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
letter-spacing: var(--msa-ls-eyebrow);
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-page-hero__title {
max-width: 20ch;
margin: 0;
color: var(--msa-white);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-h1);
font-weight: 900;
letter-spacing: var(--msa-ls-display);
line-height: var(--msa-lh-display);
text-transform: uppercase;
}
.msa-page-hero__intro,
.msa-page-hero__intro p {
max-width: 720px;
margin: 0;
color: var(--msa-steel-legible);
font-size: 19px;
line-height: 1.55;
}
/* Les pages d'univers portent un surtitre et une introduction : leur hero est
plus haut et leur titre passe au calibre superieur. */
.msa-univers-hero {
min-height: 420px;
}
.msa-univers-hero .msa-page-hero__title {
max-width: 16ch;
font-size: 48px;
}
.msa-page-body {
width: 100%;
padding-block: var(--msa-space-80);
background: var(--msa-white);
color: var(--msa-black);
}
/* Contenu editorial des pages standard : largeur de lecture limitee, comme le
demande la charte — 75 caracteres au maximum par ligne. */
.msa-page-body .wp-block-post-content {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
max-width: var(--msa-container);
margin-inline: auto;
}
.msa-page-body .wp-block-post-content :where(p, ul, ol) {
max-width: 75ch;
}
/* Une seule mise a la largeur du conteneur : la contrainte etait appliquee au
contenu ET aux sections, ce qui les decalait de 40px vers l'interieur et
cassait l'alignement avec le hero. */
.msa-page-body > * {
width: 100%;
max-width: none;
margin-inline: 0;
}
/* Le contenu de page est deja ramene au conteneur : les sections d'univers
occupent toute sa largeur, sans seconde marge. */
.msa-page-body .msa-universe-sections {
display: grid;
width: 100%;
max-width: none;
margin-inline: 0;
gap: var(--msa-space-80);
}
/* Sections de contenu : titre souligne d'un filet noir, comme la page
d'accueil. Aucun encadre gris : la reference ne cadre pas ses sections. */
.msa-page-body .msa-universe-section,
.msa-page-body .msa-universe-cta {
display: grid;
max-width: none;
gap: var(--msa-space-24);
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: var(--msa-black);
}
/* Les grilles rendues par msa-core heritaient de la largeur de contenu de
820px au lieu d'occuper la section. */
.msa-page-body .msa-universe-section > *,
.msa-page-body .msa-universe-cta > * {
width: 100%;
max-width: none;
}
.msa-page-body .msa-universe-section__heading {
display: grid;
max-width: none;
gap: var(--msa-space-8);
margin-bottom: var(--msa-space-24);
padding-bottom: var(--msa-space-16);
border-bottom: 2px solid var(--msa-black);
}
.msa-page-body .msa-universe-section__heading h2,
.msa-page-body .msa-universe-cta h2 {
color: var(--msa-black);
font-size: var(--msa-fs-h2);
font-weight: var(--msa-fw-black);
letter-spacing: -0.015em;
text-transform: uppercase;
}
.msa-page-body .msa-universe-eyebrow {
color: var(--msa-accent-ui);
letter-spacing: var(--msa-ls-eyebrow);
}
/* Le surtitre est exclu : c'est un paragraphe lui aussi, et la regle de texte
secondaire l'emportait sur sa couleur d'accent. */
.msa-page-body .msa-universe-section__heading p:not(.msa-universe-eyebrow),
.msa-page-body .msa-universe-cta p:not(.msa-universe-eyebrow) {
max-width: 75ch;
color: var(--msa-steel);
font-size: 15px;
}
.msa-page-body .msa-universe-term-grid,
.msa-page-body .msa-universe-brand-grid {
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: var(--msa-space-24);
}
/* La bande de conversion ferme la page sur un aplat clair, comme l'accueil. */
.msa-page-body .msa-universe-cta,
.msa-page-body .msa-universe-cta--conversion {
padding: var(--msa-space-48);
background: var(--msa-light);
}
.msa-page-body .msa-universe-button {
border-color: var(--msa-btn-surface);
background: var(--msa-btn-surface);
color: var(--msa-btn-label);
}
/* Assombrissement au survol par filtre : evite d'ajouter une valeur de
couleur qui n'existe pas dans les tokens. */
.msa-page-body .msa-universe-button:hover,
.msa-page-body .msa-universe-button:focus-visible {
filter: brightness(0.92);
color: var(--msa-white);
}
.msa-page-body .msa-universe-link {
border-color: var(--msa-black);
background: transparent;
color: var(--msa-black);
}
.msa-page-body .msa-universe-link:hover,
.msa-page-body .msa-universe-link:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
@media (max-width: 768px) {
/*
* 220 px et non 320. Sur les pages qui ne portent qu'un titre — Services,
* Occasions, Evenements, A propos, les deux pages legales — le bandeau
* gardait 320 px de haut pour un mot de 30 px : plus du tiers d'un ecran de
* 844, dont 145 px de noir vide au-dessus du titre.
*
* La contrainte ne s'applique qu'a ces pages-la. Le bandeau d'univers porte
* un sur-titre, un titre et un chapeau : son contenu le fait deja monter a
* 367 px, bien au-dela du minimum, et il n'est donc pas touche. L'arc reste
* cadre : il est ancre sur le bas du bandeau.
*/
.msa-page-hero {
min-height: 220px;
padding-block: var(--msa-space-48);
}
.msa-page-hero::after {
right: -200px;
bottom: -280px;
width: 420px;
height: 420px;
border-width: 20px;
}
.msa-page-hero__title {
font-size: 30px;
}
.msa-page-hero__intro,
.msa-page-hero__intro p {
font-size: 16px;
}
.msa-page-body {
padding-block: var(--msa-space-48);
}
.msa-page-body .msa-universe-sections {
gap: var(--msa-space-48);
}
.msa-page-body .msa-universe-cta,
.msa-page-body .msa-universe-cta--conversion {
padding: var(--msa-space-24);
}
}
/* ==========================================================================
Fiche produit — surface claire, comme la composition validee.
Galerie a gauche, bloc de conversion a droite, contenu editorial dessous.
========================================================================== */
.msa-site-main.msa-product-main {
width: 100%;
max-width: none;
margin-inline: 0;
padding-block: 0;
background: var(--msa-white);
color: var(--msa-black);
}
.msa-product-detail {
width: min(100% - (var(--msa-margin) * 2), var(--msa-container));
padding-block: var(--msa-space-48) var(--msa-space-80);
}
.msa-product-main :where(h1, h2, h3, h4, h5, h6) {
color: var(--msa-black);
}
.msa-product-breadcrumb ol {
color: var(--msa-steel);
}
.msa-product-main .msa-product-breadcrumb a {
color: var(--msa-steel);
}
.msa-product-main .msa-product-breadcrumb a:hover,
.msa-product-main .msa-product-breadcrumb a:focus-visible {
color: var(--msa-black);
}
/* La galerie reste un aplat graphite : c'est l'emplacement de la photo. */
.msa-product-main .msa-product-gallery__stage,
.msa-product-main .msa-product-gallery__placeholder {
border-color: var(--msa-border);
}
/* Le cadre de la photo principale passe au blanc (25/08/2026). Il etait au
graphite, herite de la bande sombre d'origine : les photos studio des
constructeurs sont panoramiques et detourees sur blanc, si bien qu'elles
s'affichaient entre deux larges bandes noires dans un cadre 4/3. Sur blanc,
les memes marges disparaissent — et le fond reste neutre pour les photos
qui portent deja leur propre decor.
Le placeholder « Emplacement photo » garde le fond sombre : c'est lui qui
doit se voir. */
.msa-product-main .msa-product-gallery__stage {
background: var(--msa-white);
}
.msa-product-main .msa-product-gallery__placeholder {
align-items: end;
justify-items: start;
padding: var(--msa-space-12);
}
.msa-product-main .msa-product-gallery__placeholder span {
/* Même correction que pour les cartes : --msa-steel ne donne que 3,34:1 sur
le graphite, sous le seuil de 4,5:1 exigé à 13 px. */
color: var(--msa-steel-legible);
font-family: var(--msa-font-cond);
font-size: 13px;
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Les vignettes passent au blanc, comme le cadre de la photo principale.
Elles etaient sur --msa-black, herite de la bande sombre d'origine : les
PNG detoures des constructeurs — Ducati, KTM — s'y affichaient en silhouette
noire sur noir, alors que la meme photo etait lisible dans le grand cadre.
Constate le 27/08/2026 sur la fiche DesertX. */
.msa-product-main .msa-product-gallery__thumb {
background: var(--msa-white);
border-color: var(--msa-border);
}
/* Surtitre du bloc de conversion : 12px 600 en interlettrage 0.16em et en
gris secondaire, comme la composition validee — l'accent y est porte par le
CTA, pas par le texte. */
.msa-product-main .msa-product-hero__eyebrow {
color: var(--msa-steel);
letter-spacing: 0.16em;
}
/* La reference n'ouvre pas le bloc de conversion par un filet d'accent. */
.msa-product-main .msa-product-hero__summary {
border-top: 0;
padding-top: 0;
}
/* Titre de fiche : 36px, calibre de la composition validee. */
.msa-product-main .msa-product-title {
font-size: 36px;
line-height: 1.1;
}
.msa-product-main .msa-product-term {
border-color: var(--msa-border);
color: var(--msa-black);
}
.msa-product-main .msa-product-term:hover,
.msa-product-main .msa-product-term:focus-visible {
border-color: var(--msa-black);
color: var(--msa-black);
}
.msa-product-main .msa-product-title,
.msa-product-main .msa-product-price,
.msa-product-main .msa-product-price .price,
.msa-product-main .msa-product-price .msa-price-consult {
color: var(--msa-black);
}
.msa-product-main .msa-product-short-description,
.msa-product-main .msa-product-editorial__content {
color: var(--msa-black);
}
/*
* Le CTA principal de la fiche produit suit le même duo que les autres
* boutons : orange de marque et libellé noir, bleu et libellé blanc côté
* Marine.
*/
.msa-product-main .msa-product-action {
border-color: var(--msa-btn-surface);
background: var(--msa-btn-surface);
color: var(--msa-btn-label);
}
.msa-product-main .msa-product-action--secondary {
border-color: var(--msa-black);
background: transparent;
color: var(--msa-black);
}
.msa-product-main .msa-product-action--secondary:hover,
.msa-product-main .msa-product-action--secondary:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
.msa-product-main .msa-product-action--whatsapp {
border-color: var(--msa-whatsapp);
background: var(--msa-whatsapp);
color: var(--msa-whatsapp-text);
}
/* Colonnes 60 / 40, comme la composition validee. Au-dela du point de rupture
seulement : en dessous, la fiche reste sur une colonne. */
@media (min-width: 769px) {
.msa-product-main .msa-product-hero {
grid-template-columns: minmax(0, 60fr) minmax(min(320px, 100%), 40fr);
}
/* Les trois CTA s'empilent sur toute la largeur du bloc de conversion :
cote a cote, les libelles passaient sur deux lignes. */
.msa-product-main .msa-product-actions {
grid-template-columns: minmax(0, 1fr);
}
}
/* Sur mobile, les trois CTA restent accessibles en barre basse. */
@media (max-width: 768px) {
.msa-product-main .msa-product-actions {
position: fixed;
z-index: 90;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--msa-space-8);
padding: var(--msa-space-12);
border-top: var(--msa-stroke-hair) solid var(--msa-border);
background: var(--msa-white);
}
/* Les libelles peuvent passer sur deux lignes : la barre reste sur une seule
rangee, donc compacte, et les trois CTA restent visibles ensemble. */
.msa-product-main .msa-product-action {
padding-inline: var(--msa-space-8);
text-align: center;
}
/* Reserve la hauteur de la barre pour que rien ne reste masque. */
.msa-product-main .msa-product-detail {
padding-bottom: 108px;
}
}
.msa-product-main .msa-product-editorial,
.msa-product-main .msa-product-related,
.msa-product-main .msa-lead-form-section {
border-top-color: var(--msa-black);
border-top-width: 2px;
}
/*
* Les regles de base de .msa-product-editorial ont ete ecrites pour une bande
* sombre : titres en --msa-white. La fiche produit est passee sur surface
* claire, et ce bloc d'override avait rattrape le texte courant, les liens et
* les filets, mais pas les titres. « Presentation » et « Produits associes »
* s'affichaient donc en blanc sur blanc — invisibles, a 1:1 de contraste.
*/
.msa-product-main .msa-product-editorial h2,
.msa-product-main .msa-product-related h2,
.msa-product-main .msa-product-editorial__content h2,
.msa-product-main .msa-product-editorial__content h3,
.msa-product-main .msa-product-editorial__content h4 {
color: var(--msa-black);
}
.msa-product-main .msa-product-editorial__content th,
.msa-product-main .msa-product-editorial__content td {
border-bottom-color: var(--msa-border);
}
.msa-product-main .msa-product-editorial__content a {
color: var(--msa-link);
text-decoration-color: var(--msa-link);
}
/* ==========================================================================
Formulaires et CTA de conversion sur surface claire.
Ces composants etaient composes pour un fond noir : libelles blancs et
contours en blanc transparent y devenaient invisibles.
========================================================================== */
.msa-page-body .msa-form-field label,
.msa-product-main .msa-form-field label,
.msa-page-body .msa-lead-form-section__heading p,
.msa-product-main .msa-lead-form-section__heading p {
color: var(--msa-black);
}
.msa-page-body .msa-conversion-eyebrow,
.msa-product-main .msa-conversion-eyebrow {
color: var(--msa-accent-ui);
letter-spacing: var(--msa-ls-eyebrow);
}
/* Champs : contour 1,5px --msa-border, contour noir au focus. */
.msa-page-body .msa-form-field input,
.msa-page-body .msa-form-field select,
.msa-page-body .msa-form-field textarea,
.msa-product-main .msa-form-field input,
.msa-product-main .msa-form-field select,
.msa-product-main .msa-form-field textarea {
border-color: var(--msa-border);
}
.msa-form-field input:focus,
.msa-form-field select:focus,
.msa-form-field textarea:focus {
border-color: var(--msa-black);
}
/* Bouton secondaire : contour noir, pas contour blanc. */
.msa-page-body .msa-conversion-action--secondary,
.msa-page-body .msa-conversion-action--call,
.msa-page-body .msa-product-action--secondary,
.msa-product-main .msa-conversion-action--secondary,
.msa-product-main .msa-conversion-action--call {
border-color: var(--msa-black);
background: transparent;
color: var(--msa-black);
}
.msa-page-body .msa-conversion-action--secondary:hover,
.msa-page-body .msa-conversion-action--call:hover,
.msa-page-body .msa-conversion-action--secondary:focus-visible,
.msa-page-body .msa-conversion-action--call:focus-visible,
.msa-product-main .msa-conversion-action--secondary:hover,
.msa-product-main .msa-conversion-action--call:hover,
.msa-product-main .msa-conversion-action--secondary:focus-visible,
.msa-product-main .msa-conversion-action--call:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
.msa-page-body .msa-lead-form-section,
.msa-page-body .msa-universe-section,
.msa-page-body .msa-institutional-section {
border-top-color: var(--msa-black);
}
/* .msa-home-link est le bouton secondaire du hero noir : contour et libelle
blancs. Sur une surface claire il devenait invisible. Il y passe au contour
noir — c'est le meme composant, pas un second bouton primaire. */
.msa-page-body .msa-home-link,
.msa-page-body .wp-block-button.msa-home-link .wp-block-button__link {
border-color: var(--msa-black);
background: transparent;
color: var(--msa-black);
}
.msa-page-body .msa-home-link:hover,
.msa-page-body .msa-home-link:focus-visible,
.msa-page-body .wp-block-button.msa-home-link .wp-block-button__link:hover,
.msa-page-body .wp-block-button.msa-home-link .wp-block-button__link:focus-visible {
background: var(--msa-black);
color: var(--msa-white);
}
/* Le bouton primaire Gutenberg suit le duo de bouton comme les autres. */
.msa-page-body .wp-block-button.msa-home-button .wp-block-button__link {
border-color: var(--msa-btn-surface);
background: var(--msa-btn-surface);
color: var(--msa-btn-label);
}
.msa-page-body .wp-block-button.msa-home-button .wp-block-button__link:hover,
.msa-page-body .wp-block-button.msa-home-button .wp-block-button__link:focus-visible {
filter: brightness(0.92);
color: var(--msa-white);
}
/* Hauteur de header : 72px desktop, 64px mobile. Une regle plus haute fixait
« height » a la valeur desktop, ce qui neutralisait le min-height mobile. */
@media (max-width: 768px) {
.msa-site-header,
.msa-site-header__inner {
height: auto;
min-height: 64px;
}
/* Menu mobile : entrees de 56px, les trois univers en tete de liste. */
.msa-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
min-height: 56px;
display: flex;
align-items: center;
}
}
/* Bande de conversion de fin de page : la reference la compose en rangee —
texte a gauche, boutons a droite — et non empilee. */
.msa-cta-claude {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
/* Lignes explicites : sans elles, « grid-row: 1 / -1 » se reduit a la
premiere ligne et le bloc de boutons etirait cette ligne. */
grid-template-rows: auto auto auto;
align-items: start;
column-gap: var(--msa-space-48);
row-gap: var(--msa-space-8);
}
.msa-cta-claude > * {
margin-block: 0;
}
.msa-cta-claude > :not(.msa-conversion-actions) {
grid-column: 1;
}
.msa-cta-claude > .msa-conversion-actions {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
flex-wrap: nowrap;
justify-content: flex-end;
}
/* En dessous de 1024px les trois CTA n'entrent plus sur une rangee a cote du
texte : ils repassent sous lui, comme le fait la reference en repli. */
@media (max-width: 1024px) {
.msa-cta-claude {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--msa-space-24);
}
.msa-cta-claude > .msa-conversion-actions {
grid-column: 1;
grid-row: auto;
flex-wrap: wrap;
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.msa-cta-claude {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--msa-space-24);
}
.msa-cta-claude > .msa-conversion-actions {
grid-column: 1;
grid-row: auto;
}
}
/* Navigation du header : 13px Archivo 600, comme la reference. */
.msa-primary-navigation .wp-block-navigation-item__content {
font-weight: var(--msa-fw-semibold);
}
/* ==========================================================================
Résultats de recherche.
Surface claire, composée comme l'en-tête du catalogue : sur-titre d'accent,
filet noir, puis la grille de résultats. La recherche n'a pas de champ dans
l'en-tête — la charte n'en prévoit pas — mais la page en propose un pour
affiner sans repasser par la barre d'adresse.
========================================================================== */
/* Le fond blanc des pages de catalogue vient de `body.woocommerce`. La
recherche n'est pas une page WooCommerce : son body ne porte que la classe
`search`, et la coque restait sur le noir du thème — texte #090909 sur fond
#090909, invisible. Le fond est donc posé explicitement ici. */
body.search .msa-site-shell {
background: var(--msa-white);
}
.msa-search-main {
padding-block: var(--msa-space-64);
}
.msa-search-hero {
margin-bottom: var(--msa-space-48);
padding-bottom: var(--msa-space-16);
border-bottom: 2px solid var(--msa-black);
}
.msa-search-hero__eyebrow {
margin: 0 0 var(--msa-space-8);
color: var(--msa-accent-ui);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
letter-spacing: var(--msa-ls-eyebrow);
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-search-hero h1 {
margin: 0 0 var(--msa-space-24);
max-width: 24ch;
font-family: var(--msa-font-display);
font-size: var(--msa-fs-h1);
font-weight: var(--msa-fw-black);
letter-spacing: -0.015em;
line-height: var(--msa-lh-heading);
}
.msa-search-form .wp-block-search__inside-wrapper {
max-width: 520px;
border: 2px solid var(--msa-black);
}
.msa-search-form .wp-block-search__input {
padding: var(--msa-space-8) var(--msa-space-16);
border: 0;
color: var(--msa-black);
font-family: var(--msa-font-text);
font-size: 15px;
min-height: var(--msa-tap-min);
}
.msa-search-form .wp-block-search__button {
margin: 0;
padding: 0 var(--msa-space-24);
border: 0;
background: var(--msa-black);
color: var(--msa-white);
font-family: var(--msa-font-text);
font-size: 15px;
font-weight: var(--msa-fw-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
min-height: var(--msa-tap-min);
cursor: pointer;
}
.msa-search-list {
gap: var(--msa-space-32);
}
.msa-search-item__title {
margin: 0 0 var(--msa-space-8);
font-size: 20px;
font-weight: var(--msa-fw-bold);
}
.msa-search-item__title a {
/* Le lien ne faisait que 23 px de haut : sous la cible tactile de 44 px de
la règle R10. `inline-block` avec un retrait vertical lui donne la hauteur
sans décaler la ligne de base ni changer l'apparence. */
display: inline-block;
padding-block: 11px;
color: inherit;
text-decoration-color: var(--msa-accent-ui);
}
.msa-search-item__excerpt {
margin: 0;
color: var(--msa-steel);
font-size: 15px;
line-height: var(--msa-lh-body);
}
.msa-search-pagination {
margin-top: var(--msa-space-48);
gap: var(--msa-space-8);
}
.msa-search-pagination a,
.msa-search-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--msa-tap-min);
min-height: var(--msa-tap-min);
padding: 0 var(--msa-space-8);
color: var(--msa-black);
}
/* Page 404 : titre au calibre display en capitales, comme la reference. */
.msa-error-main h1 {
max-width: 20ch;
font-size: var(--msa-fs-display);
font-weight: 900;
letter-spacing: var(--msa-ls-display);
line-height: var(--msa-lh-display);
text-transform: uppercase;
}
/* ==========================================================================
Catalogue — en-tete compose comme les titres de section de la reference.
========================================================================== */
.woocommerce-products-header {
margin-bottom: var(--msa-space-48);
padding-bottom: var(--msa-space-16);
border-bottom: 2px solid var(--msa-black);
}
.woocommerce-products-header::before {
display: block;
margin-bottom: var(--msa-space-8);
color: var(--msa-accent-ui);
font-family: var(--msa-font-text);
font-size: var(--msa-fs-caption);
font-weight: var(--msa-fw-semibold);
letter-spacing: var(--msa-ls-eyebrow);
line-height: var(--msa-lh-heading);
text-transform: uppercase;
content: "Catalogue MSA";
}
.woocommerce-products-header .woocommerce-products-header__title {
margin: 0;
color: var(--msa-black);
font-family: var(--msa-font-display);
font-size: var(--msa-fs-h1);
font-weight: var(--msa-fw-black);
letter-spacing: -0.015em;
line-height: var(--msa-lh-heading);
text-transform: uppercase;
}
.msa-catalogue-header__intro {
max-width: 75ch;
margin: var(--msa-space-8) 0 0;
color: var(--msa-steel);
font-size: 15px;
}
/* Le fil d'Ariane precede l'en-tete : il reste discret et ne porte pas
d'accent, conformement au Design System. */
.woocommerce-breadcrumb {
margin-bottom: var(--msa-space-24);
color: var(--msa-steel);
font-size: var(--msa-fs-small);
}
.woocommerce-breadcrumb a {
color: var(--msa-steel);
}
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
color: var(--msa-black);
}
/* Pied de page : les trois colonnes de liens et de texte partagent la meme
echelle typographique. Les liens gardent leur cible tactile de 44px. */
.msa-footer-launch-nav {
gap: 0;
}
.msa-footer-launch-nav a {
color: var(--msa-steel-legible);
font-family: var(--msa-font-text);
font-size: 15px;
font-weight: var(--msa-fw-regular);
letter-spacing: normal;
text-transform: none;
}
/* Titres de colonne : Archivo 700, comme la reference — la regle globale des
titres les composait en 800. */
.msa-footer-claude h3 {
font-weight: var(--msa-fw-bold);
}
/* Ligne legale : Barlow Condensed 13px, pas 15px. La regle de paragraphe du
pied de page l'emportait sur sa taille. */
.msa-footer-claude .msa-footer-claude__legal p {
font-size: 13px;
}
/* Retrait bas du pied de page : 32px, comme la reference. */
.msa-site-footer.msa-footer-claude {
padding-bottom: var(--msa-space-32);
}
/* ==========================================================================
FINITION MOBILE
--------------------------------------------------------------------------
Passe du 17/08/2026, menée en mesurant le rendu réel à 360, 390 et 430 px.
Aucune règle ici ne change la composition : elles corrigent des valeurs qui
divergeaient de la charte, ou des tailles pensées pour le bureau et jamais
reprises pour le pouce.
========================================================================== */
@media (max-width: 640px) {
/* ---- Barre d'action de la fiche produit --------------------------------
Trois boutons côte à côte dans 350 px : à 15 px les libellés se cassaient
mal. La charte prévoit exactement ce cas — `.msa-btn--sm`, 13 px, même
hauteur tactile de 44 px. On l'applique ici, et seulement ici.
La barre est fixée en bas : sur iPhone elle passait sous l'indicateur
d'accueil. `env(safe-area-inset-bottom)` lui rend cette hauteur. */
.msa-product-actions {
padding-bottom: calc(var(--msa-space-12) + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px rgb(9 9 9 / 12%);
}
.msa-product-actions .msa-product-action {
padding-inline: var(--msa-space-8);
font-size: 0.8125rem;
letter-spacing: 0.02em;
line-height: 1.2;
}
/* La fiche produit réservait la hauteur de la barre sur son propre bloc, mais
le pied de page est en dehors : une fois défilé jusqu'en bas, la barre
recouvrait « Mentions légales » et « Confidentialité », qui devenaient
définitivement inatteignables. Le pied réserve donc aussi cette hauteur. */
body.single-product .msa-site-footer {
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
/* ---- Menu plein écran --------------------------------------------------
Les entrées reprenaient les 13 px de la navigation de bureau. Dans un
panneau plein écran, elles paraissaient perdues et visaient mal. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: 1.0625rem;
letter-spacing: 0.04em;
}
/* Le panneau ouvert n'affichait aucune marque : le coin haut gauche restait
vide en face du bouton de fermeture. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
display: block;
/* `msa-white.svg` est le monogramme, de proportions carrées : un cadre
large ne servirait à rien. 40 px, comme le logo de l'en-tête. */
width: 40px;
height: 40px;
margin-bottom: var(--msa-space-32);
background: url("../images/logos/msa-white.svg") left center / contain no-repeat;
content: "";
}
/* ---- En-tête -----------------------------------------------------------
Le bouton WhatsApp occupait 138 px, soit plus du tiers de la largeur, en
vert saturé : l'élément le plus lourd de chaque page, sur une identité qui
repose sur le noir et la photographie. Réduit à sa pastille, il reste à un
seul geste du pouce et rend sa place au logo. Le libellé demeure dans le
menu, où il est écrit en toutes lettres. */
.msa-header-whatsapp {
width: var(--msa-tap-min);
padding-inline: 0;
}
.msa-header-whatsapp span {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---- Filtres du catalogue ---------------------------------------------
Le panneau occupait un écran entier avant le premier produit. Le même
contenu, resserré : le premier produit remonte d'environ 150 px. */
.msa-catalogue-filters {
gap: var(--msa-space-12);
padding: var(--msa-space-16);
}
.msa-catalogue-filters__field {
gap: var(--msa-space-4);
}
/* Le libellé est un dans le