/* ==================================================================
   Ruban Pro — direction I « Maison »
   ==================================================================
   Portée depuis maquettes/i-maison/maison.css, validée le 21/09/2026.
   Toutes les classes sont préfixées « m- ».

   Les valeurs de :root ci-dessous sont celles de la maquette. Le thème
   les remplace par celles de Apparence → Ruban Pro (couleurs, polices,
   taille du texte, largeur, arrondis) : voir rubanpro_css_variables().

   Les ajouts propres à WordPress (menu mobile, logo image, liens de
   filtres, contenus éditoriaux) sont en fin de fichier.
   ================================================================== */

:root {
  --m-largeur: 1380px;
  --m-marge: 40px;

  --m-noir: #131313;
  --m-encre: #1b1a18;
  --m-encre-2: #3a3833;
  --m-gris: #6f6a63;
  --m-gris-2: #918b81;
  --m-blanc: #ffffff;

  --m-creme: #f7f3ed;          /* héros, familles */
  --m-creme-2: #faf8f4;        /* métiers, inspirations */
  --m-beige: #efe8dc;          /* configurateur, nuancier */
  --m-vert: #16241b;           /* bandeau final */
  --m-trait: #e6dfd3;
  --m-trait-2: #efe9e0;

  --m-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --m-sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --m-main: "Caveat", "Bradley Hand", cursive;

  --m-r: 10px;
  --m-r-s: 7px;
  --m-focus: #16241b;
}

/* ---------------------------------------------------------------- base */
.m-page {
  margin: 0;
  background: var(--m-creme-2);
  color: var(--m-encre);
  font-family: var(--m-sans);
  font-size: var(--m-taille, 15px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.m-page * { box-sizing: border-box; }
.m-page img { max-width: 100%; display: block; }
.m-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.m-page :focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.m-wrap {
  max-width: var(--m-largeur);
  margin-inline: auto;
  padding-inline: var(--m-marge);
}

.m-page h1, .m-page h2, .m-page h3 {
  font-family: var(--m-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  margin: 0;
}

/* Icônes : un seul jeu de traits, jamais de remplissage. */
.m-ico, .m-ico-f {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.m-ico { width: 22px; height: 22px; }
.m-ico-f { width: 17px; height: 17px; stroke-width: 1.6; }

/* Sur-titre. Capitales espacées — c'est la signature de la référence. */
.m-oeil {
  margin: 0 0 1.35rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--m-gris);
}
.m-oeil--clair { color: rgba(255, 255, 255, .62); }

/* Le mot écrit à la main, penché, souligné d'un court trait. */
.m-main {
  font-family: var(--m-main);
  font-weight: 500;
  color: var(--m-encre-2);
  line-height: 1.12;
  margin: 0;
  transform: rotate(-3deg);
}
.m-main::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin-top: .5rem;
  margin-left: 1.8rem;
  border-radius: 2px;
}

/* ------------------------------------------------------------- boutons */
.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.05rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--m-r-s);
  font: 500 14px/1 var(--m-sans);
  letter-spacing: .012em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.m-btn--noir { background: var(--m-noir); color: #fff; }
.m-btn--noir:hover { background: #2c2c2a; }
.m-btn--blanc { background: #fff; color: var(--m-encre); }
.m-btn--blanc:hover { background: #ece7de; }

.m-lien {
  font: 500 14px/1 var(--m-sans);
  color: var(--m-encre);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.m-lien:hover { color: var(--m-gris); }

.m-plus {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font: 400 13.5px/1 var(--m-sans);
  color: var(--m-encre-2);
  text-decoration: none;
  white-space: nowrap;
}
.m-plus:hover { color: var(--m-gris); }
.m-plus .m-ico-f { width: 15px; height: 15px; }

/* Pastille ronde blanche posée dans l'angle d'une photo. */
.m-rond {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--m-encre);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(20, 15, 5, .14);
  transition: transform .2s ease;
}

/* ================================================================
   BANDEAU D'ANNONCE
   ================================================================ */
.m-annonce {
  background: var(--m-noir);
  color: rgba(255, 255, 255, .88);
}
.m-annonce__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.9rem;
  min-height: 42px;
  position: relative;
}
.m-annonce ul {
  display: flex;
  gap: 2.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-annonce li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .01em;
}
.m-annonce .m-ico { width: 15px; height: 15px; stroke-width: 1.4; opacity: .82; }
.m-annonce__langue {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 12px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}
.m-annonce__langue .m-ico-f { width: 13px; height: 13px; }

/* ================================================================
   EN-TÊTE
   ================================================================ */
.m-entete {
  background: #fff;
  border-bottom: 1px solid var(--m-trait-2);
  position: sticky;
  top: 0;
  z-index: 40;
}
.m-entete__in {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 86px;
}

.m-logo { text-decoration: none; color: var(--m-encre); flex: none; }
.m-logo b {
  display: block;
  font: 500 25px/1 var(--m-serif);
  letter-spacing: -.02em;
}
.m-logo span {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--m-gris-2);
}

.m-nav { margin-inline: auto; }
.m-nav ul {
  display: flex;
  gap: 2.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-nav a {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 14px;
  font-weight: 400;
  color: var(--m-encre);
  text-decoration: none;
  padding-block: .4rem;
}
.m-nav a:hover { color: var(--m-gris); }
.m-nav .m-ico-f { width: 13px; height: 13px; stroke-width: 1.8; }

/* Les trois entrées à chevron ouvrent un volet. Le premier, « Rubans »,
   contient les sept familles du cahier des charges : la référence n'en
   montrait que l'intitulé, il fallait bien les loger quelque part. */
.m-nav__item { position: relative; }
.m-nav__b {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: none;
  border: 0;
  padding: .4rem 0;
  font: 400 14px/1.4 var(--m-sans);
  color: var(--m-encre);
  cursor: pointer;
}
.m-nav__b:hover { color: var(--m-gris); }
.m-nav__b[aria-expanded="true"] .m-ico-f { transform: rotate(180deg); }
.m-vol {
  position: absolute;
  top: calc(100% + 16px);
  left: -18px;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--m-trait-2);
  border-radius: var(--m-r-s);
  box-shadow: 0 18px 40px -22px rgba(30, 22, 8, .45);
  padding: .55rem 0;
  z-index: 50;
}
.m-vol ul { display: block; list-style: none; margin: 0; padding: 0; }
.m-vol a {
  display: block;
  padding: .52rem 1.15rem;
  font-size: 13.5px;
  font-weight: 300;
  white-space: nowrap;
  color: var(--m-encre-2);
}
.m-vol a:hover { background: var(--m-creme); color: var(--m-encre); }

.m-outils {
  display: flex;
  align-items: center;
  gap: 1.45rem;
  flex: none;
}
.m-outils a {
  color: var(--m-encre);
  position: relative;
  display: block;
}
.m-outils .m-ico { width: 20px; height: 20px; stroke-width: 1.4; }
.m-pastille {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--m-noir);
  color: #fff;
  font-size: 9.5px;
  font-weight: 500;
  display: grid;
  place-items: center;
  padding-inline: 4px;
}

/* ================================================================
   HÉROS
   ================================================================ */
.m-heros {
  background: var(--m-creme);
  overflow: clip;
}
.m-heros__in {
  max-width: var(--m-largeur);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  align-items: center;
  min-height: 620px;
}
.m-heros__txt {
  padding: 3.8rem 2.4rem 3.8rem var(--m-marge);
}
.m-heros h1 {
  font-size: clamp(2.5rem, 4.85vw, 4.35rem);
  line-height: 1.045;
  letter-spacing: -.028em;
  margin: 0 0 1.6rem;
}
.m-heros__chapo {
  font-size: 17px;
  line-height: 1.58;
  color: var(--m-encre-2);
  font-weight: 300;
  margin: 0 0 2.2rem;
  max-width: 34ch;
}
.m-heros__act {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  margin: 0 0 3.6rem;
  flex-wrap: wrap;
}

.m-atouts {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.m-atouts li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-size: 13px;
  line-height: 1.42;
  font-weight: 300;
  color: var(--m-encre-2);
}
.m-atouts .m-ico { width: 21px; height: 21px; margin-top: 1px; }

/* La photo va jusqu'au bord droit de la fenêtre et se fond dans le
   crème à gauche : c'est ce raccord qui fait tenir le héros de la
   référence, où le fond du studio et le fond de page sont le même. */
.m-heros__img {
  position: relative;
  align-self: stretch;
  margin-right: calc(-1 * max(0px, (100vw - var(--m-largeur)) / 2));
}
.m-heros__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.m-main--heros {
  position: absolute;
  top: 12%;
  right: clamp(1.5rem, 5vw, 5.5rem);
  font-size: 25px;
  text-align: center;
}

/* ================================================================
   ILS NOUS FONT CONFIANCE
   ================================================================ */
.m-confiance { background: #fff; }
.m-confiance__in {
  padding-block: 1.9rem 2.1rem;
}
.m-confiance__lab {
  margin: 0 0 .55rem;
  font-size: 12px;
  font-weight: 300;
  color: var(--m-encre-2);
}
.m-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4.2vw, 3.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--m-encre);
  flex-wrap: wrap;
}
.m-logos li { line-height: 1; white-space: nowrap; }
.m-logo--caps { font: 500 16px/1 var(--m-sans); letter-spacing: .13em; text-transform: uppercase; }
.m-logo--main { font: 500 22px/1 var(--m-main); }
.m-logo--fin { font: 300 16px/1 var(--m-sans); letter-spacing: .3em; text-transform: uppercase; }
.m-logo--serif { font: 400 18px/1 var(--m-serif); letter-spacing: .1em; text-transform: uppercase; }
.m-logo--ital { font: 600 19px/1 var(--m-serif); font-style: italic; }
.m-logo--signe svg { width: 34px; height: 34px; display: block; }

.m-confiance__fin {
  margin: -1.15rem 0 0;
  text-align: right;
  font-size: 10.5px;
  font-weight: 300;
  color: var(--m-gris-2);
}

/* ================================================================
   SECTIONS
   ================================================================ */
.m-sec { padding-block: 4.4rem; }
.m-sec--creme { background: var(--m-creme); }
.m-sec--clair { background: var(--m-creme-2); }
.m-sec--beige { background: var(--m-beige); }
.m-sec--suite { padding-top: .6rem; }

.m-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.85rem;
}
.m-tete h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.022em;
}

/* --------------------------------------------------- tuiles familles */
.m-grille6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.m-carte, .m-haute {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--m-r);
  text-decoration: none;
  color: var(--m-encre);
  isolation: isolate;
}
.m-carte { aspect-ratio: 11 / 8; }
.m-carte img, .m-haute img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.m-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(250, 247, 242, .92) 0%, rgba(250, 247, 242, .55) 26%, rgba(250, 247, 242, 0) 52%);
}
.m-carte--sombre { color: #fff; }
.m-carte--sombre::before {
  background: linear-gradient(to top, rgba(12, 16, 12, .82) 0%, rgba(12, 16, 12, .42) 30%, rgba(12, 16, 12, 0) 60%);
}
.m-carte__txt {
  position: absolute;
  left: 22px;
  bottom: 20px;
  right: 84px;
  display: block;
}
.m-carte__t {
  display: block;
  font: 400 clamp(1.35rem, 2.05vw, 1.85rem)/1.12 var(--m-serif);
  letter-spacing: -.018em;
}
.m-carte__s {
  display: block;
  margin-top: .38rem;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.35;
  opacity: .88;
}
.m-carte:hover img, .m-haute:hover img { transform: scale(1.035); }
.m-carte:hover .m-rond, .m-haute:hover .m-rond { transform: translateX(3px); }

/* ---------------------------------------------------- tuiles métiers */
.m-grille4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.m-haute {
  aspect-ratio: 17 / 20;
  color: #fff;
}
.m-haute::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 14, 10, .62) 0%, rgba(10, 14, 10, .2) 34%, rgba(10, 14, 10, 0) 58%);
}
.m-haute__txt {
  position: absolute;
  left: 20px;
  top: 18px;
  right: 20px;
  display: block;
}
.m-haute__t {
  display: block;
  font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.18 var(--m-serif);
  letter-spacing: -.015em;
}
.m-haute__s {
  display: block;
  margin-top: .3rem;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.35;
  opacity: .9;
}

/* ================================================================
   CONFIGURATEUR D'ACCUEIL
   ================================================================ */
.m-conf__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.1rem;
}
.m-conf__tete h2 {
  font-size: clamp(1.9rem, 3.35vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.024em;
}
.m-main--conf {
  font-size: 22px;
  text-align: left;
  margin-bottom: .4rem;
  flex: none;
}

.m-conf {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.m-conf__carte, .m-apercu {
  background: #fff;
  border-radius: var(--m-r);
  box-shadow: 0 1px 2px rgba(30, 22, 8, .04), 0 22px 44px -34px rgba(30, 22, 8, .4);
}
.m-conf__carte { padding: 1.5rem 1.7rem 1.9rem; }

/* Rail d'étapes */
.m-pas {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0 0 1.35rem;
  border-bottom: 1px solid var(--m-trait-2);
  flex-wrap: wrap;
}
.m-pas li {
  display: flex;
  align-items: center;
  gap: .62rem;
  font-size: 13px;
  font-weight: 400;
  color: var(--m-gris);
}
.m-pas b {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid var(--m-trait);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--m-gris);
}
.m-pas .est-actif { color: var(--m-encre); font-weight: 500; }
.m-pas .est-actif b { background: var(--m-noir); border-color: var(--m-noir); color: #fff; }

.m-champ + .m-champ { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--m-trait-2); }
.m-champ__lab {
  margin: 0 0 .85rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--m-encre);
}

/* Vignettes de matière */
.m-mat {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.m-mat__un {
  border: 1.5px solid var(--m-trait-2);
  border-radius: var(--m-r-s);
  background: #fbf9f6;
  padding: 7px 7px 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: border-color .15s, background-color .15s;
}
.m-mat__un img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
.m-mat__un span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--m-encre-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-mat__un:hover { border-color: var(--m-gris-2); }
.m-mat__un[aria-pressed="true"] { border-color: var(--m-noir); background: #fff; }
.m-mat__un[aria-pressed="true"] span { color: var(--m-encre); font-weight: 500; }

/* Largeurs */
.m-larg {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.m-larg button {
  border: 1.5px solid var(--m-trait-2);
  border-radius: var(--m-r-s);
  background: #fff;
  padding: .82rem .4rem;
  font: 400 13px/1 var(--m-sans);
  color: var(--m-encre-2);
  cursor: pointer;
  transition: border-color .15s;
}
.m-larg button:hover { border-color: var(--m-gris-2); }
.m-larg button[aria-pressed="true"] { border-color: var(--m-noir); color: var(--m-encre); font-weight: 500; }

.m-conf__suite { margin: 1.8rem 0 0; }

/* Aperçu */
.m-apercu { overflow: hidden; display: flex; flex-direction: column; }
.m-apercu__scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  background: #f4f1ec;
}
/* Un voile sombre au centre : sans lui, le marquage blanc se perd sur
   les matières claires. */
.m-apercu__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 50%, rgba(10, 12, 10, .42) 0%, rgba(10, 12, 10, .12) 55%, rgba(10, 12, 10, 0) 100%);
  pointer-events: none;
}
.m-apercu__scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le marquage est dessiné par-dessus la photo : aucune banque d'images
   ne vend de ruban imprimé à votre logo. Il disparaît dès que vos
   propres prises de vue remplacent celles du dossier images/. */
.m-apercu__marque {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.m-apercu__marque b {
  display: block;
  font: 400 clamp(1rem, 1.8vw, 1.45rem)/1 var(--m-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.m-apercu__marque i {
  display: block;
  margin-top: .3rem;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .9;
}
.m-apercu__pts {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 7px;
}
.m-apercu__pts i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.m-apercu__pts i.est-actif { background: #fff; }

.m-fl {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--m-encre);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 15, 5, .14);
}
.m-fl:hover { background: #f4f1ec; }
.m-ico-f--g { transform: rotate(180deg); }

.m-apercu__scene .m-fl { position: absolute; bottom: 12px; z-index: 2; }
.m-apercu__scene .m-fl--p { left: 14px; }
.m-apercu__scene .m-fl--s { right: 14px; }

.m-apercu__prix { padding: 1.1rem 1.5rem 1.35rem; }
.m-apercu__prix span {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--m-gris);
}
.m-apercu__prix strong {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .15rem;
  font: 500 26px/1 var(--m-sans);
  letter-spacing: -.01em;
}
.m-apercu__prix em {
  font: 400 12.5px/1 var(--m-sans);
  font-style: normal;
  color: var(--m-encre-2);
}
.m-apercu__prix abbr {
  width: 15px;
  height: 15px;
  border: 1px solid var(--m-gris-2);
  border-radius: 50%;
  color: var(--m-gris);
  font-size: 9.5px;
  font-weight: 400;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  cursor: help;
  align-self: center;
}

/* ================================================================
   INSPIRATIONS
   ================================================================ */
.m-inspi {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 14px) / 4);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.m-inspi::-webkit-scrollbar { display: none; }
.m-inspi a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--m-r);
  overflow: hidden;
  scroll-snap-align: start;
}
.m-inspi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.m-inspi a:hover img { transform: scale(1.04); }

.m-inspi__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.15rem;
}
.m-inspi__leg {
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--m-gris);
}
.m-inspi__nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.m-inspi__barre {
  display: block;
  width: clamp(80px, 17vw, 240px);
  height: 1px;
  background: var(--m-trait);
  position: relative;
}
.m-inspi__barre i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  background: var(--m-encre-2);
  border-radius: 2px;
  transition: left .3s ease, width .3s ease;
}
.m-inspi__compte {
  font-size: 12px;
  font-weight: 400;
  color: var(--m-encre-2);
  letter-spacing: .07em;
  font-variant-numeric: tabular-nums;
}
.m-inspi__nav .m-fl {
  width: 36px;
  height: 36px;
  border: 1px solid var(--m-trait);
  box-shadow: none;
}

/* ================================================================
   BANDEAU NUANCIER
   ================================================================ */
.m-nuancier {
  background: var(--m-beige);
  display: grid;
  grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  align-items: center;
  overflow: clip;
}
.m-nuancier__img {
  position: relative;
  margin-left: calc(-1 * max(0px, (100vw - var(--m-largeur)) / 2));
  align-self: stretch;
  min-height: 300px;
}
.m-nuancier__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26%);
  mask-image: linear-gradient(to left, transparent 0, #000 26%);
}
.m-nuancier__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: 3.2rem var(--m-marge) 3.2rem 2rem;
}
.m-nuancier h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin-bottom: .95rem;
}
.m-nuancier__txt p {
  margin: 0 0 1.7rem;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--m-encre-2);
}
.m-nuancier__txt p:last-child { margin-bottom: 0; }
.m-nuancier__pts {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--m-trait);
  display: grid;
  gap: 1.05rem;
}
.m-nuancier__pts li {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--m-encre-2);
  white-space: nowrap;
}
.m-nuancier__pts .m-ico { width: 19px; height: 19px; color: var(--m-gris); }

/* ================================================================
   BANDEAU FINAL
   ================================================================ */
.m-final {
  background: var(--m-vert);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  align-items: center;
  overflow: clip;
}
.m-final__txt {
  padding: 3.6rem 2rem 3.6rem max(var(--m-marge), calc((100vw - var(--m-largeur)) / 2 + var(--m-marge)));
}
.m-final h2 {
  font-size: clamp(1.9rem, 3.35vw, 3rem);
  line-height: 1.09;
  letter-spacing: -.024em;
  margin-bottom: 2rem;
}
.m-final__img {
  position: relative;
  align-self: stretch;
  min-height: 340px;
  margin-right: calc(-1 * max(0px, (100vw - var(--m-largeur)) / 2));
}
.m-final__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%);
  mask-image: linear-gradient(to right, transparent 0, #000 28%);
}
.m-main--final {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: 18%;
  color: rgba(255, 255, 255, .92);
  font-size: 21px;
}

/* ================================================================
   PIED DE PAGE
   ================================================================ */
.m-pied {
  background: #fff;
  border-top: 1px solid var(--m-trait-2);
}
.m-pied__in {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  min-height: 92px;
  flex-wrap: wrap;
}
.m-pied .m-logo b { font-size: 21px; }
.m-pied__liens {
  display: flex;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-pied__liens a {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--m-encre-2);
  text-decoration: none;
}
.m-pied__liens a:hover { color: var(--m-gris); }
.m-pied__droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.7rem;
}
.m-pied__soc {
  display: flex;
  gap: 1.05rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-pied__soc a { color: var(--m-encre-2); display: block; }
.m-pied__soc a:hover { color: var(--m-gris); }
.m-pied__soc .m-ico { width: 18px; height: 18px; stroke-width: 1.4; }
.m-pied__devis {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-left: 1.7rem;
  border-left: 1px solid var(--m-trait);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--m-encre-2);
  text-decoration: none;
  white-space: nowrap;
}
.m-pied__devis:hover { color: var(--m-encre); }
.m-pied__devis .m-ico-f { width: 15px; height: 15px; }

/* ================================================================
   EN-TÊTE, VARIANTE À OUTILS
   ---------------------------------------------------------------
   L'image de référence de la fiche produit montre un en-tête plus
   fourni que celui de l'accueil : champ de recherche et bouton devis.
   La page catégorie porte le même : d'où la classe commune
   « m-entete--outils », posée par header.php hors de l'accueil.
   ================================================================ */
.m-invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m-annonce--produit .m-annonce__in,
.m-annonce--categorie .m-annonce__in { justify-content: center; }
.m-annonce--produit ul,
.m-annonce--categorie ul { gap: clamp(1.4rem, 4vw, 3.6rem); }

.m-entete--outils .m-nav { margin-inline: auto; }
.m-entete--outils .m-nav ul { gap: clamp(.7rem, 1.35vw, 1.4rem); }
.m-entete--outils .m-nav a, .m-entete--outils .m-nav__b { white-space: nowrap; }
.m-entete--outils .m-outils { gap: .85rem; }
.m-entete--outils .m-logo span { display: none; }

/* « .m-outils a » impose sa couleur d'icône : le bouton devis doit
   reprendre la main, sinon son libellé reste noir sur noir. */
.m-entete--outils .m-outils a.m-btn--noir { color: #fff; }

.m-rech {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: clamp(128px, 12vw, 195px);
  padding: .48rem .8rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  background: var(--m-creme-2);
  color: var(--m-gris);
}
.m-rech .m-ico-f { flex: none; width: 15px; height: 15px; }
.m-rech input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: 400 13px/1.2 var(--m-sans);
  color: var(--m-encre);
}
.m-rech input::placeholder { color: var(--m-gris-2); }
.m-rech input:focus { outline: none; }
.m-rech:focus-within { border-color: var(--m-gris-2); }

.m-btn--petit { padding: .62rem 1.15rem; font-size: 12.5px; letter-spacing: .01em; }

/* ================================================================
   FIL D'ARIANE
   ================================================================ */
.m-fil { background: #fff; border-bottom: 1px solid var(--m-trait-2); }
.m-fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: .72rem 0;
  font: 300 12px/1.4 var(--m-sans);
  color: var(--m-gris);
}
.m-fil li + li::before { content: "\203A"; margin-right: .55rem; color: var(--m-gris-2); }
.m-fil a { color: var(--m-gris); text-decoration: none; }
.m-fil a:hover { color: var(--m-encre); }
.m-fil [aria-current] { color: var(--m-encre); font-weight: 500; }

/* ================================================================
   GRILLE DE LA FICHE
   ================================================================ */
.m-page--produit { background: #fff; }
.m-fiche {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 40px;
  align-items: start;
  padding-block: 26px 72px;
}

/* Galerie qui reste à l'écran (Fiche produit › Disposition) : seule dans
   sa colonne, collée sous l'en-tête ; la suite passe sous la fiche. */
.m-fiche--suivie { padding-bottom: 48px; }
.m-fiche__suite { padding-block: 8px 72px; }
.m-fiche__suite > :first-child { margin-top: 0; }
@media (min-width: 981px) {
  .m-fiche--suivie .m-fiche__g {
    position: sticky;
    top: calc(var(--m-colle, 0px) + 16px);
  }
  .admin-bar .m-fiche--suivie .m-fiche__g { top: calc(var(--m-colle, 0px) + 48px); }
  /* La galerie ne dépasse jamais la hauteur de l'écran. */
  .m-fiche--suivie .m-gal__grand { max-height: calc(100vh - var(--m-colle, 0px) - 40px); }
  /* Les vignettes prennent la hauteur de la grande photo et défilent. */
  .m-fiche--suivie .m-gal:not(.m-gal--seule) .m-gal__col {
    height: 0;
    min-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
  }
}

/* ------------------------------------- galerie « aperçu seul » */
/* Le cadre ne montre que l'aperçu du configurateur ; les photos passent
   dessous, en petit, et s'ouvrent dans une visionneuse. */
.m-gal.m-gal--apercu { grid-template-columns: minmax(0, 1fr); }
.m-gal__grand--apercu { aspect-ratio: 4 / 3; }
.m-gal__grand--apercu::before { display: none; }
.m-gal__secours { position: absolute; inset: 0; display: grid; place-items: center; }
.m-gal__secours svg { width: 100%; height: auto; }
.m-gal__ex { display: grid; gap: 8px; order: 2; }
.m-gal__ex-t {
  margin: 0;
  font: 400 10.5px/1.4 var(--m-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m-gris);
}
.m-gal__ex-l {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64px;
  gap: 8px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.m-gal__ex-v {
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--m-trait);
  border-radius: 6px;
  overflow: hidden;
  background: var(--m-creme);
}
.m-gal__ex-v img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.m-gal__ex-v:hover img { transform: scale(1.06); }
.m-gal__ex-v:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
@media (min-width: 981px) {
  .m-fiche--suivie .m-gal--apercu .m-gal__grand { max-height: calc(100vh - var(--m-colle, 0px) - 140px); }
}

.m-visio {
  width: min(1100px, 100vw - 32px);
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.m-visio::backdrop { background: rgba(20, 16, 10, .78); }
.m-visio__img { display: block; width: 100%; max-height: calc(100vh - 32px); object-fit: contain; }
.m-visio .m-fl { position: absolute; bottom: 16px; z-index: 2; }
.m-visio__p { left: 16px; }
.m-visio__s { left: 68px; }
.m-visio__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--m-encre);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.m-visio__x:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .m-gal__ex-v img { transition: none; }
}

/* --------------------------------------------------------- galerie */
.m-gal {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
}
.m-gal__col { display: grid; align-content: start; gap: 10px; }
.m-gal__v {
  position: relative;
  aspect-ratio: 1 / 1.08;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--m-creme);
  cursor: pointer;
}
.m-gal__v img { width: 100%; height: 100%; object-fit: cover; }
.m-gal__v[aria-pressed="true"] { border-color: var(--m-noir); }
.m-gal__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.m-gal__play .m-ico-f {
  width: 26px; height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  color: var(--m-encre);
  fill: currentColor;
  stroke: none;
  box-shadow: 0 2px 8px rgba(20, 15, 5, .2);
}
.m-gal__grand {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / .9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--m-creme);
}
.m-gal__grand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.m-gal__grand.est-zoome img { transform: scale(1.55); }
.m-gal__grand::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  z-index: 1;
  background: linear-gradient(to bottom left, rgba(255, 253, 249, .92) 0, rgba(255, 253, 249, .45) 42%, rgba(255, 253, 249, 0) 72%);
}
.m-gal__mot {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
  font: 300 11.5px/2.05 var(--m-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: right;
  color: var(--m-encre-2);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .8);
}
.m-gal__mot::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: 14px 0 0 auto;
  background: currentColor;
  opacity: .5;
}
.m-gal__grand .m-fl { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.m-gal__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--m-encre);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 15, 5, .14);
}
.m-gal__zoom:hover { background: #f4f1ec; }

/* ----------------------------------------------------- rassurance */
.m-rassur {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 20px;
  list-style: none;
  margin: 2.3rem 0 0;
  padding: 0;
}
.m-rassur li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .7rem;
  align-items: start;
}
.m-rassur .m-ico { grid-row: 1 / 3; width: 22px; height: 22px; margin-top: 2px; color: var(--m-encre); }
.m-rassur b { font: 500 12.5px/1.35 var(--m-sans); color: var(--m-encre); }
.m-rassur span { font: 300 11.5px/1.4 var(--m-sans); color: var(--m-gris); }

.m-confiance--fiche {
  margin-top: 2.4rem;
  background: var(--m-creme);
  border-radius: 10px;
}
.m-confiance--fiche .m-confiance__in { padding: 1.15rem 1.4rem 1.3rem; }
.m-confiance--fiche .m-logos { gap: clamp(.9rem, 2.4vw, 2.1rem); }
.m-confiance--fiche .m-logo--caps { font-size: 13px; }
.m-confiance--fiche .m-logo--main { font-size: 18px; }
.m-confiance--fiche .m-logo--fin { font-size: 13px; letter-spacing: .22em; }
.m-confiance--fiche .m-logo--serif { font-size: 15px; }
.m-confiance--fiche .m-logo--ital { font-size: 16px; }
.m-confiance--fiche .m-logo--signe svg { width: 26px; height: 26px; }
.m-confiance--fiche .m-confiance__fin { margin-top: .4rem; }

/* -------------------------------------------------------- onglets */
.m-onglets {
  display: flex;
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
  margin-top: 2.6rem;
  border-bottom: 1px solid var(--m-trait);
  overflow-x: auto;
  scrollbar-width: none;
}
.m-onglets::-webkit-scrollbar { display: none; }
.m-onglets button {
  flex: none;
  padding: .7rem 0 .85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: 400 13.5px/1 var(--m-sans);
  color: var(--m-gris);
  cursor: pointer;
  white-space: nowrap;
}
.m-onglets button:hover { color: var(--m-encre); }
.m-onglets [aria-selected="true"] {
  color: var(--m-encre);
  font-weight: 500;
  border-bottom-color: var(--m-noir);
}

.m-panneau { padding-top: 2.4rem; }
.m-h2 {
  margin: 0 0 1.1rem;
  font-family: var(--m-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.m-texte {
  margin: 0 0 1rem;
  max-width: 62ch;
  font: 300 14.5px/1.72 var(--m-sans);
  color: var(--m-encre-2);
}
.m-texte--fin { font-size: 13.5px; color: var(--m-gris); }
.m-texte--fin strong { color: var(--m-encre); font-weight: 500; }
.m-note {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  font: 300 12px/1.65 var(--m-sans);
  color: var(--m-gris-2);
}
.m-liste {
  margin: 0;
  padding-left: 1.1rem;
  max-width: 62ch;
  font: 300 13.5px/1.7 var(--m-sans);
  color: var(--m-encre-2);
}
.m-liste li { margin-bottom: .6rem; }
.m-liste b { font-weight: 500; color: var(--m-encre); }

.m-tab {
  width: 100%;
  border-collapse: collapse;
  font: 300 13.5px/1.55 var(--m-sans);
}
.m-tab th, .m-tab td {
  padding: .72rem .4rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--m-trait-2);
}
.m-tab th { width: 34%; font-weight: 500; color: var(--m-encre); }
.m-tab td { color: var(--m-encre-2); }

.m-usages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.m-usages li {
  display: grid;
  justify-items: center;
  gap: .7rem;
  text-align: center;
  font: 300 12px/1.45 var(--m-sans);
  color: var(--m-encre-2);
}
.m-usages .m-ico { width: 26px; height: 26px; color: var(--m-encre); }

.m-banniere {
  position: relative;
  margin: 2.4rem 0 0;
  min-height: 250px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--m-creme);
}
.m-banniere img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.m-banniere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(24, 18, 12, .62) 0, rgba(24, 18, 12, .22) 52%, rgba(24, 18, 12, 0) 78%);
}
.m-banniere figcaption {
  position: relative;
  z-index: 2;
  padding: 3.2rem 2.2rem;
  color: #fff;
}
.m-banniere__t {
  margin: 0;
  font-family: var(--m-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -.018em;
}
.m-banniere__s {
  margin: 1.5rem 0 0;
  font: 300 11.5px/1 var(--m-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
}
.m-banniere__s::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, .55);
}

/* ---------------------------------------------- produits similaires */
.m-sim__sec { margin-top: 3.4rem; }
.m-sim__sec .m-tete { margin-bottom: 1.3rem; }
.m-sim__sec .m-tete h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.m-sims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.m-sim {
  display: block;
  padding: 10px 10px 14px;
  border: 1px solid var(--m-trait-2);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--m-encre);
}
.m-sim:hover { border-color: var(--m-gris-2); }
.m-sim__img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  overflow: hidden;
  background: var(--m-creme);
}
.m-sim__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.m-sim:hover .m-sim__img img { transform: scale(1.04); }
.m-sim__img .m-rond { right: 10px; bottom: 10px; width: 34px; height: 34px; }
.m-sim__img .m-ico-f { width: 15px; height: 15px; }
.m-sim__nom {
  display: block;
  margin-top: .85rem;
  font: 400 13.5px/1.35 var(--m-sans);
}
.m-sim__meta {
  display: block;
  margin-top: .3rem;
  font: 300 11px/1.4 var(--m-sans);
  color: var(--m-gris-2);
}
.m-sim__prix {
  display: block;
  margin-top: .6rem;
  white-space: nowrap;
  font: 300 12.5px/1 var(--m-sans);
  color: var(--m-gris);
}
.m-sim__prix b { font: 500 17px/1 var(--m-sans); color: var(--m-encre); }
.m-sim__ttc { display: block; margin-top: .3rem; font-size: 11.5px; }
.m-sim__devis {
  display: block;
  margin-top: .6rem;
  font: 500 13px/1 var(--m-sans);
  color: var(--m-encre);
}

/* ================================================================
   COLONNE DROITE — IDENTITÉ DU PRODUIT
   ================================================================ */
.m-tete__prod { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.m-coeur {
  flex: none;
  width: 34px; height: 34px;
  border: 0;
  background: none;
  color: var(--m-encre-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.m-coeur:hover { color: var(--m-encre); }
.m-coeur .m-ico { width: 24px; height: 24px; }

.m-h1 {
  margin: .1rem 0 .55rem;
  font-family: var(--m-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.1vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -.026em;
}
.m-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin: 0 0 1.1rem;
  font: 300 11.5px/1 var(--m-sans);
  color: var(--m-gris);
}
.m-refs span {
  padding: .32rem .6rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
}
.m-chapo {
  margin: 0 0 1.2rem;
  max-width: 54ch;
  font: 300 14.5px/1.68 var(--m-sans);
  color: var(--m-encre-2);
}
.m-points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .58rem;
}
.m-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  font: 300 13.5px/1.45 var(--m-sans);
  color: var(--m-encre-2);
}
.m-points .m-ico-f { width: 15px; height: 15px; margin-top: 3px; color: var(--m-encre); }

/* ================================================================
   CONFIGURATEUR
   ================================================================ */
.m-conf__bloc {
  margin-top: 1.5rem;
  border: 1px solid var(--m-trait);
  border-radius: 12px;
  background: #fff;
}
.m-conf__t { padding: 1.5rem 1.6rem 1.1rem; }
.m-conf__t h2 {
  margin: 0;
  font-family: var(--m-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.m-conf__t p {
  margin: .4rem 0 0;
  font: 300 12.5px/1.5 var(--m-sans);
  color: var(--m-gris);
}

.m-et { padding: 1.25rem 1.6rem 1.45rem; border-top: 1px solid var(--m-trait-2); }
.m-et__t {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .95rem;
  font: 500 15px/1 var(--m-sans);
  color: var(--m-encre);
}
.m-et__t b {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--m-noir);
  color: #fff;
  font: 500 12px/24px var(--m-sans);
  text-align: center;
}
.m-et__aide {
  margin: -.3rem 0 1rem;
  font: 300 11.5px/1.55 var(--m-sans);
  color: var(--m-gris-2);
}

/* ------------------------------------------------- tuiles matière */
.m-tuiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.m-tuile {
  display: grid;
  align-content: start;
  padding: 6px 6px 9px;
  border: 1px solid var(--m-trait);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.m-tuile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: .45rem;
}
.m-tuile__n { font: 400 12px/1.3 var(--m-sans); color: var(--m-encre-2); }
.m-tuile__d {
  margin-top: .2rem;
  font: 300 10px/1.35 var(--m-sans);
  color: var(--m-gris-2);
}
.m-tuile:hover:not(:disabled) { border-color: var(--m-gris-2); }
.m-tuile[aria-pressed="true"] { border-color: var(--m-noir); box-shadow: inset 0 0 0 1px var(--m-noir); }
.m-tuile[aria-pressed="true"] .m-tuile__n { color: var(--m-encre); font-weight: 500; }
.m-tuile:disabled { opacity: .42; cursor: not-allowed; }
.m-tuile--vide {
  place-content: center;
  justify-items: center;
  gap: .35rem;
  border-style: dashed;
  background: var(--m-creme-2);
}
.m-tuile--vide .m-ico-f { width: 18px; height: 18px; color: var(--m-gris); }

/* ------------------------------------------------------- pilules */
.m-pils { display: flex; flex-wrap: wrap; gap: 7px; }
.m-pils button {
  flex: 1 1 auto;
  min-width: 68px;
  padding: .62rem .5rem;
  border: 1px solid var(--m-trait);
  border-radius: 7px;
  background: #fff;
  font: 400 12.5px/1 var(--m-sans);
  color: var(--m-encre-2);
  cursor: pointer;
}
.m-pils button:hover:not(:disabled) { border-color: var(--m-gris-2); }
.m-pils button[aria-pressed="true"] {
  border-color: var(--m-noir);
  box-shadow: inset 0 0 0 1px var(--m-noir);
  color: var(--m-encre);
  font-weight: 500;
}
.m-pils button:disabled { opacity: .42; cursor: not-allowed; }

/* ------------------------------------------------------ pastilles */
.m-past { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.m-past__un {
  width: 30px; height: 30px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.m-past__un i {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.m-past__un:hover { border-color: var(--m-gris-2); }
.m-past__un[aria-pressed="true"] { border-color: var(--m-noir); }
.m-past__plus {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 1px solid var(--m-trait);
  border-radius: 7px;
  background: #fff;
  font: 400 12px/1 var(--m-sans);
  color: var(--m-encre-2);
  cursor: pointer;
}
.m-past__plus .m-ico-f { width: 14px; height: 14px; }
.m-past__plus[aria-pressed="true"] { border-color: var(--m-noir); color: var(--m-encre); font-weight: 500; }

/* ---------------------------------------- impression et sous-choix */
.m-tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.m-tech__un {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: .85rem .4rem .75rem;
  border: 1px solid var(--m-trait);
  border-radius: 8px;
  background: #fff;
  font: 400 12px/1.3 var(--m-sans);
  color: var(--m-encre-2);
  text-align: center;
  cursor: pointer;
}
.m-tech__un .m-ico-f { width: 20px; height: 20px; color: var(--m-encre); }
.m-tech__un em {
  font: 300 9.5px/1.3 var(--m-sans);
  font-style: normal;
  color: var(--m-gris-2);
}
.m-tech__un:hover:not(:disabled) { border-color: var(--m-gris-2); }
.m-tech__un[aria-pressed="true"] { border-color: var(--m-noir); box-shadow: inset 0 0 0 1px var(--m-noir); color: var(--m-encre); font-weight: 500; }
.m-tech__un:disabled { opacity: .5; cursor: not-allowed; }

.m-sous { display: grid; gap: .9rem; margin-top: 1.1rem; }
.m-sous__lab {
  margin: 0 0 .4rem;
  font: 300 11px/1 var(--m-sans);
  letter-spacing: .04em;
  color: var(--m-gris);
}
.m-sous .m-pils button { padding: .48rem .5rem; font-size: 11.5px; min-width: 56px; }

/* ------------------------------------------------ couleur d'encre */
.m-encres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.m-encre {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: .8rem .35rem .7rem;
  border: 1px solid var(--m-trait);
  border-radius: 8px;
  background: #fff;
  font: 400 11.5px/1.3 var(--m-sans);
  color: var(--m-encre-2);
  text-align: center;
  cursor: pointer;
}
.m-encre i {
  width: 28px; height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.m-encre em { font: 300 9.5px/1.3 var(--m-sans); font-style: normal; color: var(--m-gris-2); }
.m-encre:hover:not(:disabled) { border-color: var(--m-gris-2); }
.m-encre[aria-pressed="true"] { border-color: var(--m-noir); box-shadow: inset 0 0 0 1px var(--m-noir); color: var(--m-encre); font-weight: 500; }
.m-encre:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------ fichier et texte */
.m-fich { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 14px; }
.m-depot { position: relative; }
.m-depot input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.m-depot label {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .5rem;
  height: 100%;
  min-height: 150px;
  padding: 1rem .8rem;
  border: 1px dashed var(--m-trait);
  border-radius: 8px;
  background: var(--m-creme-2);
  text-align: center;
  cursor: pointer;
}
.m-depot .m-ico { width: 24px; height: 24px; color: var(--m-encre-2); }
.m-depot b { font: 400 12.5px/1.35 var(--m-sans); color: var(--m-encre); word-break: break-word; }
.m-depot span { font: 300 10.5px/1.5 var(--m-sans); color: var(--m-gris-2); }
.m-depot input:focus-visible + label { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.m-depot.est-plein label { border-style: solid; border-color: var(--m-noir); background: #fff; }
.m-depot.est-erreur label { border-color: #9c2a2a; background: #fdf4f3; }
.m-depot.est-erreur span { color: #9c2a2a; }

.m-fich__d { display: grid; align-content: start; gap: .85rem; }
.m-lab { margin: 0 0 .35rem; font: 400 11.5px/1 var(--m-sans); color: var(--m-encre-2); }
.m-lab i { font-style: normal; font-weight: 300; color: var(--m-gris-2); }
.m-input, .m-select {
  width: 100%;
  padding: .66rem .8rem;
  border: 1px solid var(--m-trait);
  border-radius: 7px;
  background: #fff;
  font: 300 13px/1.3 var(--m-sans);
  color: var(--m-encre);
}
.m-input::placeholder { color: var(--m-gris-2); }
.m-input:focus, .m-select:focus { outline: 2px solid var(--m-focus); outline-offset: 1px; }
.m-select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--m-encre-2) 50%), linear-gradient(135deg, var(--m-encre-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.m-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ------------------------------------------------------- quantité
   Champ − / + (unité dans le champ) et minimum sur une ligne, paliers de
   la grille dessous (le nombre seul : l'unité est dans le champ). */
.m-qte { display: grid; gap: 12px; margin-top: 12px; }
.m-qte__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.m-qte__champ {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--m-trait);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.m-qte__champ:focus-within { border-color: var(--m-noir); box-shadow: inset 0 0 0 1px var(--m-noir); }
.m-qte__champ .m-input {
  width: 8ch;
  min-width: 0;
  padding: .7rem .15rem .7rem .6rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 600 16px/1.2 var(--m-sans);
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.m-qte__champ .m-input:focus { outline: 0; }
.m-qte__champ .m-input::-webkit-inner-spin-button,
.m-qte__champ .m-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.m-qte__champ i {
  display: flex;
  align-items: center;
  padding: 0 .75rem 0 .3rem;
  font: 400 13px/1 var(--m-sans);
  font-style: normal;
  color: var(--m-gris);
}
.m-qte__pas {
  width: 44px;
  border: 0;
  background: var(--m-creme-2);
  font: 400 19px/1 var(--m-sans);
  color: var(--m-encre);
  cursor: pointer;
}
.m-qte__pas:first-child { border-right: 1px solid var(--m-trait); }
.m-qte__pas:last-child { border-left: 1px solid var(--m-trait); }
.m-qte__pas:hover { color: var(--m-noir); background: var(--m-trait); }
.m-qte__moq { font: 300 11.5px/1.45 var(--m-sans); color: var(--m-gris-2); }
.m-qte .m-qte__paliers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
@media (max-width: 480px) { .m-qte .m-qte__paliers { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m-qte__paliers button { min-width: 0; padding: .7rem .2rem; white-space: nowrap; font-weight: 600; font-size: 13.5px; }

/* --------------------------------------------------------- bilan */
.m-et--bilan { background: var(--m-creme-2); border-radius: 0 0 12px 12px; }
.m-bilan { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 14px; align-items: start; }
.m-bilan__vue {
  align-self: stretch;
  display: grid;
  align-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, #f2ece2 0%, #e9e1d4 100%);
}
.m-ruban { display: block; width: 100%; height: auto; }
.m-resume { margin: 0; font: 300 12px/1.5 var(--m-sans); }
.m-resume > div { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: .6rem; padding: .22rem 0; }
.m-resume dt { color: var(--m-gris); }
.m-resume dd { margin: 0; color: var(--m-encre); }
/* Avec les photos du produit : photos côte à côte, détail dessous sur
   deux colonnes. */
.m-bilan--photos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.m-bilan--photos .m-bilan__vue { display: block; background: none; border-radius: 0; overflow: visible; }
.m-bilan--photos .m-resume { columns: 2; column-gap: 28px; }
.m-bilan--photos .m-resume > div { break-inside: avoid; }
@media (max-width: 520px) { .m-bilan--photos .m-resume { columns: 1; } }

.m-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  background: var(--m-beige);
}
.m-prix > div:first-child { display: grid; }
.m-prix span { font: 300 11.5px/1.4 var(--m-sans); color: var(--m-encre-2); }
.m-prix strong {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font: 500 27px/1.1 var(--m-sans);
  letter-spacing: -.02em;
  color: var(--m-encre);
}
.m-prix strong em { font: 300 12px/1 var(--m-sans); font-style: normal; color: var(--m-encre-2); }
.m-prix__note { color: var(--m-gris) !important; font-size: 10.5px !important; }
.m-prix__d { display: grid; justify-items: end; text-align: right; }
.m-prix__d b { font: 500 19px/1.2 var(--m-sans); color: var(--m-encre); }
.m-prix__frais { color: var(--m-gris-2) !important; font-size: 10.5px !important; }
.m-prix--devis { background: var(--m-noir); }
.m-prix--devis strong { color: #fff; font-size: 23px; }
.m-prix--devis span { color: rgba(255, 255, 255, .72); }
.m-prix--devis b { color: #fff; font: 500 15px/1.3 var(--m-sans); }

.m-delais {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  list-style: none;
  margin: .95rem 0 0;
  padding: 0;
  font: 300 11.5px/1.4 var(--m-sans);
  color: var(--m-encre-2);
}
.m-delais li { display: flex; align-items: center; gap: .5rem; }
.m-delais .m-ico-f { width: 15px; height: 15px; color: var(--m-gris); }

.m-act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 1.1rem; }
.m-act .m-btn { width: 100%; justify-content: center; }
.m-btn--cadre {
  background: #fff;
  color: var(--m-encre);
  box-shadow: inset 0 0 0 1px var(--m-trait);
}
.m-btn--cadre:hover { background: var(--m-creme); }
.m-btn--cadre .m-ico-f { width: 16px; height: 16px; }
.m-act__p:disabled { opacity: .6; cursor: default; }

.m-act__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.2rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--m-trait);
  font: 300 11.5px/1.4 var(--m-sans);
  color: var(--m-encre-2);
}
.m-act__pied li { display: flex; align-items: center; gap: .5rem; }
.m-act__pied .m-ico-f { width: 15px; height: 15px; color: var(--m-gris); }
.m-act__pied a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--m-trait); }
.m-act__pied a:hover { color: var(--m-encre); border-color: var(--m-gris-2); }

.m-act__loi {
  margin: .85rem 0 0;
  font: 300 10.5px/1.5 var(--m-sans);
  color: var(--m-gris-2);
}

/* ---------------------------------------------------- adaptations */
@media (max-width: 1160px) {
  .m-fiche { gap: 28px; }
  .m-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-encres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-usages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-sims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .m-fiche { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .m-rassur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-entete--outils .m-rech { display: none; }
}
@media (max-width: 860px) {
  .m-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-fich { grid-template-columns: minmax(0, 1fr); }
  .m-qte { grid-template-columns: minmax(0, 1fr); }
  .m-bilan { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .m-gal { grid-template-columns: minmax(0, 1fr); }
  .m-gal__col { grid-auto-flow: column; grid-auto-columns: 70px; overflow-x: auto; scrollbar-width: none; order: 2; }
  .m-gal__grand { order: 1; }
  .m-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-encres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-usages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-sims { grid-template-columns: minmax(0, 1fr); }
  .m-duo { grid-template-columns: minmax(0, 1fr); }
  .m-act { grid-template-columns: minmax(0, 1fr); }
  .m-et, .m-conf__t { padding-inline: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m-gal__grand img, .m-sim__img img { transition: none; }
}

/* ================================================================
   ADAPTATIONS
   ================================================================ */
@media (max-width: 1160px) {
  :root { --m-marge: 28px; }
  .m-nav ul { gap: 1.5rem; }
  .m-nav a { font-size: 13px; }
  .m-mat, .m-larg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-nuancier__corps { grid-template-columns: minmax(0, 1fr); }
  .m-nuancier__pts {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--m-trait);
    padding-top: 1.5rem;
    margin-top: .4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .m-heros__in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .m-heros__txt { padding: 3.4rem var(--m-marge) 2.6rem; }
  .m-heros__img { margin-right: 0; order: -1; }
  .m-heros__img img {
    position: static;
    aspect-ratio: 16 / 9;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .m-main--heros { top: auto; bottom: 8%; font-size: 21px; }

  .m-conf { grid-template-columns: minmax(0, 1fr); }
  .m-apercu { order: -1; }
  .m-apercu__scene { flex: none; aspect-ratio: 4 / 3; min-height: 0; }

  .m-nuancier { grid-template-columns: minmax(0, 1fr); }
  .m-nuancier__img { margin-left: 0; min-height: 0; }
  .m-nuancier__img img {
    position: static;
    aspect-ratio: 21 / 9;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .m-nuancier__corps { padding: 2.6rem var(--m-marge) 3rem; }

  .m-final { grid-template-columns: minmax(0, 1fr); }
  .m-final__txt { padding: 3rem var(--m-marge) 2.4rem; order: -1; }
  .m-final__img { margin-right: 0; min-height: 0; }
  .m-final__img img {
    position: static;
    aspect-ratio: 21 / 9;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .m-main--final { bottom: 10%; }
}

@media (max-width: 860px) {
  .m-entete { position: static; }
  .m-entete__in { flex-wrap: wrap; min-height: 0; padding-block: .9rem; gap: 1rem 1.6rem; }
  .m-outils { margin-left: auto; }

  .m-annonce ul { gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
  .m-annonce ul::-webkit-scrollbar { display: none; }
  .m-annonce li { white-space: nowrap; }
  .m-annonce__in { justify-content: flex-start; padding-right: 3.4rem; }

  .m-grille6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-grille4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-inspi { grid-auto-columns: calc((100% - 14px) / 2); }

  .m-conf__tete { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .m-main--conf { align-self: flex-end; }

  .m-pied__in { padding-block: 1.6rem; }
  .m-pied__droite { margin-left: 0; width: 100%; }
}

@media (max-width: 620px) {
  .m-sec { padding-block: 3rem; }
  .m-tete { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .m-heros__act { gap: 1.4rem; margin-bottom: 2.8rem; }
  .m-atouts { gap: 1.2rem 1.8rem; }
  .m-grille6, .m-grille4 { grid-template-columns: minmax(0, 1fr); }
  .m-carte { aspect-ratio: 16 / 10; }
  .m-haute { aspect-ratio: 16 / 11; }
  .m-inspi { grid-auto-columns: 78%; }
  .m-nuancier__pts { grid-template-columns: minmax(0, 1fr); }
  .m-conf__carte { padding: 1.2rem 1.1rem 1.5rem; }
  .m-mat, .m-larg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-pas { gap: 1rem; }
  .m-logos { gap: 1.2rem 1.8rem; }
  .m-confiance__fin { margin-top: .8rem; text-align: left; }
  .m-pied__liens { flex-wrap: wrap; gap: .8rem 1.3rem; }
  .m-pied__droite { flex-wrap: wrap; gap: 1rem; }
  .m-pied__devis { padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .m-page *, .m-page *::before, .m-page *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ================================================================
   PAGE CATÉGORIE
   ----------------------------------------------------------------
   Aucune des deux images de référence ne montrait cette page. Elle
   reprend donc le vocabulaire déjà posé : crème tiède, serif
   Newsreader pour les titres et les prix, photo à angles arrondis,
   bouton noir. Rien de nouveau n'est inventé ici.
   ================================================================ */
.m-page code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .9em;
  color: var(--m-encre-2);
}

/* -------------------------------------------------- tête de famille */
.m-cat { background: var(--m-creme); }
.m-cat__in {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-block: 44px 34px;
}
.m-cat__txt h1 {
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.03;
  margin: 0;
}
.m-cat__chapo {
  margin: 1.05rem 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--m-encre-2);
}
.m-cat__sous {
  margin: .85rem 0 0;
  max-width: 54ch;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--m-gris);
}

/* Trois chiffres lus dans le catalogue, pas trois promesses. */
.m-cat__cle {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.4rem, 3vw, 2.8rem);
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--m-trait);
}
.m-cat__cle span {
  font-size: 12px;
  color: var(--m-gris);
  letter-spacing: .015em;
}
.m-cat__cle b {
  display: block;
  font: 400 27px/1.1 var(--m-serif);
  color: var(--m-encre);
}

.m-cat__img {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: var(--m-beige);
}
.m-cat__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-main--cat {
  position: absolute;
  left: 26px;
  bottom: 22px;
  z-index: 1;
  font-size: 27px;
  color: #fff;
  text-shadow: 0 1px 14px rgba(20, 15, 5, .5);
}
.m-main--cat::after { background: #fff; }

/* ------------------------------------------------ puces de famille */
.m-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 30px;
}
.m-puce {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  background: #fff;
  color: var(--m-encre);
  font: 400 13px/1 var(--m-sans);
  cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}
.m-puce:hover { border-color: var(--m-gris-2); }
.m-puce i { font-style: normal; font-size: 11px; color: var(--m-gris-2); }
.m-puce.est-on { background: var(--m-noir); border-color: var(--m-noir); color: #fff; }
.m-puce.est-on i { color: rgba(255, 255, 255, .58); }

/* ------------------------------------------------------ mise en page */
.m-cat__grille {
  display: grid;
  grid-template-columns: minmax(0, 258px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-block: 32px 66px;
}

/* ------------------------------------------------------------- rail */
.m-rail { position: sticky; top: 104px; }
.m-rail__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--m-trait);
}
.m-rail__titre { margin: 0; font: 400 19px/1 var(--m-serif); }
.m-rail__vider {
  display: inline;
  border: 0;
  background: none;
  padding: 0;
  font: 400 12px/1 var(--m-sans);
  color: var(--m-gris);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.m-rail__vider:hover { color: var(--m-encre); }

.m-grp {
  border: 0;
  border-bottom: 1px solid var(--m-trait-2);
  margin: 0;
  padding: 1.15rem 0 1.1rem;
  min-width: 0;
}
.m-grp legend {
  padding: 0;
  margin-bottom: .55rem;
  font: 500 13.5px/1 var(--m-sans);
  color: var(--m-encre);
}
.m-grp__aide {
  margin: -.2rem 0 .7rem;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--m-gris-2);
}

.m-case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .62rem;
  padding: .3rem 0;
  font-size: 13.5px;
  cursor: pointer;
}
.m-case input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.m-case__boite {
  width: 17px;
  height: 17px;
  border: 1px solid #cfc7b8;
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background-color .14s, border-color .14s;
}
.m-case__boite .m-ico-f {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
  opacity: 0;
  color: #fff;
}
.m-case input:checked + .m-case__boite {
  background: var(--m-noir);
  border-color: var(--m-noir);
}
.m-case input:checked + .m-case__boite .m-ico-f { opacity: 1; }
.m-case input:focus-visible + .m-case__boite {
  outline: 2px solid var(--m-focus);
  outline-offset: 2px;
}
.m-case__lab { line-height: 1.35; }
.m-case__n {
  font-style: normal;
  font-size: 11.5px;
  color: var(--m-gris-2);
  font-variant-numeric: tabular-nums;
}
/* Une case qui ne ramènerait aucune référence : grisée, pas cachée.
   Faire disparaître l'option donnerait l'impression qu'elle n'existe
   pas au catalogue. */
.m-case.est-morte { color: var(--m-gris-2); cursor: not-allowed; }
.m-case.est-morte .m-case__boite { border-style: dashed; background: none; }

.m-grp__plus {
  margin-top: .5rem;
  border: 0;
  background: none;
  padding: 0;
  font: 400 12px/1 var(--m-sans);
  color: var(--m-encre);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.m-rail__note {
  margin: 1.05rem 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--m-gris-2);
}

/* -------------------------------------------------- barre d'outils */
.m-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--m-trait);
}
.m-barre__n { margin: 0; font-size: 13px; color: var(--m-gris); }
.m-barre__n b {
  font: 400 21px/1 var(--m-serif);
  color: var(--m-encre);
  margin-right: .3rem;
}
.m-barre__d { display: flex; align-items: center; gap: .8rem; }

.m-barre__filtrer {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  background: #fff;
  font: 400 13px/1 var(--m-sans);
  color: var(--m-encre);
  cursor: pointer;
}
.m-barre__filtrer i {
  font-style: normal;
  min-width: 17px;
  padding: .1rem .3rem;
  border-radius: 999px;
  background: var(--m-noir);
  color: #fff;
  font-size: 10.5px;
  text-align: center;
}

.m-barre__tri { font-size: 12.5px; color: var(--m-gris); }
.m-barre__tri select {
  margin-left: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  background: #fff;
  font: 400 13px/1.1 var(--m-sans);
  color: var(--m-encre);
  cursor: pointer;
  max-width: 100%;
}

.m-vues {
  display: flex;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.m-vues button {
  width: 36px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--m-gris);
  cursor: pointer;
}
.m-vues button[aria-pressed="true"] { background: var(--m-noir); color: #fff; }

/* ---------------------------------------------------- filtres actifs */
.m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
}
.m-chips a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .78rem;
  border: 0;
  border-radius: 999px;
  background: var(--m-beige);
  color: var(--m-encre);
  font: 400 12.5px/1 var(--m-sans);
  text-decoration: none;
  cursor: pointer;
}
.m-chips a:hover { background: var(--m-trait); }
.m-chips a span[aria-hidden] { font-size: 15px; line-height: 1; color: var(--m-gris); }
.m-chips__vider {
  background: none !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--m-gris) !important;
}

.m-outils__note {
  margin: .9rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--m-trait);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--m-gris);
}

/* ---------------------------------------------------------- cartes */
.m-fics { display: grid; margin-top: 26px; }
.m-fics--grille { grid-template-columns: repeat(var(--m-colonnes, 3), minmax(0, 1fr)); gap: 22px; }
.m-fics--liste { grid-template-columns: minmax(0, 1fr); gap: 14px; }

.m-fic {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--m-trait-2);
  border-radius: 12px;
  overflow: hidden;
}
.m-fic__img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--m-beige);
}
.m-fic__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.m-fic:hover .m-fic__img img { transform: scale(1.045); }

.m-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: .3rem .62rem;
  border-radius: 999px;
  font: 400 10.5px/1.3 var(--m-sans);
  letter-spacing: .035em;
  background: rgba(255, 255, 255, .94);
  color: var(--m-encre);
}
.m-badge--conf { background: var(--m-noir); color: #fff; }
.m-badge--ech { background: var(--m-beige); }

.m-fic__corps { flex: 1 1 auto; padding: 1.1rem 1.15rem 0; }
.m-fic__ref {
  margin: 0 0 .4rem;
  font-size: 10.5px;
  letter-spacing: .07em;
  color: var(--m-gris-2);
}
.m-fic__nom { font-size: 20px; line-height: 1.2; }
.m-fic__nom a { color: inherit; text-decoration: none; }
.m-fic__nom a:hover { color: var(--m-gris); }
.m-fic__res {
  margin: .55rem 0 0;
  font-size: 13px;
  line-height: 1.52;
  color: var(--m-gris);
}

.m-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
}
.m-attrs li {
  padding: .22rem .6rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--m-encre-2);
  white-space: nowrap;
}

.m-fic__pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
  padding: 1rem 1.15rem 1.15rem;
  border-top: 1px solid var(--m-trait-2);
}
.m-px { margin: 0; }
.m-px b { display: block; font: 400 24px/1 var(--m-serif); white-space: nowrap; }
.m-px > span {
  display: block;
  margin-top: .3rem;
  font-size: 11px;
  color: var(--m-gris-2);
  white-space: nowrap;
}
/* « Sur devis » n'est pas un prix : il ne prend pas la typographie
   d'un prix, il prend celle d'un état. */
.m-px--devis b {
  display: inline-block;
  padding: .32rem .72rem;
  border-radius: 999px;
  background: var(--m-noir);
  color: #fff;
  font: 500 13px/1.25 var(--m-sans);
}
.m-fic__pied .m-btn { flex: none; }

/* ---------------------------------------------------- vue détaillée */
.m-fics--liste .m-fic {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 230px);
  align-items: stretch;
}
.m-fics--liste .m-fic__img { aspect-ratio: auto; height: 100%; min-height: 172px; }
.m-fics--liste .m-fic__corps { padding: 1.15rem 1.3rem; }
.m-fics--liste .m-fic__pied {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .95rem;
  margin-top: 0;
  border-top: 0;
  border-left: 1px solid var(--m-trait-2);
}

.m-pal {
  width: 100%;
  margin-top: .95rem;
  border-collapse: collapse;
}
.m-pal th {
  padding: .3rem .6rem .3rem 0;
  border-bottom: 1px solid var(--m-trait-2);
  font: 400 10.5px/1.3 var(--m-sans);
  letter-spacing: .04em;
  color: var(--m-gris-2);
  text-align: left;
  white-space: nowrap;
}
.m-pal td {
  padding: .4rem .6rem .1rem 0;
  font: 400 15px/1 var(--m-serif);
  white-space: nowrap;
}
.m-pal__vide {
  margin: .95rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid var(--m-trait);
  font-size: 12px;
  line-height: 1.55;
  color: var(--m-gris);
}

/* ------------------------------------------------------ liste vide */
.m-vide {
  margin-top: 26px;
  padding: 58px 22px;
  border: 1px dashed var(--m-trait);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.m-vide__t { margin: 0; font: 400 26px/1.2 var(--m-serif); }
.m-vide__s {
  margin: .8rem auto 0;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m-gris);
}
.m-vide__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0 0;
}

/* ------------------------------------------------------ aide au choix */
.m-aide { background: var(--m-beige); }
.m-aide__in {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  padding-block: 62px;
}
.m-aide__txt h2 { font-size: clamp(27px, 3.1vw, 41px); line-height: 1.1; }
.m-aide__txt p {
  margin: 1.05rem 0 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--m-encre-2);
}
.m-aide__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 1.75rem !important;
}
.m-aide__pts {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-aide__pts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .95rem;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  background: #fff;
}
.m-aide__pts .m-ico { grid-row: span 2; color: var(--m-encre-2); }
.m-aide__pts b { font: 500 14px/1.35 var(--m-sans); }
.m-aide__pts span {
  margin-top: .25rem;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--m-gris);
}

/* ---------------------------------------------------- adaptations */
@media (max-width: 1240px) {
  .m-fics--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .m-cat__grille { grid-template-columns: minmax(0, 228px) minmax(0, 1fr); gap: 26px; }
  .m-fics--liste .m-fic { grid-template-columns: minmax(0, 178px) minmax(0, 1fr) minmax(0, 200px); }
}
@media (max-width: 980px) {
  /* Le rail devient un panneau que l'on ouvre : déplié en permanence,
     il occuperait la moitié de l'écran avant le premier produit. */
  .m-cat__grille { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 24px 54px; }
  .m-rail { position: static; }
  .m-rail__in { display: none; }
  .m-rail.est-ouvert .m-rail__in {
    display: block;
    margin-bottom: 26px;
    padding: 1.1rem 1.3rem 1.3rem;
    border: 1px solid var(--m-trait);
    border-radius: 12px;
    background: #fff;
  }
  .m-barre__filtrer { display: inline-flex; }
}
@media (max-width: 860px) {
  .m-cat__in { grid-template-columns: minmax(0, 1fr); padding-block: 34px 28px; }
  .m-cat__img { aspect-ratio: 16 / 9; }
  .m-aide__in { grid-template-columns: minmax(0, 1fr); padding-block: 48px; }
  .m-fics--liste .m-fic { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .m-fics--liste .m-fic__pied {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-left: 0;
    border-top: 1px solid var(--m-trait-2);
  }
}
@media (max-width: 620px) {
  .m-fics--grille { grid-template-columns: minmax(0, 1fr); }
  .m-fics--liste .m-fic { grid-template-columns: minmax(0, 1fr); }
  .m-fics--liste .m-fic__img { aspect-ratio: 16 / 10; min-height: 0; }
  .m-barre { align-items: flex-start; }
  .m-barre__d { flex-wrap: wrap; }
  .m-cat__cle b { font-size: 23px; }
  .m-aide__act { gap: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m-fic__img img { transition: none; }
}

/* ----------------------------------------------------------------
   L'en-tête « à outils » porte deux entrées de menu, un champ de
   recherche et un bouton de plus que celui de l'accueil : entre 860
   et 1180 px, tout cela ne tient plus sur une ligne et débordait de
   la fenêtre. Il passe donc sur deux lignes plus tôt que l'autre,
   le menu gardant une ligne à lui.
   ---------------------------------------------------------------- */
@media (max-width: 1180px) and (min-width: 861px) {
  .m-entete--outils .m-entete__in {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: .85rem;
    gap: .5rem 1.6rem;
  }
  .m-entete--outils .m-outils { margin-left: auto; }
  .m-rail { top: 134px; }
}

/* ----------------------------------------------------------------
   Sur un téléphone, l'en-tête à outils tenait sur trois lignes : le
   nom seul, puis les icônes et le bouton devis, puis le menu. En
   resserrant le bouton et les écarts, le nom et les outils partagent
   la première ligne et la hauteur perdue revient au contenu.
   ---------------------------------------------------------------- */
@media (max-width: 620px) {
  .m-entete--outils .m-entete__in { gap: .85rem 1.2rem; }
  .m-entete--outils .m-outils { gap: .6rem; }
  .m-entete--outils .m-outils .m-btn--petit {
    padding: .55rem .8rem;
    font-size: 12px;
    gap: .6rem;
  }
}

/* ----------------------------------------------------------------
   Sous 360 px — les plus petits téléphones encore en service — la
   barre de progression des inspirations, sa légende et les deux
   flèches ne tiennent plus sur une ligne, et la page se mettait à
   défiler latéralement de vingt pixels. La barre disparaît : le
   compteur « 01 — 04 » dit déjà où l'on en est.
   ---------------------------------------------------------------- */
@media (max-width: 360px) {
  .m-inspi__barre { display: none; }
  .m-inspi__nav { gap: .8rem; }
}

/* ==================================================================
   AJOUTS DU THÈME
   ------------------------------------------------------------------
   Ce que les maquettes n'avaient pas à prévoir : un menu construit
   dans l'administration (longueur inconnue), un logo image, des filtres
   qui sont des liens et des formulaires, du contenu saisi dans
   l'éditeur.
   ================================================================== */

/* ------------------------------------------------------------ bandeau */
.m-annonce a { color: inherit; text-decoration: none; }
.m-annonce a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- logo */
.m-logo--image { display: block; line-height: 0; }
.m-logo--image img { width: auto; max-width: 220px; max-height: 52px; }
.m-pied .m-logo--image img { max-height: 42px; }

.m-logos .m-logo--img { line-height: 0; }
.m-logos .m-logo--img img {
  width: auto;
  max-width: 140px;
  max-height: 40px;
  filter: grayscale(1);
  opacity: .82;
}
.m-confiance--fiche .m-logo--img img { max-height: 30px; }

/* ------------------------------------------------------------ accueil */
/* Une catégorie sans image garde une tuile pleine, pas un trou. */
.m-carte, .m-haute { background: var(--m-beige); }
.m-haute:not(:has(img)) { color: var(--m-encre); }
.m-haute:not(:has(img))::before { display: none; }
.m-inspi a { background: var(--m-beige); }

#contenu:focus { outline: none; }

/* --------------------------------------------------------- pied de page */
.m-pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 2rem;
  padding-block: 1.1rem 1.4rem;
  border-top: 1px solid var(--m-trait-2);
  font-size: 12px;
  font-weight: 300;
  color: var(--m-gris);
}
.m-pied__bas p { margin: 0; }
.m-pied__texte { flex: 1 1 32ch; max-width: 60ch; }
.m-pied__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.m-pied__legal a { color: inherit; text-decoration: none; }
.m-pied__legal a:hover { color: var(--m-encre); }
.m-pied__droits { margin-left: auto !important; }

/* --------------------------------------------------------------- menu */
.m-vol__tout a { font-weight: 500 !important; color: var(--m-encre) !important; }
.m-nav .current-menu-item > a,
.m-nav .current-menu-ancestor > .m-nav__b,
.m-nav a[aria-current="page"] { color: var(--m-encre); font-weight: 500; }

.m-burger {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--m-trait);
  border-radius: 50%;
  background: #fff;
  color: var(--m-encre);
  cursor: pointer;
}
.m-burger .m-ico { width: 19px; height: 19px; }

/* Le menu d'un site réel se remplit dans l'administration : sa longueur
   est inconnue. Sous 1180 px, plutôt que de le faire défiler (ce qui
   couperait les volets), il se replie derrière un bouton. */
@media (max-width: 1180px) {
  .m-entete__in,
  .m-entete--outils .m-entete__in {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: .9rem;
    gap: .85rem 1.4rem;
  }
  .m-outils,
  .m-entete--outils .m-outils { margin-left: auto; }
  .m-burger { display: grid; }

  .m-nav,
  .m-entete--outils .m-nav {
    display: none;
    order: 3;
    width: 100%;
    margin: 0;
    padding-bottom: .4rem;
  }
  .m-nav.est-ouvert { display: block; }
  .m-nav ul,
  .m-entete--outils .m-nav ul { display: block; }
  .m-nav > ul > li { border-top: 1px solid var(--m-trait-2); }
  .m-nav a,
  .m-nav__b {
    width: 100%;
    justify-content: space-between;
    padding: .85rem 0;
    font-size: 15px;
  }
  .m-vol {
    position: static;
    min-width: 0;
    padding: 0 0 .6rem .9rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .m-vol a { padding: .5rem 0; white-space: normal; }
  .m-vol a:hover { background: none; }
  .m-rail { top: 24px; }
}
/* Sans script, le bouton ne peut rien ouvrir : le menu reste déplié. */
html:not(.js) .m-burger { display: none; }
html:not(.js) .m-nav { display: block; }
html:not(.js) .m-vol[hidden] { display: none; }
html:not(.js) .m-nav__item:hover > .m-vol,
html:not(.js) .m-nav__item:focus-within > .m-vol { display: block; }

@media (max-width: 620px) {
  .m-entete--outils .m-outils .m-outils__devis { display: none; }
}

/* ------------------------------------------------------ fil d'Ariane */
.m-fil li { display: inline; }

/* --------------------------------------------------------- catalogue */
a.m-puce { text-decoration: none; }

.m-fics { list-style: none; padding: 0; }
.m-fics > li { margin: 0; }

/* Options au-delà du seuil : repliées quand le script est là. */
.js .m-grp:not(.est-deplie) .m-case--plus:not(:has(input:checked)) { display: none; }
.m-grp__plus { display: none; }
.js .m-grp__plus { display: inline-block; }
/* Le bouton « Appliquer » ne sert que sans script : sinon le rail se
   soumet dès qu'une case change. */
.js .m-rail__ok { display: none; }
.m-rail__ok { margin: 1rem 0 0; }

.m-barre__tri { display: flex; align-items: center; margin: 0; }
.m-barre__tri label { display: flex; align-items: center; white-space: nowrap; }
.m-barre__tri noscript .m-btn { margin-left: .5rem; }

/* Les paliers de prix ne se lisent qu'en vue détaillée. */
.m-fics--grille .m-pal,
.m-fics--grille .m-pal__vide { display: none; }

/* Le rail attend la réponse du serveur. */
.m-rail__in.est-en-cours { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* Quand le rail est désactivé, la liste prend toute la largeur. */
.m-cat__grille--seule { grid-template-columns: minmax(0, 1fr); }

.m-cat__img--vide { background: var(--m-beige); }

/* Pagination. */
.m-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: 2.4rem 0 0;
}
.m-pages ul { display: contents; list-style: none; }
.m-pages > a,
.m-pages > span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .7rem;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
  background: #fff;
  font: 400 13px/1 var(--m-sans);
  color: var(--m-encre);
  text-decoration: none;
}
.m-pages > a:hover { border-color: var(--m-gris-2); }
.m-pages .current { background: var(--m-noir); border-color: var(--m-noir); color: #fff; }
.m-pages .dots { border: 0; background: none; }

/* --------------------------------------------------------------- fiche */
/* Tableau « Informations complémentaires » de WooCommerce, comme .m-tab.
   Le préfixe .m-page l'emporte sur « .woocommerce table.shop_attributes ». */
.m-page .m-panneau .shop_attributes {
  margin: 0;
  border: 0;
}
.m-page .m-panneau .shop_attributes tr:nth-child(even) :is(th, td) { background: none; }
.m-page .m-panneau .shop_attributes th,
.m-page .m-panneau .shop_attributes td { border-top: 0; font-style: normal; line-height: 1.55; }
.m-page .m-panneau .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  font: 300 13.5px/1.55 var(--m-sans);
}
.m-page .m-panneau .shop_attributes th,
.m-page .m-panneau .shop_attributes td {
  padding: .72rem .4rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--m-trait-2);
}
.m-page .m-panneau .shop_attributes th { width: 34%; font-weight: 500; color: var(--m-encre); }
.m-page .m-panneau .shop_attributes td { color: var(--m-encre-2); }
.m-page .m-panneau .shop_attributes td p { margin: 0; }
.m-gal--seule { grid-template-columns: minmax(0, 1fr); }
.m-gal__v { display: block; }
.m-devis-fiche { margin-top: 1.5rem; }
.m-devis-fiche > div { gap: .25rem; }
.m-devis-fiche strong { font: 500 23px/1.1 var(--m-sans); }
.m-devis-fiche span { max-width: 40ch; }

.m-panneau[hidden] { display: none; }
/* Sans script, tous les panneaux se lisent à la suite. */
html:not(.js) .m-panneau[hidden] { display: block; }
html:not(.js) .m-onglets { display: none; }

/* -------------------------------------------------- contenu éditorial */
.m-contenu {
  max-width: 72ch;
  font: 300 15px/1.72 var(--m-sans);
  color: var(--m-encre-2);
}
.m-contenu > * { margin-block: 0 1.1rem; }
.m-contenu > *:last-child { margin-bottom: 0; }
.m-contenu h2, .m-contenu h3, .m-contenu h4 {
  margin-top: 2.2rem;
  color: var(--m-encre);
  font-family: var(--m-serif);
  font-weight: 400;
  line-height: 1.15;
}
.m-contenu h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.m-contenu h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.m-contenu h4 { font-size: 1.15rem; }
.m-contenu a { color: var(--m-encre); text-underline-offset: 3px; }
.m-contenu a:hover { color: var(--m-gris); }
.m-contenu strong, .m-contenu b { font-weight: 500; color: var(--m-encre); }
.m-contenu ul, .m-contenu ol { padding-left: 1.2rem; }
.m-contenu li + li { margin-top: .35rem; }
.m-contenu blockquote {
  margin-inline: 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--m-trait);
  font-family: var(--m-serif);
  font-size: 1.2em;
  color: var(--m-encre);
}
.m-contenu img { height: auto; border-radius: var(--m-r-s); }
.m-contenu figcaption { margin-top: .5rem; font-size: 12.5px; color: var(--m-gris); }
.m-contenu table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-contenu th, .m-contenu td { padding: .6rem .4rem; border-bottom: 1px solid var(--m-trait-2); text-align: left; vertical-align: top; }
.m-contenu th { font-weight: 500; color: var(--m-encre); }
.m-contenu hr { border: 0; border-top: 1px solid var(--m-trait); margin-block: 2rem; }
.m-contenu .alignwide, .m-contenu .alignfull { max-width: none; }
.m-contenu .aligncenter { margin-inline: auto; }
.m-contenu .alignleft { float: left; margin: .3rem 1.4rem 1rem 0; }
.m-contenu .alignright { float: right; margin: .3rem 0 1rem 1.4rem; }
.m-contenu .wp-block-button__link {
  display: inline-flex;
  padding: 1rem 1.5rem;
  border-radius: var(--m-r-s);
  background: var(--m-noir);
  color: #fff;
  font: 500 14px/1 var(--m-sans);
  text-decoration: none;
}
.m-contenu .is-style-outline .wp-block-button__link { background: #fff; color: var(--m-encre); box-shadow: inset 0 0 0 1px var(--m-trait); }

/* Pages de texte (mentions légales, CGV, articles). */
.m-page--texte { background: #fff; }
.m-texte-page { padding-block: 3rem 5rem; }
.m-texte-page__tete { max-width: 72ch; margin-bottom: 2.2rem; }
.m-texte-page__tete h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.06; }
.m-texte-page__tete .m-chapo { margin-top: 1rem; }
.m-texte-page__meta { margin: .8rem 0 0; font-size: 12.5px; color: var(--m-gris); }
.m-texte-page__img { margin: 0 0 2.2rem; border-radius: var(--m-r); overflow: hidden; max-width: 72ch; }
.m-texte-page__img img { width: 100%; height: auto; }
.m-texte-page--large .m-contenu,
.m-texte-page--large .m-texte-page__tete,
.m-panneau > .m-contenu { max-width: none; }
/* Articles : colonne de lecture centrée, intertitres détachés du texte. */
.m-texte-page.type-post > .m-texte-page__tete,
.m-texte-page.type-post > .m-texte-page__img,
.m-texte-page.type-post > .m-contenu { margin-inline: auto; }
.m-texte-page.type-post > .m-suite { max-width: 72ch; margin-inline: auto; }
.m-texte-page .m-contenu h2, .m-texte-page .m-contenu h3 { margin-bottom: .8rem; }

/* Liste d'articles. */
.m-billets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-billet { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--m-trait-2); border-radius: 12px; overflow: hidden; }
.m-billet__img { display: block; aspect-ratio: 4 / 3; background: var(--m-beige); overflow: hidden; }
.m-billet__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.m-billet:hover .m-billet__img img { transform: scale(1.04); }
.m-billet__corps { padding: 1.1rem 1.2rem 1.3rem; }
.m-billet__date { margin: 0 0 .4rem; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--m-gris-2); }
.m-billet h2 { font-size: 21px; line-height: 1.2; }
.m-billet h2 a { color: inherit; text-decoration: none; }
.m-billet h2 a:hover { color: var(--m-gris); }
.m-billet p { margin: .6rem 0 0; font-size: 13.5px; line-height: 1.55; color: var(--m-gris); }
/* Sans image à la une : carte de texte seul, filet bleu en tête. */
.m-billet--texte { border-top: 3px solid var(--j-bleu, #0a5cff); }
.m-billet--texte .m-billet__corps { padding-top: 1.4rem; }
/* Résultats de recherche : nombre et champ sous le titre. */
.m-recherche__nb { margin: .6rem 0 0; color: var(--m-gris); font-size: 15px; }
.m-recherche__form { max-width: 460px; margin-top: 1rem; }
@media (max-width: 980px) { .m-billets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .m-billets { grid-template-columns: minmax(0, 1fr); } }

/* Page introuvable, résultats vides. */
.m-perdu { padding-block: 5rem 6rem; text-align: center; }
.m-perdu h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.m-perdu p { margin: 1rem auto 0; max-width: 50ch; color: var(--m-gris); }
.m-perdu .m-rech { width: min(100%, 420px); margin: 2rem auto 0; background: #fff; }
.m-perdu__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; align-items: center; }

/* Commentaires. */
.m-coms { margin-top: 3rem; max-width: 72ch; }
.m-coms ol { list-style: none; padding: 0; margin: 0; }
.m-coms .comment-body { padding: 1.1rem 0; border-bottom: 1px solid var(--m-trait-2); }
.m-coms .children { padding-left: 1.4rem; }
.m-coms .comment-meta { font-size: 12.5px; color: var(--m-gris); }
.m-coms .avatar { float: left; margin-right: .8rem; border-radius: 50%; }

/* Formulaires génériques (commentaires, recherche, pages). */
/* Spécificité nulle : les champs du configurateur gardent leur style. */
:where(.m-page) :where(input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select) {
  max-width: 100%;
  padding: .66rem .8rem;
  border: 1px solid var(--m-trait);
  border-radius: 7px;
  background: #fff;
  font: 300 14px/1.35 var(--m-sans);
  color: var(--m-encre);
}
:where(.m-page) :where(input, textarea, select):focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: 1px;
}