/* ============================================================
   template-18-renovia — feuille SOURCE. dist/ est une sortie.
   Grammaire relevee sur la fiche : serif a chasse serree, une
   SEULE ombre multicouche repetee, aucune bordure, aucun degrade,
   trois marges de cadre, panneaux alternes, avis en maconnerie.
   Huit jetons de couleur, aucun hex ecrit ici.
   ============================================================ */

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

:root {
  --cadre: 1376px;
  --marge: 32px;          /* marge etroite : bandeaux et vues */
  --marge-2: 64px;        /* marge courante du contenu */
  --marge-3: 120px;       /* marge de respiration des tetes */
  --pas: clamp(56px, 6vw, 104px);
  --ombre: 0 0.6px 1.6px -1.5px rgba(0,0,0,.17),
           0 2.3px 5.9px -3px rgba(0,0,0,.14),
           0 9px 23px -4.5px rgba(0,0,0,.11);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body.rv-corps {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.65 var(--sans);
  letter-spacing: -0.1px;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; }
p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* La chasse serree du serif est le premier trait de la fiche. */
.rv-hero__t, .rv-heroplat__t, .rv-tete__titre, .rv-bsq__t, .rv-art__t,
.rv-lgl__ti, .rv-cta__t, .rv-urg__t, .rv-fch__t, .rv-spc__t, .rv-fct__t {
  letter-spacing: -0.04em;
  line-height: 1.0;
}

/* ---- Cadres ------------------------------------------------- */
.rv-cadre {
  width: 100%;
  max-width: calc(var(--cadre) + 2 * var(--marge-2));
  margin-inline: auto;
  padding-inline: var(--marge-2);
}
.rv-b { padding-block: var(--pas); }
.rv-b--hero, .rv-b--marques, .rv-b--cta { padding-block: 0; }
.rv-main > .rv-b:last-child { padding-bottom: calc(var(--pas) * 1.2); }

/* ---- Ecriture commune --------------------------------------- */
.rv-sourcil {
  font: 500 12px/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marque);
  margin-bottom: 14px;
}
.rv-prose, .rv-intro__p, .rv-bsq__p, .rv-art__p, .rv-lgl__p, .rv-exp__x, .rv-cer__p {
  color: var(--texte-doux);
  margin-bottom: 14px;
  max-width: 68ch;
}
.rv-souligne {
  font-style: normal;
  color: var(--marque);
  box-shadow: inset 0 -0.09em 0 0 var(--accent);
}
.rv-puce { width: 20px; height: 20px; flex: 0 0 20px; color: var(--marque); }
.rv-bec { width: 16px; height: 16px; flex: 0 0 16px; }
.rv-trait { width: 20px; height: 20px; flex: 0 0 20px; }

.rv-lignes { display: grid; gap: 10px; }
.rv-lignes li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.rv-lignes span { min-width: 0; }
.rv-lignes--fines { font-size: 15px; color: var(--texte-doux); }

.rv-etqs { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-etqs li {
  font: 500 13px/1 var(--sans);
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--fond-2);
  color: var(--texte-doux);
}

/* ---- Appels -------------------------------------------------- */
.rv-pil {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  box-shadow: var(--ombre);
}
.rv-pil--pleine { background: var(--marque); color: var(--sur-marque); }
.rv-pil--nue { background: var(--fond-2); color: var(--texte); }
.rv-pils { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- Vues ---------------------------------------------------- */
.rv-vitre { position: relative; overflow: hidden; border-radius: 20px; margin: 0; }
.rv-vitre img { width: 100%; height: 100%; object-fit: cover; }
.rv-vitre--vide {
  display: grid; place-items: center;
  background: var(--fond-2);
  min-height: 180px;
  font: 400 clamp(40px, 6vw, 72px)/1 var(--serif);
  color: var(--marque);
}

/* ---- Tetes de section ---------------------------------------- */
.rv-tete { margin-bottom: 44px; }
.rv-tete__titre { font-size: clamp(30px, 4vw, 52px); }
.rv-tete__chapo { margin-top: 16px; color: var(--texte-doux); }
.rv-tete--colonne { text-align: center; }
.rv-tete--colonne .rv-tete__corps { max-width: 640px; margin-inline: auto; }
.rv-tete--colonne .rv-tete__chapo { margin-inline: auto; max-width: 56ch; }
.rv-tete--bord .rv-tete__corps { max-width: 564px; }
.rv-tete--large .rv-tete__titre { max-width: none; }
.rv-tete--large .rv-tete__chapo { max-width: 60ch; }
.rv-tete__queue { margin-top: 14px; color: var(--texte-doux); font-size: 14px; }
.rv-tete--colonne .rv-tete__queue { text-align: center; }

/* ---- Barre de navigation ------------------------------------- */
.rv-barre { position: relative; z-index: 40; background: var(--fond); }
.rv-barre__in {
  display: flex; align-items: center; gap: 28px;
  min-height: 84px;
  padding-block: 12px;
}
.rv-barre__mq {
  font: 400 24px/1 var(--serif);
  letter-spacing: -0.03em;
  text-decoration: none;
  flex: 0 0 auto;
}
/* Les liens sont GROUPES CONTRE le logo, jamais centres. */
.rv-men { min-width: 0; }
.rv-men__l { display: flex; align-items: center; gap: 6px; }
.rv-men__a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  border-radius: 10px;
}
.rv-barre__cta { margin-left: auto; flex: 0 0 auto; order: 3; }
.rv-barre__mq { order: 1; }
.rv-men { order: 2; }
.rv-barre__cle { order: 4; }

/* Volet : il reste ouvert tant que la souris est sur le lien OU sur
   le volet lui-meme, la zone d approche etant continue. */
.rv-men__e--volet { position: static; }
.rv-volet {
  position: absolute; left: 0; right: 0; top: calc(100% - 30px);
  padding-top: 30px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.rv-volet__in {
  display: flex; gap: 40px;
  width: 100%;
  max-width: calc(var(--cadre) + 2 * var(--marge-2));
  margin-inline: auto;
  padding: 28px var(--marge-2) 32px;
  background: var(--fond);
  box-shadow: var(--ombre);
  border-radius: 0 0 24px 24px;
  min-height: 300px;
}
.rv-men__e--volet:hover .rv-volet,
.rv-men__e--volet:focus-within .rv-volet,
.rv-men__e--volet.rv-ouvert .rv-volet {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.rv-men__e--volet:hover .rv-bec,
.rv-men__e--volet.rv-ouvert .rv-bec { transform: rotate(180deg); }
.rv-bec { transition: transform .16s ease; }
/* Vitrine laterale : la fiche pose toujours une vue dans le volet. */
.rv-volet__vue { flex: 0 0 300px; min-width: 0; }
.rv-vitre--vue { height: 190px; }
.rv-volet__vuet { font: 500 15px/1.3 var(--sans); margin-top: 14px; }
.rv-volet__vuex { font-size: 14px; color: var(--texte-doux); margin-top: 6px; }
.rv-volet__cs { display: flex; flex-wrap: wrap; gap: 32px; flex: 1 1 380px; min-width: 0; }
.rv-volet__c { flex: 1 1 200px; min-width: 0; }
.rv-volet__c ul { display: grid; gap: 10px; }
.rv-volet__c a { text-decoration: none; font-size: 15px; color: var(--texte-doux); }

/* Commande du tiroir : la case est hors flux mais JAMAIS masquee, et
   c est le label qui porte la dimension de la commande. */
.rv-barre__cache {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0;
}
.rv-barre__cle {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  border-radius: 12px;
  background: var(--fond-2);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.rv-barre__cle span { display: block; width: 20px; height: 2px; background: var(--texte); }

/* ---- Fil d ariane -------------------------------------------- */
.rv-ariane { padding-top: 22px; font-size: 14px; color: var(--texte-doux); }
.rv-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-ariane li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-ariane a { text-decoration: none; }
.rv-ariane i { font-style: normal; opacity: .6; }

/* ---- Hero : le titre est POSE SUR la vue --------------------- */
.rv-hero { position: relative; padding-inline: var(--marge); }
.rv-vitre--hero {
  height: clamp(420px, 46vw, 648px);
  border-radius: 28px;
  background: var(--fond-2);
}
.rv-vitre--hero::after {
  content: ""; position: absolute; inset: 0;
  background: var(--texte); opacity: .46;
}
.rv-hero__pose {
  position: absolute; inset: auto var(--marge) 0 var(--marge);
  padding: 40px clamp(20px, 4vw, 64px) clamp(32px, 4vw, 56px);
  color: var(--fond);
  max-width: 900px;
}
.rv-hero__pose .rv-sourcil { color: var(--accent); }
/* Le mot souligne herite par defaut de --marque (vert fonce), pense pour du
   texte sombre sur fond clair. Dans le hero, il est pose sur le meme voile
   sombre (::after) que le reste du titre : laisse tel quel, il retombe a un
   contraste de 2,2:1 contre ce voile (R4b, mesure le 26 aout 2026). Meme
   traitement que .rv-sourcil juste au-dessus : bascule sur --accent, qui
   tient 13,9:1 contre le voile, dans les deux etats (vide et rempli). */
.rv-hero__pose .rv-souligne { color: var(--accent); }
.rv-hero__t { font-size: clamp(38px, 7vw, 104px); }
.rv-hero__s { margin-top: 18px; max-width: 52ch; opacity: .86; }
.rv-hero__at {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin-top: 40px;
}
.rv-hero__at > li { min-width: 0; }
.rv-hero__att { font: 500 16px/1.3 var(--sans); }
.rv-hero__atx { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* F1 : la reference montre sa photo des la premiere rangee ET jusqu a la
   derniere — l entete, en flux normal, mangeait la rangee 0 (barre opaque
   de 84px avant le hero) et le cadre s arretait a 648px, bien avant la fin
   de la fenetre de 900px (rangee 5 retombait sur la bande d atouts). Au-
   dessus du palier du burger (900px, cf. @media plus bas), l entete flotte
   SUR la vue au lieu de la pousser — jamais fixed/sticky (R10 ne se
   declenche que sur ceux-la), scope au home puisque .rv-vitre--hero n
   existe que sur cette page (hero() vs heroPlat(), shell/render.mjs:131).
   Le cadre grimpe a la hauteur de la fenetre mesuree (min(900px,100svh)).
   Recette : _lib/FIXCOQUILLE.md, entree F1 « entete en flux normal ». */
@media (min-width: 901px) {
  .rv-corps--accueil .rv-barre {
    position: absolute; inset: 0 0 auto 0;
    background: transparent;
  }
  .rv-corps--accueil .rv-barre__mq,
  .rv-corps--accueil .rv-men__a { color: var(--fond); }
  .rv-vitre--hero { height: min(900px, 100svh); }
}

/* ---- Hero a plat --------------------------------------------- */
.rv-b--heroplat { padding-top: 40px; }
.rv-heroplat { display: flex; flex-wrap: wrap; gap: 48px; }
.rv-heroplat__g { flex: 1 1 560px; min-width: 0; }
.rv-heroplat__t { font-size: clamp(34px, 5.4vw, 72px); }
.rv-heroplat__s { margin-top: 18px; color: var(--texte-doux); max-width: 56ch; }
.rv-heroplat__at { flex: 1 1 300px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.rv-heroplat__att { font: 500 16px/1.3 var(--sans); }
.rv-heroplat__atx { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* ---- Chapo ---------------------------------------------------- */
.rv-intro { max-width: 860px; margin-inline: auto; text-align: center; }
.rv-intro__p { margin-inline: auto; }

/* ---- Services en BANDES basculantes -------------------------- */
.rv-srvs { display: grid; gap: clamp(40px, 5vw, 88px); }
.rv-srv { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); align-items: center; }
.rv-srv--bascule { flex-direction: row-reverse; }
.rv-srv__vue { position: relative; flex: 1 1 420px; min-width: 0; }
.rv-vitre--srv { height: clamp(240px, 30vw, 400px); }
/* L etiquette flotte HORS de la colonne de texte. */
.rv-srv__etq {
  position: absolute; top: 20px; left: 20px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--accent); color: var(--texte);
  font: 500 13px/1 var(--sans);
  box-shadow: var(--ombre);
}
.rv-srv--bascule .rv-srv__etq { left: auto; right: 20px; }
.rv-srv__corps { flex: 1 1 420px; min-width: 0; }
.rv-srv__t { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; }
.rv-srv__x { margin-top: 14px; color: var(--texte-doux); }
.rv-srv__corps .rv-lignes { margin-top: 20px; }
/* La bande se ferme sur DEUX reperes cote a cote. */
.rv-srv__rp { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 26px; }
.rv-srv__rp > div { flex: 1 1 140px; min-width: 0; }
.rv-srv__rp dt { font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.rv-srv__rp dd { font: 400 26px/1.2 var(--serif); margin-top: 6px; }
.rv-srv__l {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; font: 500 15px/1 var(--sans);
  text-decoration: none; color: var(--marque);
}
.rv-srvs__cta { margin-top: 48px; }
.rv-b--services .rv-srvs__cta { display: inline-flex; }

/* ---- blocsSeo ------------------------------------------------- */
.rv-bsqs { display: grid; gap: clamp(48px, 6vw, 96px); }
.rv-bsq { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); align-items: center; }
.rv-bsq--bascule { flex-direction: row-reverse; }
.rv-bsq__vue { flex: 1 1 440px; min-width: 0; }
.rv-vitre--bsq { height: clamp(260px, 32vw, 440px); }
.rv-bsq__corps { flex: 1 1 440px; min-width: 0; }
.rv-bsq__t { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 18px; }
.rv-bsq__corps .rv-pil { margin-top: 12px; }

/* ---- expertise ------------------------------------------------ */
.rv-exp { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 72px); }
.rv-exp__g { flex: 1 1 440px; min-width: 0; }
.rv-exp__d { flex: 1 1 380px; min-width: 0; }
.rv-vitre--exp { height: clamp(220px, 26vw, 340px); margin-bottom: 24px; }
.rv-exp__l { display: grid; gap: 20px; }
.rv-exp__pt { font: 500 16px/1.3 var(--sans); }
.rv-exp__px { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* ---- Chiffres ------------------------------------------------- */
.rv-chf { display: flex; flex-wrap: wrap; gap: 24px; }
.rv-chf > li {
  flex: 1 1 200px; min-width: 0;
  padding-top: 18px;
  box-shadow: inset 0 1px 0 0 var(--bordure);
}
.rv-chf__v { font: 400 clamp(38px, 5vw, 64px)/1 var(--serif); letter-spacing: -0.04em; }
.rv-chf__l {
  margin-top: 10px;
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux);
}

/* ---- process : le numero FLOTTE en haut a droite -------------- */
.rv-prc { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); }
.rv-prc__e {
  position: relative;
  flex: 1 1 280px; min-width: 0;
  padding: 28px 24px 28px 0;
}
.rv-prc__n {
  position: absolute; top: 0; right: 0;
  font: 400 clamp(40px, 5vw, 68px)/1 var(--serif);
  color: var(--accent);
  letter-spacing: -0.04em;
}
.rv-vitre--prc { height: 180px; margin-bottom: 18px; }
.rv-prc__t { font-size: 24px; letter-spacing: -0.02em; padding-right: 64px; }
.rv-prc__x { margin-top: 12px; color: var(--texte-doux); }
.rv-prc__e .rv-lignes { margin-top: 14px; }

/* ---- Urgence --------------------------------------------------- */
.rv-b--urgence .rv-cadre > .rv-urg {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 24px;
  background: var(--marque);
  color: var(--sur-marque);
}
.rv-urg__g { flex: 1 1 420px; min-width: 0; }
.rv-urg__g .rv-sourcil { color: var(--accent); }
.rv-urg__t { font-size: clamp(26px, 3vw, 40px); }
.rv-urg__x { margin-top: 12px; opacity: .86; }
.rv-urg__d { flex: 1 1 260px; min-width: 0; display: grid; gap: 20px; justify-items: start; }
.rv-lignes--urg .rv-puce { color: var(--accent); }
.rv-urg__d .rv-pil--pleine { background: var(--accent); color: var(--texte); }

/* ---- avis : MACONNERIE sans carte ---------------------------- */
.rv-avi { columns: 3 300px; column-gap: 40px; }
.rv-avi__i {
  break-inside: avoid;
  margin-bottom: 40px;
  padding-top: 18px;
  box-shadow: inset 0 1px 0 0 var(--bordure);
}
.rv-avi__t { font: 400 22px/1.25 var(--serif); letter-spacing: -0.02em; margin-bottom: 10px; }
.rv-avi__x { color: var(--texte-doux); }
.rv-avi__sig { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.rv-avi__av {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 999px;
  background: var(--marque); color: var(--sur-marque);
  display: grid; place-items: center;
  font: 500 15px/1 var(--sans);
}
.rv-avi__id { display: grid; min-width: 0; }
.rv-avi__nm { font: 500 15px/1.3 var(--sans); }
.rv-avi__rl { font-size: 13px; color: var(--texte-doux); }
.rv-avi__sc { margin-left: auto; color: var(--marque); font-size: 14px; letter-spacing: 2px; }

/* ---- whyUs : PANNEAUX ETROITS alternes ----------------------- */
.rv-why { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 72px); align-items: flex-start; }
.rv-why__vue { flex: 1 1 400px; min-width: 0; position: sticky; top: 24px; }
.rv-vitre--why { height: clamp(300px, 38vw, 560px); }
.rv-why__l { flex: 1 1 420px; min-width: 0; display: grid; gap: 26px; }
.rv-why__p {
  position: relative;
  width: min(340px, 100%);
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--fond-2);
  box-shadow: var(--ombre);
}
.rv-why__p--droite { margin-left: auto; }
.rv-why__n {
  font: 400 15px/1 var(--serif);
  color: var(--marque);
  letter-spacing: .1em;
}
.rv-why__t { font: 500 17px/1.35 var(--sans); margin-top: 10px; }
.rv-why__x { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }

/* ---- Marques : double file defilante ------------------------- */
.rv-mrq { display: flex; gap: 0; overflow: hidden; padding-block: 28px; }
.rv-mrq__f {
  display: flex; flex: 0 0 auto; gap: 48px; padding-inline: 24px;
  animation: rv-file 34s linear infinite;
  min-width: 0;
}
.rv-mrq__f li { flex: 0 0 auto; min-width: 0; }
.rv-mrq__f span {
  font: 400 26px/1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--texte-doux);
  white-space: nowrap;
}
@keyframes rv-file { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .rv-mrq__f { animation: none; } }

/* ---- secteurs -------------------------------------------------- */
.rv-scts { display: flex; flex-wrap: wrap; gap: 28px; }
.rv-sct { flex: 1 1 300px; min-width: 0; }
.rv-vitre--sct { height: 220px; margin-bottom: 18px; }
.rv-sct__m { font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--marque); margin-bottom: 8px; }
.rv-sct__t { font-size: 24px; letter-spacing: -0.02em; }
.rv-sct__x { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }
.rv-sct__c .rv-etqs, .rv-sct__c .rv-lignes { margin-top: 14px; }

/* ---- certifications -------------------------------------------- */
.rv-cer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.rv-cer__i {
  min-width: 0;
  padding: 22px 24px; border-radius: 18px;
  background: var(--fond-2);
}
.rv-cer__t { font: 500 16px/1.3 var(--sans); }
.rv-cer__x { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }

/* ---- zones ------------------------------------------------------ */
.rv-zons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.rv-zon { min-width: 0; }
.rv-zon a {
  display: block; text-decoration: none;
  padding: 18px; border-radius: 18px;
  background: var(--fond-2);
}
.rv-vitre--zon { height: 140px; margin-bottom: 14px; }
.rv-zon__t { display: block; font: 500 16px/1.3 var(--sans); }
.rv-zon__g { display: block; font-size: 13px; color: var(--texte-doux); margin-top: 4px; }

/* ---- carte locale : plaque de devanture ------------------------ */
.rv-map { position: relative; }
.rv-vitre--map { height: clamp(280px, 34vw, 460px); }
.rv-map__plaque {
  position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px);
  max-width: min(420px, calc(100% - 2 * clamp(16px, 3vw, 40px)));
  padding: 24px 26px; border-radius: 20px;
  background: var(--fond);
  box-shadow: var(--ombre);
}
.rv-map__t { display: block; font: 400 24px/1.2 var(--serif); letter-spacing: -0.03em; margin-bottom: 10px; }
.rv-map__a { font-size: 15px; color: var(--texte-doux); }
.rv-etqs--map { margin-top: 14px; }

/* ---- maillage ---------------------------------------------------- */
.rv-mais { display: flex; flex-wrap: wrap; gap: 20px; }
.rv-mai { flex: 1 1 300px; min-width: 0; }
.rv-mai a {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: 18px;
  background: var(--fond-2); text-decoration: none;
}
.rv-vitre--mai { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 14px; }
.rv-mai__c { display: grid; min-width: 0; }
.rv-mai__m { font: 500 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--marque); }
.rv-mai__t { font: 500 16px/1.3 var(--sans); margin-top: 4px; }
.rv-mai__x { font-size: 14px; color: var(--texte-doux); margin-top: 4px; }
.rv-mai__f { margin-left: auto; color: var(--marque); flex: 0 0 20px; }

/* ---- facettes ---------------------------------------------------- */
.rv-fct__t { font-size: clamp(26px, 3vw, 40px); margin-bottom: 20px; }
.rv-fct__l { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-fct__a {
  display: inline-flex; min-height: 44px; align-items: center;
  padding: 0 18px; border-radius: 999px;
  background: var(--fond-2); color: var(--texte);
  font: 500 14px/1 var(--sans); text-decoration: none;
}
.rv-fct__a--on { background: var(--marque); color: var(--sur-marque); }

/* ---- produits ----------------------------------------------------- */
.rv-prds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.rv-prd {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: 22px;
  background: var(--fond-2);
}
.rv-prd__a { text-decoration: none; display: block; }
.rv-vitre--prd { height: 200px; margin-bottom: 14px; background: var(--fond); }
.rv-prd__t { font-size: 22px; letter-spacing: -0.02em; }
.rv-prd__x { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.rv-prd__pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.rv-prd__prv { font: 400 30px/1 var(--serif); letter-spacing: -0.03em; }
.rv-prd__pru { font-size: 13px; color: var(--texte-doux); }

/* ---- fiche produit ------------------------------------------------ */
.rv-fch { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); align-items: flex-start; }
.rv-fch__vue { flex: 1 1 460px; min-width: 0; }
.rv-vitre--fch { height: clamp(300px, 36vw, 520px); }
.rv-fch__achat {
  flex: 1 1 360px; min-width: 0;
  padding: clamp(24px, 3vw, 40px); border-radius: 24px;
  background: var(--fond-2);
}
.rv-fch__t { font-size: clamp(28px, 3.4vw, 46px); }
.rv-fch__c { margin-top: 14px; color: var(--texte-doux); }
.rv-fch__pr { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.rv-fch__prv { font: 400 clamp(34px, 4vw, 52px)/1 var(--serif); letter-spacing: -0.04em; }
.rv-fch__pru { font-size: 14px; color: var(--texte-doux); }
.rv-fch__achat .rv-pil { margin-top: 22px; }
.rv-fch__m { font-size: 13px; color: var(--texte-doux); margin-top: 14px; }

/* ---- specifications ----------------------------------------------- */
.rv-spc__t { font-size: clamp(26px, 3vw, 40px); margin-bottom: 24px; }
.rv-spc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 40px; }
.rv-spc__i { min-width: 0; padding-top: 14px; box-shadow: inset 0 1px 0 0 var(--bordure); }
.rv-spc__i dt { font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.rv-spc__i dd { margin: 8px 0 0; font: 400 22px/1.2 var(--serif); letter-spacing: -0.02em; }

/* ---- realisations : le titre MORD sur la vue ---------------------- */
.rv-reas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rv-rea { min-width: 0; }
.rv-rea__vue { position: relative; padding-bottom: 26px; }
.rv-vitre--rea { height: clamp(240px, 28vw, 380px); }
.rv-rea__t {
  position: absolute; left: 20px; right: 20px; bottom: 0;
  padding: 16px 22px; border-radius: 16px;
  background: var(--fond);
  box-shadow: var(--ombre);
  font-size: 22px; letter-spacing: -0.02em;
}
.rv-rea__c { margin-top: 22px; }
.rv-rea__m { font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--marque); }
.rv-rea__x { margin-top: 10px; color: var(--texte-doux); }

/* ---- materiaux ------------------------------------------------------ */
.rv-mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rv-mat { min-width: 0; }
.rv-vitre--mat { height: 160px; margin-bottom: 14px; }
.rv-mat__t { font: 500 16px/1.3 var(--sans); }
.rv-mat__x { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* ---- avant / apres : deux vues SUPERPOSEES ------------------------ */
.rv-abs { display: flex; flex-wrap: wrap; gap: 40px; }
.rv-ab { flex: 1 1 420px; min-width: 0; }
.rv-ab__scene {
  position: relative;
  height: clamp(280px, 32vw, 440px);
  border-radius: 22px;
  overflow: hidden;
  background: var(--fond-2);
  touch-action: pan-y;
}
.rv-ab__f { position: absolute; inset: 0; margin: 0; }
.rv-ab__f .rv-vitre { height: 100%; border-radius: 0; }
.rv-ab__f--apres { clip-path: inset(0 0 0 var(--pos)); }
.rv-ab__f figcaption {
  position: absolute; top: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--fond); color: var(--texte);
  font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.rv-ab__f--avant figcaption { left: 16px; }
.rv-ab__f--apres figcaption { right: 16px; }
.rv-ab__axe {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: var(--fond);
  pointer-events: none;
}
.rv-ab__axe::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 999px;
  background: var(--fond);
  box-shadow: var(--ombre);
}
.rv-ab__lb {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--marque); color: var(--sur-marque);
  font: 500 13px/1 var(--sans);
  pointer-events: none;
}
/* Le curseur couvre toute la scene : souris, doigt et clavier. */
.rv-ab__r {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.rv-ab__r::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 48px; height: 100%; cursor: ew-resize;
}
.rv-ab__r::-moz-range-thumb { width: 48px; height: 100%; border: 0; }
.rv-ab__r:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; opacity: 1; }
.rv-ab__c { margin-top: 20px; }
.rv-ab__x { color: var(--texte-doux); }
.rv-ab__c .rv-etqs { margin-top: 14px; }

/* ---- tarifs ----------------------------------------------------- */
.rv-trfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rv-trf {
  min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 36px); border-radius: 24px;
  background: var(--fond-2);
}
.rv-trf--phare { background: var(--marque); color: var(--sur-marque); }
.rv-trf--phare .rv-trf__x, .rv-trf--phare .rv-trf__pru { opacity: .84; }
.rv-trf--phare .rv-puce { color: var(--accent); }
.rv-trf--phare .rv-pil--nue { background: var(--accent); color: var(--texte); }
.rv-trf__h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rv-trf__t { font: 500 16px/1.3 var(--sans); }
.rv-trf__etq {
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--texte);
  font: 500 12px/1 var(--sans);
}
.rv-trf__pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rv-trf__prv { font: 400 clamp(32px, 4vw, 48px)/1 var(--serif); letter-spacing: -0.04em; }
.rv-trf__pru { font-size: 13px; }
.rv-trf__x { font-size: 15px; }
.rv-trf .rv-pil { margin-top: auto; }
.rv-trfs__m { margin-top: 20px; font-size: 13px; color: var(--texte-doux); }

/* ---- aides -------------------------------------------------------- */
.rv-aids { display: flex; flex-wrap: wrap; gap: 24px; }
.rv-aid { flex: 1 1 260px; min-width: 0; padding-top: 16px; box-shadow: inset 0 1px 0 0 var(--bordure); }
.rv-aid__t { font: 500 16px/1.3 var(--sans); }
.rv-aid__x { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.rv-aid__c { font-size: 13px; color: var(--texte-doux); margin-top: 8px; }
.rv-aids__m { margin-top: 20px; font-size: 13px; color: var(--texte-doux); }

/* ---- faq : tete a GAUCHE, accordeon a DROITE ---------------------- */
.rv-faqs { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 80px); align-items: flex-start; }
.rv-faqs__g { flex: 1 1 380px; min-width: 0; }
.rv-faqs__g .rv-tete { margin-bottom: 24px; }
.rv-faq { flex: 1 1 460px; min-width: 0; }
.rv-faq__i { padding: 18px 0; box-shadow: inset 0 1px 0 0 var(--bordure); }
.rv-faq__i summary {
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; list-style: none;
  font: 500 16px/1.4 var(--sans);
  min-width: 0;
}
.rv-faq__i summary::-webkit-details-marker { display: none; }
.rv-faq__i summary span { min-width: 0; }
.rv-faq__i summary .rv-bec { margin-left: auto; color: var(--marque); }
.rv-faq__i[open] summary .rv-bec { transform: rotate(180deg); }
.rv-faq__r { margin-top: 12px; }
.rv-faq__e {
  margin-top: 28px; padding: 26px; border-radius: 22px;
  background: var(--fond-2);
}
.rv-faq__et { font: 500 16px/1.3 var(--sans); }
.rv-faq__ex { font-size: 15px; color: var(--texte-doux); margin: 8px 0 18px; }

/* ---- prise de contact ---------------------------------------------- */
.rv-frm { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 72px); align-items: flex-start; }
.rv-frm__g { flex: 1 1 400px; min-width: 0; }
.rv-frm__x { color: var(--texte-doux); }
.rv-frm__cds { display: grid; gap: 20px; margin-top: 28px; }
.rv-frm__cd { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.rv-frm__cd div { min-width: 0; }
.rv-frm__cd .rv-sourcil { margin-bottom: 6px; }
.rv-frm__cd p { font-size: 15px; color: var(--texte-doux); }
.rv-frm__d { flex: 1 1 460px; min-width: 0; }
.rv-frm__f {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  padding: clamp(24px, 3vw, 40px); border-radius: 24px;
  background: var(--fond-2);
}
.rv-frm__ch { min-width: 0; display: grid; gap: 8px; }
.rv-frm__ch--long { grid-column: 1 / -1; }
.rv-frm__f label { font: 500 13px/1.2 var(--sans); color: var(--texte-doux); }
.rv-frm__f input, .rv-frm__f textarea {
  width: 100%; min-width: 0;
  padding: 14px 16px; border: 0; border-radius: 14px;
  background: var(--fond); color: var(--texte);
  font: 400 15px/1.4 var(--sans);
  box-shadow: var(--ombre);
}
.rv-frm__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rv-frm__b { flex: 1 1 200px; border: 0; cursor: pointer; }
.rv-frm__m { grid-column: 1 / -1; font-size: 13px; color: var(--texte-doux); }

/* ---- blog ----------------------------------------------------------- */
.rv-blgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.rv-blg { min-width: 0; }
.rv-blg a { display: block; text-decoration: none; }
.rv-vitre--blg { height: 220px; margin-bottom: 16px; }
.rv-blg__m { display: block; font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--marque); }
.rv-blg__t { display: block; font: 400 24px/1.25 var(--serif); letter-spacing: -0.03em; margin-top: 8px; }
.rv-blg__x { display: block; font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.rv-blgs__cta { margin-top: 36px; }

.rv-art { max-width: 900px; margin-inline: auto; }
.rv-art__h { margin-bottom: 28px; }
.rv-art__t { font-size: clamp(32px, 4.6vw, 62px); }
.rv-art__m { margin-top: 14px; font-size: 14px; color: var(--texte-doux); }
.rv-vitre--art { height: clamp(240px, 30vw, 420px); margin-bottom: 32px; }
.rv-art__b { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.rv-art__sm {
  flex: 1 1 220px; min-width: 0;
  padding: 22px 24px; border-radius: 20px;
  background: var(--fond-2);
}
.rv-art__sm ol { display: grid; gap: 10px; counter-reset: rv-sm; }
.rv-art__sm a { font-size: 15px; color: var(--texte-doux); text-decoration: none; }
.rv-art__c { flex: 1 1 480px; min-width: 0; }
.rv-art__h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; margin: 32px 0 14px; }
.rv-art__h3 { font-size: 22px; letter-spacing: -0.02em; margin: 24px 0 12px; }
.rv-lignes--art { margin: 16px 0; }
.rv-art__en { margin: 24px 0; padding: 22px 24px; border-radius: 20px; background: var(--fond-2); }
.rv-art__ent { font: 500 16px/1.3 var(--sans); margin-bottom: 10px; }

.rv-lgl { max-width: 860px; margin-inline: auto; }
.rv-lgl__h { margin-bottom: 32px; }
.rv-lgl__ti { font-size: clamp(30px, 4vw, 52px); }
.rv-lgl__m { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.rv-lgl__b { margin-bottom: 32px; }
.rv-lgl__t { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin-bottom: 12px; }

/* ---- Bande d appel : la vue tient tout le fond -------------------- */
.rv-b--cta { padding-block: var(--pas); }
.rv-cta { position: relative; }
.rv-cta > .rv-vitre--cta { position: absolute; inset: 0 var(--marge-2); height: auto; border-radius: 28px; }
.rv-vitre--cta::after { content: ""; position: absolute; inset: 0; background: var(--texte); opacity: .55; }
.rv-cta__pose {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
  padding: clamp(32px, 5vw, 72px);
  border-radius: 28px;
  background: var(--marque);
  color: var(--sur-marque);
}
.rv-cta:has(> .rv-vitre--cta) .rv-cta__pose { background: transparent; color: var(--fond); }
.rv-cta__g { flex: 1 1 420px; min-width: 0; }
.rv-cta__g .rv-sourcil { color: var(--accent); }
.rv-cta__t { font-size: clamp(28px, 3.6vw, 48px); }
.rv-cta__x { margin-top: 14px; opacity: .88; }
.rv-cta__d { flex: 1 1 300px; min-width: 0; display: grid; gap: 16px; justify-items: start; }
.rv-cta__f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.rv-cta__ch { min-width: 0; display: grid; gap: 6px; }
.rv-cta__ch--long { grid-column: 1 / -1; }
.rv-cta__ch label { font: 500 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.rv-cta__ch input, .rv-cta__ch textarea {
  width: 100%; min-width: 0;
  padding: 13px 15px; border: 0; border-radius: 14px;
  background: var(--fond); color: var(--texte);
  font: 400 15px/1.4 var(--sans);
}
.rv-cta__ch textarea { resize: vertical; min-height: 96px; }
.rv-cta__d .rv-pil--pleine { background: var(--accent); color: var(--texte); }
.rv-cta__acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- Pied : BANDEAU-VUE puis quatre colonnes, credit a DROITE ----- */
.rv-pied { padding-bottom: 40px; background: var(--fond); }
.rv-pied__bandeau { padding: 0 var(--marge) var(--pas); }
.rv-vitre--pied { height: clamp(180px, 21vw, 300px); border-radius: 28px; }
.rv-pied__grille { display: flex; flex-wrap: wrap; gap: 40px; }
.rv-pied__c { flex: 1 1 200px; min-width: 0; }
.rv-pied__c--mq { flex: 1 1 300px; }
.rv-pied__c ul { display: grid; gap: 10px; }
.rv-pied__c a { text-decoration: none; font-size: 15px; color: var(--texte-doux); }
.rv-pied__c--nap li { font-size: 15px; color: var(--texte-doux); }
.rv-pied__mq { font: 400 28px/1 var(--serif); letter-spacing: -0.03em; }
.rv-pied__ds { margin-top: 14px; font-size: 15px; color: var(--texte-doux); max-width: 40ch; }
.rv-pied__rs { display: flex !important; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.rv-pied__lg {
  margin-top: 48px; padding-top: 22px;
  box-shadow: inset 0 1px 0 0 var(--bordure);
  font-size: 13px; color: var(--texte-doux);
  text-align: right;
}

/* ---- Adaptations ---------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --marge-2: 40px; --marge-3: 56px; }
  .rv-avi { columns: 2 280px; }
  .rv-why__vue { position: static; }
  .rv-zons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-reas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-trfs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-hero__at { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-cta__f { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .rv-cer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-prds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-spc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-blgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .rv-barre__cle { display: flex; }
  .rv-barre__cta { display: none; }
  .rv-men {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    padding: 12px var(--marge-2) 28px;
    background: var(--fond);
    box-shadow: var(--ombre);
    max-height: 78vh; overflow-y: auto;
  }
  .rv-barre { position: relative; }
  .rv-barre__cache:checked ~ .rv-men { display: block; }
  .rv-men__l { flex-direction: column; align-items: stretch; gap: 2px; }
  .rv-men__a { padding: 14px 4px; font-size: 17px; }
  .rv-men__a--volet .rv-bec { margin-left: auto; }
  .rv-volet {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .rv-men__e--volet.rv-ouvert .rv-volet { display: block; }
  .rv-volet__in {
    flex-direction: column; gap: 20px;
    padding: 4px 0 16px;
    box-shadow: none; border-radius: 0;
    min-height: 0;
  }
  .rv-volet__vue { display: none; }
  .rv-zons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --marge-2: 24px; --marge: 16px; --pas: 52px; }
  body.rv-corps { font-size: 16px; }
  .rv-avi { columns: 1; }
  .rv-srv, .rv-srv--bascule, .rv-bsq, .rv-bsq--bascule { flex-direction: column; align-items: stretch; }
  .rv-why__p, .rv-why__p--droite { width: auto; margin-left: 0; }
  .rv-zons, .rv-reas, .rv-mats, .rv-trfs, .rv-hero__at, .rv-frm__f, .rv-cer, .rv-prds, .rv-spc, .rv-blgs { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .rv-hero__pose { position: static; inset: auto; color: var(--texte); padding: 24px 0 0; max-width: none; }
  .rv-hero__pose .rv-sourcil { color: var(--marque); }
  .rv-hero__s { color: var(--texte-doux); }
  .rv-vitre--hero { height: 340px; }
  .rv-vitre--hero::after { display: none; }
  .rv-b--hero { padding-bottom: 8px; }
  .rv-pied__lg { text-align: left; }
  .rv-cta > .rv-vitre--cta { inset: 0 var(--marge-2); }
}

/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
   NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
   ------------------------------------------------------------
   R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
   etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
   s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
   cadre vide reste tenable quand il est GRAND ».

   C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
   composition fausse — les bandes de reference le prouvent : le hero de
   roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
   cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
   Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
   perdue. La coquille n embarque aucune photo — c est la regle — donc l
   etat vide n est pas un accident de fixture, c est l etat NORMAL d une
   coquille au repos. Il devait etre dessine, il ne l avait jamais ete.

   Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
   ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
   geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
   revient pas. Il ne pose que de la peinture et de l encre.

   Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
   dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
   `ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
   ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
   par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
   d appui qui passe a l echelle.

   Les quatre couleurs sont des variables : la fabrique les change comme elle
   change une palette.

   LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
   a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
   en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
   l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
   ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
   d une page claire. Un placeholder qui ne porte rien n a aucune raison
   d etre sombre.

   Le defaut est donc CLAIR : un emplacement en attente se lit comme une
   carte grise, c est la convention de tout le metier, et c est la version
   qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
   l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
   teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
   a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
   quelle encre tombe dans quel cadre, et ecrit la liste en queue du
   `style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
   ============================================================ */

:root {
  --cadre-vide-fond: #e6e9ec;
  --cadre-vide-trame: rgba(0, 0, 0, .045);
  --cadre-vide-encre: rgba(17, 22, 28, .68);
  --cadre-vide-filet: rgba(0, 0, 0, .10);
}

[data-slot]:not(:has(img)):not(:has(video)) {
  background-color: var(--cadre-vide-fond);
  /* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
     d affichage. Avec elle, il se lit comme un emplacement en attente. */
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
  color: var(--cadre-vide-encre);
  /* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
     VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
     une chose — permettre a la legende de savoir si son cadre est assez large
     pour la porter (voir le @container plus bas). Sans elle, la meme legende
     s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
  container-type: inline-size;
}

/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
   initiale du sujet — et cette initiale, dans un cadre de hero, sort a
   78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
   On la ramene a la taille d une legende, quelle que soit la taille du
   cadre : une legende ne grandit pas avec son cadre.

   Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
   assez large pour l ecrire sur une ligne lisible : une pastille de zone de
   28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
   tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
   d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
   du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
   electria. Le libelle n est pas perdu pour autant : les gabarits le portent
   deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.

   Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
   CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
   de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cadre-vide-encre);
  -webkit-text-fill-color: var(--cadre-vide-encre);
  opacity: 1;
  max-width: 34ch;
  text-align: center;
  text-shadow: none;
}

/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
   ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
  [data-slot]:not(:has(img)):not(:has(video)) > * {
    font-size: clamp(11px, .95vw, 14px) !important;
  }
}
/* <<< NORME COQUILLE — cadre vide */

/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Aucun cadre porteur : toute l encre de cette coquille repose sur ses
   sections, pas sur ses cadres. Les cadres vides restent clairs. */
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* >>> NORME COQUILLE — teinte manuelle : rv-vitre--hero (R4b)
   `_lib/teinter-cadres.mjs` a mesure ce cadre a 0 porteur — a tort. Deux
   causes, verifiees le 26 aout 2026 :
   1. `mediane()` sur un tableau a 2 valeurs prend l INDICE BAS
      ((n-1)>>1 = 0) : sur encres=[0.09, 0.92] (l accent souligne, sombre,
      et le sous-titre, clair) la mediane retombe sur la valeur sombre et
      le cadre ne franchit jamais LUMINANCE_CLAIRE (0.55), alors que R4b
      mesure bien une violation en pixels (contraste 2,23 et 3,07 pour
      2,23/3,07 < 4,5 requis, 1440/1024px, serrurier-montreuil et
      vitrier-colombes).
   2. Meme corrigee, la mediane, `LIRE_SOL` lit le fond de la SECTION
      derriere le cadre masque — ici `--fond` (#F8F5F2, clair) — et la
      regle `if (clair(fond)) return SOL_DEFAUT` renonce a assombrir.
      Cette coquille ne suit pas le modele « section sombre » : son voile
      vient d un ::after propre au cadre (`.rv-vitre--hero::after`,
      `--texte` a 46%), invisible a la mesure du fond de section.
   Le cadre est reellement porteur (l accent souligne a ete recale sur
   --accent juste au-dessus, coeur:true confirme par relevé direct). Le sol
   ci-dessous reprend --texte, la meme teinte que le ::after : la fusion
   d une couleur avec elle-meme a travers une opacite ne change rien au
   rendu, donc pas de dalle etrangere a la palette. Contraste verifie a la
   main contre --fond (0,92) et --accent (0,85) : > 13:1 dans les deux cas.
   Ne pas laisser un futur `node _lib/teinter-cadres.mjs template-18-renovia`
   effacer ce bloc sans revalider le gate : il retombera a 0 porteur pour
   les memes raisons tant que le script n est pas corrige. */
[data-slot="rv-vitre--hero"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: var(--texte);
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="rv-vitre--hero"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte manuelle : rv-vitre--hero */

/* >>> NORME COQUILLE — largeur manuelle : rv-map__plaque (T5)
   `.rv-map__plaque` est l enfant DIRECT du cadre vide `[data-slot="rv-vitre--map"]`
   (un `<figcaption>`), donc elle matche aussi la regle generique du cadre vide
   `[data-slot]:not(:has(img)):not(:has(video)) > * { max-width: 34ch; }` (ligne
   ~966). Cette regle generique est pensee pour UNE legende d un mot ou deux ;
   la plaque de devanture porte une carte entiere (titre + adresse + tags). Sa
   propre regle, `.rv-map__plaque { max-width: min(420px, ...) }`, est ecrite
   plus haut dans ce fichier avec la specificite d une simple classe — elle
   perd TOUJOURS face au `34ch` generique : `[data-slot]:not(:has(img)):not(:has(video)) > *`
   pese (0,1,2), une classe seule pese (0,1,0), et la position dans le fichier
   ne depage rien puisque (0,1,2) > (0,1,0) quel que soit l ordre (meme piege
   que R4b, voir le bloc juste au-dessus). Consequence mesuree le 26 aout 2026 :
   la plaque retombe a 213,955px au lieu de 420px, et `.rv-map__t` (24px,
   « Notre point d attache a … ») s y ecrase a 1,7 mot par ligne (T5).
   Correctif : reprendre EXACTEMENT la formule de largeur d origine, mais sur
   un selecteur qui gagne — le meme prefixe `[data-slot="rv-vitre--map"]:not(:has(img)):not(:has(video))`
   (specificite (0,2,2) une fois combine a `.rv-map__plaque`) bat la regle
   generique (0,1,2) par la deuxieme colonne, sans dependre de l ordre. */
[data-slot="rv-vitre--map"]:not(:has(img)):not(:has(video)) > .rv-map__plaque {
  max-width: min(420px, calc(100% - 2 * clamp(16px, 3vw, 40px)));
}
/* <<< NORME COQUILLE — largeur manuelle : rv-map__plaque */

/* === LOGO MARQUE (factory) : vrai logo.svg en lockup avec le nom dans le header === */
.zx-brandlogo{height:1.7em;width:auto;max-height:40px;vertical-align:middle;margin-right:.5em;object-fit:contain;border-radius:6px;flex:0 0 auto}
.zx-send{display:inline-block;margin-top:.6rem;padding:.85em 1.7em;border:0;border-radius:8px;background:var(--accent,var(--marque,#141414));color:var(--sur-marque,#fff);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.zx-send:hover{filter:brightness(1.08)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#c62828);font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}

/* === GARDE-FOU débordement horizontal mobile (factory, audit 04/09) === */
html,body{overflow-x:clip;max-width:100%}
img,video,iframe,table,svg{max-width:100%}