/*
Theme Name: RMB+
Theme URI: https://www.rmb-plus.fr
Author: BakiLab
Description: Thème sur mesure RMB+ — reproduction à l'identique du site Wix Studio (rénovation d'intérieur et maintenance immobilière). Valeurs relevées sur le site en production, voir _extraction/DESIGN_SYSTEM.md.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: propriétaire
Text Domain: rmb-plus
*/

/* Variables alignées sur _wordpress/composants/*.css et _seo/pilote/rmb-page.css :
   les composants déjà codés s'insèrent sans redéfinir de couleurs concurrentes. */

:root {
  --rmb-encre: #2D2727;
  --rmb-accent: #FF5200;
  --rmb-blanc: #FFFFFF;

  --rmb-rose: #D7BEBE;
  --rmb-bleu-gris: #C7D3D5;
  --rmb-peche: #FFC5AA;
  --rmb-vert-pale: #D1DBC3;

  --rmb-bord: #D8D4D4;
  --rmb-fond-clair: #F7F4F2;
  --rmb-gris: #6B6565;

  --rmb-container: 1328px;
  --rmb-rayon: 4px;
  --rmb-rayon-bloc: 50px;
  --rmb-rayon-pilule: 100px;
  --rmb-transition: 0.2s ease-in-out;
  /* Courbe unique de tous les mouvements (apparitions, en-tête, zoom). */
  --rmb-courbe: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Une ancre (#renovation…) s'arrête sous l'en-tête fixe, pas derrière. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--rmb-encre);
  background: var(--rmb-blanc);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* width:100% est nécessaire : placé dans un parent flex, un bloc avec seulement
   max-width + margin auto se réduit à la largeur de son contenu au lieu de
   remplir la ligne, et le contenu part au milieu de la page. */
.rmb-conteneur {
  width: 100%;
  max-width: var(--rmb-container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 835px) {
  .rmb-conteneur { padding: 0 48px; }
}

/* En-tête et hero ne suivent pas la largeur de contenu : ils sont calés à 50px
   du bord de la fenêtre, comme les sections Wix correspondantes. */
.rmb-conteneur--plein {
  max-width: none;
}

@media (min-width: 835px) {
  .rmb-conteneur--plein { padding: 0 50px; }
}

/* WordPress ne charge sa feuille de blocs que si une page en contient : sur ce
   thème classique, sans cette règle les libellés destinés aux lecteurs d'écran
   deviendraient visibles à l'écran. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.rmb-lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rmb-encre);
  color: var(--rmb-blanc);
  padding: 12px 20px;
  z-index: 100;
}

.rmb-lien-evitement:focus { left: 0; }

/* --- Typographie --- */

h1, h2, h3, h4 {
  font-weight: 400;
  margin: 0;
}

/* Wix Studio met le H1 à l'échelle de la largeur de fenêtre au-dessus de 1024px
   (ratio constant 0,058594, mesuré à 11 largeurs), puis le fige par paliers.
   Le saut vers le haut sous 1024px (60px → 75px) est le comportement réel du
   site, pas une erreur : ne pas « corriger » en croyant à une coquille. */
/* L'interlettrage négatif est la signature du hero, pas une règle de tous les
   h1 : posé globalement, il resserrait les titres des pages intérieures et
   changeait leurs retours à la ligne. Il reste donc sur .rmb-hero__titre. */
h1 {
  font-size: 5.8594vw;
  line-height: 1.2;
}

@media (max-width: 1023px) { h1 { font-size: 75px; } }
@media (max-width: 767px)  { h1 { font-size: 40px; } }
@media (max-width: 479px)  { h1 { font-size: 38px; } }

h2 {
  font-size: 34px;
  line-height: 1.2;
}

@media (max-width: 834px) { h2 { font-size: 26px; } }

.rmb-h2-medium {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
}

.rmb-surtitre {
  font-size: 15.75px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

@media (max-width: 834px) {
  .rmb-surtitre { font-size: 14px; }
}

.rmb-accroche {
  font-size: 31.5px;
  font-weight: 500;
  color: var(--rmb-blanc);
}

.rmb-chiffre {
  font-size: 25px;
  font-weight: 800;
}

/* --- Boutons ---
   Trois variantes relevées, une seule logique de survol : le fond bascule vers
   le blanc (ou transparent), bordure et texte inchangés. Aucun déplacement. */

.rmb-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: var(--rmb-rayon-pilule);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rmb-transition), border-color var(--rmb-transition);
}

.rmb-bouton--principal {
  background: var(--rmb-accent);
  color: var(--rmb-encre);
  border: 1px solid var(--rmb-encre);
  min-width: 199px;
}

.rmb-bouton--principal:hover { background: var(--rmb-blanc); }

.rmb-bouton--sombre {
  background: var(--rmb-encre);
  color: var(--rmb-blanc);
  border: 1px solid var(--rmb-encre);
  min-height: 64px;
  min-width: 172px;
}

.rmb-bouton--sombre:hover {
  background: var(--rmb-blanc);
  color: var(--rmb-encre);
}

.rmb-bouton--blanc {
  background: var(--rmb-blanc);
  color: var(--rmb-encre);
  border: 1px solid var(--rmb-blanc);
  min-height: 64px;
  min-width: 200px;
}

.rmb-bouton--blanc:hover { background: transparent; color: var(--rmb-blanc); }

/* --- En-tête --- */

.rmb-entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  background: var(--rmb-blanc);
  border-bottom: 1px solid var(--rmb-rose);
}

/* L'en-tête fixe sort du flux : le contenu garde sa place, à sa hauteur
   d'origine (111px + filet ; 82px + filet en mobile). Il s'affine ensuite
   par-dessus le contenu, sans rien faire sauter. */
.rmb-entete:not(.rmb-entete--transparent) + main { padding-top: 112px; }

@media (max-width: 834px) {
  .rmb-entete:not(.rmb-entete--transparent) + main { padding-top: 83px; }
}

/* Barre d'administration WordPress (visible connecté seulement). */
@media (min-width: 783px) {
  .admin-bar .rmb-entete:not(.rmb-entete--transparent),
  .admin-bar .rmb-entete.est-compact { top: 32px; }
}

.rmb-nav__actif { color: var(--rmb-accent); }

/* Accueil : posé par-dessus la vidéo du hero, donc hors flux, en blanc et sans
   le filet qui sépare l'en-tête du contenu sur les pages intérieures. */
.rmb-entete--transparent {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom: 0;
  color: var(--rmb-blanc);
}

/* Le logo et le hamburger sont blancs sur une vidéo dont la luminosité change
   d'une image à l'autre : sans cette ombre ils disparaissent sur les plans
   clairs. Invisible sur fond sombre, donc sans effet sur le rendu d'origine. */
.rmb-entete--transparent .rmb-logo,
.rmb-entete--transparent .rmb-entete__bascule {
  filter: drop-shadow(0 1px 3px rgba(45, 39, 39, 0.55));
}

/* « RMB » en extra-gras, « Plus » en graisse normale, comme le logo d'origine. */
.rmb-logo__fort { font-weight: 800; }

.rmb-entete__interieur {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 111px;
}

/* Le menu n'est pas réparti sur la largeur : il est groupé à droite, contre le
   bouton de devis, le logo restant seul à gauche. */
.rmb-nav { margin-left: auto; }

.rmb-logo {
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.rmb-nav ul {
  display: flex;
  align-items: center;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rmb-nav a {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  /* Soulignement tracé de gauche à droite au survol. */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--rmb-transition);
}

.rmb-nav a:hover { background-size: 100% 1px; }

/* `color: inherit` : un <button> n'hérite pas de la couleur du texte, et iOS
   le peint en bleu système — le hamburger sortait bleu au lieu de blanc. */
.rmb-entete__bascule {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 834px) {
  .rmb-entete__bascule { display: flex; }
  .rmb-nav { display: none; }
  .rmb-nav[data-ouvert="true"] {
    display: block;
    position: absolute;
    inset: 100% 0 auto;
    color: var(--rmb-encre);
    background: var(--rmb-blanc);
    padding: 24px;
    border-top: 1px solid var(--rmb-bord);
  }
  .rmb-nav[data-ouvert="true"] ul { flex-direction: column; align-items: flex-start; }

  /* Logo seul à gauche, bouton de devis et hamburger groupés à droite.
     C'est `margin-left:auto` sur le bouton qui pousse le groupe : en mobile la
     navigation est masquée, donc plus rien d'autre ne repousse la fin de ligne. */
  /* Mesures du site d'origine à 390px : logo à 20px du bord, bouton de
     148×44 à 19px du haut, hamburger de 25px à 20px du bord droit. */
  .rmb-entete__interieur { gap: 10px; min-height: 82px; padding: 0 20px; }
  .rmb-logo { font-size: 16px; letter-spacing: -0.05em; }
  .rmb-entete__cta {
    margin-left: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 15px;
    font-size: 11px;
    letter-spacing: -0.05em;
  }
  .rmb-entete__bascule { order: 3; margin-left: 0; }

  /* Menu ouvert sur la vidéo : l'en-tête passe en blanc, sinon les liens
     blancs hérités de l'en-tête transparent tombent sur le fond blanc du menu. */
  .rmb-entete--transparent:has(.rmb-nav[data-ouvert="true"]) {
    background: var(--rmb-blanc);
    color: var(--rmb-encre);
  }
  .rmb-entete--transparent:has(.rmb-nav[data-ouvert="true"]) .rmb-logo,
  .rmb-entete--transparent:has(.rmb-nav[data-ouvert="true"]) .rmb-entete__bascule { filter: none; }
}

/* --- Hero (accueil) ---
   Section de 861px de haut pour 1440 de large sur le site d'origine : le
   rapport est conservé en largeur, comme le reste de la mise à l'échelle Wix.
   Le bloc de texte n'est pas centré verticalement, il est calé vers le bas
   (haut à 394px, bas à 762px sur 861) — reproduit par le padding bas. */

.rmb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1440 / 861;
  min-height: 560px;
  overflow: hidden;
  color: var(--rmb-blanc);
  background: var(--rmb-encre);
}

.rmb-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rmb-hero__interieur {
  position: relative;
  width: 100%;
  /* 99px sous le bloc de texte pour 1440 de large. Un padding en pourcentage
     se résout sur la LARGEUR du conteneur, pas sa hauteur : 99/1440. Ce qui
     tombe juste ici, l'échelle Wix suivant elle aussi la largeur. */
  padding-bottom: 6.875%;
}

.rmb-hero__titre {
  color: var(--rmb-blanc);
  letter-spacing: -0.04em;
  margin: 0;
}

.rmb-hero .rmb-accroche {
  margin: 20px 0 36px;
}

.rmb-hero__preuve {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--rmb-blanc);
  opacity: 0.85;
}

.rmb-hero__preuve strong { font-weight: 700; }

@media (max-width: 834px) {
  /* Le hero occupe tout l'écran en mobile, comme l'original (844px relevés
     pour une fenêtre de 844). svh plutôt que vh : la barre d'adresse mobile
     fait varier vh et coupe le bas du bloc. */
  .rmb-hero {
    aspect-ratio: auto;
    min-height: 600px;
    min-height: 100svh;
    padding-top: 145px;
  }
  .rmb-hero .rmb-accroche { font-size: 20px; }
}

.rmb-bouton__fleche {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transition: transform var(--rmb-transition);
}

/* La flèche pointe en bas à droite : elle avance dans sa propre direction. */
.rmb-bouton:hover .rmb-bouton__fleche { transform: translate(3px, 3px); }

/* --- Section À propos ---
   Deux colonnes égales de 720px sur 1440. Le texte est calé à 50px du bord,
   l'image occupe 620px dans sa colonne avec 50px de marge de chaque côté.
   Hauteur de section 861px sur 1440 : exprimée en vw, l'échelle Wix suivant
   la largeur de fenêtre. */

.rmb-apropos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 59.79vw;
}

.rmb-apropos__texte { padding: 0 50px; }

/* 27px/43.2px : relevé sur cette section précise (data/accueil.json).
   Les titres de section ne partagent pas une taille unique d'une section à
   l'autre — 31.5px sur Services — donc chacune porte la sienne. */
.rmb-apropos__texte h2 {
  font-size: 27px;
  line-height: 1.6;
  margin: 28px 0 32px;
}

.rmb-apropos__texte p { margin: 0; max-width: 430px; }

.rmb-apropos__texte .rmb-bouton { margin-top: 40px; }

.rmb-apropos__visuel { padding: 0 50px; }

.rmb-apropos__visuel img { width: 100%; }

@media (max-width: 834px) {
  .rmb-apropos {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 40px;
    padding: 64px 0;
  }
  .rmb-apropos__texte,
  .rmb-apropos__visuel { padding: 0 24px; }
  .rmb-apropos__texte p { max-width: none; }
}

/* --- Section Services ---
   Colonne de gauche blanche (480px), puis deux cartes blanches sur un fond
   rosé : ce ne sont pas des bordures, c'est le fond du conteneur qui
   transparaît dans un écart d'1px entre les cartes. */

.rmb-services {
  display: grid;
  grid-template-columns: 480px 1fr;
  min-height: 62.5vw;
  border-top: 1px solid var(--rmb-rose);
  border-bottom: 1px solid var(--rmb-rose);
}

.rmb-services__intro { padding: 80px 50px 0; }

.rmb-services__intro h2 {
  font-size: 31.5px;
  line-height: 1.6;
  max-width: 340px;
  margin: 28px 0 36px;
}

.rmb-services__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rmb-rose);
  border-left: 1px solid var(--rmb-rose);
}

.rmb-service {
  position: relative;
  background: var(--rmb-blanc);
  padding: 80px 62px 0;
  text-align: center;
}

.rmb-service__lien { text-decoration: none; }

/* Toute la carte est cliquable, sans imbriquer un bloc dans un lien. */
.rmb-service__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rmb-service:has(.rmb-service__lien:focus-visible) {
  outline: 2px solid var(--rmb-accent);
  outline-offset: -4px;
}

.rmb-service__lien:focus-visible { outline: 0; }

/* Cadre à la taille de l'image : le zoom reste à l'intérieur. */
.rmb-service__image {
  width: fit-content;
  max-width: 100%;
  margin: 20px 0 24px;
  overflow: hidden;
}

.rmb-service__image img { transition: transform .5s var(--rmb-courbe); }

.rmb-service:hover .rmb-service__image img,
.rmb-projet__lien:hover .rmb-projet__image { transform: scale(1.03); }

.rmb-service p { margin: 0; }

@media (max-width: 834px) {
  .rmb-services {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .rmb-services__intro { padding: 56px 24px 40px; }
  .rmb-services__grille { grid-template-columns: 1fr; border-left: 0; }
  .rmb-service { padding: 40px 24px; }
}

/* --- Nos dernières réalisations --- */

.rmb-realisations__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 178px;
}

.rmb-realisations__entete h2 {
  font-size: 31.5px;
  line-height: 1.6;
  margin: 0;
}

/* Le comparateur occupe 1280px de large, centré — largeur du widget d'origine. */
.rmb-realisations__widget {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0 56px;
}

@media (max-width: 834px) {
  .rmb-realisations__widget { padding: 0 24px 40px; }
}

/* --- Projet à l'affiche --- */

.rmb-affiche {
  display: grid;
  grid-template-columns: 420px 1fr;
  align-items: center;
  gap: 50px;
  padding: 50px;
}

.rmb-affiche__texte h2 {
  font-size: 31.5px;
  line-height: 1.6;
  margin: 24px 0 48px;
}

.rmb-affiche__fiche { margin: 0; }

.rmb-affiche__fiche dt { font-weight: 700; }

.rmb-affiche__fiche dd { margin: 0 0 40px; }

.rmb-affiche__fiche dd:last-child { margin-bottom: 0; }

.rmb-video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.rmb-video img { width: 100%; }

.rmb-video__lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: rgba(45, 39, 39, 0.8);
}

.rmb-video__lecture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--rmb-blanc);
}

.rmb-video:hover .rmb-video__lecture { background: var(--rmb-accent); }

.rmb-video__libelle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.rmb-affiche__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* --- Témoignages --- */

.rmb-temoignages { padding: 50px; }

.rmb-temoignages__panneau {
  background: var(--rmb-encre);
  color: var(--rmb-blanc);
  padding: 58px 0 64px;
  text-align: center;
}

.rmb-temoignages__panneau h2 {
  font-size: 31.5px;
  line-height: 1.6;
  margin: 20px 0 56px;
}

.rmb-temoignages__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.rmb-avis {
  margin: 0;
  padding: 0 61px;
}

.rmb-avis__etoiles {
  display: block;
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 24px;
}

.rmb-avis blockquote { margin: 0 0 40px; }

.rmb-avis figcaption { font-weight: 700; }

@media (max-width: 834px) {
  .rmb-realisations__entete {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 32px;
  }
  .rmb-affiche {
    grid-template-columns: 1fr;
    padding: 56px 24px;
    gap: 40px;
  }
  .rmb-temoignages { padding: 0; }
  .rmb-temoignages__panneau { padding: 48px 0; }
  /* 54px de chaque côté, comme l'original : sans ça le titre de 26px frôle
     les bords au lieu de passer à la ligne. */
  .rmb-temoignages__panneau h2 { padding: 0 54px; }
  .rmb-temoignages__grille { grid-template-columns: 1fr; gap: 48px; }
  .rmb-avis { padding: 0 24px; }
}

/* --- Pages Réalisations (gabarit unique) --- */

.rmb-realisation__titre {
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  margin: 56px 0 40px;
}

/* --- Galerie : grande image, flèches, bande de miniatures ---
   Le point délicat est la grande image. Un bandeau pleine largeur à hauteur
   fixe écrase les photos en panoramique et les rend illisibles. Ici le cadre
   a une hauteur bornée par la fenêtre et l'image est contenue dedans : une
   photo verticale comme une horizontale s'affiche en entier, au plus grand
   format possible. */

.rmb-galerie {
  max-width: var(--rmb-container);
  margin: 0 auto;
  padding: 0 24px;
}

.rmb-galerie:focus-visible { outline: 2px solid var(--rmb-accent); outline-offset: 4px; }

.rmb-galerie__scene {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
}

/* Fond transparent volontairement : le cadre garde une hauteur fixe pour que
   les flèches ne sautent pas d'une photo à l'autre, mais une photo verticale
   n'occupe alors que la moitié de la largeur. Teinté, ce vide se voyait comme
   un défaut ; sur le fond de page il disparaît. */
.rmb-galerie__cadre {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(68vh, 720px);
  background: transparent;
}

.rmb-galerie__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.rmb-galerie__video {
  max-width: 100%;
  max-height: 100%;
  background: var(--rmb-encre);
}

.rmb-galerie__video[hidden],
.rmb-galerie__image[hidden] { display: none; }

/* Pastille lecture sur la miniature d'une vidéo, pour la distinguer d'une photo. */
.rmb-galerie__vignette--video { position: relative; }

.rmb-galerie__vignette--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--rmb-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l6 4-6 4z' fill='%232D2727'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.rmb-galerie__fleche {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  border: 1px solid var(--rmb-bord);
  border-radius: 50%;
  background: var(--rmb-blanc);
  color: var(--rmb-encre);
  cursor: pointer;
  transition: background-color var(--rmb-transition);
}

.rmb-galerie__fleche:hover { background: var(--rmb-fond-clair); }

.rmb-galerie__legende {
  padding: 20px 0 0;
  text-align: center;
}

.rmb-galerie__titre {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
}

.rmb-galerie__description { margin: 0; }

.rmb-galerie__compteur {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--rmb-gris);
}

.rmb-galerie__bande {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 20px 0 4px;
  scrollbar-width: thin;
}

.rmb-galerie__vignette {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  opacity: 0.5;
  transition: opacity var(--rmb-transition);
}

.rmb-galerie__vignette[aria-current="true"],
.rmb-galerie__vignette:hover { opacity: 1; }

.rmb-galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 834px) {
  .rmb-galerie { padding: 0 16px; }
  .rmb-galerie__scene { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .rmb-galerie__cadre { height: min(52vh, 420px); }
  .rmb-galerie__fleche { width: 36px; height: 36px; font-size: 20px; }
  .rmb-galerie__vignette { width: 64px; height: 64px; }
}

.rmb-realisation__texte {
  max-width: 1150px;
  margin: 0 auto;
  padding: 72px 24px 88px;
  line-height: 1.6;
}

/* L'original colle ses paragraphes : un simple retour à la ligne, pas un blanc
   d'interligne complet entre eux. */
.rmb-realisation__texte p { margin: 0 0 12px; }

.rmb-realisation__galerie a {
  display: block;
  text-decoration: none;
}

.rmb-realisation__nav {
  background: var(--rmb-encre);
  color: var(--rmb-blanc);
}

.rmb-realisation__nav-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  font-size: 13px;
}

.rmb-realisation__nav a { text-decoration: none; opacity: 0.75; }

.rmb-realisation__nav a:hover { opacity: 1; }

.rmb-realisation__nav-fin { text-align: right; }

@media (max-width: 834px) {
  .rmb-realisation__titre { font-size: 26px; margin: 40px 0 24px; }
  .rmb-realisation__texte { padding: 48px 24px 56px; }
}

/* --- Pied de page --- */

/* Le pied de page est blanc, sur quatre colonnes de largeurs inégales
   (relevé : 406 / 364 / 289 / 279 sur 1440), séparé du contenu par un filet. */

/* Hauteurs relevées sur l'original : bloc de colonnes 455px, barre basse 113px,
   soit 568px de pied de page. Sans ces minimums le pied remontait de 130px et
   décalait la comparaison de toutes les pages. */
.rmb-pied {
  background: var(--rmb-blanc);
  border-top: 1px solid var(--rmb-bord);
  padding: 0;
}

.rmb-pied a { text-decoration: none; }

.rmb-pied a.rmb-lien-souligne { text-decoration: underline; }

.rmb-pied__grille {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 835px) {
  .rmb-pied__grille {
    grid-template-columns: 406fr 364fr 289fr 279fr;
    min-height: 455px;
    padding-top: 80px;
  }
}

.rmb-pied__marque .rmb-logo { font-size: 24px; }

.rmb-pied__nav { margin-top: 32px; }

.rmb-pied__nav ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
}

.rmb-pied__titre {
  font-size: 15.75px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 40px;
}

.rmb-pied p { margin: 0 0 24px; }

.rmb-pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  min-height: 113px;
  padding: 24px 0;
  border-top: 1px solid var(--rmb-bord);
  font-size: 14px;
  font-weight: 700;
}

/* Mobile : relevé au pixel sur le site d'origine à 390px. Chaque bloc est
   séparé par un filet rose pleine largeur, le contenu calé à 20px du bord ;
   le bas de page empile « Retour en haut » puis les liens légaux. */
@media (max-width: 834px) {
  .rmb-pied { border-top-color: var(--rmb-rose); }
  .rmb-pied > .rmb-conteneur { padding: 0; }
  .rmb-pied__grille { gap: 0; }
  .rmb-pied__grille > div { padding: 80px 20px; border-top: 1px solid var(--rmb-rose); }
  .rmb-pied__grille > .rmb-pied__marque { padding: 35px 20px 36px; border-top: 0; }
  .rmb-pied__grille > div:nth-child(2) { padding-top: 42px; padding-bottom: 59px; }
  .rmb-pied__grille > div:nth-child(3) { padding-bottom: 77px; }
  .rmb-pied__grille > div > p:last-child { margin-bottom: 0; }
  .rmb-pied__marque .rmb-logo { font-size: 26px; }
  .rmb-pied__nav { margin-top: 12px; }
  .rmb-pied__nav ul { gap: 0; padding: 0; }
  .rmb-pied__nav a { display: block; padding: 15px 0; font-size: 16px; line-height: 22px; }
  .rmb-pied__titre { font-size: 14px; margin-bottom: 31px; }
  .rmb-pied .rmb-bouton { min-width: 224px; min-height: 64px; }
  .rmb-pied p:has(+ .rmb-bouton) { margin-bottom: 18px; }
  .rmb-pied__bas {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 31px 20px 86px;
    border-top-color: var(--rmb-rose);
    font-size: 13px;
    line-height: 16px;
  }
  /* `.rmb-pied` en tête : la règle de base `.rmb-pied__bas ul` est déclarée
     plus bas dans la feuille et l'emporterait à spécificité égale. */
  .rmb-pied .rmb-pied__bas ul { flex-direction: column; gap: 8px; }
  .rmb-pied a.rmb-pied__retour { order: -1; margin-bottom: 42px; text-decoration: underline; }
}

.rmb-pied__bas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Pages de texte (mentions légales, confidentialité, cookies) ---
   Le H1 global est à l'échelle du hero (5,86vw) : illisible sur une page de
   texte, ramené ici à une taille fixe. Mesure de confort de lecture : 72ch. */

.rmb-legal {
  padding: 80px 0 120px;
}

.rmb-legal__titre {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 40px;
}

.rmb-legal__contenu {
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.7;
}

.rmb-legal__contenu h2 {
  font-size: 26px;
  font-weight: 500;
  margin: 48px 0 16px;
}

.rmb-legal__contenu h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 32px 0 12px;
}

.rmb-legal__contenu p,
.rmb-legal__contenu ul {
  margin: 0 0 16px;
}

.rmb-legal__contenu ul {
  padding-left: 22px;
}

.rmb-legal__contenu li {
  margin-bottom: 8px;
}

.rmb-legal__contenu a {
  text-decoration: underline;
}

.rmb-legal__maj {
  max-width: 72ch;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rmb-bord);
  font-size: 14px;
  color: var(--rmb-gris);
}

@media (max-width: 834px) {
  .rmb-legal { padding: 48px 0 80px; }
  .rmb-legal__titre { font-size: 34px; margin-bottom: 28px; }
}

/* --- Bandeau de consentement cookies ---
   Carte encre en bas à gauche, non bloquante. Accepter et Refuser portent le
   même style : aucun des deux choix n'est mis en avant (exigence CNIL). */

.rmb-cookies {
  position: fixed;
  z-index: 100;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 520px;
  padding: 28px 32px;
  border-radius: 24px;
  background: var(--rmb-encre);
  color: var(--rmb-blanc);
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 12px 40px rgba(45, 39, 39, 0.25);
}

.rmb-cookies[hidden] { display: none; }

.rmb-cookies__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.rmb-cookies__titre::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rmb-accent);
}

.rmb-cookies__texte { margin: 0 0 20px; }

.rmb-cookies__texte a { color: var(--rmb-blanc); text-decoration: underline; }

.rmb-cookies__actions {
  display: flex;
  gap: 12px;
}

.rmb-cookies__actions .rmb-bouton {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  font-family: inherit;
}

.rmb-cookies .rmb-bouton:focus-visible,
.rmb-cookies a:focus-visible {
  outline: 2px solid var(--rmb-accent);
  outline-offset: 3px;
}

@media (max-width: 834px) {
  .rmb-cookies { left: 16px; right: 16px; bottom: 16px; padding: 24px; }
}

/* Lien « Gérer les cookies » du pied : un bouton (il ouvre le bandeau, il ne
   mène nulle part) habillé comme les liens légaux voisins. */
.rmb-pied__cookies {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Mouvement ---
   Sobre par principe : seules la position et l'opacité bougent, une courbe
   unique, et tout est coupé si le visiteur a demandé moins d'animations. */

/* Fondu entre deux pages du site (Chrome, Edge, Safari ; Firefox change de
   page sans transition). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .2s; }

/* En-tête compact (classe posée par navigation.js) : sur l'accueil une fois
   le hero dépassé, ailleurs dès qu'on quitte le haut de page. */
.rmb-entete--transparent.est-compact {
  position: fixed;
  background: var(--rmb-blanc);
  color: var(--rmb-encre);
  border-bottom: 1px solid var(--rmb-rose);
}

.est-compact .rmb-entete__interieur { min-height: 72px; }

/* Hors accueil l'en-tête est déjà affiché : il s'affine en douceur. Sur
   l'accueil il arrive d'en haut (rmb-descend), sans transition de hauteur. */
.rmb-entete:not(.rmb-entete--transparent) .rmb-entete__interieur {
  transition: min-height .3s var(--rmb-courbe);
}

.est-compact .rmb-logo,
.est-compact .rmb-entete__bascule { filter: none; }

@media (max-width: 834px) {
  .est-compact .rmb-entete__interieur { min-height: 64px; }
}

/* Apparition au défilement (classes posées par navigation.js, seulement sur
   les blocs encore hors écran au chargement). */
.rmb-revele {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--rmb-courbe), transform .6s var(--rmb-courbe);
  transition-delay: var(--rmb-delai, 0s);
}

.rmb-revele.est-visible {
  opacity: 1;
  transform: none;
}

/* Le bloc coupe ce qui dépasse. Pas de marge négative pour agrandir la zone :
   elles fusionnent entre blocs et décalaient le titre de 20px. L'interligne
   de 1,2 suffit à contenir accents et virgule. */
.rmb-hero__ligne {
  display: block;
  overflow: hidden;
}

.rmb-hero__ligne > span { display: block; }

@keyframes rmb-masque {
  from { transform: translateY(110%); }
}

@keyframes rmb-monte {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes rmb-descend {
  from { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Titre du hero : chaque ligne monte de derrière le bord bas de son bloc.
     Sans risque pour la mesure de vitesse de Google : le plus grand élément
     affiché au chargement est l'image de la vidéo, pas ce texte. */
  .rmb-hero__ligne > span { animation: rmb-masque .9s var(--rmb-courbe) both; }
  .rmb-hero__ligne + .rmb-hero__ligne > span { animation-delay: .12s; }

  .rmb-hero .rmb-accroche,
  .rmb-hero .rmb-bouton,
  .rmb-hero__preuve { animation: rmb-monte .45s var(--rmb-courbe) both; }
  .rmb-hero .rmb-accroche { animation-delay: .4s; }
  .rmb-hero .rmb-bouton { animation-delay: .5s; }
  .rmb-hero__preuve { animation-delay: .6s; }

  .rmb-entete--transparent.est-compact { animation: rmb-descend .35s var(--rmb-courbe); }
}