/* MonBati - contact@monbati.fr
 *
 * ecoplus67.fr - La maison en chantier (page d'accueil, section #renovation,
 * classe « rg »). Seule la page d'accueil charge cette feuille.
 *
 * LE PRINCIPE
 * -----------
 * assets/js/renovation.js pose l'etat sur la section, cette feuille en deduit
 * le dessin :
 *
 *   ok-toiture, ok-isolation, ok-ite, ok-menuiseries, ok-vmc,
 *   ok-calorifugeage, ok-granules, ok-pac, ok-pv
 *                  le metier est passe : son « apres » est dessine. Sans la
 *                  classe, c'est l'« avant » (tuiles cassees, vieilles
 *                  fenetres, chaudiere fioul...).
 *   data-chantier  le metier en cours (meme nom, sans « ok- ») : son ouvrier
 *                  est la et travaille. Vide entre deux metiers.
 *   fini           les neuf metiers sont passes : la cigogne rejoint son nid,
 *                  le chat s'installe.
 *   anime          les mouvements sont permis. Le script ne la pose pas pour
 *                  qui a demande « moins d'animations » : la maison s'affiche
 *                  alors renovee, et rien ne bouge tant qu'il n'a pas presse
 *                  « Voir l'animation ».
 *   attente        avant l'arrivee : la camionnette n'est pas encore la
 *   arrivee        la camionnette roule (ses roues tournent)
 *   instant        le temps d'une remise a zero : aucune transition
 *   thermique      la camera thermique est sortie, tant que son bouton est
 *                  maintenu (ou un instant apres un simple clic)
 *   hors-vue       la scene n'est plus a l'ecran : les boucles s'arretent
 *   rg-pret        le script tourne : le pupitre s'affiche
 *
 * Sans JavaScript, la section garde les classes ecrites dans la page : la
 * maison renovee, cigogne au nid, et pas de pupitre (il ne commanderait rien).
 *
 * UN METIER
 * ---------
 * Il dure ETAPE (3,2 s, constante de renovation.js). ok-<metier> et
 * data-chantier arrivent ensemble ; les transitions de l'« apres » sont
 * retardees pour suivre le geste de l'ouvrier, et toutes finissent dans les
 * 3,2 s. Retirer ok-<metier> les rejoue a l'envers : c'est le bouton
 * avant / apres du pupitre.
 *
 * Le dessin et cette feuille se tiennent par des noms de classes : une classe
 * ecrite dans le SVG et inconnue ici ne fait rien, sans erreur.
 *
 * Tout est prefixe : selecteurs sous « .rg », animations en « rg- ».
 */

/* ── La section et son cadre ─────────────────────────────────────────────── */
.rg {
  position: relative;
  padding: 72px 0 64px;
  background: linear-gradient(#ffffff, #f2f8ef);
  color: #404040;
}
.rg-conteneur { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.rg-entete { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.rg-surtitre {
  display: block;
  margin-bottom: 6px;
  color: #3aa935;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rg-entete h2 { margin: 0 0 12px; font-size: 2.2em; }
.rg-entete p { margin: 0; font-size: 16px; line-height: 1.7; }

.rg-cadre {
  position: relative;
  overflow: hidden;
  border: 1px solid #dde8d9;
  border-radius: 18px;
  background: #e6f3f9;
  box-shadow: 0 26px 50px -26px rgba(20, 60, 20, .4);
}
.rg-scene { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 720; }
/* Sur un telephone la scene devient carree et se resserre sur la maison :
   preserveAspectRatio="slice" rogne la camionnette et l'arbre. */
@media (max-width: 640px) {
  .rg { padding: 52px 0 44px; }
  .rg-entete h2 { font-size: 1.7em; }
  .rg-scene { aspect-ratio: 1 / 1; }
}

/* Le bandeau du metier en cours, pose sur la scene */
.rg-bandeau {
  position: absolute;
  top: 14px;
  left: 50%;
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
  color: #2e7d32;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .3s;
}
.rg-bandeau.visible { opacity: 1; }
.rg-bandeau.pop { animation: rg-pop .45s cubic-bezier(.3, 1.6, .6, 1); }
.rg-bandeau-num { margin-right: 4px; color: #78909c; }
@keyframes rg-pop { from { transform: translateX(-50%) scale(.6); } to { transform: translateX(-50%) scale(1); } }
@media (max-width: 640px) { .rg-bandeau { top: 8px; padding: 4px 12px; font-size: 12px; } }

/* ── Le pupitre ──────────────────────────────────────────────────────────── */
.rg:not(.rg-pret) .rg-pupitre { display: none; }
.rg-pupitre {
  margin-top: 18px;
  padding: 18px 18px 16px;
  border: 1px solid #e1eadd;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px -22px rgba(20, 60, 20, .35);
}
.rg-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rg-voix { flex: 1 1 340px; min-height: 3em; margin: 0; color: #37474f; font-size: 15px; line-height: 1.5; }
.rg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-btn {
  padding: 8px 18px;
  border: 2px solid #3aa935;
  border-radius: 999px;
  background: #fff;
  color: #2e7d32;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.rg-btn:hover { background: #f0f9ee; }
.rg-rejouer { background: #3aa935; color: #fff; }
.rg-rejouer:hover { border-color: #2e8b2a; background: #2e8b2a; }
.rg-thermo[aria-pressed="true"] { border-color: #2a1a5e; background: #2a1a5e; color: #ffcf5a; }
/* Bouton a maintenir : un appui long sur telephone ne doit ni defiler, ni
   selectionner le texte, ni ouvrir le menu contextuel. */
.rg-thermo { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rg-btn-aide { font-weight: 400; opacity: .75; }
.rg-progres { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #607d8b; font-size: 13px; }
.rg-etiq { color: #607d8b; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rg-compte b { color: #2e7d32; }
.rg-jauge { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: #e6eee3; }
.rg-jauge span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8bc34a, #3aa935);
  transform: scaleX(var(--fait, 1));
  transform-origin: left;
  transition: transform .6s;
}
.rg-metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.rg-metier {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid #e0e7dd;
  border-radius: 12px;
  background: #f7f9f6;
  color: #78909c;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.rg-metier svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rg-metier:hover { border-color: #8bc34a; }
.rg-metier[aria-pressed="true"] { border-color: #3aa935; background: #f0f9ee; color: #2e7d32; }
/* La pastille : vide tant que le metier n'est pas passe, cochee ensuite */
.rg-metier::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 2px solid #cfd8dc;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}
.rg-metier[aria-pressed="true"]::after { content: '✓'; border-color: #3aa935; background: #3aa935; }
.rg-metier.en-cours { box-shadow: 0 0 0 4px rgba(58, 169, 53, .28); }
.rg-metier:focus-visible, .rg-btn:focus-visible { outline: 3px solid #ffb300; outline-offset: 2px; }
.rg-astuce { margin: 10px 0 0; color: #90a4ae; font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  .rg-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-metier { gap: 8px; padding: 8px 10px; font-size: 13px; }
  .rg-metier svg { width: 22px; height: 22px; }
}

/* ── Les etats generaux ──────────────────────────────────────────────────── */
.rg.instant *, .rg.instant *::before, .rg.instant *::after { transition: none !important; }
.rg.hors-vue * { animation-play-state: paused !important; }

/* ── Le decor ────────────────────────────────────────────────────────────── */
.rg .soleil circle { fill: #ffd54f; }
.rg .rayons { fill: none; stroke: #ffd54f; stroke-width: 5; stroke-linecap: round; }
.rg .nuage path { fill: #fff; }
.rg .vosges-1 { fill: #bcd5c8; }
.rg .vosges-2 { fill: #a4c8ac; }
.rg .herbe { fill: #7cc35a; }
.rg .tronc { fill: #8d6e4f; }
.rg .feuillage circle { fill: #5fae4a; }
.rg .buisson circle { fill: #6dba52; }
.rg.anime .rayons { animation: rg-tour 40s linear infinite; }
.rg.anime .n1 { animation: rg-derive 26s ease-in-out infinite alternate; }
.rg.anime .n2 { animation: rg-derive 32s ease-in-out infinite alternate-reverse; }
.rg.anime .feuillage { transform-box: fill-box; transform-origin: 50% 100%; animation: rg-balance 5s ease-in-out infinite alternate; }
@keyframes rg-tour { to { transform: rotate(360deg); } }
@keyframes rg-derive { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
@keyframes rg-balance { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

/* Le ciel bas et la pluie, jusqu'a ce que le toit soit refait */
.rg .ciel-gris { opacity: .85; transition: opacity 2.2s .4s; }
.rg.ok-toiture .ciel-gris { opacity: 0; }
.rg .np { fill: #76828c; }
.rg .pluie { fill: none; stroke: #9db7c9; stroke-width: 2.4; stroke-linecap: round; }
.rg .nuage-pluie { transition: transform 2.6s .3s ease-in, opacity 2s .5s; }
.rg.ok-toiture .nuage-pluie { opacity: 0; transform: translate(-460px, -30px); }
.rg.anime .pluie path { animation: rg-pluie .7s linear infinite; }
.rg.anime .pluie .p2 { animation-delay: -.35s; }
@keyframes rg-pluie { from { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(70px); } }

/* Les eclats de la fin */
.rg .eclat { fill: #fff59d; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rg.fini .eclat { opacity: .9; }
.rg.anime.fini .eclat { animation: rg-scintille 1.6s ease-in-out infinite; }
.rg.anime.fini .e2 { animation-delay: -.4s; }
.rg.anime.fini .e3 { animation-delay: -.8s; }
.rg.anime.fini .e4 { animation-delay: -1.2s; }
@keyframes rg-scintille { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ── La maison ───────────────────────────────────────────────────────────── */
.rg .combles { fill: #e8d4ae; }
.rg .etage { fill: #f6efe2; }
.rg .rdc { fill: #f2e8d6; }
.rg .cave { fill: #d8d2c6; }
.rg .plinthe { fill: none; stroke: #d6c6aa; stroke-width: 4; }
.rg .contour { fill: none; stroke: #7d6c55; stroke-width: 2; }
.rg .cheminee { fill: #b5563a; }
.rg .cheminee-joints { fill: none; stroke: #8c3d27; stroke-width: 1.2; }
.rg .cheminee-chapeau { fill: #4e4e56; }
.rg .charpente { fill: #a57a4f; }
.rg .faitage { fill: #8f3a22; }
.rg .nid { fill: #8d6e4f; stroke: #6b4f36; stroke-width: 1.5; }
.rg .nid path { fill: none; }

/* Couverture : trois tuiles cassees, puis remplacees une a une */
.rg .trou { fill: #a6b8c4; stroke: #7a2e19; stroke-width: 1.5; stroke-dasharray: 3 2; transition: opacity .3s 1.6s; }
.rg.ok-toiture .trou { opacity: 0; }
.rg .tuile-neuve { opacity: 0; transform: translateY(-18px); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .6, 1); }
.rg.ok-toiture .tuile-neuve { opacity: 1; transform: none; }
.rg .t1 { transition-delay: .5s; }
.rg .t2 { transition-delay: .9s; }
.rg .t3 { transition-delay: 1.3s; }

/* L'eau qui entre dans les combles */
.rg .goutte, .rg .eau, .rg .flaque { fill: #5aa9e6; }
.rg .flaque { opacity: .6; }
.rg .seau { fill: #cfd8dc; stroke: #78909c; stroke-width: 1.5; }
.rg .fuite-eau { transition: opacity .6s 1.4s; }
.rg.ok-toiture .fuite-eau { opacity: 0; }
.rg .g1 { --d: 30px; }
.rg .g2 { --d: 30px; }
.rg .g3 { --d: 66px; }
.rg.anime .goutte { animation: rg-goutte 1s ease-in infinite; }
.rg.anime .g2 { animation-delay: -.33s; }
.rg.anime .g3 { animation-delay: -.66s; }
@keyframes rg-goutte { from { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } to { opacity: 0; transform: translateY(var(--d)); } }

/* Zinguerie : la gouttiere percee laisse place a la neuve et a sa descente */
.rg .gv { fill: #8d8f91; stroke: #6b6d6f; stroke-width: 1.5; }
.rg .ruissellement { fill: none; stroke: #5aa9e6; stroke-width: 3; stroke-dasharray: 8 10; }
.rg.anime .ruissellement { animation: rg-ruisselle .5s linear infinite; }
@keyframes rg-ruisselle { to { stroke-dashoffset: -18; } }
.rg .flaque-sol { fill: #5aa9e6; opacity: .6; }
.rg .gouttiere-vieille { transition: opacity .5s 1.6s; }
.rg.ok-toiture .gouttiere-vieille { opacity: 0; }
.rg .gouttiere-neuve { opacity: 0; transform: translateY(-12px); transition: opacity .4s 1.8s, transform .5s 1.8s cubic-bezier(.3, 1.6, .6, 1); }
.rg.ok-toiture .gouttiere-neuve { opacity: 1; transform: none; }
.rg .gn, .rg .descente, .rg .dauphin { fill: #a3b6c2; stroke: #6f8794; stroke-width: 1.5; }

/* La chaleur qui s'echappe, tant que l'enveloppe n'est pas isolee */
.rg .onde { fill: none; stroke: #ff7043; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.rg .chaleur { transition: opacity .8s .8s; }
.rg.ok-isolation .ch-toit, .rg.ok-isolation .ch-mur-d, .rg.ok-isolation .ch-sol,
.rg.ok-ite .ch-mur-g, .rg.ok-calorifugeage .ch-tuyaux { opacity: 0; }
.rg.anime .onde { animation: rg-onde 2s ease-in-out infinite; }
.rg.anime .o2 { animation-delay: -.7s; }
.rg.anime .o3 { animation-delay: -1.4s; }
@keyframes rg-onde { from { opacity: 0; transform: translateY(4px); } 35% { opacity: .9; } to { opacity: 0; transform: translateY(-16px); } }

/* Isolation interieure : laine soufflee, murs doubles, plancher bas */
.rg .laine-vieille { fill: #c9b98f; }
.rg .laine { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 2s .3s ease-out; }
.rg.ok-isolation .laine { transform: none; }
.rg .iti { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.4s 1s ease-out; }
.rg .iti-2 { transition-delay: 1.3s; }
.rg.ok-isolation .iti { transform: none; }
.rg .iti-plaque { fill: #fbfbf8; }
.rg .plancher-bas { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform 1.6s 1.1s ease-out; }
.rg.ok-isolation .plancher-bas { transform: none; }
.rg .pb-joints { stroke: #d9b65a; stroke-width: 1.5; }
.rg .tuyau-souffleur { fill: none; stroke: #546e7a; stroke-width: 7; stroke-linecap: round; opacity: 0; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: opacity .3s; }
.rg[data-chantier="isolation"] .tuyau-souffleur { opacity: 1; animation: rg-trace .7s ease-out forwards; }
@keyframes rg-trace { to { stroke-dashoffset: 0; } }
.rg .flocon { fill: #fff3c4; stroke: #e2c25e; stroke-width: .8; opacity: 0; }
.rg[data-chantier="isolation"] .flocon { animation: rg-flocon .9s ease-out infinite; }
.rg .f1 { --dx: -50px; --dy: 28px; }
.rg .f2 { --dx: -85px; --dy: 30px; }
.rg .f3 { --dx: -120px; --dy: 26px; }
.rg .f4 { --dx: -30px; --dy: 30px; }
.rg .f5 { --dx: -105px; --dy: 18px; }
.rg .f6 { --dx: -65px; --dy: 22px; }
.rg[data-chantier="isolation"] .f2 { animation-delay: -.15s; }
.rg[data-chantier="isolation"] .f3 { animation-delay: -.3s; }
.rg[data-chantier="isolation"] .f4 { animation-delay: -.45s; }
.rg[data-chantier="isolation"] .f5 { animation-delay: -.6s; }
.rg[data-chantier="isolation"] .f6 { animation-delay: -.75s; }
@keyframes rg-flocon { from { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* Isolation exterieure : isolant puis enduit, montes avec la nacelle */
.rg .ite > * { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 2.4s .3s ease-in-out; }
.rg .ite-enduit { transition-delay: 1s; transition-duration: 1.9s; }
.rg.ok-ite .ite > * { transform: none; }
.rg .ite-enduit { fill: #f7f2e6; }
.rg .ite-rail { fill: #90a4ae; }
.rg .nacelle { opacity: 0; transition: opacity .35s; }
.rg[data-chantier="ite"] .nacelle { opacity: 1; }
.rg .n-base, .rg .n-plancher { fill: #f9a825; }
.rg .n-roue { fill: #263238; }
.rg .n-ciseaux { fill: none; stroke: #f9a825; stroke-width: 4; vector-effect: non-scaling-stroke; transform: scaleY(.05); transform-box: fill-box; transform-origin: 50% 100%; }
.rg .n-garde { fill: none; stroke: #f57f17; stroke-width: 3; }
.rg .n-plateau { transform: translateY(233px); }
.rg[data-chantier="ite"] .n-ciseaux { animation: rg-ciseaux 2.4s .3s ease-in-out both; }
.rg[data-chantier="ite"] .n-plateau { animation: rg-monte 2.4s .3s ease-in-out both; }
@keyframes rg-ciseaux { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
@keyframes rg-monte { from { transform: translateY(233px); } to { transform: translateY(0); } }

/* Menuiseries : la vieille fenetre s'en va, la neuve arrive */
.rg .fv-cadre { fill: #8a5a3c; }
.rg .fv-vitre { fill: #b8c8d2; }
.rg .fv-croisee { stroke: #8a5a3c; stroke-width: 4; }
.rg .fv-fissure { fill: none; stroke: #fff; stroke-width: 1.3; }
.rg .fn-cadre { fill: #fdfdfd; stroke: #b0bec5; stroke-width: 1.5; }
.rg .fn-vitre { fill: #bfe3f5; stroke: #90a4ae; stroke-width: 1; }
.rg .fn-ouvrant { stroke: #e3e8eb; stroke-width: 4; }
.rg .fn-poignee { fill: #90a4ae; }
.rg .appui { fill: #b0a594; }
.rg .reflet { fill: #fff; opacity: .6; transform: translateX(-70px); transition: transform 1s 1.7s ease-in-out; }
.rg.ok-menuiseries .reflet { transform: translateX(110px); }
.rg .fen-vieille { transition: opacity .5s .3s, transform .6s .3s; }
.rg .fen-neuve { opacity: 0; transform: translateY(-14px); transition: opacity .5s 1s, transform .6s 1s cubic-bezier(.3, 1.5, .6, 1); }
.rg .f-rdc .fen-vieille { transition-delay: .6s; }
.rg .f-rdc .fen-neuve { transition-delay: 1.3s; }
.rg.ok-menuiseries .fen-vieille { opacity: 0; transform: translateY(10px); }
.rg.ok-menuiseries .fen-neuve { opacity: 1; transform: none; }
.rg .courant { fill: none; stroke: #6fb1e0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rg .courants { transition: opacity .6s .4s; }
.rg.ok-menuiseries .courants { opacity: 0; }
.rg.anime .courant { animation: rg-courant 1.6s ease-in-out infinite; }
.rg.anime .c2 { animation-delay: -.6s; }
.rg.anime .c3 { animation-delay: -1.1s; }
@keyframes rg-courant { from { opacity: 0; transform: translateX(-6px); } 30% { opacity: 1; } to { opacity: 0; transform: translateX(26px); } }

/* VMC : caisson, gaines, et l'air qui circule ; l'humidite s'en va */
.rg .moisi { fill: #6b7d5a; opacity: .55; transition: opacity 1s 1.4s; }
.rg .buee { fill: #e3f2fd; stroke: #e3f2fd; stroke-width: 1.4; transition: opacity 1s 1.4s; }
.rg.ok-vmc .moisi, .rg.ok-vmc .buee { opacity: 0; }
.rg .gaine { fill: none; stroke: #b7c3ca; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s .7s ease-in-out; }
.rg.ok-vmc .gaine { stroke-dashoffset: 0; }
.rg .air { fill: none; stroke: #4fc3f7; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 12; opacity: 0; transition: opacity .6s 2s; }
.rg.ok-vmc .air { opacity: .9; }
.rg.anime .air { animation: rg-air 1s linear infinite; }
@keyframes rg-air { to { stroke-dashoffset: -16; } }
.rg .vmc-objets { opacity: 0; transform: translateY(-10px); transition: opacity .4s .3s, transform .5s .3s cubic-bezier(.3, 1.6, .6, 1); }
.rg.ok-vmc .vmc-objets { opacity: 1; transform: none; }
.rg .caisson { fill: #eceff1; stroke: #90a4ae; stroke-width: 2; }
.rg .caisson-helice { fill: #78909c; }
.rg .caisson-pieds { stroke: #90a4ae; stroke-width: 3; }
.rg .chapeau { fill: #78909c; }
.rg .bouche { fill: #fafafa; stroke: #b0bec5; stroke-width: 1.5; }
.rg.anime.ok-vmc .caisson-helice { animation: rg-tour 1.2s linear infinite; }

/* Calorifugeage : les manchons gainent les tuyaux */
.rg .tuyaux { fill: none; stroke: #c9783f; stroke-width: 5; stroke-linejoin: round; }
.rg .manchon { fill: none; stroke: #3f454c; stroke-width: 11; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s .3s ease-in-out; }
.rg .manchon + .manchon { transition-delay: .6s; }
.rg.ok-calorifugeage .manchon { stroke-dashoffset: 0; }

/* Chauffage aux granules : la chaudiere fioul s'en va */
.rg .vc-corps { fill: #7d4130; }
.rg .vc-porte { fill: #4a2a20; }
.rg .vc-rouille { fill: none; stroke: #b0643a; stroke-width: 3; }
.rg .vc-conduit { stroke: #5d5d5d; stroke-width: 8; }
.rg .cuve { fill: #55704c; stroke: #3c5236; stroke-width: 2; }
.rg .cuve-texte { fill: #e8efe4; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.rg .vieille-chaudiere { transition: opacity .6s .3s, transform .7s .3s ease-in; }
.rg.ok-granules .vieille-chaudiere { opacity: 0; transform: translateX(-40px); }
.rg .chaudiere { opacity: 0; transform: translateY(-16px); transition: opacity .5s 1.1s, transform .6s 1.1s cubic-bezier(.3, 1.6, .6, 1); }
.rg.ok-granules .chaudiere { opacity: 1; transform: none; }
.rg .ch-corps { fill: #fafafa; stroke: #b0bec5; stroke-width: 2; }
.rg .ch-ecran { fill: #3aa935; }
.rg .ch-foyer { fill: #3b1d12; }
.rg .flamme { fill: #ff9f1c; }
.rg .ch-conduit { stroke: #b0bec5; stroke-width: 8; }
.rg .silo { fill: #c99f66; stroke: #9c7643; stroke-width: 2; }
.rg .silo-fenetre { fill: #5b4430; }
.rg .silo-granules { fill: #b9874a; transform: scaleY(.25); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.8s 1.2s ease-out; }
.rg.ok-granules .silo-granules { transform: none; }
.rg .vis { stroke: #90a4ae; stroke-width: 6; }
.rg.anime .flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: rg-flamme .35s ease-in-out infinite alternate; }
@keyframes rg-flamme { from { transform: scale(.85, .8); } to { transform: scale(1.05, 1.1); } }
.rg .granule { fill: #b9874a; opacity: 0; }
.rg[data-chantier="granules"] .granule { animation: rg-granule .5s ease-in infinite; }
.rg[data-chantier="granules"] .gr2 { animation-delay: -.12s; }
.rg[data-chantier="granules"] .gr3 { animation-delay: -.25s; }
.rg[data-chantier="granules"] .gr4 { animation-delay: -.37s; }
@keyframes rg-granule { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(-12px, 22px); } }
.rg .fumee circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rg .noire circle { fill: #5f5f66; }
.rg .claire circle { fill: #eceff1; }
.rg.anime:not(.ok-granules) .noire circle { animation: rg-fumee 2.4s ease-out infinite; }
.rg.anime.ok-granules .claire circle { animation: rg-fumee 3.6s ease-out infinite; }
.rg.anime .fumee circle:nth-child(2) { animation-delay: -.8s; }
.rg.anime .fumee circle:nth-child(3) { animation-delay: -1.6s; }
@keyframes rg-fumee { from { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .85; } to { opacity: 0; transform: translate(-30px, -70px) scale(1.8); } }

/* Les radiateurs chauffent des qu'il y a un chauffage neuf */
.rg .radiateur rect { fill: #eceff1; stroke: #b0bec5; stroke-width: 1.5; transition: fill 1s 1.8s; }
.rg .radiateur path { stroke: #cfd8dc; stroke-width: 2; }
.rg.ok-granules .radiateur rect, .rg.ok-pac .radiateur rect { fill: #ffd8c2; }
.rg .chauffe { opacity: 0; transition: opacity 1s 1.8s; }
.rg.ok-granules .chauffe, .rg.ok-pac .chauffe { opacity: 1; }
.rg .onde-douce { fill: none; stroke: #ff8a65; stroke-width: 2.4; stroke-linecap: round; opacity: .5; }
.rg.anime .onde-douce { animation: rg-onde 2.4s ease-in-out infinite; }

/* Pompe a chaleur : l'unite exterieure se pose, la clim s'allume a l'etage */
.rg .pac-ext { opacity: 0; transform: translateY(-180px); transition: opacity .3s .2s, transform .8s .2s cubic-bezier(.4, 1.5, .6, 1); }
.rg.ok-pac .pac-ext { opacity: 1; transform: none; }
.rg .pac-corps { fill: #f5f7f8; stroke: #90a4ae; stroke-width: 2; }
.rg .pac-grille { fill: #37474f; }
.rg .helice { fill: #b0bec5; }
.rg .pac-ailettes { stroke: #b0bec5; stroke-width: 2; }
.rg .pac-pieds { stroke: #607d8b; stroke-width: 4; }
.rg.anime.ok-pac .helice { animation: rg-tour .6s linear infinite; }
.rg .liaison { fill: none; stroke: #546e7a; stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s 1s ease-in-out; }
.rg.ok-pac .liaison { stroke-dashoffset: 0; }
.rg .split { opacity: 0; transform: translateY(-8px); transition: opacity .5s 1.8s, transform .5s 1.8s; }
.rg.ok-pac .split { opacity: 1; transform: none; }
.rg .split-corps { fill: #fff; stroke: #b0bec5; stroke-width: 1.5; }
.rg .split-volet { stroke: #cfd8dc; stroke-width: 2; }
.rg .split-led { fill: #3aa935; }
.rg .souffle { fill: none; stroke: #ffab91; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.rg.anime.ok-pac .souffle { animation: rg-souffle 1.6s ease-out infinite; }
@keyframes rg-souffle { from { opacity: 0; transform: translateY(-4px); } 30% { opacity: .9; } to { opacity: 0; transform: translateY(14px); } }

/* Photovoltaique : les panneaux montent, le courant descend, la lumiere vient */
.rg .pv-cadre { fill: #1e3a6e; stroke: #b0bec5; stroke-width: 1; }
.rg .pv-cellules { stroke: #4f7cc0; stroke-width: 1; }
.rg .pv-pied { stroke: #90a4ae; stroke-width: 2; }
.rg .panneau { opacity: 0; transform: translateX(-80px); transition: opacity .3s, transform .6s cubic-bezier(.3, 1.3, .6, 1); }
.rg.ok-pv .panneau { opacity: 1; transform: none; }
.rg .p1 { transition-delay: .3s; }
.rg .p2 { transition-delay: .6s; }
.rg .p3 { transition-delay: .9s; }
.rg .p4 { transition-delay: 1.2s; }
.rg .cable-pv { fill: none; stroke: #263238; stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s 1.5s; }
.rg.ok-pv .cable-pv { stroke-dashoffset: 0; }
.rg .courant-pv { fill: none; stroke: #ffd54f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0; transition: opacity .5s 2.3s; }
.rg.ok-pv .courant-pv { opacity: 1; }
.rg.anime .courant-pv { animation: rg-air .6s linear infinite; }
.rg .rayons-pv { fill: none; stroke: #ffe082; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; opacity: 0; transition: opacity .6s 1.4s; }
.rg.ok-pv .rayons-pv { opacity: .8; }
.rg.anime .rayons-pv { animation: rg-rayon .9s linear infinite; }
@keyframes rg-rayon { to { stroke-dashoffset: -24; } }
.rg .onduleur { opacity: 0; transition: opacity .5s 2s; }
.rg.ok-pv .onduleur { opacity: 1; }
.rg .ond-boite { fill: #eceff1; stroke: #90a4ae; stroke-width: 1.5; }
.rg .ond-ecran { fill: #263238; }
.rg .ond-led { fill: #3aa935; }
.rg .halo { opacity: 0; transition: opacity 1s 2.2s; }
.rg.ok-pv .halo { opacity: 1; }
.rg .ampoule { fill: #eceff1; transition: fill .6s 2.2s; }
.rg.ok-pv .ampoule { fill: #fff176; }

/* ── L'interieur ─────────────────────────────────────────────────────────── */
.rg .fil { fill: none; stroke: #78909c; stroke-width: 1.5; }
.rg .abat-jour { fill: #fff3e0; stroke: #ffcc80; stroke-width: 1.5; }
.rg .lit-tete { fill: #a1887f; }
.rg .lit-cadre { fill: #bcaaa4; }
.rg .lit-matelas { fill: #fff; }
.rg .lit-oreiller { fill: #e3f2fd; }
.rg .lit-couette { fill: #90caf9; }
.rg .tableau { fill: #b3e5fc; stroke: #8d6e63; stroke-width: 3; }
.rg .tableau-mont { fill: #81c784; }
.rg .tapis { fill: #e0d5c0; }
.rg .pot { fill: #c0643a; }
.rg .feuilles { fill: #4caf50; }
.rg .c-dos { fill: #7cb342; }
.rg .c-assise, .rg .c-bras { fill: #8bc34a; }
.rg .c-pieds { stroke: #5d4037; stroke-width: 4; }

/* Le chat, a la fin */
.rg .chat { opacity: 0; transition: opacity .8s 1s; }
.rg.fini .chat { opacity: 1; }
.rg .chat-corps { fill: #e39b4b; }
.rg .chat-queue { fill: none; stroke: #e39b4b; stroke-width: 4; stroke-linecap: round; }

/* ── La camionnette ──────────────────────────────────────────────────────── */
.rg .cam-caisse, .rg .cam-cabine { fill: #fff; stroke: #cfd8dc; stroke-width: 2; }
.rg .cam-pare-brise { fill: #a8d8f0; }
.rg .cam-bande { fill: #3aa935; }
.rg .cam-nom { fill: #3aa935; font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 700; letter-spacing: .03em; }
.rg .cam-sous { fill: #607d8b; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.rg .cam-phare { fill: #ffe082; }
.rg .cam-echelle { fill: none; stroke: #90a4ae; stroke-width: 2.5; }
.rg .pneu { fill: #263238; }
.rg .jante { fill: #b0bec5; }
.rg .moyeu { stroke: #78909c; stroke-width: 2; }
.rg .camion { transition: transform 2.4s cubic-bezier(.15, .75, .3, 1); }
.rg.attente .camion { transform: translateX(-300px); }
.rg.anime.arrivee .roue { animation: rg-tour .45s linear 5; }

/* ── Les ouvriers ────────────────────────────────────────────────────────── */
.rg .ouvrier { opacity: 0; transition: opacity .35s; }
.rg .o-pop { transform: scale(.5); transition: transform .45s cubic-bezier(.3, 1.6, .6, 1); }
.rg[data-chantier="toiture"] .o-toiture,
.rg[data-chantier="isolation"] .o-isolation,
.rg[data-chantier="ite"] .o-ite,
.rg[data-chantier="menuiseries"] .o-menuiseries,
.rg[data-chantier="vmc"] .o-vmc,
.rg[data-chantier="calorifugeage"] .o-calorifugeage,
.rg[data-chantier="granules"] .o-granules,
.rg[data-chantier="pac"] .o-pac,
.rg[data-chantier="pv"] .o-pv { opacity: 1; }
.rg[data-chantier="toiture"] .o-toiture .o-pop,
.rg[data-chantier="isolation"] .o-isolation .o-pop,
.rg[data-chantier="ite"] .o-ite .o-pop,
.rg[data-chantier="menuiseries"] .o-menuiseries .o-pop,
.rg[data-chantier="vmc"] .o-vmc .o-pop,
.rg[data-chantier="calorifugeage"] .o-calorifugeage .o-pop,
.rg[data-chantier="granules"] .o-granules .o-pop,
.rg[data-chantier="pac"] .o-pac .o-pop,
.rg[data-chantier="pv"] .o-pv .o-pop { transform: none; }

/* Le corps (#rg-corps) est commun et porte ses couleurs en attributs : les
   selecteurs de cette feuille n'entrent pas dans un <use>. Seule la peau
   varie, par la propriete color, qui elle descend jusque dans le <use>. */
.rg .ouvrier { color: #e9b48f; }
.rg .peau-2 { color: #c68c63; }
.rg .peau-3 { color: #8d5a3b; }
.rg .o-main { fill: currentColor; }
.rg .o-bras { fill: none; stroke: #3aa935; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rg .o-manche { stroke: #8d6e4f; stroke-width: 3.5; stroke-linecap: round; }
.rg .o-outil { fill: #607d8b; }
.rg .buse { stroke: #37474f; stroke-width: 6; stroke-linecap: round; }
.rg .visseuse { fill: #f9a825; }
.rg .meche, .rg .tournevis, .rg .cle { stroke: #78909c; stroke-width: 3; stroke-linecap: round; }
.rg .cle-tete { fill: none; stroke: #78909c; stroke-width: 3; }
.rg .manchon-main { fill: #3f454c; }
.rg .sac { fill: #e8d5a9; stroke: #b39b6a; stroke-width: 1.5; }

/* Les gestes : chacun tourne ou glisse autour de l'epaule (origine locale) */
.rg.anime .g-marteau { animation: rg-marteau .32s ease-in-out infinite alternate; }
.rg.anime .g-buse { animation: rg-buse .8s ease-in-out infinite alternate; }
.rg.anime .g-lisseuse { animation: rg-lisse .5s ease-in-out infinite alternate; }
.rg.anime .g-visseuse { animation: rg-vibre .09s linear infinite alternate; }
.rg.anime .g-tournevis { animation: rg-tourne .25s ease-in-out infinite alternate; }
.rg.anime .g-glisse { animation: rg-glisse .7s ease-in-out infinite alternate; }
.rg.anime .g-sac { animation: rg-sac .6s ease-in-out infinite alternate; }
.rg.anime .g-cle { animation: rg-cle .4s ease-in-out infinite alternate; }
.rg.anime .g-pousse { animation: rg-pousse .6s ease-in-out infinite alternate; }
@keyframes rg-marteau { from { transform: rotate(-30deg); } to { transform: rotate(18deg); } }
@keyframes rg-buse { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes rg-lisse { from { transform: translateY(-9px); } to { transform: translateY(7px); } }
@keyframes rg-vibre { from { transform: translateX(-1px); } to { transform: translateX(1px); } }
@keyframes rg-tourne { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes rg-glisse { from { transform: translateX(-12px); } to { transform: translateX(10px); } }
@keyframes rg-sac { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
@keyframes rg-cle { from { transform: rotate(-16deg); } to { transform: rotate(12deg); } }
@keyframes rg-pousse { from { transform: translate(4px, 2px); } to { transform: translate(-4px, -3px); } }

/* ── La cigogne : elle arrive de la droite et se pose sur son nid ─────────── */
.rg .cigogne { opacity: 0; transition: opacity .4s; }
.rg.fini .cigogne { opacity: 1; }
.rg .cig-vol { opacity: 0; }
.rg .cig-corps, .rg .cig-tete { fill: #fff; stroke: #cfd8dc; stroke-width: 1; }
.rg .cig-cou { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.rg .cig-aile { fill: #263238; }
.rg .cig-plume { fill: #fff; stroke: #263238; stroke-width: 1; }
.rg .cig-pointe { fill: #263238; }
.rg .cig-patte { fill: none; stroke: #e53935; stroke-width: 2.5; stroke-linecap: round; }
.rg .cig-bec { fill: #ef5350; }
.rg .cig-oeil { fill: #222; }
.rg .cig-ailes { transform-box: fill-box; transform-origin: 50% 100%; }
.rg.anime.fini .cig-trajet { animation: rg-vol 3.2s cubic-bezier(.3, .1, .3, 1) both; }
.rg.anime.fini .cig-vol { animation: rg-vol-on 3.2s both; }
.rg.anime.fini .cig-pose { animation: rg-vol-off 3.2s both; }
.rg.anime.fini .cig-ailes { animation: rg-battement .3s ease-in-out infinite alternate; }
@keyframes rg-vol {
  0% { transform: translate(660px, -40px); }
  40% { transform: translate(360px, -70px); }
  75% { transform: translate(110px, -50px); }
  100% { transform: translate(0, 0); }
}
@keyframes rg-vol-on { 0%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes rg-vol-off { 0%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes rg-battement { from { transform: scaleY(1); } to { transform: scaleY(-.7); } }

/* ── La camera thermique ─────────────────────────────────────────────────── */
/* Une vue a part, dessinee par-dessus la maison : en jaune et rouge la chaleur
   qui s'echappe, en bleu le froid qui entre par les vieilles fenetres. Chaque
   tache depend du metier qui la supprime, comme dans la vue normale.
   Les ouvriers et la cigogne sont dessines APRES elle : le filtre #rg-f-ir les
   peint en silhouettes chaudes, et l'on suit le chantier camera sortie. */
.rg .thermo { opacity: 0; pointer-events: none; transition: opacity .2s; }
.rg.thermique .thermo { opacity: 1; }
.rg.thermique .o-pop, .rg.thermique .cigogne { filter: url(#rg-f-ir); }
.rg.thermique .n-base, .rg.thermique .n-plancher { fill: #3b2a78; }
.rg.thermique .n-ciseaux, .rg.thermique .n-garde { stroke: #4b3590; }
.rg .th-fond { fill: #120a2c; }
.rg .th-maison { fill: #2a1a5e; }
.rg .th-combles { fill: #43267a; }
.rg .th-cave { fill: #6c2f86; }
.rg .th-pac { opacity: 0; transition: opacity .6s .6s; }
.rg.ok-pac .th-pac { opacity: 1; }
.rg .th-pac rect { fill: #2f6ae0; }
.rg .th-pac circle { fill: #1c3d9e; }
.rg .th, .rg .th-f { transition: opacity 1.2s .6s; }
.rg.ok-isolation .th-toit, .rg.ok-isolation .th-mur-d, .rg.ok-isolation .th-sol,
.rg.ok-ite .th-mur-g, .rg.ok-calorifugeage .th-tuyaux, .rg.ok-menuiseries .th-fen { opacity: 0; }
.rg.anime.thermique .th-fuites { animation: rg-pulse 1.8s ease-in-out infinite alternate; }
@keyframes rg-pulse { from { opacity: .75; } to { opacity: 1; } }
.rg .th-coins { fill: none; stroke: #fff; stroke-width: 3; opacity: .85; }
.rg .th-rec { fill: #ff3d2e; }
.rg.anime.thermique .th-rec { animation: rg-rec 1s steps(1) infinite; }
@keyframes rg-rec { 50% { opacity: 0; } }
.rg .th-titre { fill: #fff; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.rg .th-leg { fill: #fff; font-size: 14px; }