/* ════════════════════════════════════════════════════════════════════════
   ROY HABITAT — GUIDES PRATIQUES (aperçu de la phase 0, 29/10/2026)
   La page « Guides pratiques », la page de chaque guide et la fenêtre du pas à pas.
   Tout vient du fichier de données du guide : ce fichier ne connaît aucun guide en particulier.
   Couleurs et formes : charte relevée sur la page photovoltaïque (jetons.css du kit), la fenêtre
   reprend celle des simulateurs (sim-cadre.js) au pixel près : retrait de 12 px, quatre coins
   arrondis à 22 px, fond flouté, y compris au téléphone (règle de Vicenté du 03/10/2026).
   ════════════════════════════════════════════════════════════════════════ */

.rhg, .rhgf {
  --encre-titre: #2A2008; --encre: #1F2A18; --muted: #5C6653; --ligne: rgba(31,42,24,.12); --panneau: #F7F8F4;
  /* Métier : photovoltaïque par défaut (la passerelle, la batterie) */
  --m-profond: #3C6B16; --m: #4F8A1E; --m-clair: #7CB342; --m-vif: #8DC63F; --m-pale: #F2F8EA; --m-bord: #D9E9C6;
  --m-degrade: linear-gradient(135deg, #8DC63F, #3C6B16);
  --m-cta: linear-gradient(135deg, #5FB033 0%, #46902A 52%, #356E15 100%);
  --m-ombre: rgba(79,154,38,.32);
  /* Lueurs, numéros et titre de fin, à la couleur du pôle (02/11/2026 : le thermostat et la climatisation n'héritent plus du vert) */
  --m-rgb: 141,198,63; --m-rgb-fonce: 79,138,30; --m-num: linear-gradient(120deg,#8DC63F 0%,#5E9A26 55%,#3C6B16 100%); --m-fin: linear-gradient(135deg,#B5E07A,#8DC63F);
}
/* Chauffage : seul le dégradé du bouton est mesuré (héros des pages chauffage) ; le reste attend une mesure. */
[data-univers="chauffage"] { --m-cta: linear-gradient(135deg, #E8502F, #FF6B35); --m: #C9471F; --m-profond: #A63A17; --m-vif: #FF8C42;
  --m-pale: #FDF0EA; --m-bord: #F6D5C6; --m-degrade: linear-gradient(135deg, #FF8C42, #C44A1F); --m-ombre: rgba(232,80,47,.28);
  --m-clair: #FFA45C; --m-rgb: 255,140,66; --m-rgb-fonce: 201,71,31; --m-num: linear-gradient(120deg,#FFA45C 0%,#E85D2F 52%,#C44A1F 100%); --m-fin: linear-gradient(135deg,#FFC59A,#FF8C42); }

/* L'en-tête sur fond blanc : les liens de la ligne du haut à l'encre, et le logo en haut à gauche sur ordinateur (le thème
   cache celui de la barre en haut de page), comme les pages « Mon carnet » et « L'application ». */
body.rhg-page #header .topbar-secondary a { color: #1A1410 !important; text-shadow: none !important; }
body.rhg-page #header .topbar-secondary .tb-sep { color: rgba(26,20,16,.3) !important; }
body.rhg-page main { background: #fff; }
.rhg-logo { position: absolute; top: 40px; left: 24px; z-index: 3; display: block; width: 150px; }
.rhg-logo img { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) {
  .rhg-logo { display: none; }
  body.rhg-page #header:not(.scrolled) .nav-bar .logo { display: flex !important; }
}
.rhg { position: relative; font-family: Manrope, system-ui, sans-serif; color: var(--muted); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.rhg *, .rhgf * { box-sizing: border-box; }
.rhg h1, .rhg h2, .rhg h3 { font-family: Sora, system-ui, sans-serif; font-weight: 800; color: var(--encre-titre); margin: 0; }
.rhg p { margin: 0; }
.rhg b { color: var(--encre-titre); font-weight: 700; }
.rhg-l { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.rhg-accent { background: var(--m-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Sur la carte sombre de la fin, la fin du titre en clair (le dégradé du pôle serait trop sombre sur ce fond) */
.rhg-accent-fin { background: var(--m-fin); -webkit-background-clip: text; background-clip: text; }
/* Un titre en deux tons est un seul titre pour Google et les lecteurs d'écran : la seconde partie est un simple span. */

/* Surtitre en pastille, au-dessus de chaque titre de section */
.rhg-sur { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(var(--m-rgb-fonce),.22); font: 700 10.5px/1 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m-profond); }
.rhg-sur::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--m); box-shadow: 0 0 0 3px rgba(var(--m-rgb-fonce),.18); }

/* Boutons */
.rhg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--m-cta); color: #fff; border-radius: 14px; font: 700 16.5px/1.1 Manrope, sans-serif; padding: 17px 30px;
  box-shadow: 0 8px 24px 0 var(--m-ombre); -webkit-tap-highlight-color: transparent; }
.rhg-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.rhg-btn2 { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 22px; border-radius: 14px; background: #fff;
  border: 1px solid var(--ligne); color: var(--encre-titre); font: 700 15.5px/1.15 Manrope, sans-serif; box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); }
.rhg-btn2 small { display: block; font: 600 12px/1.2 Manrope, sans-serif; color: var(--muted); margin-top: 3px; }
.rhg-btn2 svg { width: 20px; height: 20px; color: var(--m); flex: 0 0 auto; }
.rhg-lien { color: var(--m-profond); font: 700 14.5px Manrope, sans-serif; text-decoration: none; }
.rhg-lien::after { content: ' →'; }
/* Un lien vers un autre guide écrit dans un texte (« voir la page commune ») n'avait ni couleur ni soulignement : on ne le
   voyait pas (pages Daikin, 02/11/2026). Même dessin que les renvois internes. */
.rhg a.rhg-renvoi, .rhg:not(.rhb) :is(p, li > span) > a:not([class]) { color: inherit; text-decoration: underline; text-decoration-color: var(--m-clair); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── Le téléphone : une vraie capture, l'anneau AUTOUR de ce qu'il faut toucher, le numéro À CÔTÉ ──────────────
   Même dessin que le PDF de l'atelier (guide.py, telephone()) : posé sur le bouton, le numéro cachait ce qu'il fallait
   toucher. Les repères sont en % de l'image (reperes.json de l'atelier) : ils suivent l'image à toutes les tailles. */
.rhg-tel { position: relative; display: block; padding: 5px; border-radius: 13.5%/6.2%; background: #100C0A;
  box-shadow: 0 26px 46px -26px rgba(26,20,16,.55), inset 0 0 0 1px #3a332e; }
.rhg-tel-e { position: relative; border-radius: 11.5%/5.3%; }
.rhg-tel img { display: block; width: 100%; height: auto; border-radius: 11.5%/5.3%; }
.rhg-ann { position: absolute; border-radius: 7px; box-shadow: 0 0 0 2px var(--m-vif), 0 0 11px 3px rgba(var(--m-rgb),.65); pointer-events: none; }
.rhg-ann.rond { border-radius: 50%; }
/* La taille du numéro suit la place entre deux cibles voisines (--ecart, en % de la hauteur de la capture, calculé à la
   construction) : 24 px quand il y a la place, moins sur une petite capture dense, jamais moins de 14 px. 1cqw = 1 % de la
   largeur de la capture, la hauteur vaut largeur / --rapport. */
.rhg-tel-e { container-type: inline-size; --pn: clamp(14px, calc(var(--ecart, 100) * 1cqw / var(--rapport, .5) - 3px), 24px); }
.rhg-num { position: absolute; z-index: 2; transform: translate(-50%,-50%); display: grid; place-items: center; width: var(--pn, 24px); height: var(--pn, 24px); border-radius: 50%;
  background: var(--m-num); color: #fff; font: 800 calc(var(--pn, 24px) * .54)/1 Sora, sans-serif;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(var(--m-rgb),.38), 0 7px 14px -4px rgba(30,50,10,.45); pointer-events: none; }
/* L'anneau respire doucement pour attirer l'œil (une seule fois par écran) ; rien sous « moins d'animations ». */
@media (prefers-reduced-motion: no-preference) {
  .rhgf .rhg-ann { animation: rhgAnn 1.6s ease-out .25s 2; }
  @keyframes rhgAnn { 0% { box-shadow: 0 0 0 2px var(--m-vif), 0 0 11px 3px rgba(var(--m-rgb),.65); }
                      45% { box-shadow: 0 0 0 2px var(--m-vif), 0 0 0 9px rgba(var(--m-rgb),.22), 0 0 16px 6px rgba(var(--m-rgb),.5); }
                      100% { box-shadow: 0 0 0 2px var(--m-vif), 0 0 11px 3px rgba(var(--m-rgb),.65); } }
}

/* Étiquettes de verre, posées sur le bord du téléphone */
.rhg-verre { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 16px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 20px 44px -22px rgba(20,24,31,.5); font: 700 13.5px/1.2 Sora, sans-serif; color: var(--encre); white-space: nowrap; }
.rhg-verre small { display: block; font: 600 11.5px/1.25 Manrope, sans-serif; color: var(--muted); margin-top: 2px; }
.rhg-verre i { width: 9px; height: 9px; border-radius: 50%; background: var(--m-vif); box-shadow: 0 0 0 4px rgba(var(--m-rgb),.22); flex: 0 0 auto; }

/* ═══ PAGE D'UN GUIDE ═════════════════════════════════════════════════ */
.rhg-haut { position: relative; padding: 150px 0 70px; }
.rhg-haut::before { content: ''; position: absolute; inset: -40px 0 auto; height: 620px; pointer-events: none;
  background: radial-gradient(closest-side at 78% 42%, rgba(var(--m-rgb),.14), transparent), radial-gradient(closest-side at 12% 18%, rgba(239,203,51,.08), transparent); }
.rhg-haut .rhg-l { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 56px; align-items: center; }
.rhg-retour { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 Manrope, sans-serif; color: var(--muted); text-decoration: none; margin-bottom: 18px; }
.rhg-retour:hover { color: var(--m-profond); }
.rhg-haut h1 { font-size: clamp(34px, 4.1vw, 54px); letter-spacing: -.03em; line-height: 1.08; margin-top: 16px; }
.rhg-haut h1 .rhg-accent { display: block; }
.rhg-chapo { font-size: 18px; line-height: 1.62; margin-top: 20px !important; max-width: 640px; }
.rhg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.rhg-meta { margin-top: 20px !important; font-size: 13px; line-height: 1.55; color: #5F6553; max-width: 620px; }
.rhg-meta b { color: var(--encre); }
.rhg-haut-vis { position: relative; justify-self: center; width: min(100%, 270px); }
.rhg-haut-vis .rhg-verre:nth-of-type(1) { left: -118px; top: 54%; }
.rhg-haut-vis .rhg-verre:nth-of-type(2) { right: -96px; top: 20%; }

/* « Quelle est votre situation ? » : la question du pas à pas, déjà posée sur la page */
.rhg-sit { padding: 10px 0 70px; }
.rhg-sit h2 { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.rhg-sit-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 18px; }
.rhg-sit-c { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 18px 18px; border-radius: 20px; cursor: pointer;
  background: #fff; border: 1px solid var(--ligne); box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); font: inherit; color: inherit;
  transition: border-color .2s, transform .2s; -webkit-tap-highlight-color: transparent; }
.rhg-sit-c:hover { border-color: var(--m-clair); transform: translateY(-2px); }
.rhg-sit-c .i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--m-pale); color: var(--m); flex: 0 0 auto; }
.rhg-sit-c b { display: block; font: 700 16px/1.25 Sora, sans-serif; letter-spacing: -.02em; color: var(--encre-titre); }
.rhg-sit-c small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.rhg-sit-c .f { margin-left: auto; color: var(--m); flex: 0 0 auto; }

/* « Avant de commencer » : la carte d'identité de l'appareil et ce qu'il faut */
.rhg-fiche { padding: 30px 0 80px; }
.rhg-fiche-g { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 22px; margin-top: 26px; }
.rhg-carte { background: #fff; border: 1px solid var(--ligne); border-radius: 24px; box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); padding: 26px; }
.rhg-id-nom { font: 800 40px/1 Sora, sans-serif; letter-spacing: -.03em; }
.rhg-id-sous { font-size: 13.5px; margin-top: 8px !important; }
.rhg-faits { margin: 18px 0 0; padding: 0; list-style: none; }
.rhg-faits li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ligne); font-size: 15px; line-height: 1.5; }
.rhg-faits li span { font: 700 13px/1.4 Sora, sans-serif; color: var(--encre); }
.rhg-besoins { margin: 14px 0 0; padding: 0; list-style: none; }
.rhg-besoins li { position: relative; padding: 11px 0 11px 34px; border-top: 1px solid var(--ligne); font-size: 14.5px; line-height: 1.5; }
.rhg-besoins li:first-child { border-top: 0; }
.rhg-besoins li::before { content: ''; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--m-pale)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%234F8A1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.rhg-besoins b { display: block; font: 700 15px/1.3 Sora, sans-serif; letter-spacing: -.01em; }
.rhg-h3c { font: 800 21px/1.15 Sora, sans-serif; letter-spacing: -.02em; color: var(--encre-titre); }
.rhg-deux { margin-top: 16px !important; padding: 14px 16px; border-radius: 16px; background: var(--panneau); font-size: 14.5px; line-height: 1.55; }

/* Les sections du guide, dans l'ordre du PDF */
.rhg-sec { position: relative; padding: 80px 0; }
.rhg-sec + .rhg-sec { border-top: 1px solid rgba(31,42,24,.07); }
.rhg-sec h2 { font-size: clamp(30px, 3.3vw, 42px); letter-spacing: -.026em; line-height: 1.08; margin-top: 16px; }
.rhg-sec-intro { font-size: 17px; line-height: 1.66; margin-top: 16px !important; max-width: 760px; }
/* Une section à une capture : texte à gauche, téléphone à droite */
.rhg-duo { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 60px; align-items: start; margin-top: 34px; }
.rhg-duo .rhg-colt { order: 0; }
.rhg-pas { margin: 0; padding: 0; list-style: none; counter-reset: pas; }
.rhg-pas > li { position: relative; padding: 18px 0 18px 58px; border-top: 1px solid var(--ligne); }
.rhg-pas > li:first-child { border-top: 0; }
.rhg-pas > li::before { counter-increment: pas; content: counter(pas); position: absolute; left: 0; top: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--m-degrade); color: #fff; font: 800 16px/1 Sora, sans-serif; box-shadow: 0 8px 18px -8px var(--m-ombre); }
.rhg-pas h3 { font: 700 18px/1.25 Sora, sans-serif; letter-spacing: -.02em; }
.rhg-pas p { font-size: 15.5px; line-height: 1.6; margin-top: 5px !important; }
/* « C'est bon quand… » : toujours la même forme, sur la page et dans la fenêtre */
.rhg-ok { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px !important; padding: 10px 13px; border-radius: 13px; background: var(--m-pale);
  border: 1px solid var(--m-bord); font-size: 14px; line-height: 1.5; color: #3F5E2A; }
.rhg-ok::before { content: ''; flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--m)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3L14.6 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.rhg-ok b { color: #2F4A1C; }
.rhg-ok em { font-style: normal; font-weight: 700; color: #2F4A1C; }
.rhg-cap { position: relative; justify-self: center; width: min(100%, 250px); padding: 0 34px; box-sizing: content-box; }
.rhg-leg { display: flex; gap: 10px; margin-top: 18px !important; font-size: 14.5px; line-height: 1.55; }
.rhg-leg .rhg-nums { display: flex; gap: 4px; flex: 0 0 auto; }
.rhg-leg .rhg-nums span { position: static; transform: none; width: 22px; height: 22px; font-size: 11.5px; --pn: 22px; }
.rhg-renv { margin-top: 26px !important; padding: 4px 0 4px 16px; border-left: 3px solid var(--m-vif); font-size: 15px; line-height: 1.6; max-width: 820px; }
/* Une section à plusieurs captures : une rangée de téléphones, chacun avec son numéro, son titre et sa consigne */
.rhg-rang { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 34px; margin-top: 40px; }
.rhg-rang[style*="--n:2"] { max-width: 820px; }
.rhg-et { display: flex; flex-direction: column; }
.rhg-et .rhg-cap { width: min(calc(100% - 60px), 230px); padding: 0 30px; align-self: center; }
/* Largeur donnée, pas « auto » : la capture porte container-type (taille des numéros), et un bloc qui prendrait la largeur de
   son contenu tomberait à zéro (téléphones de 10 px dans les rangées, relevé le 02/11/2026 sur l'ECU-C et la batterie). */
.rhg-et-t { display: flex; gap: 11px; align-items: flex-start; margin-top: 24px; }
.rhg-et-t .ns { display: flex; gap: 4px; flex: 0 0 auto; }
.rhg-et-t .n { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--m-degrade); color: #fff; font: 800 14px/1 Sora, sans-serif; }
.rhg-et-t h3 { font: 700 17px/1.25 Sora, sans-serif; letter-spacing: -.02em; padding-top: 4px; }
.rhg-et p { font-size: 15px; line-height: 1.6; margin-top: 8px !important; }
.rhg-et .rhg-ok { font-size: 13.5px; }
.rhg-ouvrir-ici { align-self: flex-start; margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer; font: 700 13.5px Manrope, sans-serif; color: var(--m-profond); }
.rhg-ouvrir-ici::after { content: ' →'; }
.rhg-loupe { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; margin-top: 34px; padding: 18px; border-radius: 22px; background: var(--panneau); max-width: 820px; }
.rhg-loupe img { width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: 14px; display: block; box-shadow: 0 14px 30px -20px rgba(20,24,31,.5); }
/* height:auto et object-fit : une photo en hauteur (un thermostat) posée en loupe était étirée à la hauteur de son fichier (02/11/2026) */
.rhg-loupe p { font-size: 15px; line-height: 1.6; }
/* Vérifier : un panneau clair, le téléphone et les causes */
.rhg-verif { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; margin-top: 34px; align-items: start; }
/* height:auto (02/11/2026) : sans lui, l'image « C'est bon quand » gardait la hauteur de son fichier et s'écrasait en largeur
   (signal.jpg de Marstek affiché 280 × 1174 au lieu de 280 × 560) ; idem dans la fenêtre (.rhgf-imok, .rhgf-dep img). */
.rhg-imok { display: block; width: 100%; height: auto; max-width: 280px; margin-top: 10px; border-radius: 12px; box-shadow: 0 12px 26px -20px rgba(20,24,31,.5); }
.rhg-ok-grand, .rhg-verif .rhg-ok { font-size: 16px; padding: 16px 18px; border-radius: 18px; margin-top: 0 !important; }
.rhg-ok-grand::before, .rhg-verif .rhg-ok::before { flex-basis: 22px; height: 22px; background-size: 22px; }
.rhg-causes { margin: 18px 0 0; padding: 0; list-style: none; }
.rhg-causes li { padding: 14px 0; border-top: 1px solid var(--ligne); }
.rhg-causes h4 { margin: 0; color: var(--encre-titre); font: 700 16.5px/1.3 Sora, sans-serif; letter-spacing: -.015em; }
.rhg-causes p { font-size: 15px; line-height: 1.6; margin-top: 4px !important; }

/* Les voyants */
.rhg-voy { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.rhg-voy .rhg-carte { padding: 22px; }
.rhg-voy-t { display: flex; align-items: center; gap: 12px; font: 800 20px/1 Sora, sans-serif; color: var(--encre-titre); }
.rhg-voy-t i { width: 16px; height: 16px; border-radius: 50%; background: #5DBB2A; box-shadow: 0 0 0 5px rgba(93,187,42,.18), 0 0 14px 2px rgba(93,187,42,.55); }
.rhg-voy-t i.rouge { background: #E2412B; box-shadow: 0 0 0 5px rgba(226,65,43,.16), 0 0 14px 2px rgba(226,65,43,.5); }
.rhg-voy p { font-size: 15px; line-height: 1.6; margin-top: 12px !important; }
.rhg-att { display: flex; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: 20px; background: #FDF1EA; border: 1px solid #F6D9C8; max-width: 820px; }
.rhg-att .i { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #C44A1F; }
.rhg-att b { display: block; font: 700 16.5px/1.3 Sora, sans-serif; color: #7A3212; }
.rhg-att p { font-size: 15px; line-height: 1.6; margin-top: 4px !important; color: #6B4A36; }
.rhg-att p b { display: inline; font: inherit; font-weight: 700; color: #7A3212; }

/* Toujours bloqué : la seule carte sombre de la page — le formulaire d'abord, le téléphone ensuite */
.rhg-fin { padding: 30px 0 90px; }
.rhg-fin-c { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 46px; padding: 46px; border-radius: 28px;
  background: #0C0704; color: rgba(255,255,255,.78); }
.rhg-fin-c::before { content: ''; position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--m-rgb),.22), transparent); pointer-events: none; }
.rhg-fin-c h2 { color: #fff; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.026em; line-height: 1.08; }
.rhg-fin-c h2 .rhg-accent { display: block; }
.rhg-fin-c p { font-size: 16.5px; line-height: 1.62; margin-top: 16px !important; }
.rhg-fin-c .rhg-btn { margin-top: 26px; background: #fff; color: #1A1410; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.rhg-appel { display: block; margin-top: 16px !important; font-size: 15px; color: rgba(255,255,255,.7); }
.rhg-appel a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rhg-prep { position: relative; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.rhg-prep-t { font: 700 11px/1 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m-vif); }
.rhg-prep ul { margin: 12px 0 0; padding: 0; list-style: none; }
.rhg-prep li { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 1.5; }
.rhg-prep li:first-child { border-top: 0; }
.rhg-prep li b { display: block; font: 700 15px/1.3 Sora, sans-serif; color: #fff; }

/* Pied du guide : source, indépendance, liens */
.rhg-pied { padding: 0 0 90px; }
.rhg-pied-g { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
.rhg-src { font-size: 13.5px; line-height: 1.6; color: #5F6553; }
.rhg-src b { color: var(--encre); }
.rhg-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.rhg-liens a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne);
  font: 700 14px/1 Manrope, sans-serif; color: var(--encre); text-decoration: none; box-shadow: 0 10px 24px -20px rgba(20,24,31,.5); }
.rhg-liens a::after { content: '→'; color: var(--m); }

/* ═══ PAGE « GUIDES PRATIQUES » ═══════════════════════════════════════ */
.rhg-liste-haut { position: relative; padding: 150px 0 40px; }
.rhg-liste-haut::before { content: ''; position: absolute; inset: -40px 0 auto; height: 560px; pointer-events: none;
  background: radial-gradient(closest-side at 82% 38%, rgba(var(--m-rgb),.12), transparent), radial-gradient(closest-side at 60% 8%, rgba(68,160,212,.06), transparent),
              radial-gradient(closest-side at 8% 30%, rgba(239,203,51,.08), transparent); }
.rhg-liste-haut .rhg-l { position: relative; }
.rhg-quadri { display: flex; gap: 7px; margin-bottom: 22px; }
.rhg-quadri span { height: 7px; width: 28px; border-radius: 4px; background: #EFCB33; }
.rhg-quadri span:nth-child(2) { background: #7BAF34; }
.rhg-quadri span:nth-child(3) { background: #44A0D4; }
.rhg-quadri span:nth-child(4) { background: #E46627; }
.rhg-quadri span.on { width: 74px; }
.rhg-liste-haut h1 { font-size: clamp(38px, 4.8vw, 62px); letter-spacing: -.03em; line-height: 1.06; max-width: 900px; }
.rhg-liste-haut .rhg-chapo { max-width: 700px; }
.rhg-univ { padding: 50px 0 30px; }
.rhg-univ-t { display: flex; align-items: center; gap: 14px; }
.rhg-univ-h { margin: 0; font-size: inherit; line-height: 1; }
.rhg-univ-t .rhg-nb { font: 600 13px/1 Manrope, sans-serif; color: #5F6553; }
.rhg-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 20px; margin-top: 22px; }
.rhg-gc { position: relative; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 24px; align-items: center; padding: 22px 24px 22px 22px;
  background: #fff; border: 1px solid var(--ligne); border-radius: 24px; box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); }
.rhg-gc-vis { position: relative; display: grid; place-items: center; height: 214px; border-radius: 18px; background: var(--panneau); overflow: hidden; }
.rhg-gc-vis .rhg-tel { width: 104px; padding: 3px; transform: translateY(30px); }
.rhg-gc-vis img.photo { width: 82%; height: auto; display: block; }
.rhg-gc-type { font: 700 10.5px/1 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m-profond); }
.rhg-gc h3 { font: 700 20px/1.22 Sora, sans-serif; letter-spacing: -.025em; margin-top: 9px; }
.rhg-gc h3 a { color: inherit; text-decoration: none; }
.rhg-gc h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }   /* toute la carte mène à la page du guide */
.rhg-gc p { font-size: 14.5px; line-height: 1.55; margin-top: 8px !important; }
.rhg-gc-a { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 16px; }
.rhg-gc-a .rhg-btn { padding: 12px 18px; font-size: 14.5px; border-radius: 12px; }
.rhg-gc-a a.pdf { font: 700 13.5px/1 Manrope, sans-serif; color: var(--encre); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.rhg-gc-a a.pdf svg { width: 16px; height: 16px; color: var(--m); }
.rhg-absent { padding: 40px 0 100px; }
.rhg-absent .rhg-carte { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; padding: 30px 34px; background: var(--panneau); box-shadow: none; border: 0; }
.rhg-absent h2 { font-size: 26px; letter-spacing: -.02em; }
.rhg-absent p { font-size: 15.5px; line-height: 1.6; margin-top: 8px !important; max-width: 620px; }
.rhg-absent .rhg-appel { color: var(--muted); }
.rhg-absent .rhg-appel a { color: var(--encre-titre); }
.rhg-indep { margin-top: 22px !important; font-size: 13px; color: #5F6553; }

/* ═══ TÉLÉPHONE ET TABLETTE ══════════════════════════════════════════ */
@media (max-width: 980px) {
  .rhg-haut .rhg-l, .rhg-duo, .rhg-verif, .rhg-fin-c, .rhg-fiche-g, .rhg-pied-g { grid-template-columns: minmax(0,1fr); }
  .rhg-haut-vis { width: min(62%, 240px); margin-top: 6px; }
  .rhg-haut-vis .rhg-verre:nth-of-type(1) { left: -96px; }
  .rhg-haut-vis .rhg-verre:nth-of-type(2) { right: -86px; }
  .rhg-voy { grid-template-columns: minmax(0,1fr); }
  .rhg-rang { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 700px) {
  .rhg-l { padding: 0 16px; }
  .rhg-haut, .rhg-liste-haut { padding-top: 112px; }
  .rhg-haut { padding-bottom: 46px; }
  .rhg-chapo { font-size: 16.5px; }
  .rhg-actions .rhg-btn, .rhg-actions .rhg-btn2 { width: 100%; justify-content: center; }
  .rhg-haut-vis { width: 200px; }
  .rhg-haut-vis .rhg-verre { font-size: 12.5px; padding: 9px 12px; }
  .rhg-haut-vis .rhg-verre:nth-of-type(1) { left: -64px; top: 62%; }
  .rhg-haut-vis .rhg-verre:nth-of-type(2) { right: -58px; top: 1.5%; }
  .rhg-sec { padding: 56px 0; }
  .rhg-sit { padding-bottom: 46px; }
  .rhg-faits li { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .rhg-carte { padding: 20px; }
  /* Au téléphone, les étapes à plusieurs captures défilent de côté, une capture par écran, sans faire déborder la page */
  .rhg-rang { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 30px -16px 0; padding: 0 16px 10px; scrollbar-width: none; }
  .rhg-rang::-webkit-scrollbar { display: none; }
  .rhg-rang > .rhg-et { flex: 0 0 84%; scroll-snap-align: center; }
  .rhg-rang-aide { display: block !important; }
  .rhg-loupe { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .rhg-fin-c { padding: 28px 22px; gap: 26px; border-radius: 24px; }
  .rhg-gc { grid-template-columns: 104px minmax(0,1fr); gap: 16px; padding: 16px; }
  .rhg-gc-vis { height: 170px; }
  .rhg-gc-vis .rhg-tel { width: 82px; transform: translateY(26px); }
  .rhg-gc h3 { font-size: 17.5px; }
  .rhg-absent .rhg-carte { padding: 24px 20px; }
}
.rhg-rang-aide { display: none; margin-top: 4px; font: 600 12.5px/1.3 Manrope, sans-serif; color: #5F6553; }

/* ═══ LA FENÊTRE DU PAS À PAS ════════════════════════════════════════
   Copie des valeurs de sim-cadre.js (.rs-fond, .rs) : mêmes retraits, mêmes coins, même flou. */
.rhgf-fond { position: fixed; inset: 0; z-index: 99990; background: rgba(26,21,16,.34); -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.rhgf { position: relative; width: 100%; max-width: 470px; max-height: 100%; display: flex; flex-direction: column; background: #FDFCFA; border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(20,14,8,.55); font-family: Manrope, system-ui, sans-serif; color: #1A1510; -webkit-font-smoothing: antialiased; overflow: hidden; }
@media (min-width: 620px) { .rhgf { max-height: 92vh; } }
/* Le corps défile, la barre du haut et les boutons du bas restent visibles : au téléphone, « C'est fait » et « Ça ne marche
   pas » ne doivent jamais se trouver sous le bord de l'écran. */
.rhgf-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 8px; }
.rhgf-tete { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 14px; }
.rhgf-tete .nom { flex: 1; min-width: 0; font: 700 12px/1.25 Sora, sans-serif; color: #6B6357; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhgf-r { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); cursor: pointer; color: #1A1510; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; }
.rhgf-r[hidden] { display: none; }
.rhgf-prog { display: flex; gap: 5px; margin: 0 0 12px; }
.rhgf-prog i { flex: 1; height: 5px; border-radius: 99px; background: #EDE8E0; }
.rhgf-prog i.on { background: var(--m-vif); }
.rhgf-k { font: 800 10.5px/1.2 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m-profond); }
/* Le titre de chaque écran reçoit le focus (lecteurs d'écran) : pas de cadre de focus visible pour autant. */
.rhgf [tabindex="-1"]:focus { outline: none; }
.rhgf-h1 { font: 800 24px/1.13 Sora, sans-serif; letter-spacing: -.025em; margin: 6px 0 0; color: #1A1510; }
.rhgf-h2 { font: 800 21px/1.15 Sora, sans-serif; letter-spacing: -.02em; margin: 6px 0 0; color: #1A1510; }
.rhgf-sous { font-size: 14px; color: #6B6357; line-height: 1.5; margin: 8px 0 0; }
.rhgf-choix { display: grid; gap: 9px; margin-top: 18px; }
.rhgf-c { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 15px 15px; border-radius: 16px; background: #fff; border: 1.5px solid #EDE6DC;
  font: inherit; color: #1A1510; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s; }
.rhgf-c:hover, .rhgf-c:focus-visible { border-color: var(--m-clair); background: var(--m-pale); outline: 0; }
.rhgf-c b { display: block; font: 800 15px/1.25 Sora, sans-serif; letter-spacing: -.01em; }
.rhgf-c small { display: block; font-size: 12.5px; color: #6B6357; margin-top: 3px; line-height: 1.35; }
.rhgf-c .f { margin-left: auto; color: var(--m); flex: 0 0 auto; }
.rhgf-reprise { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 13px 14px; border-radius: 16px; background: var(--m-pale); border: 1px solid var(--m-bord); }
.rhgf-reprise div { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: #3F5E2A; }
.rhgf-reprise b { display: block; font: 800 13.5px/1.3 Sora, sans-serif; color: #2F4A1C; }
.rhgf-reprise button { flex: 0 0 auto; border: 0; border-radius: 11px; padding: 10px 13px; background: var(--m-cta); color: #fff; font: 800 13px/1 Sora, sans-serif; cursor: pointer; }
/* L'écran d'une étape : la capture tient dans la hauteur, quelle que soit la fenêtre */
.rhgf-cap { position: relative; margin: 14px auto 0; width: fit-content; padding: 0 34px; }
.rhgf-cap .rhg-tel { width: calc(var(--rapport) * clamp(220px, 37vh, 400px)); max-width: 100%; }
/* Au téléphone (844 px de haut), 37 % de la hauteur laisse voir la consigne ET « C'est bon quand… » au-dessus des boutons, sans
   défiler, pour une consigne de quatre lignes (mesuré au banc). Sur un grand écran, la capture grandit un peu. */
@media (min-height: 860px) and (min-width: 620px) { .rhgf-cap .rhg-tel { width: calc(var(--rapport) * clamp(220px, 40vh, 400px)); } }
.rhgf-consigne { font-size: 15.5px; line-height: 1.55; color: #2B2420; margin: 16px 0 0; }
.rhgf-consigne b { font-weight: 800; color: #1A1510; }
.rhgf-note { margin: 10px 0 0; padding: 4px 0 4px 13px; border-left: 3px solid var(--m-vif); font-size: 13.5px; line-height: 1.5; color: #5A5148; }
.rhgf-note b { color: #1A1510; }
.rhgf-bas .rhg-ok { margin: 0 0 10px !important; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; border-radius: 12px; }
.rhgf-bas { flex: 0 0 auto; padding: 12px 18px 18px; background: #FDFCFA; box-shadow: 0 -12px 18px -14px rgba(26,21,16,.18); }
.rhgf-bas.plat { box-shadow: none; }
.rhgf-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; text-align: center; text-decoration: none; font: 800 15px/1.2 Sora, sans-serif;
  padding: 15px; border-radius: 14px; border: 0; cursor: pointer; color: #fff; background: var(--m-cta); box-shadow: 0 8px 20px -8px var(--m-ombre); -webkit-tap-highlight-color: transparent; }
.rhgf-cta2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center; text-decoration: none; font: 700 14px/1.2 Sora, sans-serif;
  padding: 13px; border-radius: 14px; color: #5A4E44; background: #fff; border: 1px solid #E8E1D7; margin-top: 9px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rhgf-cta2.bloque { color: #8A3B1A; border-color: #F1D6C7; }
.rhgf-pied { font-size: 11.5px; color: #6B6357; text-align: center; margin-top: 10px; line-height: 1.45; }
.rhgf-pied a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* « Ça ne marche pas » : les causes de CETTE étape, puis la suite */
.rhgf-dep { margin-top: 16px; display: grid; gap: 10px; }
.rhgf-dep > div { padding: 14px 15px; border-radius: 16px; background: #fff; border: 1px solid #EFE9E0; box-shadow: 0 8px 22px -16px rgba(26,21,16,.25); }
.rhgf-dep b.t { display: block; font: 800 14.5px/1.3 Sora, sans-serif; color: #1A1510; }
.rhgf-dep p { font-size: 14px; line-height: 1.55; color: #4A423A; margin: 5px 0 0; }
.rhgf-dep p b { color: #1A1510; }
.rhgf-dep img { display: block; width: 100%; height: auto; max-width: 260px; margin-top: 10px; border-radius: 12px; }
.rhgf-dep .suivre { margin-top: 10px; border: 0; background: none; padding: 0; font: 800 13.5px Sora, sans-serif; color: var(--m-profond); cursor: pointer; }
.rhgf-dep .suivre::after { content: ' →'; }
/* Fins */
.rhgf-coche { width: 64px; height: 64px; border-radius: 50%; margin: 10px auto 0; display: grid; place-items: center; background: var(--m-cta); color: #fff; box-shadow: 0 12px 26px -10px var(--m-ombre); }
.rhgf-centre { text-align: center; }
.rhgf-prep { margin-top: 16px; padding: 14px 15px; border-radius: 16px; background: #fff; border: 1px solid #EFE9E0; }
.rhgf-prep .t { font: 800 10.5px/1 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m-profond); }
.rhgf-prep ul { margin: 8px 0 0; padding: 0; list-style: none; }
.rhgf-prep li { padding: 8px 0; border-top: 1px solid #F4F0EA; font-size: 12.8px; line-height: 1.45; color: #6B6357; }
.rhgf-prep li:first-child { border-top: 0; }
.rhgf-prep li b { display: block; font: 700 13.5px/1.3 Sora, sans-serif; color: #1A1510; }
.rhgf-appel { display: block; text-align: center; margin-top: 12px; font-size: 13.5px; color: #5A5148; }
.rhgf-appel a { color: #1A1510; font-weight: 800; text-decoration: none; white-space: nowrap; }
.rhgf-voy { margin-top: 16px; display: grid; gap: 9px; }
.rhgf-voy > div { display: flex; gap: 12px; padding: 13px 14px; border-radius: 15px; background: #fff; border: 1px solid #EFE9E0; font-size: 13.5px; line-height: 1.5; color: #4A423A; }
.rhgf-voy i { flex: 0 0 13px; height: 13px; margin-top: 3px; border-radius: 50%; background: #5DBB2A; box-shadow: 0 0 0 4px rgba(93,187,42,.18); }
.rhgf-voy i.rouge { background: #E2412B; box-shadow: 0 0 0 4px rgba(226,65,43,.16); }
.rhgf-voy i.blanc, .rhg-voy-t i.blanc { background: #fff; box-shadow: 0 0 0 1.5px #CFC8BE, 0 0 0 5px rgba(207,200,190,.25); }
/* Jaune et éteint (onduleur Huawei, 02/11/2026) : sans eux, « Jaune fixe » et « Éteint » prenaient la pastille verte par défaut.
   Couleurs du PDF de l'atelier. */
.rhgf-voy i.jaune, .rhg-voy-t i.jaune { background: #F2B531; box-shadow: 0 0 0 4px rgba(242,181,49,.2), 0 0 12px 2px rgba(242,181,49,.4); }
.rhgf-voy i.eteint, .rhg-voy-t i.eteint { background: #4A423C; box-shadow: inset 0 0 0 1.5px #7D746C; }
.rhgf-voy i.bleu, .rhg-voy-t i.bleu { background: #3B8FD9; box-shadow: 0 0 0 4px rgba(59,143,217,.18), 0 0 12px 2px rgba(59,143,217,.4); }
/* min-width : les textes des codes s'alignent (U2 et U0 n'ont pas la même largeur) ; max-width : une pastille de six codes
   (« PH, PA, P9, CC, CA, U7 ») passe à la ligne au lieu d'écraser son texte au téléphone (codes Daikin, 02/11/2026) */
.rhgf-voy .code, .rhg-code { flex: 0 0 auto; align-self: flex-start; padding: 4px 8px; border-radius: 8px; background: #1A1410; color: #fff; font: 800 11.5px/1.2 Sora, sans-serif; letter-spacing: .02em; min-width: 34px; max-width: 34%; text-align: center; }
.rhgf-voy b.n { display: block; font: 800 14px/1.2 Sora, sans-serif; color: #1A1510; margin-bottom: 2px; }
.rhgf .rhg-att { margin-top: 12px; padding: 13px 14px; border-radius: 15px; gap: 12px; }
.rhgf .rhg-att .i { flex-basis: 30px; height: 30px; border-radius: 10px; }
.rhgf .rhg-att b { font-size: 14px; }
.rhgf .rhg-att p { font-size: 13px; }
/* Les écrans glissent d'un pas sur le côté ; jamais sous « moins d'animations » */
@media (prefers-reduced-motion: no-preference) {
  .rhgf-corps.av { animation: rhgAv .26s cubic-bezier(.2,.7,.2,1); }
  .rhgf-corps.ar { animation: rhgAr .26s cubic-bezier(.2,.7,.2,1); }
  @keyframes rhgAv { from { opacity: 0; transform: translateX(22px); } }
  @keyframes rhgAr { from { opacity: 0; transform: translateX(-22px); } }
  .rhgf-fond { animation: rhgFond .2s ease-out; }
  @keyframes rhgFond { from { opacity: 0; } }
}

/* Groupes facultatifs des voyants (autre appareil, application, codes) */
.rhg-voy-g { margin-top: 34px; }
.rhg-voy-g .rhg-h3c { margin-bottom: 4px; }
.rhg-codes { margin: 14px 0 0; padding: 0; list-style: none; max-width: 820px; }
.rhg-codes li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--ligne); font-size: 15px; line-height: 1.55; }
/* Seul le titre du code passe à la ligne : un mot en gras dans le texte reste dans la phrase (relevé sur le thermostat, 02/11/2026) */
.rhg-codes li > span > b:first-child { display: block; font: 700 15.5px/1.3 Sora, sans-serif; color: var(--encre-titre); }
.rhgf-imok { display: block; width: 100%; height: auto; max-width: 260px; margin: 12px auto 0; border-radius: 12px; }

/* Cibles tactiles d'au moins 44 px (relecture du 29/10) : la zone de toucher grandit, le dessin reste celui des simulateurs. */
.rhgf-r { position: relative; }
.rhgf-r::after { content: ''; position: absolute; inset: -4px; }
.rhgf-reprise button { min-height: 44px; }
.rhgf-dep .suivre, .rhg-ouvrir-ici { display: inline-flex; align-items: center; min-height: 44px; }
.rhgf-appel a, .rhgf-pied a, .rhg-appel a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
.rhg-retour { min-height: 44px; margin-bottom: 4px; }
/* Petits téléphones (iPhone SE, Android de 640 px) : la capture rapetisse pour que la consigne reste visible sans défiler. */
@media (max-height: 760px) { .rhgf-tete { padding-top: 10px; padding-bottom: 6px; } }
/* Sur un écran court (iPhone SE : 667 px), la consigne passe AVANT la capture : au banc, elle tombait sous les boutons sur 13 écrans
   d'étape sur 35 (19 sur 35 à 640 px). Le texte dit quoi faire, la capture juste dessous montre où. */
@media (max-height: 760px) {
  .rhgf-corps { display: flex; flex-direction: column; }
  .rhgf-corps > * { flex: 0 0 auto; }
  .rhgf-corps > .rhgf-cap, .rhgf-corps > .rhgf-imok, .rhgf-corps > .rhgf-vis { order: 2; }
  .rhgf-corps > .rhgf-cap { margin-top: 12px; }
}
@media (max-width: 360px) { .rhg-haut-vis .rhg-verre:nth-of-type(1) { left: -44px; } .rhg-haut-vis .rhg-verre:nth-of-type(2) { right: -40px; } }

/* Fin « toujours bloqué » : la ligne pour les installations posées par une autre entreprise */
.rhg-autres { font-size: 14.5px !important; line-height: 1.6; color: rgba(255,255,255,.66); margin-top: 18px !important; }
.rhg-autres a { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--m-rgb),.7); text-underline-offset: 3px; }
.rhgf-autres { font-size: 13px; line-height: 1.5; color: #6B6357; text-align: center; margin: 12px 0 0; }
.rhgf-autres a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 12px 2px; margin: -12px -2px; }

/* ═══ Les dessins du PDF : schéma (pictogrammes reliés) et face de l'appareil (voyants) ═══ */
.rhg-sch { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 6px; max-width: 640px; }
.rhg-sch-el { flex: 0 0 auto; width: 118px; text-align: center; }
.rhg-sch-t { position: relative; width: 84px; height: 84px; margin: 0 auto; border-radius: 24px; background: #fff; border: 1px solid var(--ligne, rgba(31,42,24,.12));
  display: grid; place-items: center; color: #2A2008; box-shadow: 0 16px 30px -22px rgba(20,24,31,.5); }
.rhg-sch-t svg { width: 52px; height: 52px; }
.rhg-sch-n { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--m-num); color: #fff; font: 800 12.5px/1 Sora, sans-serif; box-shadow: 0 0 0 2px #fff; }
.rhg-sch-el b { display: block; margin-top: 10px; font: 800 13.5px/1.2 Sora, sans-serif; letter-spacing: -.015em; color: #2A2008; }
.rhg-sch-el small { display: block; margin-top: 3px; font: 500 12px/1.35 Manrope, sans-serif; color: #5F6553; }
.rhg-sch-li { flex: 1 1 auto; min-width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 84px; text-align: center; }
.rhg-sch-li i { display: block; width: 100%; border-top: 2px dashed #78B22B; margin: 7px 0; }
.rhg-sch-li.cable i { border-top: 0; height: 4px; border-radius: 3px; background: var(--m-num); }
.rhg-sch-li span { font: 800 12.5px/1.15 Sora, sans-serif; color: var(--m-profond); }
.rhg-sch-li small { font: 600 11.5px/1.2 Manrope, sans-serif; color: #5F6553; }
.rhg-sch-li .ic { color: #4F8A1E; } .rhg-sch-li .ic svg { width: 24px; height: 24px; display: block; }
.rhg-sec-sch .rhg-sch { margin: 28px 0 0; }
.rhg-vpans { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.rhg-vpan { padding: 12px 14px 10px; border-radius: 16px; background: #1A1410; box-shadow: 0 16px 30px -20px rgba(20,14,8,.6); }
.rhg-vpan em { display: block; font: 700 10px/1 Sora, sans-serif; letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: rgba(255,255,255,.55); margin-bottom: 9px; }
.rhg-vpan > div { display: flex; gap: 12px; }
.rhg-led { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 10.5px/1 Sora, sans-serif; color: rgba(255,255,255,.45); letter-spacing: .02em; }
.rhg-led i { width: 12px; height: 12px; border-radius: 50%; background: #3a332e; }
.rhg-led.on { color: #fff; }
.rhg-led.on.vert i { background: #5DBB2A; box-shadow: 0 0 0 3px rgba(93,187,42,.25), 0 0 10px 2px rgba(93,187,42,.7); }
.rhg-led.on.rouge i { background: #E2412B; box-shadow: 0 0 0 3px rgba(226,65,43,.25), 0 0 10px 2px rgba(226,65,43,.6); }
.rhg-led.on.blanc i { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 10px 2px rgba(255,255,255,.6); }
.rhg-led.on.bleu i { background: #3B8FD9; box-shadow: 0 0 0 3px rgba(59,143,217,.25), 0 0 10px 2px rgba(59,143,217,.6); }
.rhg-et-vis { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.rhgf-vis { margin: 16px 0 0; display: flex; justify-content: center; }
.rhgf-vis .rhg-sch { margin: 0; }
@media (max-width: 420px) {
  .rhg-sch { gap: 6px; } .rhg-sch-el { width: 92px; } .rhg-sch-t { width: 70px; height: 70px; border-radius: 20px; } .rhg-sch-t svg { width: 44px; height: 44px; }
  .rhg-sch-li { height: 70px; min-width: 30px; } .rhg-sch-li span { font-size: 11px; } .rhg-led { font-size: 9.5px; } .rhg-vpan > div { gap: 9px; }
}
.rhgf-corps:focus { outline: none; }
.rhgf-corps:focus-visible { outline: 2px solid var(--m-clair); outline-offset: -2px; border-radius: 12px; }

/* ═══ Téléphone en paysage (hauteur ≤ 500 px) ════════════════════════════════════════════════════════════
   Au banc des profils iPhone et Android, l'écran d'une étape n'y laissait que 27 à 61 px au texte : la capture à gauche, toute
   la hauteur, et à droite le titre, la consigne, « C'est bon quand » et les deux boutons côte à côte. La fenêtre entière défile
   si besoin, la capture reste en place (sticky). */
@media (max-height: 500px) and (orientation: landscape) {
  .rhgf { max-width: 860px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; overflow-y: auto; overscroll-behavior: contain; }
  .rhgf-tete { grid-column: 1 / -1; padding-top: 8px; padding-bottom: 4px; }
  .rhgf-corps { display: contents; }
  .rhgf-corps > * { grid-column: 2; margin-left: 18px !important; margin-right: 18px !important; }
  .rhgf-corps > .rhgf-cap { grid-column: 1; grid-row: 2 / span 30; align-self: start; position: sticky; top: 0; margin: 0 0 12px 8px !important; order: 0; }
  /* Un dessin (schéma, voyants) reste dans la colonne du texte : large, il écrasait cette colonne (banc iPhone SE en paysage) */
  .rhgf-corps > .rhgf-vis { justify-content: flex-start; margin-top: 10px !important; }
  .rhgf-cap .rhg-tel { width: calc(var(--rapport) * (100vh - 96px)); }
  .rhgf-bas { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 14px; position: sticky; bottom: 0; z-index: 3; background: #FDFCFA; box-shadow: 0 -12px 18px -14px rgba(26,21,16,.18); }
  .rhgf-bas .rhg-ok { flex: 1 1 100%; margin: 0 !important; }
  .rhgf-bas .rhgf-cta, .rhgf-bas .rhgf-cta2 { flex: 1 1 0; margin: 0; padding: 11px 12px; font-size: 14px; }
  .rhgf-bas .rhg-ok { padding: 7px 11px; font-size: 12.8px; }
  .rhgf-h1 { font-size: 21px; } .rhgf-h2 { font-size: 19px; } .rhgf-consigne { font-size: 15px; margin-top: 10px; }
  .rhgf-bas .rhgf-autres, .rhgf-bas .rhgf-pied { flex: 1 1 100%; }
}

/* ─── GUIDES ILLUSTRÉS PAR L'ATELIER (02/11/2026) : thermostat, climatisation ─────────────────────────────────────
   Une photo de télécommande, un écran de thermostat reproduit ou un dessin n'entre pas dans un téléphone : il est posé tel
   quel (« objet »), dimensionné par sa hauteur quand il est en hauteur (une télécommande ne doit pas faire 900 px de haut),
   par sa largeur sinon. Les anneaux et numéros éventuels se posent comme sur une capture (--pn, --ecart). */
[data-univers="climatisation"] { --m-cta: linear-gradient(100deg, #6FB2EF 0%, #2C6FA6 60%, #1E5A8F 100%); --m: #2C6FA6; --m-profond: #1E5A8F;
  --m-clair: #6FB2EF; --m-vif: #6FB2EF; --m-pale: #EEF5FC; --m-bord: #CFE2F5; --m-degrade: linear-gradient(135deg, #6FB2EF, #1E5A8F); --m-ombre: rgba(44,111,166,.28);
  --m-rgb: 111,178,239; --m-rgb-fonce: 30,90,143; --m-num: linear-gradient(120deg,#6FB2EF 0%,#2C6FA6 55%,#1E5A8F 100%); --m-fin: linear-gradient(135deg,#BFE0FA,#6FB2EF); }
.rhg-cap.rhg-o, .rhgf-cap.rhg-o { width: auto; max-width: 100%; padding: 0; }
/* Dans la colonne de droite d'une section, un objet prend la largeur de la colonne (sinon sa largeur « auto » valait 0) */
.rhg-duo > .rhg-cap.rhg-o { width: 100%; justify-self: stretch; }
/* Une suite d'écrans de thermostat (jusqu'à six) se lit mieux sur trois colonnes que sur une seule rangée de vignettes */
.rhg-rang:has(.rhg-o):not([style*="--n:2"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
/* Haut de page : les étiquettes de verre restent sur la photo, dans l'écran (elles étaient placées pour un téléphone étroit) */
.rhg-haut-vis.rhg-o .rhg-verre:nth-of-type(1) { left: -36px; top: 64%; }
.rhg-haut-vis.rhg-o .rhg-verre:nth-of-type(2) { right: -12px; top: 6%; }
/* La mise en garde de la fin (odeur de gaz) : avant la carte « Toujours bloqué », jamais cachée dans la fenêtre */
.rhg-fin .rhg-att { margin: 0 0 22px; max-width: none; }
.rhg-obj { --hmax: 440px; --wmax: 460px; position: relative; width: min(100%, calc(var(--hmax) * var(--rapport)), var(--wmax)); margin: 0 auto; }
.rhg-obj-e { position: relative; container-type: inline-size; --pn: clamp(14px, calc(var(--ecart, 100) * 1cqw / var(--rapport, .5) - 3px), 24px); }
.rhg-obj img { display: block; width: 100%; height: auto; }
.rhg-credit { display: block; margin-top: 8px; text-align: center; font: 600 11.5px/1.3 Manrope, sans-serif; color: #6B6157; }
.rhg-haut-vis.rhg-o { width: min(100%, 380px); }
.rhg-haut-vis.rhg-o .rhg-obj { --hmax: 460px; --wmax: 380px; }
.rhg-et .rhg-cap.rhg-o { width: auto; max-width: none; padding: 0; align-self: stretch; }
.rhg-et .rhg-obj { --hmax: 300px; --wmax: 100%; }
.rhgf-cap.rhg-o .rhg-obj { --hmax: clamp(200px, 36vh, 380px); --wmax: 100%; }
.rhg-touches { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.rhg-touches li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.rhg-touches li .rhg-num { position: static; transform: none; flex: 0 0 24px; --pn: 24px; margin-top: 1px; }
.rhg-touches li b { color: var(--encre-titre); }
.rhg-sym { background: #F3EFEA; padding: 4px 6px; }
.rhg-sym img, .rhgf-voy .code.sym img { display: block; height: 22px; width: auto; }
.rhgf-voy .code.sym { background: #F3EFEA; padding: 4px 6px; }
@media (max-width: 640px) {
  .rhg-haut-vis.rhg-o { width: min(78%, 300px); }
  .rhg-haut-vis.rhg-o .rhg-verre:nth-of-type(1) { left: -20px; }
  .rhg-haut-vis.rhg-o .rhg-verre:nth-of-type(2) { right: -8px; top: 2%; }
  .rhg-obj { --hmax: 360px; }
}

/* ─── BIBLIOTHÈQUE /guides/ (02/11/2026) ───────────────────────────────────────────────────────────────
   Maquette validée par Vicenté le 02/11 (bibliotheque/ de l'aperçu, 108 contrôles sur trois moteurs), portée ici. Page sans
   métier : noir chaud, orange discret, barre quadricolore ; chaque carte prend la couleur de son pôle (--c, --c2, --pale).
   Gris secondaire #6B6157 (charte) et non #8A8177 : 3,8:1 seulement sur blanc, sous le seuil de 4,5:1 des petits textes (axe, 02/11). */
.rhb { --encre: #1A1410; --titre: #2A2008; --texte: #5C6653; --filet: rgba(31,42,24,.12); --orange: #C44A1F; --orange2: #E85D2F;
  font-family: Manrope, sans-serif; color: var(--encre); background: #fff; }
.rhb .rhb-l { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.rhb .rhb-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rhb .rhb-sur { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(196,74,31,.22); font: 700 10.5px/1 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.rhb .rhb-sur::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange2); }
.rhb h1, .rhb h2 { font-family: Sora, sans-serif; font-weight: 800; color: var(--titre); letter-spacing: -.028em; margin: 14px 0 0; }
.rhb h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; }
.rhb h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; }
.rhb h1 span, .rhb h2 span { color: var(--orange2); }
.rhb .rhb-quadri { display: flex; gap: 7px; margin-bottom: 18px; }
.rhb .rhb-quadri span { width: 28px; height: 7px; border-radius: 4px; background: #EFCB33; }
.rhb .rhb-quadri span:nth-child(2) { background: #7BAF34; }
.rhb .rhb-quadri span:nth-child(3) { background: #44A0D4; }
.rhb .rhb-quadri span:nth-child(4) { background: #E46627; }
/* Haut : le titre, la recherche, puis un collage d'appareils réels (écran, télécommande, thermostat) */
.rhb .rhb-haut { padding: 150px 0 70px; position: relative; overflow-x: clip;
  background: radial-gradient(closest-side, rgba(239,203,51,.10), transparent) 85% 20% / 640px 520px no-repeat,
              radial-gradient(closest-side, rgba(68,160,212,.10), transparent) 100% 70% / 560px 520px no-repeat; }
.rhb .rhb-haut-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.rhb .rhb-chapo { font-size: 18px; line-height: 1.6; color: var(--texte); max-width: 620px; margin: 18px 0 0; }
.rhb .rhb-cherche { position: relative; margin-top: 28px; max-width: 640px; }
.rhb .rhb-cherche svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #6B6157; }
.rhb .rhb-cherche input { width: 100%; box-sizing: border-box; height: 62px; padding: 0 22px 0 56px; border-radius: 18px; border: 1px solid var(--filet);
  background: rgba(255,255,255,.9); box-shadow: 0 20px 44px -26px rgba(20,24,31,.5); font: 600 16.5px Manrope, sans-serif; color: var(--encre); outline: none; }
.rhb .rhb-cherche input:focus { border-color: rgba(196,74,31,.45); box-shadow: 0 0 0 4px rgba(232,93,47,.12), 0 20px 44px -26px rgba(20,24,31,.5); }
.rhb .rhb-souvent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--texte); }
.rhb .rhb-souvent > span { margin-right: 2px; }
.rhb .rhb-souvent button, .rhb .rhb-onglets button { font: 600 13.5px Manrope, sans-serif; color: var(--encre); background: #fff; border: 1px solid var(--filet);
  border-radius: 999px; padding: 8px 13px; cursor: pointer; min-height: 38px; }
.rhb .rhb-souvent button:hover { border-color: rgba(196,74,31,.4); color: var(--orange); }
.rhb .rhb-chiffres { margin: 22px 0 0; font-size: 14px; color: var(--texte); }
.rhb .rhb-chiffres b { font-family: Sora, sans-serif; color: var(--titre); }
.rhb .rhb-collage { position: relative; height: 440px; }
.rhb .rhb-col-tel { position: absolute; left: 8%; top: 0; width: 200px; aspect-ratio: 9 / 19; border-radius: 30px; background: #1A1410; padding: 8px;
  box-shadow: 0 40px 70px -40px rgba(20,24,31,.6); transform: rotate(-4deg); }
.rhb .rhb-col-e { display: block; width: 100%; height: 100%; }
.rhb .rhb-col-tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 23px; display: block; }
.rhb .rhb-col-o1 { position: absolute; left: 52%; top: 30px; height: 360px; width: auto; max-width: 46%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(20,24,31,.25)); transform: rotate(6deg); }
.rhb .rhb-col-o2 { position: absolute; right: 0; bottom: 6px; width: 210px; height: auto; filter: drop-shadow(0 24px 26px rgba(20,24,31,.22)); }
.rhb .rhb-verre { position: absolute; display: flex; flex-direction: column; padding: 11px 15px 11px 30px; border-radius: 16px; background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.75); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 20px 44px -22px rgba(20,24,31,.5); font: 700 13.5px/1.25 Sora, sans-serif; color: var(--titre); }
.rhb .rhb-verre i { position: absolute; left: 13px; top: 16px; width: 8px; height: 8px; border-radius: 50%; }
.rhb .rhb-verre small { font: 500 12px Manrope, sans-serif; color: var(--texte); margin-top: 2px; }
.rhb .rhb-v1 { left: -12px; bottom: -4px; }
.rhb .rhb-v2 { right: 4%; top: 0; }
/* Rangée d'appareils : remplace le collage quand l'écran est étroit (le collage est masqué sous 1 000 px) */
.rhb .rhb-apps { display: none; }
.rhb .rhb-apps p { margin: 0; font: 700 13px Sora, sans-serif; color: var(--titre); }
.rhb .rhb-apps p span { margin-left: 6px; font: 500 12px Manrope, sans-serif; color: #6B6157; }
.rhb .rhb-apps-r { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 10px 20px 6px;
  scroll-padding: 0 20px; }
  /* sans scroll-padding, Safari calait la première tuile contre le bord de l'écran */
.rhb .rhb-apps-r::-webkit-scrollbar { display: none; }
.rhb .rhb-app { flex: none; width: 100px; scroll-snap-align: start; text-decoration: none; color: var(--encre); }
.rhb .rhb-app-v { display: grid; place-items: center; height: 108px; border-radius: 18px; background: var(--pale); overflow: hidden; }
.rhb .rhb-app-o { max-height: 88px; max-width: 78%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(20,24,31,.22)); }
.rhb .rhb-app-tel { width: 44px; aspect-ratio: 9 / 19; border-radius: 9px; background: #1A1410; padding: 3px; box-shadow: 0 12px 18px -12px rgba(20,24,31,.6); }
.rhb .rhb-app-tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 7px; display: block; }
.rhb .rhb-app b { display: block; margin-top: 8px; font: 700 13.5px/1.2 Sora, sans-serif; letter-spacing: -.01em; color: var(--titre); }
.rhb .rhb-app small { display: block; margin-top: 2px; font-size: 12px; color: var(--texte); }
/* Par situation : six tuiles, chacune filtre la bibliothèque */
.rhb .rhb-situations { padding: 40px 0 70px; }
.rhb .rhb-sit-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.rhb .rhb-sit { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 3px; padding: 18px 20px; border-radius: 20px;
  background: #fff; border: 1px solid var(--filet); box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); text-decoration: none; color: var(--encre);
  transition: border-color .2s, transform .2s; }
.rhb .rhb-sit:hover { border-color: rgba(196,74,31,.35); transform: translateY(-2px); }
.rhb .rhb-sit-i { grid-row: 1 / 4; width: 46px; height: 46px; border-radius: 15px; background: #FBEDE6; color: var(--orange); display: grid; place-items: center; }
.rhb .rhb-sit b { font: 800 16px/1.3 Sora, sans-serif; letter-spacing: -.01em; }
.rhb .rhb-sit span:not(.rhb-sit-i) { font-size: 14px; line-height: 1.45; color: var(--texte); }
.rhb .rhb-sit em { font-style: normal; font: 700 12.5px Manrope, sans-serif; color: var(--orange); margin-top: 4px; }
/* Par appareil : onglets par pôle, cartes à la couleur de leur pôle */
.rhb .rhb-biblio { padding: 30px 0 80px; scroll-margin-top: 90px; }
.rhb .rhb-biblio-t { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.rhb .rhb-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.rhb .rhb-onglets button i { font-style: normal; font-weight: 700; color: #6B6157; margin-left: 3px; }
.rhb .rhb-onglets button.on { background: var(--encre); border-color: var(--encre); color: #fff; }
.rhb .rhb-onglets button.on i { color: rgba(255,255,255,.7); }
.rhb .rhb-filtre { margin: 20px 0 0; font-size: 14.5px; color: var(--texte); }
.rhb .rhb-filtre span b { color: var(--titre); }
.rhb .rhb-effacer { border: 0; background: none; font: 700 14px Manrope, sans-serif; color: var(--orange); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rhb .rhb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.rhb .rhb-carte { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid var(--filet);
  box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); }
.rhb .rhb-carte[hidden] { display: none; }
.rhb .rhb-vis { border-radius: 18px; background: var(--pale); display: grid; place-items: center; overflow: hidden; min-height: 230px; padding: 16px 0; }
.rhb .rhb-tel { display: block; width: 104px; aspect-ratio: 9 / 19; border-radius: 18px; background: #1A1410; padding: 5px; box-shadow: 0 20px 30px -20px rgba(20,24,31,.6); }
.rhb .rhb-tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 13px; display: block; }
.rhb .rhb-objet { height: 200px; width: auto; max-width: 86%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(20,24,31,.2)); }
.rhb .rhb-objet.carre { height: auto; width: 82%; }
.rhb .rhb-objet.large { height: auto; width: 88%; }
.rhb .rhb-tx { display: flex; flex-direction: column; min-width: 0; padding: 6px 4px 4px 0; }
.rhb .rhb-type { font: 700 10.5px/1 Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.rhb .rhb-carte h3 { margin: 10px 0 0; font: 800 23px/1.15 Sora, sans-serif; letter-spacing: -.02em; }
.rhb .rhb-carte h3 a { color: var(--titre); text-decoration: none; }
.rhb .rhb-carte p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.rhb .rhb-liens { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.rhb .rhb-liens li { border-bottom: 1px solid var(--filet); }
.rhb .rhb-liens a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; min-height: 24px; font: 700 14px Manrope, sans-serif; color: var(--encre); text-decoration: none; }
.rhb .rhb-liens a::after { content: "→"; color: var(--c); font-weight: 700; transition: transform .2s; }
.rhb .rhb-liens a:hover { color: var(--c); }
.rhb .rhb-liens a:hover::after { transform: translateX(3px); }
.rhb .rhb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 16px; }
/* « Pas à pas » : la fenêtre du guide, ouverte d'ici sans quitter la bibliothèque (comme l'ancienne page de liste) */
.rhb .rhb-pas { border: 0; background: none; padding: 6px 0; font: 700 14px Manrope, sans-serif; color: var(--c); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--pale); text-underline-offset: 5px; }
.rhb .rhb-pas:hover { text-decoration-color: var(--c2); }
.rhb .rhb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; color: #fff; text-decoration: none; font: 700 14.5px Manrope, sans-serif;
  background: linear-gradient(135deg, var(--c2), var(--c)); box-shadow: 0 12px 24px -14px var(--c); }
.rhb .rhb-btn-noir { --c: #1A1410; --c2: #3A2E25; padding: 15px 24px; font-size: 16px; }
.rhb .rhb-vide { margin-top: 26px; font-size: 15px; color: var(--texte); }
.rhb .rhb-plus { display: block; width: 100%; margin-top: 12px; min-height: 50px; border-radius: 14px; border: 1px solid var(--filet); background: #fff;
  font: 700 14.5px Manrope, sans-serif; color: var(--encre); cursor: pointer; box-shadow: 0 12px 30px -24px rgba(20,24,31,.4); }
.rhb .rhb-plus[hidden], .rhb .rhb-carte.rhb-loin { display: none; }
.rhb mark { background: rgba(232,93,47,.16); color: inherit; border-radius: 3px; padding: 0 1px; }
/* Les réponses les plus demandées : un index de liens, par pôle */
.rhb .rhb-reponses { padding: 20px 0 80px; }
.rhb .rhb-rep-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 30px; }
.rhb .rhb-rep-col summary { list-style: none; pointer-events: none; }
.rhb .rhb-rep-col summary::-webkit-details-marker { display: none; }
.rhb .rhb-rep-col h3 { margin: 0 0 8px; padding-bottom: 10px; border-bottom: 2px solid var(--c); font: 800 16px Sora, sans-serif; color: var(--titre); }
.rhb .rhb-rep-col h3 i { display: none; }
.rhb .rhb-rep-col ul { list-style: none; margin: 0; padding: 0; }
.rhb .rhb-rep-col a { display: block; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 15px; line-height: 1.45; color: var(--encre); text-decoration: none; }
.rhb .rhb-rep-col a:hover { color: var(--c); text-decoration: underline; text-underline-offset: 3px; }
.rhb .rhb-client { padding: 10px 0 100px; }
.rhb .rhb-client-c { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 30px 34px; border-radius: 24px; background: #F7F6F3; }
.rhb .rhb-client-c h2 { font-size: 26px; margin: 0; }
.rhb .rhb-client-c p { margin: 8px 0 0; color: var(--texte); font-size: 15.5px; line-height: 1.6; max-width: 640px; }
.rhb .rhb-indep { margin: 16px 0 0; font-size: 12.5px; color: #6B6157; }
@media (max-width: 1000px) {
  /* minmax(0, 1fr) : sans lui, la rangée d'appareils (plus large que l'écran) élargissait la colonne et le titre sortait de l'écran */
  
.rhb .rhb-haut-g { grid-template-columns: minmax(0, 1fr); }
.rhb .rhb-collage { display: none; }
.rhb .rhb-apps { display: block; margin-top: 22px; }
  .rhb .rhb-sit-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rhb .rhb-grille { grid-template-columns: 1fr; }
.rhb .rhb-rep-g { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .rhb .rhb-haut { padding: 112px 0 18px; }
.rhb h1 { font-size: 36px; }
.rhb h2 { font-size: 26px; }
  .rhb .rhb-quadri { margin-bottom: 14px; }
.rhb .rhb-chapo { font-size: 15.5px; line-height: 1.55; margin-top: 12px; }
  .rhb .rhb-cherche { margin-top: 18px; }
.rhb .rhb-cherche input { height: 54px; font-size: 16px; border-radius: 16px; }
  .rhb .rhb-souvent, .rhb .rhb-chiffres { display: none; }
  .rhb .rhb-situations { padding: 26px 0 26px; }
  .rhb .rhb-sit-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .rhb .rhb-sit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 18px; }
  .rhb .rhb-sit-i { width: 38px; height: 38px; border-radius: 12px; }
.rhb .rhb-sit-i svg { width: 21px; height: 21px; }
  .rhb .rhb-sit b { font-size: 14.5px; line-height: 1.25; }
.rhb .rhb-sit span:not(.rhb-sit-i) { display: none; }
.rhb .rhb-sit em { margin-top: auto; }
  .rhb .rhb-biblio { padding: 16px 0 34px; }
  .rhb .rhb-onglets { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.rhb .rhb-onglets button { flex: none; }
  .rhb .rhb-grille { gap: 12px; margin-top: 16px; }
  .rhb .rhb-carte { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; row-gap: 0; padding: 12px; border-radius: 20px; align-items: start; }
  .rhb .rhb-tx { display: contents; }
  .rhb .rhb-vis { grid-column: 1; grid-row: 1 / span 3; min-height: 0; height: 104px; padding: 0; border-radius: 14px; }
  .rhb .rhb-type { grid-column: 2; margin-top: 6px; font-size: 9.5px; }
  .rhb .rhb-carte h3 { grid-column: 2; margin-top: 6px; font-size: 18px; }
  .rhb .rhb-carte p { grid-column: 2; margin-top: 4px; font-size: 13.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rhb .rhb-liens { grid-column: 1 / -1; margin-top: 12px; }
.rhb .rhb-liens a { padding: 9px 2px; font-size: 13.5px; }
  .rhb .rhb-act { display: none; }
  .rhb .rhb-objet { height: 86px; max-width: 80%; }
.rhb .rhb-objet.carre, .rhb .rhb-objet.large { width: 82%; height: auto; }
  .rhb .rhb-tel { width: 44px; padding: 3px; border-radius: 9px; }
.rhb .rhb-tel img { border-radius: 7px; }
  .rhb .rhb-reponses { padding: 8px 0 30px; }
.rhb .rhb-rep-g { gap: 0; margin-top: 12px; }
  .rhb .rhb-rep-col summary { pointer-events: auto; cursor: pointer; }
  .rhb .rhb-rep-col h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 15px 0; border-bottom-width: 1px; border-color: var(--filet); font-size: 15.5px; }
  .rhb .rhb-rep-col h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  .rhb .rhb-rep-col h3 i { display: inline; font-style: normal; font: 700 13px Manrope, sans-serif; color: #6B6157; }
  .rhb .rhb-rep-col h3::after { content: "+"; margin-left: auto; font: 600 22px/1 Manrope, sans-serif; color: var(--c); transition: transform .2s; }
  .rhb .rhb-rep-col[open] h3::after { transform: rotate(45deg); }
  .rhb .rhb-rep-col a { font-size: 14.5px; padding: 10px 0 10px 16px; }
  .rhb .rhb-client { padding: 0 0 48px; }
.rhb .rhb-client-c { padding: 22px; gap: 16px; }
  .rhb .rhb-client-c h2 { font-size: 21px; }
.rhb .rhb-client-c p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
.rhb .rhb-sit, .rhb .rhb-liens a::after, .rhb .rhb-rep-col h3::after { transition: none; }
}
/* Cartes-liens vers un autre guide (la télécommande de chaque gamme Daikin) et rangée de symboles (les modes) — 02/11/2026 */
.rhg-vigs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 34px; }
.rhg-vig { display: flex; flex-direction: column; padding: 14px 14px 18px; border: 1px solid var(--ligne); border-radius: 22px; background: #fff;
  box-shadow: 0 12px 30px -22px rgba(20,24,31,.4); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.rhg-vig-i { display: flex; align-items: center; justify-content: center; height: 190px; padding: 12px; border-radius: 16px; background: var(--panneau); }
.rhg-vig-i img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.rhg-vig b { margin-top: 14px; font: 700 17px/1.24 Sora, system-ui, sans-serif; letter-spacing: -.02em; }
.rhg-vig-t { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rhg-vig-l { margin-top: auto; padding-top: 12px; font: 700 14px/1.2 Manrope, sans-serif; color: rgb(var(--m-rgb-fonce)); }
.rhg-vig-l::after { content: " →"; }
.rhg-vig:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(20,24,31,.45); }
.rhg-vig:focus-visible { outline: 3px solid rgb(var(--m-rgb)); outline-offset: 3px; }
.rhg-symboles { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 30px 0 0; padding: 0; }
.rhg-symboles li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--ligne); border-radius: 999px; background: #fff;
  font: 700 15px/1.2 Sora, system-ui, sans-serif; color: var(--encre-titre); box-shadow: 0 10px 24px -20px rgba(20,24,31,.45); }
.rhg-symboles img { display: block; width: auto; height: 34px; border-radius: 8px; }
.rhg-symboles-leg { margin-top: 12px; font-size: 13px; color: #6B6157; }
@media (max-width: 980px) { .rhg-vigs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) {
  .rhg-vigs { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
  .rhg-vig { padding: 10px 10px 14px; border-radius: 18px; }
  .rhg-vig-i { height: 108px; padding: 8px; border-radius: 12px; }
  .rhg-vig b { margin-top: 10px; font-size: 15.5px; }
  .rhg-vig-t { font-size: 13px; line-height: 1.45; }
  .rhg-vig-l { font-size: 13px; }
  .rhg-symboles { gap: 8px; margin-top: 22px; }
  .rhg-symboles li { padding: 6px 12px 6px 6px; font-size: 13.5px; gap: 8px; }
  .rhg-symboles img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .rhg-vig { transition: none; } .rhg-vig:hover { transform: none; } }
/* Rangée d'étapes à images posées (02/11) : quatre étapes sur une ligne, et des titres alignés quelle que soit la forme de l'image */
@media (min-width: 701px) {
  .rhg-rang:has(.rhg-o) { --hrang: 300px; }
  .rhg-rang:has(.rhg-o)[style*="--n:4"] { --hrang: 230px; }
  .rhg-rang:has(.rhg-o) .rhg-et .rhg-obj { --hmax: var(--hrang); }
  .rhg-rang > .rhg-et > .rhg-cap.rhg-o { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(var(--hrang) + 30px); }
}
@media (min-width: 981px) { .rhg-rang:has(.rhg-o)[style*="--n:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
/* Électricité et eau chaude (02/11/2026 : guides « coupure de courant » et « plus d'eau chaude »). Couleurs relevées sur les
   pages /renovation-electrique/ (jaune #E4B42E → #F2C53A, texte foncé #8A5F00) et /ballon-eau-chaude/ (#2C6FA6 → #1E5A8F).
   Les boutons portent un texte blanc : en électricité, leur dégradé descend vers l'or foncé, le jaune reste aux lueurs. */
[data-univers="electricite"] { --m-cta: linear-gradient(135deg, #C9971A 0%, #A57A0B 55%, #8A5F00 100%); --m: #8A5F00; --m-profond: #6E4C00;
  --m-clair: #F2C53A; --m-vif: #E4B42E; --m-pale: #FBF3D9; --m-bord: #F1E2AE; --m-degrade: linear-gradient(135deg, #F2C53A, #A57A0B); --m-ombre: rgba(165,122,11,.30);
  --m-rgb: 228,180,46; --m-rgb-fonce: 138,95,0; --m-num: linear-gradient(120deg,#E4B42E 0%,#B98B12 55%,#8A5F00 100%); --m-fin: linear-gradient(135deg,#F7DE8A,#E4B42E); }
[data-univers="eau"] { --m-cta: linear-gradient(135deg, #2C6FA6, #1E5A8F); --m: #245C8A; --m-profond: #1E5A8F;
  --m-clair: #7FB0E3; --m-vif: #4A8FD4; --m-pale: #E6F1FA; --m-bord: #CFE2F5; --m-degrade: linear-gradient(135deg, #7FB0E3, #1E5A8F); --m-ombre: rgba(44,111,166,.28);
  --m-rgb: 74,143,212; --m-rgb-fonce: 30,90,143; --m-num: linear-gradient(120deg,#7FB0E3 0%,#2C6FA6 55%,#1E5A8F 100%); --m-fin: linear-gradient(135deg,#BFD9F2,#4A8FD4); }

/* Crédits sous une image de loupe, sous l'image « C'est bon quand » et sous les causes de la fenêtre (02/11/2026) : sans eux,
   une illustration générée par IA n'était pas signalée comme telle à ces endroits. */
.rhg-loupe-i { display: block; min-width: 0; }
.rhg-loupe-i .rhg-credit, .rhgf-dep .rhg-credit { margin-top: 6px; font-size: 11px; }
.rhg-imok-c { max-width: 280px; margin-top: 10px; }
.rhg-imok-c .rhg-imok { margin-top: 0; }
.rhgf-imok-c img { display: block; width: 100%; height: auto; border-radius: 12px; }
.rhgf-dep .rhg-credit { max-width: 260px; }
/* Un numéro posé sous une cible au bas de l'image sort de l'image : le crédit descend d'autant, sinon le numéro le couvre
   (« Dessin ROY HABITAT » sous les rangées du tableau, coupure de courant, 02/11/2026). 24 px = la plus grande pastille. */
.rhg-obj:has(.rhg-num-bas) > .rhg-credit { margin-top: 34px; }