/* ==========================================================================
   MLD Rénov — pages métiers (placo, peinture, électricité)
   + bandeau passerelle partagé avec le hub rénovation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero photo
   -------------------------------------------------------------------------- */

.rm-hero { min-height: max(680px, min(100svh, 900px)); }
.rm-hero--short { min-height: max(620px, min(100svh, 820px)); }
.rm-hero .breadcrumb { --muted: var(--text-on-dark-muted); }
.rm-hero__title { max-width: 1040px; }
.rm-hero .hero__content { gap: 26px; }

/* Étiquette « Photo d’illustration » en bas à droite (hero sans bandeau) */
.rm-hero__badge { left: auto; right: var(--gutter); bottom: 24px; }

/* Bandeau bas : sous-navigation MLD Rénov / repères */
.rm-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.rm-strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.rm-strip__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-on-dark-muted);
  transition: color 0.3s var(--ease-out);
}
.rm-strip__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.rm-strip__link .icon { width: 14px; height: 14px; transition: transform 0.45s var(--ease-out); }
.rm-strip__link[aria-current="page"] { color: var(--white); font-weight: 700; }
.rm-strip__link[aria-current="page"]::after { transform: none; }
@media (hover: hover) {
  .rm-strip__link:hover { color: var(--white); }
  .rm-strip__link:hover::after { transform: scaleX(1); transform-origin: left; }
  .rm-strip__link:hover .icon { transform: translate(3px, -3px); }
}
.rm-strip .pole { gap: 14px; }
@media (max-width: 720px) {
  .rm-strip { gap: 14px 28px; }
  .rm-strip .badge { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Corps de section : visuel + liste
   -------------------------------------------------------------------------- */

.rm-body {
  display: grid;
  grid-template-columns: minmax(0, var(--rm-media, 520px)) minmax(0, 1fr);
  gap: clamp(40px, 6.7vw, 96px);
  align-items: start;
}
.rm-body--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, var(--rm-media, 520px)); }
.rm-body--center { align-items: center; }
@media (max-width: 960px) {
  .rm-body,
  .rm-body--reverse { grid-template-columns: 1fr; }
  .rm-body--reverse > .media { order: -1; }
}

/* Liste de prestations numérotée (lignes séparées par des filets) */
.rm-list { border-top: 1px solid var(--line); }
.rm-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}
.rm-list__item::before {
  /* filet doré qui se déroule au survol */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.rm-list__num {
  padding-top: 4px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: transform 0.5s var(--ease-out);
}
.rm-list__title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color 0.3s;
}
.rm-list__text { color: var(--muted); font-size: 16px; line-height: 1.6; }
.rm-list__body { display: flex; flex-direction: column; gap: 8px; }

/* Variante 3 colonnes : n° | titre | description */
.rm-list--cols .rm-list__item { grid-template-columns: 52px minmax(0, 0.8fr) minmax(0, 1fr); gap: 8px 32px; }
.rm-list--cols .rm-list__title { font-weight: 700; }

/* Variante pastille d’icône (à droite ou à gauche) */
.rm-list--pill .rm-list__item { grid-template-columns: 34px minmax(0, 1fr) 44px; align-items: start; }
.rm-list--lead .rm-list__item { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 24px; }
.rm-list--lead .rm-list__title { font-size: clamp(19px, 1.6vw, 22px); }

.rm-pill {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  transition: background-color 0.4s var(--ease-out), color 0.4s, border-color 0.4s, transform 0.5s var(--ease-out);
}
.rm-pill .icon { width: 18px; height: 18px; }
.rm-list--lead .rm-pill { width: 56px; height: 56px; background: var(--white); border-color: var(--line); }
.rm-list--lead .rm-pill .icon { width: 20px; height: 20px; }

@media (hover: hover) {
  .rm-list__item:hover::before { transform: scaleX(1); }
  .rm-list__item:hover .rm-list__num { transform: translateX(4px); }
  .rm-list__item:hover .rm-list__title { color: var(--accent); }
  .rm-list__item:hover .rm-pill { background: var(--noir); border-color: var(--noir); color: var(--gold); transform: rotate(-8deg); }
}

@media (max-width: 720px) {
  .rm-list--cols .rm-list__item { grid-template-columns: 36px minmax(0, 1fr); }
  .rm-list--cols .rm-list__text { grid-column: 2; }
  .rm-list--pill .rm-list__item { grid-template-columns: 30px minmax(0, 1fr); }
  .rm-list--pill .rm-pill { display: none; }
  .rm-list--lead .rm-list__item { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
  .rm-list--lead .rm-pill { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Points (icône + titre + texte), grilles 2×2 / 3 colonnes
   -------------------------------------------------------------------------- */

.rm-points { --grid-gap: 40px 48px; }
.rm-points .commitment { gap: 14px; }
.rm-points .commitment .icon { margin-bottom: 4px; }
.rm-points .commitment h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }
.rm-points--sm .commitment h3 { font-size: 18px; font-weight: 600; }

.rm-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Étapes : 5 colonnes */
.rm-steps--5 { --cols: 5; }
.rm-steps--5 .step__head,
.steps.rm-steps .step__head { margin-bottom: 6px; }
.rm-steps .step h3 { font-size: 20px; }
@media (max-width: 1180px) { .rm-steps--5 { --cols: 3; } }
@media (max-width: 760px) { .rm-steps--5 { --cols: 2; } }
@media (max-width: 600px) { .rm-steps--5 { --cols: 1; } }

/* --------------------------------------------------------------------------
   Colonne titre + contenu (FAQ, projets, prestations)
   -------------------------------------------------------------------------- */

.rm-aside {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 48px clamp(48px, 8.3vw, 120px);
  align-items: start;
}
.rm-aside .faq__q { font-size: clamp(17px, 1.3vw, 18px); font-weight: 600; padding-block: 24px; }
.rm-aside--wide { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 48px clamp(40px, 6.7vw, 96px); }
.rm-aside__title { font-size: clamp(32px, 3.6vw, 52px); }
.rm-aside__title--sm { font-size: clamp(28px, 2.8vw, 40px); }
@media (min-width: 961px) {
  .rm-aside > .stack { position: sticky; top: calc(var(--header-h) + 32px); }
}
@media (max-width: 960px) {
  .rm-aside { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Bandeau passerelle (vers un autre métier)
   -------------------------------------------------------------------------- */

.rm-bridge {
  padding-block: clamp(48px, 5vw, 72px);
  border-block: 1px solid var(--line);
  background: var(--cream);
}
.rm-bridge__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: center;
}
.rm-bridge__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.rm-bridge__text {
  max-width: 780px;
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--noir);
  text-wrap: balance;
}
@media (max-width: 960px) {
  .rm-bridge__inner { grid-template-columns: 1fr; gap: 20px; }
  .rm-bridge__inner .btn { justify-self: start; }
}

/* CTA final : variante titre allégé */
.rm-cta--light .cta-final__title { font-weight: 600; }

/* --------------------------------------------------------------------------
   Peinture — projets numérotés
   -------------------------------------------------------------------------- */

.rm-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
.rm-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.rm-project__num {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: transform 0.6s var(--ease-out);
}
.rm-project h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 800; }
.rm-project:hover .rm-project__num { transform: translateY(-4px); }
@media (max-width: 640px) { .rm-projects { grid-template-columns: 1fr; gap: 40px; } }

/* --------------------------------------------------------------------------
   Peinture — choix des finitions (échantillons)
   -------------------------------------------------------------------------- */

.rm-finish {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--cream);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.rm-finish__swatch {
  position: relative;
  aspect-ratio: 366 / 180;
  overflow: hidden;
  border: 1px solid rgb(23 23 25 / 0.08);
  border-radius: 4px;
  background: var(--swatch, #d8d2c6);
}
.rm-finish__swatch::after {
  /* reflet de lumière : plus marqué selon la brillance */
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / var(--gloss, 0)) 50%, transparent 65%);
  transform: translateX(-60%);
  transition: transform 1.2s var(--ease-out);
}
.rm-finish--mat { --gloss: 0.12; }
.rm-finish--velours { --swatch: linear-gradient(-116deg, #e2ddd2 15%, #d8d2c6 50%, #d0c9bc 85%); --gloss: 0.35; }
.rm-finish--satin { --swatch: linear-gradient(-116deg, #f1eee7 15%, #dcd6cb 39%, #ccc4b6 64%, #e0dbd1 85%); --gloss: 0.7; }
@media (hover: hover) {
  .rm-finish:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -32px rgb(23 23 25 / 0.35); }
  .rm-finish:hover .rm-finish__swatch::after { transform: translateX(60%); }
}
.rm-finish__body { display: flex; flex-direction: column; gap: 18px; padding: 4px 8px 8px; }
.rm-finish__name { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rm-finish__name h3 { font-size: 28px; font-weight: 800; }
.rm-gloss { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rm-gloss__bars { display: inline-flex; gap: 4px; }
.rm-gloss__bars i { width: 12px; height: 3px; border-radius: 2px; background: var(--line); }
.rm-gloss__bars i.is-on { background: var(--gold-ink); }
.rm-finish__use { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.rm-finish__use .rm-label { font-size: 11px; }
.rm-finish__use p:last-child { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--fg); }
.rm-finish__tip { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rm-finish__tip .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }

.rm-note { display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(32px, 4vw, 56px); font-size: 15px; color: var(--fg); }
.rm-note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

/* --------------------------------------------------------------------------
   Électricité
   -------------------------------------------------------------------------- */

/* Points numérotés (fond sombre) */
.rm-reasons { border-top: 1px solid var(--line); }
.rm-reasons li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px 20px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.rm-reasons__n { font-family: var(--font-heading); font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--accent); }
.rm-reasons h3 { font-size: 20px; font-weight: 800; }
.rm-reasons p { grid-column: 2; }

/* Tuiles projet */
.rm-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--cream);
  transition: background-color 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.rm-tile > .icon { width: 24px; height: 24px; color: var(--gold-ink); transition: transform 0.6s var(--ease-out); }
.rm-tile h3 { font-size: 20px; font-weight: 800; }
@media (hover: hover) {
  .rm-tile:hover { background: var(--cream-2); transform: translateY(-4px); }
  .rm-tile:hover > .icon { transform: translateY(-3px) rotate(-8deg); }
}

/* Encadré sécurité */
.rm-callout {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
  margin-top: clamp(64px, 7vw, 104px);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--radius);
  background: var(--cream-2);
}
.rm-callout__pill {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--gold);
}
.rm-callout__pill .icon { width: 28px; height: 28px; }
.rm-callout h2 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; }
.rm-callout .stack { --stack: 12px; }
@media (max-width: 640px) {
  .rm-callout { grid-template-columns: 1fr; }
  .rm-callout__pill { width: 64px; height: 64px; }
}

/* Cartes liens vers les autres métiers */
.rm-links { --grid-gap: 24px; }
.rm-linkcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--anthracite);
  color: var(--white);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s, transform 0.6s var(--ease-out);
}
.rm-linkcard > .icon { width: 24px; height: 24px; color: var(--gold); }
.rm-linkcard__arrow { width: 18px; height: 18px; transition: transform 0.45s var(--ease-out); }
.rm-linkcard strong { display: block; font-family: var(--font-heading); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.rm-linkcard small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-on-dark-muted); }
@media (hover: hover) {
  .rm-linkcard:hover { border-color: rgb(199 164 90 / 0.5); transform: translateY(-4px); }
  .rm-linkcard:hover .rm-linkcard__arrow { transform: translate(3px, -3px); color: var(--gold); }
}
@media (max-width: 1080px) { .rm-links { --cols: 1; } }
@media (max-width: 480px) { .rm-linkcard { padding: 24px; gap: 16px; } }

/* Rangée d’actions : bouton + lien fléché */
.rm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding-top: 8px; }
.rm-points--sm { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Ajustements typographiques & divers
   -------------------------------------------------------------------------- */

.rm-hero__title--wide { max-width: 1200px; }
.rm-h2-md { font-size: clamp(30px, 3.4vw, 48px); }
.rm-prose { font-size: 17px; }
.rm-inline { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; transition: color 0.3s; }
.rm-inline:hover { color: var(--accent); }
.rm-notice { align-items: flex-start; margin-top: 8px; line-height: 1.5; }
.rm-notice .icon { margin-top: 2px; }

/* Peinture — « ce qui se voit quand la préparation est bâclée » */
.rm-skip { display: flex; flex-direction: column; gap: 32px; margin-top: clamp(64px, 5.6vw, 80px); }

/* Électricité — section « avec les autres travaux » */
.rm-section-md { padding-block: clamp(80px, 7.8vw, 112px); }
.rm-head-tight { margin-bottom: 40px; }
.rm-links > li { display: flex; }
.rm-links .rm-linkcard { flex: 1; }