/* Maison Sorgue, V3 (13/11/2026) : feuille du gabarit, chargée après public/base.css et theme.css.
   Une grille (79 rem, 12 colonnes, gouttière 24 px), une marge latérale (--gutter), des espacements pris dans l'échelle
   4-8-12-16-24-32-48-64-96. Angles droits, filets de 1 px, aucune ombre, aucun dégradé, aucune apparition en fondu. */

/* ------------------------------------------------------------------ très grands écrans
   Au-delà de 2 200 px (écran de 27 pouces en définition native), tout ce qui est en rem grandit d'un huitième :
   la grille passe de 1 264 à 1 422 px et les textes de 17 à 19 px. Les fonds restent pleine largeur. */
@media (min-width: 2200px) { html { font-size: 112.5%; } }

/* ------------------------------------------------------------------ ce que la maison retire au moteur */
@view-transition { navigation: none; }
.reveal-pending { opacity: 1; transform: none; }
.reveal-in { transition: none; }
.card, .tile-link, .guide-card { transition: none; }
.card:hover, a.tile-link:hover, .guide-card:hover { transform: none; box-shadow: none; }
.card:hover .card-media img, a.tile-link:hover .tile-media img { transform: none; }
.icon-button, .gallery-nav, .gallery-zoom, .gallery-count, .video-toggle, .swatch, .stock-dot { border-radius: 0; }
.pay-frame { rx: 0; }
main { display: block; }

/* ------------------------------------------------------------------ grille et sections
   Chaque section va d'un bord à l'autre ; son contenu tombe sur la grille grâce à ce retrait. */
:root { --pad: max(var(--gutter), calc((100% - var(--wrap)) / 2)); --sec: var(--s-8); --mid: #8E979E; }
@media (min-width: 1000px) { :root { --sec: var(--s-9); } }
@media (max-width: 699px) { :root { --t-5: 1.375rem; --t-6: 1.75rem; --t-7: 2.125rem; } }
.wrap { max-width: none; padding-inline: var(--pad); }
.ms-sec, .ms-coll, .ms-coll-head, .ms-cart, .ms-page, .ms-page-crumbs, .ms-band-in, .ms-hero-in, .ms-service-in, .ms-pdp { padding-inline: var(--pad); }
.ms-sec { padding-block: var(--sec); }
.ms-flush { padding-top: 0; }
.ms-head { margin: 0 0 var(--s-6); max-width: 46rem; }
@media (min-width: 1000px) { .ms-head { margin-bottom: var(--s-7); } }
.ms-head-row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.ms-head-row > div { max-width: 46rem; }

/* ------------------------------------------------------------------ typographie */
.ms-h1 { font-size: var(--t-7); margin: 0 0 var(--s-5); letter-spacing: -0.018em; line-height: 1.06; }
.ms-h1-s { font-size: var(--t-6); margin-bottom: 0; line-height: 1.12; }
.ms-h1 .ms-line { display: block; }
.ms-h2 { font-size: var(--t-6); margin: 0; }
.ms-h3 { font-family: var(--font-body); font-size: var(--t-4); font-weight: 500; letter-spacing: 0; line-height: 1.3; margin: 0 0 var(--s-2); }
.ms-lead { font-size: var(--t-4); font-weight: 300; line-height: 1.5; margin: 0 0 var(--s-6); max-width: 34rem; }
.ms-sub { color: var(--muted); margin: var(--s-3) 0 0; max-width: 40rem; }
.ms-meta { color: var(--muted); font-size: var(--t-2); margin: var(--s-2) 0 0; }
.ms-caps, .ms-nav a, .ms-btn, .btn, .ms-switch-opt > span, .ms-tabs a, .ms-fin-from, .ms-set-save, .ms-water-name, .variants legend, .footer-title, .cart-bump-title, .ms-panel-title {
  font-family: var(--font-body); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.2;
}

/* ------------------------------------------------------------------ boutons, liens, pastilles */
.ms-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.25rem; padding: 0 var(--s-6);
  background: var(--ink); color: var(--surface); border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer; transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.ms-btn-line, .btn-secondary { background: transparent; color: var(--ink); }
.ms-btn-light { background: var(--on-slate); color: var(--ink); border-color: var(--on-slate); }
/* Au clavier, le bouton garde ses couleurs (l'anneau de focus suffit). Le survol n'inverse qu'avec une vraie souris :
   au doigt, le survol reste collé après le toucher et un bouton plein se lirait comme un bouton en creux. */
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ink); color: var(--surface); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: transparent; color: var(--ink); }
@media (hover: hover) {
  .ms-btn:hover, .btn-primary:hover { background: var(--surface); color: var(--ink); }
  .ms-btn-line:hover, .btn-secondary:hover { background: var(--ink); color: var(--surface); }
  .ms-btn-light:hover { background: transparent; color: var(--on-slate); }
  .ms-set .ms-btn-light:hover { background: var(--surface); color: var(--ink); }
}
.btn:active:not([disabled]), .ms-btn:active { transform: none; }
.btn[disabled] { opacity: 0.45; }
.btn-small { min-height: 2.75rem; padding: 0 var(--s-4); }
.ms-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-2); text-decoration: underline; }
.ms-link:hover { text-decoration: none; }
.ms-more { margin: var(--s-5) 0 0; }
.ms-sw { display: inline-block; width: 0.75rem; height: 0.75rem; flex: 0 0 auto; outline: 1px solid rgb(31 42 51 / 0.28); outline-offset: -1px; }
.ms-sw[data-sw="noir"] { background: var(--sw-noir); }
.ms-sw[data-sw="laiton"] { background: var(--sw-laiton); }
.ms-sw[data-sw="nickel"] { background: var(--sw-nickel); }
.ms-ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; flex: 0 0 auto; }

/* Couches par finition : une seule visible. Sans JavaScript, celle de la variante servie (data-fin0), sinon le noir mat. */
.ms-f { display: none; }
html:not([data-finish]):not(:has([data-fin0])) .ms-f[data-f="noir"],
html:not([data-finish]):has([data-fin0="noir"]) .ms-f[data-f="noir"],
html:not([data-finish]):has([data-fin0="laiton"]) .ms-f[data-f="laiton"],
html:not([data-finish]):has([data-fin0="nickel"]) .ms-f[data-f="nickel"],
html[data-finish="noir"] .ms-f[data-f="noir"],
html[data-finish="laiton"] .ms-f[data-f="laiton"],
html[data-finish="nickel"] .ms-f[data-f="nickel"] { display: contents; }

/* ------------------------------------------------------------------ barre d'annonce */
.ms-announce { background: var(--slate); color: var(--on-slate); font-size: var(--t-2); line-height: 1.3; }
.ms-announce-list { list-style: none; margin: 0; padding: 0 var(--pad); min-height: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.ms-announce-list li { padding-block: var(--s-2); text-align: center; }
.ms-announce-side { display: none; }
.ms-announce strong { font-weight: 500; }
@media (min-width: 1000px) {
  .ms-announce-list { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--s-6); }
  .ms-announce-side { display: block; }
  .ms-announce-list li:first-child { text-align: left; }
  .ms-announce-list li:last-child { text-align: right; }
}

/* ------------------------------------------------------------------ en-tête : barre pleine, symétrique
   Trois colonnes « 1fr auto 1fr » : le logotype est au centre exact, les deux menus tiennent sur les marges de la grille. */
.ms-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.ms-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--s-4); min-height: 3.5rem; padding-inline: var(--pad); }
.ms-bar .brand { justify-self: center; min-height: 2.75rem; }
.ms-bar .brand-logo { height: 1.125rem; width: auto; }
.ms-nav { display: none; }
.ms-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-6); }
.ms-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; white-space: nowrap; }
.ms-nav a:hover, .ms-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.5em; }
.ms-nav-r { display: block; justify-self: end; }
.ms-nav-r .ms-nav-wide { display: none; }
/* Sur téléphone, les deux pictogrammes (menu, panier) tombent sur les marges de la grille : case de 44 px décalée de 10 px. */
.cart-link { position: relative; margin: 0 -0.625rem 0 0; gap: 0; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; font-weight: 500; }
.ms-cart-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cart-count { position: absolute; top: 0.25rem; right: 0; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; background: var(--ink); color: var(--surface); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; border-radius: 0; }
.cart-count.is-bump { animation: none; }
/* Menu du téléphone */
.ms-menu { justify-self: start; }
.ms-menu-btn { list-style: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -0.625rem; cursor: pointer; }
.ms-menu-btn::-webkit-details-marker { display: none; }
.ms-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink); padding: var(--s-5) var(--pad) var(--s-6); max-height: calc(100dvh - 6rem); overflow-y: auto; }
.ms-panel-title { color: var(--muted); margin: var(--s-5) 0 var(--s-2); }
.ms-panel-title:first-child { margin-top: 0; }
.ms-panel-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ms-panel-list a { display: flex; align-items: center; gap: var(--s-3); min-height: 3rem; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--t-3); }
/* Tablette : les trois listes côte à côte (une colonne de 700 px de large ne se lit pas d'un coup d'œil). */
@media (min-width: 600px) and (max-width: 999px) {
  .ms-panel { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
  .ms-panel-title { margin-top: 0; }
}
@media (min-width: 1000px) {
  .ms-bar { min-height: 4.75rem; column-gap: var(--s-7); }
  .ms-bar .brand-logo { height: 1.5rem; }
  .ms-menu { display: none; }
  .ms-nav { display: block; }
  .ms-nav-l { justify-self: start; }
  .ms-nav-r .ms-nav-wide { display: block; }
  /* L'écart entre le pictogramme et « Panier » équilibre les deux menus au pixel (301 px de chaque côté). */
  .cart-link { min-width: 0; margin: 0; gap: 0.645rem; }
  .cart-link .ms-ico { width: 1.5rem; height: 1.5rem; }
  .cart-link:has(.cart-count:not([hidden])) .ms-ico { display: none; }
  .ms-cart-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cart-count { position: static; order: -1; min-width: 1.5rem; height: 1.5rem; font-size: var(--t-1); }
}

/* ------------------------------------------------------------------ accueil : premier écran (V4)
   Une très grande image fixe (la vraie photo de la colonne, posée dans la douche), sans vidéo, et le titre avec ses boutons
   sur un aplat : à côté sur ordinateur, en dessous sur téléphone. Jamais de texte sur l'image. */
.ms-hero { background: var(--bg); }
.ms-hero-in { display: flex; flex-direction: column; padding-block: 0 var(--s-8); }
.ms-hero-text { display: contents; }
.ms-hero-media { order: 1; margin: 0 calc(-1 * var(--pad)) var(--s-5); min-width: 0; }
.ms-hero-media picture { display: block; }
.ms-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 72% 50%; background: var(--stone-deep); }
.ms-hero-cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--pad) 0; font-size: var(--t-2); }
.ms-hero-cap a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.ms-hero-cap span { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-hero-text .ms-h1 { order: 2; }
.ms-hero-text .ms-lead { order: 3; margin-bottom: var(--s-5); }
.ms-hero-cta { order: 4; display: grid; gap: var(--s-3); margin: 0; }
.ms-hero-text .delivery-promise { order: 5; margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-2); }
@media (min-width: 560px) { .ms-hero-cta { display: flex; flex-wrap: wrap; } }
@media (min-width: 700px) and (max-width: 999px) { .ms-hero-media img { aspect-ratio: 3 / 2; } }
@media (min-width: 1000px) {
  /* L'image va jusqu'au bord droit et jusqu'en bas du premier écran ; la colonne de texte reste sur la grille. */
  .ms-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); padding-block: 0; padding-right: 0; height: min(calc(100svh - 7.3125rem), 50rem); min-height: 32rem; }
  .ms-hero-text { display: block; align-self: center; padding-block: var(--s-7); }
  .ms-hero-media { order: 0; grid-column: 2; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .ms-hero-media picture { min-height: 0; }
  .ms-hero-media img { height: 100%; aspect-ratio: auto; object-position: 88% 50%; }
  .ms-hero-cap { padding: var(--s-3) var(--gutter) var(--s-3) 0; }
  .ms-hero + .ms-sec { padding-top: var(--sec); }
}

/* ------------------------------------------------------------------ les trois finitions en très gros plan */
.ms-fin { display: grid; gap: var(--s-4); text-decoration: none; }
.ms-fin-media { display: block; overflow: hidden; background: var(--stone-deep); }
.ms-fin-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ms-fin-body { display: grid; gap: var(--s-2); }
.ms-fin-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--t-5); line-height: 1.15; letter-spacing: -0.01em; }
.ms-fin-line { color: var(--muted); max-width: 26rem; }
.ms-fin-from { color: var(--ink); display: inline-flex; align-items: center; min-height: 1.5rem; }
.ms-fin:hover .ms-fin-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ------------------------------------------------------------------ sélecteur de finition et onglets */
.ms-switch { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; }
.ms-switch-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-switch-opt { position: relative; flex: 1 1 0; }
.ms-switch-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; }
.ms-switch-opt > span, .ms-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3.5rem; padding: 0 var(--s-1); background: var(--surface); border: 1px solid var(--line); margin-left: -1px; white-space: nowrap; text-decoration: none; letter-spacing: 0.06em; }
.ms-switch-opt:first-of-type > span, .ms-tabs li:first-child a { margin-left: 0; }
.ms-switch-opt input:checked + span, .ms-tabs a[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); position: relative; }
.ms-switch-opt input:checked + span .ms-sw, .ms-tabs a[aria-current="page"] .ms-sw { outline-color: rgb(255 255 255 / 0.6); }
.ms-switch-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.ms-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; }
.ms-tabs li { flex: 1 1 0; }
.ms-catalogue .ms-switch, .ms-coll-row .ms-switch, .ms-coll-row .ms-tabs { width: 100%; }
/* Sous 400 px, « Nickel brossé » en capitales espacées touchait les filets de sa case : l'approche se resserre. */
@media (max-width: 399px) { .ms-switch-opt > span, .ms-tabs a, .ms-tabs.ms-tabs-pack a { letter-spacing: 0.03em; } }
@media (min-width: 700px) {
  .ms-switch-opt, .ms-tabs li { flex: 0 0 auto; }
  .ms-switch-opt > span, .ms-tabs a { flex-direction: row; min-height: 2.75rem; padding: 0 var(--s-4); letter-spacing: 0.13em; }
  .ms-catalogue .ms-switch, .ms-coll-row .ms-switch, .ms-coll-row .ms-tabs { width: auto; }
}

/* ------------------------------------------------------------------ grille du catalogue et cartes */
.ms-grid, .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
.ms-grid { row-gap: 0; }
@media (min-width: 700px) { .ms-grid, .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--gap); } .ms-grid { row-gap: 0; } }
@media (min-width: 1100px) { .ms-grid, .grid, .grid[data-count] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Quatre produits (guides, page introuvable) : une rangée de quatre dès la tablette plutôt que trois et un seul dessous. */
@media (min-width: 700px) { .grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }
.ms-card { min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: var(--s-6); }
@media (min-width: 700px) { .ms-card { padding-bottom: var(--s-7); } }
/* La dernière rangée ne laisse pas de vide sous la grille. */
.ms-grid { margin-bottom: calc(-1 * var(--s-6)); }
@media (min-width: 700px) { .ms-grid { margin-bottom: calc(-1 * var(--s-7)); } }
.ms-card-media { display: block; background: var(--surface); aspect-ratio: 1; overflow: hidden; }
.ms-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ms-card-body { display: contents; }
.ms-card-title { font-family: var(--font-body); font-size: var(--t-3); font-weight: 400; letter-spacing: 0; line-height: 1.3; margin: var(--s-3) 0 0; text-wrap: pretty; }
.ms-card-title a { text-decoration: none; display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; }
.ms-card-title a:hover { text-decoration: underline; }
.ms-card-price { margin: var(--s-1) 0 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ms-card-sw { list-style: none; margin: 0 0 0 -1rem; padding: 0; display: flex; }
.ms-card-sw a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.ms-card-sw a[aria-current="true"] .ms-sw { outline: 1px solid var(--ink); outline-offset: 3px; }
html[data-finish="noir"] .ms-card-sw [data-sw="noir"], html[data-finish="laiton"] .ms-card-sw [data-sw="laiton"], html[data-finish="nickel"] .ms-card-sw [data-sw="nickel"] { outline: 1px solid var(--ink); outline-offset: 3px; }
/* Cartes du moteur (guides) : même dessin. */
.card { background: none; border: 0; }
.card-media { border: 0; background: var(--surface); }
.card-body { padding: var(--s-3) 0 0; }
.card-title { font-family: var(--font-body); font-size: var(--t-3); font-weight: 400; letter-spacing: 0; }
.card-sub { display: none; }
.card-price { font-weight: 500; margin-top: var(--s-1); padding-top: 0; }
.card-meta { font-size: var(--t-2); }

/* ------------------------------------------------------------------ bande ardoise : les ensembles */
.ms-band { background: var(--slate); color: var(--on-slate); }
.ms-band-in { padding-block: var(--sec); }
.ms-band .ms-sub { color: var(--on-slate-muted); }
.ms-band :focus-visible { outline-color: var(--on-slate); }
.ms-set-list { display: grid; gap: var(--gap); }
/* Téléphone et tablette : les ensembles se feuillettent au doigt, comme les trios d'images (la carte suivante dépasse).
   Sur tablette, deux cartes de 20 rem et le début de la troisième, au lieu de deux colonnes et d'une carte seule dessous. */
@media (max-width: 999px) {
  .ms-set-list { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); grid-auto-flow: column; grid-auto-columns: min(84%, 20rem); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; }
  .ms-set-list::-webkit-scrollbar { display: none; }
  .ms-set-list .ms-set { scroll-snap-align: start; }
}
@media (min-width: 1000px) { .ms-set-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-set { background: var(--surface); color: var(--ink); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.ms-set :focus-visible { outline-color: var(--ink); }
.ms-set-media { display: block; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); overflow: hidden; }
.ms-set-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ms-set-body { padding: var(--s-5) var(--s-4); display: grid; grid-template-rows: auto 1fr auto auto auto; gap: var(--s-3); }
.ms-set-title { font-size: var(--t-5); margin: 0; }
.ms-set-title a { text-decoration: none; }
.ms-set-title a { display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem; }
.ms-set-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.ms-set-parts { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: var(--t-2); display: grid; gap: var(--s-1); align-content: start; }
.ms-set-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.ms-set-price strong { font-size: var(--t-5); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ms-set-price span { color: var(--muted); font-size: var(--t-2); }
.ms-set-save { margin: 0; justify-self: start; border: 1px solid var(--ink); padding: var(--s-2) var(--s-3); }
.ms-set-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.ms-set .ms-btn-light { background: var(--ink); color: var(--surface); border-color: var(--ink); }
@media (min-width: 1100px) { .ms-set-body { padding-inline: var(--s-5); } }
.ms-set .ms-btn.is-done { background: var(--surface); color: var(--ink); cursor: default; }

/* ------------------------------------------------------------------ trios d'images (V4) : une image, un titre, une phrase
   « Quelle finition pour votre eau ? » et les trois preuves. Sur téléphone, le trio se feuillette au doigt (la carte
   suivante dépasse) ; à partir de 900 px, trois colonnes sur la grille. */
.ms-trio, .ms-fin-list { list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; }
.ms-trio::-webkit-scrollbar, .ms-fin-list::-webkit-scrollbar { display: none; }
/* Tablette en portrait : une carte à 78 % faisait une image de 750 px de haut ; deux cartes et le début de la troisième. */
@media (min-width: 600px) and (max-width: 899px) { .ms-trio, .ms-fin-list { grid-auto-columns: 44%; } }
.ms-trio > li, .ms-fin-list > li { scroll-snap-align: start; min-width: 0; }
.ms-trio-media { display: block; overflow: hidden; background: var(--stone-deep); margin-bottom: var(--s-4); }
.ms-trio-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ms-trio-kicker { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.2; }
.ms-trio-title { font-size: var(--t-5); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--s-2); }
.ms-trio-text { color: var(--muted); margin: 0; max-width: 26rem; }
.ms-proofs { background: var(--surface); }

/* Plaques des trois preuves (V6, 14/11) : des aplats et de la typographie à la place des photos. Les tailles suivent la
   largeur de la plaque (cqw) : même dessin dans la colonne d'ordinateur et la carte du téléphone. Chaque plaque joue
   une fois quand sa carte entre à l'écran (.reveal-wait puis .is-revealed, posés par public/anim.js) ; sans script ou
   avec « réduire les animations », l'état final est affiché d'emblée. */
.ms-plate { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: var(--s-4); background: var(--stone-deep); color: var(--ink); container-type: inline-size; }
.ms-plate-k { display: block; font-family: var(--font-body); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.3; }
.ms-plate-w { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1; }

/* 1. Sous la finition, le laiton : la couche noire se retire en biais et découvre le corps. */
.ms-plate-corps { background: var(--sw-laiton); }
.ms-plate-layer { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.5cqw; padding: 7cqw; }
.ms-plate-layer .ms-plate-w { font-size: 15cqw; }
.ms-plate-under { justify-content: flex-end; }
.ms-plate-over { background: var(--sw-noir); color: var(--on-slate); clip-path: polygon(0 0, 100% 0, 100% 66%, 0 40%); transition: clip-path 1300ms var(--ease) 400ms; }
.reveal-wait:not(.is-revealed) .ms-plate-over { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* 2. Les trois finitions et leur procédé : trois bandes qui se posent l'une après l'autre. */
.ms-plate-fin { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ms-plate-row { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.8cqw; padding: 5cqw 7cqw; clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease) 400ms; }
.ms-plate-row:nth-child(2) { transition-delay: 560ms; }
.ms-plate-row:nth-child(3) { transition-delay: 720ms; }
.ms-plate-row .ms-plate-w { font-size: 8.6cqw; }
.ms-plate-row[data-row="noir"] { background: var(--sw-noir); color: var(--on-slate); }
.ms-plate-row[data-row="laiton"] { background: var(--sw-laiton); }
.ms-plate-row[data-row="nickel"] { background: var(--sw-nickel); }
.reveal-wait:not(.is-revealed) .ms-plate-row { clip-path: inset(0 100% 0 0); }

/* 3. Les trois durées : le chiffre monte, la règle se trace. */
/* Les marges sont portées par les enfants : sur le conteneur lui-même, cqw se mesurerait sur la fenêtre. */
.ms-plate-time { background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; }
.ms-plate-big { display: flex; align-items: baseline; gap: 2.5cqw; margin: 12.5cqw 7cqw 0 4.6cqw; font-family: var(--font-display); font-weight: 600; line-height: 0.8; letter-spacing: -0.03em; transition: transform 1000ms var(--ease) 400ms, opacity 700ms var(--ease) 400ms; }
.ms-plate-n { font-size: 64cqw; }
.ms-plate-u { font-size: 15cqw; letter-spacing: -0.015em; }
.ms-plate-scale { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3cqw; margin: 0 7cqw 7cqw; padding-top: 4.5cqw; }
.ms-plate-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left center; transition: transform 1300ms var(--ease) 500ms; }
.ms-plate-mark { position: relative; display: flex; flex-direction: column; gap: 1.2cqw; transition: opacity 600ms var(--ease) 900ms; }
.ms-plate-mark:nth-child(2) { transition-delay: 1100ms; }
.ms-plate-mark:nth-child(3) { transition-delay: 1300ms; }
.ms-plate-mark::before { content: ""; position: absolute; left: 0; top: -4.5cqw; width: 1px; height: 2.6cqw; background: var(--ink); }
.ms-plate-at { font-family: var(--font-display); font-weight: 600; font-size: 6.6cqw; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
.ms-plate-mark .ms-plate-k { font-size: max(0.75rem, 3.1cqw); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.25; }
.reveal-wait:not(.is-revealed) .ms-plate-big { transform: translateY(9cqw); opacity: 0; }
.reveal-wait:not(.is-revealed) .ms-plate-scale::before { transform: scaleX(0); }
.reveal-wait:not(.is-revealed) .ms-plate-mark { opacity: 0; }
@media (min-width: 900px) {
  .ms-trio, .ms-fin-list { margin-inline: 0; padding-inline: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); overflow: visible; scroll-snap-type: none; }
}
/* Survol à la souris : l'image avance d'un rien. Coupé si l'on demande moins d'animations. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ms-fin-media img, .ms-card-media img, .ms-set-media img { transition: transform 420ms var(--ease); }
  .ms-fin:hover .ms-fin-media img, .ms-card:hover .ms-card-media img, .ms-set:hover .ms-set-media img { transform: scale(1.03); }
}

/* ------------------------------------------------------------------ questions (brique du moteur) */
.ms-faq .faq, .ms-page .faq { max-width: 52rem; border-top-color: var(--ink); }
@media (min-width: 1000px) {
  .ms-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); align-items: start; }
  .ms-faq .ms-head { margin: 0; }
  .ms-faq .faq { grid-column: 2; max-width: none; }
  .ms-faq .ms-more { grid-column: 2; }
}
.faq-item { border-bottom-color: var(--line); }
.faq-item summary { font-weight: 500; padding: var(--s-4) var(--s-7) var(--s-4) 0; min-height: 3.5rem; }
.faq-item summary::after { top: 50%; right: 0; translate: 0 -50%; font-size: var(--t-4); font-weight: 300; line-height: 1; }
.faq-answer { color: var(--ink); padding-bottom: var(--s-5); }
.faq-answer p { max-width: 34rem; }
.faq-answer a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }

/* ------------------------------------------------------------------ une photo avant d'acheter, pied de page */
.ms-service { border-top: 1px solid var(--line); background: var(--bg); }
.ms-service-in { padding-block: var(--s-8); }
.ms-service-other { margin: var(--s-5) 0 0; }
/* Conseil sur photo (brique du moteur) : un titre, une phrase, un bouton. La question, l'e-mail et « Analyser ma photo »
   n'apparaissent qu'une fois la photo choisie (l'aperçu précède ces champs dans le HTML). */
.photo-advice { max-width: none; gap: var(--s-4); }
.photo-advice-title { font-size: var(--t-6); margin: 0; }
.photo-advice-lead { color: var(--muted); max-width: 34rem; }
.photo-advice-form { gap: var(--s-4); max-width: 34rem; }
.photo-advice-preview { border-radius: 0; border-color: var(--line); }
.photo-advice-preview[hidden] ~ .field, .photo-advice-preview[hidden] ~ button[type="submit"] { display: none; }
.photo-advice .field label { font-size: var(--t-2); font-weight: 500; }
.photo-advice .field .muted { font-weight: 400; color: var(--muted); }
.photo-advice textarea, .photo-advice input[type="email"] { width: 100%; min-height: 3rem; padding: var(--s-3); border: 1px solid var(--line); border-radius: 0; background: var(--surface); font: inherit; color: var(--ink); }
.photo-advice textarea:focus-visible, .photo-advice input[type="email"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.photo-advice-form > .btn-primary { justify-self: start; }
.photo-advice-status { font-size: var(--t-2); }
.photo-advice-status[data-kind="ok"] { color: var(--ink); font-weight: 500; }
.photo-advice-result { border-radius: 0; border-color: var(--ink); padding: var(--s-4) var(--s-5); max-width: 34rem; }
/* La réponse peut contenir une adresse longue : elle se coupe, elle n'élargit jamais la page. */
.photo-advice, .photo-advice-form, .photo-advice-result { min-width: 0; }
.photo-advice > *, .photo-advice-form > *, .photo-advice-result > * { min-width: 0; }
.photo-advice-answer { overflow-wrap: anywhere; }
.ms-fold { min-width: 0; }
.photo-advice-mail label { font-size: var(--t-2); font-weight: 500; }
.photo-advice-privacy { font-size: var(--t-1); max-width: 34rem; }
.photo-advice-privacy a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
@media (min-width: 1000px) {
  .ms-service .photo-advice { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-8); grid-template-areas: "title form" "lead form" "lead result" "lead privacy"; align-items: start; }
  .ms-service .photo-advice-title { grid-area: title; }
  .ms-service .photo-advice-lead { grid-area: lead; }
  .ms-service .photo-advice-form { grid-area: form; }
  .ms-service .photo-advice-result { grid-area: result; }
  .ms-service .photo-advice-privacy { grid-area: privacy; }
  .ms-service .photo-advice > noscript { grid-column: 2; }
  .ms-service-other { margin-left: calc((100% - var(--s-8)) * 5 / 11 + var(--s-8)); margin-top: var(--s-3); }
}
/* Sur les fiches de douche : le même conseil, replié à hauteur du bloc d'achat. */
.ms-fold { margin-top: var(--s-5); border: 1px solid var(--line); background: var(--surface); }
.ms-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: center; min-height: 3.5rem; padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; }
.ms-fold > summary::-webkit-details-marker { display: none; }
.ms-fold > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font-size: var(--t-4); font-weight: 300; line-height: 1; }
.ms-fold[open] > summary::after { content: "−"; }
.ms-fold-title { font-weight: 500; }
.ms-fold-sub { grid-column: 1; font-size: var(--t-2); color: var(--muted); }
.ms-fold .photo-advice { padding: var(--s-2) var(--s-4) var(--s-4); border-top: 1px solid var(--line); }
.ms-fold .photo-advice-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-fold .photo-advice-lead { padding-top: var(--s-3); }
.site-footer { background: var(--slate); color: var(--on-slate); border: 0; margin: 0; font-size: var(--t-2); }
.site-footer :focus-visible { outline-color: var(--on-slate); }
.site-footer .brand-logo { height: 1.25rem; width: auto; filter: brightness(0) invert(0.93); }
.footer-grid { padding-block: var(--s-8) var(--s-6); gap: var(--s-6); }
.footer-title { color: var(--on-slate-muted); margin-bottom: var(--s-3); }
.footer-note { color: var(--on-slate-muted); }
.footer-links a, .footer-law a, .footer-law .link-button { text-decoration: none; }
.footer-law a { padding-inline: 0.5rem; margin-inline: -0.5rem; }
.footer-links a:hover, .footer-law a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--slate-line); color: var(--on-slate-muted); padding-block: var(--s-4); }
.page-product .site-footer { padding-bottom: 5.5rem; }
@media (min-width: 900px) { .page-product .site-footer { padding-bottom: 0; } }

/* ------------------------------------------------------------------ collection : en-tête court, la grille tout de suite */
.breadcrumb.wrap { padding-inline: 0; }
.breadcrumb ol { padding-top: 0; font-size: var(--t-2); }
.breadcrumb li + li::before { color: var(--mid); }
.ms-coll-head { padding-block: var(--s-2) var(--s-5); }
.ms-coll-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.ms-coll-title { max-width: 46rem; min-width: 0; }
.ms-coll-intro { color: var(--muted); margin: var(--s-2) 0 0; }
.ms-coll { padding-bottom: var(--s-8); }
.ms-coll-sets .ms-head { margin-bottom: var(--s-6); }
.ms-advice { border-top: 1px solid var(--line); padding-top: var(--s-7); }
.ms-advice-grid { display: grid; gap: var(--s-6); }
.ms-advice-grid p { margin: 0; color: var(--muted); max-width: 34rem; }
@media (min-width: 900px) { .ms-advice-grid { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); } }
.ms-advice .guides-block { margin-top: var(--s-7); }
/* Sous une collection, la liste des guides reste courte : les titres seuls, sur deux colonnes dès 900 px. */
.ms-advice .guide-link-desc { display: none; }
@media (min-width: 900px) { .ms-advice .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); max-width: none; } }
.pdp-section { border-top: 0; padding-block: 0; }
.pdp-section > h2 { font-size: var(--t-5); margin: 0 0 var(--s-4); }
.guide-list { gap: 0; border-top: 1px solid var(--line); max-width: 52rem; }
.guide-link { background: none; border: 0; border-bottom: 1px solid var(--line); padding: var(--s-4) 0; }
.guide-link:hover .guide-link-title { text-decoration: underline; }
.guide-link-title { font-weight: 500; }

/* ------------------------------------------------------------------ fiche produit */
.page-product .breadcrumb, .ms-page-crumbs .breadcrumb { padding-inline: var(--pad); padding-block: var(--s-2) 0; }
.ms-page-crumbs { padding-inline: 0; }
.ms-page-crumbs .breadcrumb { padding-inline: var(--pad); }
.ms-pdp { display: grid; gap: var(--s-5); padding-block: var(--s-3) var(--s-8); }
.ms-pdp-media, .ms-pdp-panel { min-width: 0; }
.gallery { display: grid; gap: var(--s-3); }
.gallery-track { background: var(--surface); border: 0; border-radius: 0; gap: 0; }
.gallery-slide { aspect-ratio: 1; }
.gallery-thumbs { padding: 0; gap: var(--s-2); scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs a { width: 4rem; height: 4rem; border: 1px solid transparent; border-radius: 0; background: var(--surface); opacity: 1; transition: none; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--ink); }
.gallery-nav, .gallery-zoom { background: var(--surface); border: 1px solid var(--line); transition: none; }
.gallery-count { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.ms-pdp-title { font-size: var(--t-6); margin: 0 0 var(--s-3); }
.ms-pack-incl { margin: var(--s-3) 0 0; font-size: var(--t-2); color: var(--muted); max-width: 35rem; }
.ms-pack-incl strong { color: var(--ink); font-weight: 500; }
@media (min-width: 1000px) { .ms-pack-incl { padding-left: calc(4.5rem + var(--s-3)); } }
.ms-pdp-sub { color: var(--muted); margin: 0 0 var(--s-5); max-width: 32rem; }
.ms-pdp-rating { margin: 0 0 var(--s-4); font-size: var(--t-2); }
.ms-pdp-save { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--ink); background: var(--surface); }
.ms-tabs-pack { margin: 0 0 var(--s-5); }
/* Dans le panneau d'achat, les trois finitions de l'ensemble se partagent la largeur, comme les pastilles de finition. */
.ms-tabs.ms-tabs-pack li { flex: 1 1 0; min-width: 0; }
.ms-tabs.ms-tabs-pack a { flex-direction: column; min-height: 3.5rem; padding: 0 var(--s-1); letter-spacing: 0.06em; }
.pdp-price-block { border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: 0; gap: var(--s-1); }
.pdp-price { font-size: var(--t-5); font-weight: 500; line-height: 1.1; }
.pdp-shipping { color: var(--muted); font-size: var(--t-2); margin: 0; }
.pdp-tiers { font-size: var(--t-2); font-weight: 500; }
.pdp-form { gap: var(--s-5); margin-top: var(--s-5); }
.variants legend { margin-bottom: var(--s-3); }
.variants legend span { letter-spacing: 0.13em; }
.variant-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); gap: var(--s-2); container-type: inline-size; }
.variant-option { display: block; }
.variant-chip { display: flex; justify-content: center; width: 100%; min-height: 3rem; padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: 0; background: var(--surface); font-size: var(--t-2); white-space: nowrap; transition: none; }
@container (max-width: 26rem) {
  .variant-chip { flex-direction: column; align-items: center; gap: var(--s-1); min-height: 3.5rem; padding: var(--s-2) var(--s-1); white-space: normal; text-align: center; line-height: 1.2; }
}
.variant-option input:checked + .variant-chip { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; }
.variant-option input:active + .variant-chip { transform: none; }
.swatch { width: 0.875rem; height: 0.875rem; box-shadow: none; outline: 1px solid rgb(31 42 51 / 0.28); outline-offset: -1px; }
.qty-row { gap: var(--s-4); }
.qty-row label { font-weight: 400; }
.qty-row input { width: 4.5rem; min-height: 3rem; text-align: center; border-radius: 0; border-color: var(--line); }
.pdp-delivery { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: var(--s-3) var(--s-4); gap: var(--s-1); font-size: var(--t-2); }
.pdp-delivery strong { font-weight: 500; }
.stock-dot { width: 0.5rem; height: 0.5rem; background: var(--ink); vertical-align: 0.08em; margin-right: var(--s-2); }
.pdp-form .btn-primary { min-height: 3.5rem; }
.secure-text { font-weight: 500; font-size: var(--t-2); }
.delivery-note { font-size: var(--t-2); }
/* Bloc d'achat V4 (briques du moteur) : cartes « la pièce seule / le Duo / la salle de bain », garantie, bénéfices,
   « va bien avec », accordéons. Mêmes filets et mêmes angles droits que le reste de la maison. */
.buy-choices-legend { font-family: var(--font-body); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.2; margin-bottom: var(--s-3); }
.buy-choices-list { gap: var(--s-2); container-type: inline-size; }
.buy-choice-card { border-radius: 0; border-color: var(--line); padding: var(--s-3) var(--s-4); transition: none; }
.buy-choices[data-kind="pack"] .buy-choice-card { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "name badge . price" "detail detail detail save"; column-gap: var(--s-3); row-gap: 0.125rem; align-items: baseline; }
.buy-choices[data-kind="pack"] .buy-choice-badge { grid-area: badge; }
.buy-choices[data-kind="pack"] .buy-choice-name { grid-area: name; }
.buy-choices[data-kind="pack"] .buy-choice-detail { grid-area: detail; }
.buy-choices[data-kind="pack"] .buy-choice-price { grid-area: price; }
.buy-choices[data-kind="pack"] .buy-choice-save { grid-area: save; }
.buy-choice-badge { border-radius: 0; background: var(--ink); color: var(--surface); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.1em; padding: 0.125rem var(--s-2); align-self: center; }
.buy-choice-name { font-weight: 500; }
.buy-choice-detail, .buy-choice-save { font-size: var(--t-2); }
.buy-choice-price { font-weight: 500; }
.buy-choice-save { color: var(--ink); font-weight: 500; white-space: nowrap; }
@container (max-width: 26rem) {
  .buy-choices[data-kind="pack"] .buy-choice-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge badge" "name price" "detail detail" "save save"; }
  .buy-choices[data-kind="pack"] .buy-choice-badge { justify-self: start; margin-bottom: var(--s-1); }
  .buy-choices[data-kind="pack"] .buy-choice-detail { margin-top: var(--s-1); }
  .buy-choices[data-kind="pack"] .buy-choice-save { text-align: left; }
}
.buy-choice input:checked + .buy-choice-card { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.buy-guarantee { font-size: var(--t-2); }
/* Prix « séparément » barré d'un ensemble (calculé par le moteur) et diapositive de l'ensemble dans la galerie. */
.buy-choice-ref { font-size: var(--t-1); font-weight: 400; color: var(--muted); text-align: right; }
.buy-choices[data-kind="pack"] .buy-choice-price { text-align: right; }
.pdp-ref { font-size: var(--t-2); color: var(--muted); margin: var(--s-1) 0 0; }
.pdp-ref-save { color: var(--ink); font-weight: 500; }
/* Matière, dite franchement. */
.ms-mat { border-top: 1px solid var(--line); padding-top: var(--sec); display: grid; gap: var(--s-5); }
.ms-mat-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); max-width: 46rem; }
.ms-mat-list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.ms-mat-list dt { color: var(--muted); }
.ms-mat-list dd { margin: 0; }
.ms-mat-note { margin: 0; max-width: 35rem; color: var(--muted); font-size: var(--t-2); }
.ms-mat + .ms-tech { border-top: 0; padding-top: 0; }
@media (min-width: 1000px) { .ms-mat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); align-items: start; } .ms-mat .ms-h2 { grid-row: span 2; } .ms-mat-note { grid-column: 2; } }

.rating-line { font-size: var(--t-2); }
.pdp-highlights { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); gap: var(--s-2) var(--s-4); font-size: var(--t-2); }
.pdp-highlights .icon { color: var(--ink); }
.goes-with { margin-top: var(--s-5); padding-top: var(--s-4); border-top-color: var(--line); }
.goes-with-title { font-size: var(--t-1); font-weight: 500; letter-spacing: 0.13em; color: var(--ink); margin-bottom: var(--s-3); }
.goes-with .mini-title { font-weight: 500; display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.goes-with .mini-price { font-size: var(--t-2); color: var(--muted); }
.pdp-accordions { margin-top: var(--s-5); border-top-color: var(--line); }
.pdp-acc { border-bottom-color: var(--line); }
.pdp-acc > summary { font-weight: 500; min-height: 3.25rem; }
.pdp-acc > summary::after { font-weight: 300; font-size: var(--t-4); }
.pdp-acc-body { font-size: var(--t-2); color: var(--ink); }
.pdp-acc-body p, .pdp-acc-body li { max-width: 34rem; }
.pdp-acc .faq { border-top: 0; }
.pdp-acc .faq-item summary { font-size: var(--t-2); min-height: 3rem; padding-block: var(--s-3); }
/* Points des carrousels du moteur : carrés, comme les pastilles ; inutiles quand les trois cartes tiennent côte à côte. */
.carousel-dot { width: 2.75rem; }
.carousel-dot::before { border-radius: 0; }
.carousel-dot[aria-current="true"]::before { border-radius: 0; }
@media (min-width: 900px) { .ms-trio + .carousel-nav, .ms-fin-list + .carousel-nav { display: none; } }
.ms-trio + .carousel-nav .carousel-arrow, .ms-fin-list + .carousel-nav .carousel-arrow { display: none; }
/* Quantité et bouton sur une même ligne, puis la garantie, puis le stock et les dates : le bouton reste dans le premier écran. */
.pdp-form:has(> .qty-row) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); }
.pdp-form:has(> .qty-row) > * { grid-column: 1 / -1; }
.pdp-form > .variants { order: 1; }
.pdp-form > .buy-choices { order: 2; }
.pdp-form:has(> .qty-row) > .qty-row { order: 3; grid-column: 1; }
.pdp-form:has(> .qty-row) > [data-add-button] { grid-column: 2; }
.pdp-form > [data-add-button] { order: 3; }
.pdp-form > .buy-guarantee { order: 4; }
.pdp-form > .pdp-delivery { order: 5; }
.pdp-form > * { order: 6; }
.pdp-form > .variants { order: 1; }
.pdp-form > .buy-choices { order: 2; }
.pdp-form > .qty-row, .pdp-form > [data-add-button] { order: 3; }
.pdp-form > .buy-guarantee { order: 4; }
.pdp-form > .pdp-delivery { order: 5; }
.pdp-form .qty-row label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pdp-form .qty-row input { min-height: 3.5rem; }
.pdp-form [data-add-button] { flex-wrap: wrap; column-gap: 0.35em; padding-inline: var(--s-3); text-align: center; }
.buy-total { white-space: nowrap; }
@media (max-width: 479px) { .pdp-form [data-add-button] { letter-spacing: 0.08em; } }
/* Sous 375 px, « Ajouter au panier · 319,00 € » passe sur deux lignes : elles restent serrées, comme un seul libellé. */
.pdp-form [data-add-button] { align-content: center; row-gap: 0.25rem; }

.ms-offer { margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--ink); font-size: var(--t-2); }
.ms-offer strong { font-weight: 600; }
.ms-teaser { margin: var(--s-4) 0 0; font-size: var(--t-2); }
.ms-teaser strong { font-weight: 600; }
.ms-teaser a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.reassurance { border-top: 1px solid var(--line); margin-top: var(--s-5); padding-top: var(--s-4); font-size: var(--t-2); gap: var(--s-2); }
.reassurance strong { font-weight: 500; }
.ms-facts { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--line); font-size: var(--t-2); }
.ms-facts li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
/* Tablette en portrait : la photo et le bloc d'achat côte à côte (le bouton reste dans le premier écran d'un iPad). */
@media (min-width: 760px) {
  .ms-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .ms-pdp-media { position: sticky; top: var(--s-5); }
}
@media (min-width: 1000px) {
  .ms-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); padding-top: var(--s-4); }
  /* Les vignettes prennent la hauteur de la photo, pas l'inverse : la colonne est posée en absolu et défile dans cette hauteur. */
  .gallery { position: relative; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
  .gallery-stage { grid-column: 2; grid-row: 1; }
  .gallery-thumbs { position: absolute; inset: 0 auto 0 0; width: 4.5rem; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .gallery-thumbs a { width: 4.5rem; height: 4.5rem; }
}
/* Arguments : une photo réelle et un texte, en rangées alternées */
.ms-why { display: grid; gap: var(--s-8); }
.ms-row { display: grid; gap: var(--s-5); }
.ms-row-media { background: var(--surface); aspect-ratio: 1; overflow: hidden; }
.ms-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-row-text { max-width: 34rem; }
.ms-row-text .ms-h2 { margin-bottom: var(--s-4); }
.ms-row-text p { margin: 0 0 var(--s-3); }
.ms-row-note { color: var(--muted); font-size: var(--t-2); max-width: 28rem; }
.ms-row-more { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ms-row-more .ms-h3 { margin-bottom: var(--s-3); }
.ms-notes { display: grid; gap: var(--s-7); border-top: 1px solid var(--line); padding-top: var(--s-7); }
/* Dès la tablette, une image et son texte côte à côte, en rangées alternées (une image carrée pleine largeur faisait
   700 px de haut par argument). */
@media (min-width: 700px) {
  .ms-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
  .ms-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
  .ms-row:nth-child(even) .ms-row-media { order: 2; }
}
@media (min-width: 1000px) {
  .ms-notes { gap: var(--s-8); }
  .ms-why { gap: var(--s-9); }
  .ms-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); }
  .ms-row:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .ms-row:nth-child(even) .ms-row-text { justify-self: end; }
}
/* Cotes (dessin technique) et caractéristiques */
.ms-tech { border-top: 1px solid var(--line); padding-top: var(--sec); }
.ms-tech-grid { display: grid; gap: var(--s-7); }
.ms-tech-plan figure { margin: var(--s-5) 0 0; }
.ms-tech-plan figure a { display: block; background: var(--surface); padding: var(--s-4); }
.ms-tech-plan img { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: contain; }
.ms-tech-plan figcaption { color: var(--muted); font-size: var(--t-2); padding-top: var(--s-2); }
.ms-tech-specs .pdp-section > h2 { font-size: var(--t-6); margin-bottom: var(--s-5); }
.specs th, .specs td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom-color: var(--line); }
.specs th { font-weight: 400; color: var(--muted); width: 42%; }
.specs tr:first-child th, .specs tr:first-child td { border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .ms-tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; } }
@media (min-width: 1000px) { .ms-tech-grid { gap: var(--s-8); } }
/* Ensemble : ses pièces */
.ms-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.ms-part { display: grid; gap: var(--s-3); text-decoration: none; }
.ms-part-media { display: block; background: var(--surface); aspect-ratio: 1; overflow: hidden; }
.ms-part-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ms-part-body { display: grid; gap: var(--s-1); }
.ms-part-name { font-weight: 500; }
.ms-part:hover .ms-part-name { text-decoration: underline; }
.ms-part-sub { color: var(--muted); font-size: var(--t-2); }
.ms-part-price { font-variant-numeric: tabular-nums; }
/* Le total de l'ensemble : une case ardoise à la suite des pièces, de la taille d'une photo. */
.ms-parts-sum { background: var(--slate); color: var(--on-slate); padding: var(--s-5); display: grid; align-content: end; gap: var(--s-2); }
.ms-parts-sum p { margin: 0; }
.ms-parts-sum-price strong { font-size: var(--t-6); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ms-parts-sum-price span, .ms-parts-sum-line { font-size: var(--t-2); }
.ms-parts-sum-line { opacity: 0.86; }
.ms-parts-sum-save { font-weight: 500; }
.ms-parts-sum-cta { padding-top: var(--s-3); }
@media (min-width: 700px) {
  .ms-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-parts-n2 .ms-parts-sum { aspect-ratio: 1; align-self: start; }
  .ms-parts-n3 .ms-parts-sum { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .ms-parts-n3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ms-parts-n3 .ms-parts-sum { grid-column: auto; aspect-ratio: 1; align-self: start; }
}
.ms-after:empty { display: none; }
.ms-after { padding-top: 0; }
.sticky-buy { background: var(--surface); border-top: 1px solid var(--ink); transition: none; }
.sticky-price { font-weight: 500; }
.sticky-buy .btn { min-height: 3rem; padding: 0 var(--s-5); }
@media (max-width: 379px) { .sticky-buy .btn { padding: 0 var(--s-3); } }
.drawer { border-radius: 0; box-shadow: none; border-top: 1px solid var(--ink); }
.drawer-img, .mini-media img, .cart-line img { border-radius: 0; border-color: var(--line); }
.drawer-title { font-weight: 500; }
.drawer-actions .btn { flex-wrap: wrap; column-gap: 0.4em; padding: var(--s-3) var(--s-4); text-align: center; }
.drawer-count { white-space: nowrap; }
/* Page de paiement : le logo à la taille de l'en-tête du site. */
.co-header .brand .brand-logo { height: 1.125rem; max-height: none; }
@media (min-width: 1000px) { .co-header .brand .brand-logo { height: 1.5rem; } }
@media (min-width: 640px) { .drawer { border-top: 0; border-left: 1px solid var(--ink); } }

/* ------------------------------------------------------------------ panier */
.ms-cart { padding-block: var(--s-6) var(--sec); }
.ms-cart .ms-h1 { margin-bottom: var(--s-6); }
.cart { gap: var(--s-6); }
.cart-line { border-bottom-color: var(--line); grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-4); }
.cart-line img { width: 6rem; height: 6rem; border: 0; }
.cart-line-title { font-weight: 500; }
.cart-line-title a { text-decoration: none; }
.qty { border-radius: 0; border-color: var(--line); }
.cart-summary { border-radius: 0; border-color: var(--line); padding: var(--s-5); gap: var(--s-4); }
.cart-bump { border-radius: 0; background: var(--tint); border-color: var(--line); }
.cart-bump-title { color: var(--muted); }
.cart-code summary { font-size: var(--t-2); }
.cart-code-form input { border-radius: 0; border-color: var(--line); }
.totals .total { border-top-color: var(--ink); font-weight: 500; font-size: var(--t-4); padding-top: var(--s-3); }
.totals .cart-discount dd { color: var(--ink); font-weight: 500; }
.cart-empty { font-size: var(--t-4); font-weight: 300; }
@media (min-width: 900px) { .cart { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } }

/* ------------------------------------------------------------------ pages de contenu */
.ms-page { padding-block: var(--s-5) var(--sec); }
.ms-page-head { max-width: 46rem; margin-bottom: var(--s-6); }
.ms-page-body { max-width: 46rem; }
.ms-page.is-finitions .ms-fin-list { margin-bottom: var(--s-7); }
.ms-page.is-finitions .ms-page-body { max-width: 56rem; }
.prose { max-width: none; }
/* En Jost, 1ch (la largeur du zéro) vaut près d'un signe et demi : la mesure se règle en rem pour rester sous 75 signes. */
.prose p, .prose li { max-width: 35rem; }
.prose h2 { font-size: var(--t-5); margin: var(--s-7) 0 var(--s-3); }
.prose h3 { font-family: var(--font-body); font-size: var(--t-4); font-weight: 500; letter-spacing: 0; margin: var(--s-6) 0 var(--s-2); }
.prose strong { font-weight: 500; }
.prose table { font-size: var(--t-2); margin: var(--s-4) 0; }
.prose th { font-weight: 500; }
.prose th, .prose td { border-bottom-color: var(--line); padding: var(--s-3) var(--s-4) var(--s-3) 0; }
.prose thead th { border-bottom-color: var(--ink); }
/* Téléphone : un mot long (« électrodéposition ») élargissait sa colonne et écrasait les autres en colonnes d'un mot ;
   les cellules se coupent en fin de ligne, avec un trait d'union, et se resserrent. */
@media (max-width: 599px) { .prose th, .prose td { padding-right: var(--s-3); hyphens: auto; -webkit-hyphens: auto; } }
.prose blockquote { border-left: 0; padding-left: 0; }
.guide .prose h2, .is-guide .prose h2 { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.contact-card { border-radius: 0; border-color: var(--line); padding: var(--s-5); }
.contact-card h2, .contact-form-wrap h2 { font-size: var(--t-5); }
.legal-list dt { font-size: var(--t-1); letter-spacing: 0.13em; font-weight: 500; }
input, textarea, select { border-radius: 0; border-color: var(--line); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.notice { border-radius: 0; background: var(--surface); border: 1px solid var(--line); }
.guide-cards { gap: var(--gap); }
.guide-card { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: var(--s-5); }
.guide-card .eyebrow { display: none; }
.guide-card-title { font-size: var(--t-5); }
/* Tablette : les trois cartes de guide sur une rangée (deux et une seule dessous laissaient un trou). */
@media (min-width: 700px) and (max-width: 999px) {
  .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-card { padding: var(--s-4); }
  .guide-card-title { font-size: var(--t-4); }
}
.guide-card-more { color: var(--ink); font-weight: 500; text-decoration: underline; }
.guide-card-more::after { content: none; }
.eyebrow { display: none; }
.notfound { padding-block: var(--s-7); }
.cookie-banner { border-top-color: var(--ink); }