/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   MENU « NOS MÉTIERS » — styles (13/10/2026). Balisage : inc/menu-metiers.php ; comportement : assets/js/menu-metiers.js.
   Chargée sur TOUTES les pages après nav-extras.css (les pages autonomes ne chargent pas base.css : rien ici n'en dépend).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Le bouton de la barre ── */
.nav-links-desktop{position:relative}
.rhm-drop{position:static}
/* un bouton (il ouvre, il ne mène nulle part) habillé comme les liens de la barre : sa taille, sa graisse et sa couleur viennent de
   .nav-link ; on ne reprend ici que ce que le navigateur impose d'ordinaire aux boutons (police système, bordure, fond) */
.rhm-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font-family:inherit;line-height:inherit;letter-spacing:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.rhm-btn .nav-chev{width:13px;height:13px;stroke-width:2.6;opacity:.55;flex-shrink:0;transition:transform .25s ease}
.rhm-drop.ouvert .rhm-btn .nav-chev,.rhm-drop:not(.rhm-pret):hover .rhm-btn .nav-chev{transform:rotate(180deg);opacity:.9}

/* ── Le panneau ──
   Blanc plein : un flou d'arrière-plan imbriqué dans la barre (elle-même en verre) laissait transparaître le titre du héros.
   En haut de page la barre est réduite à 82 % (transform) : le panneau est remis à sa taille par l'inverse (--inv, posé par
   menu-metiers.js), et centré sur l'écran. */
.rhm-panel{position:absolute;top:calc(100% + 16px);left:0;box-sizing:border-box;width:min(1040px,calc(100vw - 48px));padding:16px;border-radius:30px;
  text-align:left;z-index:300;background:#fff;box-shadow:0 56px 110px -50px rgba(20,24,31,.62),0 0 0 1px rgba(26,20,16,.06);
  transform-origin:0 0;opacity:0;visibility:hidden;transform:translateY(-8px) scale(var(--inv,1));transition:opacity .25s ease,transform .25s ease,visibility .25s}
/* Pont invisible entre le bouton et le panneau : la souris y descend sans le refermer */
.rhm-panel::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
/* Ouvert par le script (classe « ouvert ») : avec le seul :hover, Safari (WebKit) laissait parfois le panneau affiché après le
   départ de la souris (banc du 13/10 en ligne : 2 fois sur 3 sur /carrelage/). Sans script (« rhm-pret » absente), le survol et
   le focus l'ouvrent encore. */
.rhm-drop.ouvert .rhm-panel,.rhm-drop:not(.rhm-pret):hover .rhm-panel,.rhm-drop:not(.rhm-pret):focus-within .rhm-panel{opacity:1;visibility:visible;transform:scale(var(--inv,1))}
.rhm-panel *{box-sizing:border-box}
.rhm-panel a{text-decoration:none !important}
.rhm-panel svg{display:block;fill:none}
.rhm-grid{position:relative;display:grid;grid-template-columns:318px minmax(0,1fr);gap:18px;min-height:404px;overflow:hidden;border-radius:18px}

/* ── La liste des univers ── */
.rhm-rail{display:flex;flex-direction:column;gap:3px;padding:6px 0 0}
.rhm-sur{font:700 10.5px/1 'Sora',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8C7D6E;padding:8px 12px 10px}
.rhm-r{position:relative;display:flex;align-items:center;gap:13px;width:100%;padding:9px 12px 9px 9px;border:0;border-radius:17px;background:none;cursor:pointer;
  text-align:left;font:inherit;color:#1A1410 !important;transition:background .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.rhm-tile{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 12px 22px -14px var(--g2)}
.rhm-tile svg{width:22px;height:22px;stroke-width:1.9}
.rhm-rx{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rhm-rx b{font:700 14.5px/1.2 'Sora',sans-serif;letter-spacing:-.015em}
.rhm-rx small{font:500 12.5px/1.3 'Manrope',sans-serif;color:#6B6157}
.rhm-r:hover,.rhm-r:focus-visible{background:#FAFAF9;outline:none}
/* l'univers affiché est l'élément choisi : crème et anneau doré (charte), jamais un fond sombre */
.rhm-r.on{background:#FFFBEE;box-shadow:inset 0 0 0 2px #E4B42E,0 18px 36px -26px rgba(196,148,20,.7)}
.rhm-new{flex:none;font:700 10.5px/1 'Sora',sans-serif;font-style:normal;color:var(--f);background:var(--t);border-radius:999px;padding:4px 8px}

/* ── Les pages de l'univers affiché ── */
.rhm-det{position:relative;padding:14px 4px 0 22px;border-left:1px solid #ECEAE7}
.rhm-u{display:none;margin:0;padding:0}
.rhm-u.on{display:block;animation:rhmIn .3s ease}
/* halo très pâle de la couleur de l'univers, derrière le titre */
.rhm-u::before{content:"";position:absolute;top:-90px;right:-60px;width:460px;height:300px;background:radial-gradient(closest-side,var(--t),rgba(255,255,255,0));pointer-events:none}
.rhm-u > *{position:relative}
@keyframes rhmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rhm-uh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}
/* titre en deux tons (charte) ; un paragraphe et non un h3 : le menu, présent sur toutes les pages, ne doit pas leur ajouter de titres */
.rhm-ut{margin:0;font:800 27px/1.12 'Sora',sans-serif;letter-spacing:-.028em;color:#1A1410}
.rhm-ut em{font-style:normal;color:var(--f)}
.rhm-voir{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:700 13.5px/1 'Manrope',sans-serif;color:var(--f) !important}
.rhm-voir svg{width:15px;height:15px;stroke-width:2.2;transition:transform .2s}
.rhm-voir:hover svg{transform:translateX(3px)}
.rhm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rhm-c{display:flex;align-items:center;gap:13px;padding:13px 14px 13px 13px;border-radius:18px;background:#fff;border:1px solid rgba(31,42,24,.11);
  box-shadow:0 14px 28px -24px rgba(20,24,31,.45);transition:transform .2s,box-shadow .2s,border-color .2s}
.rhm-c:hover,.rhm-c:focus-visible{transform:translateY(-2px);border-color:transparent;outline:none;box-shadow:0 0 0 2px var(--t),0 20px 34px -24px rgba(20,24,31,.5)}
.rhm-c i{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2))}
.rhm-c i svg{width:23px;height:23px;stroke-width:1.9}
.rhm-c span{display:flex;flex-direction:column;gap:3px;min-width:0}
.rhm-c b{font:700 15px/1.2 'Sora',sans-serif;letter-spacing:-.02em;color:#1A1410}
.rhm-c small{font:500 12.5px/1.35 'Manrope',sans-serif;color:#6B6157}
.rhm-co{background:var(--t);border-color:transparent;box-shadow:none}
.rhm-co i{background:#fff;color:var(--f)}
/* la page où l'on se trouve : élément choisi (crème, anneau doré) */
.rhm-c.ici{background:#FFFBEE;border-color:transparent;box-shadow:inset 0 0 0 2px #E4B42E,0 18px 36px -26px rgba(196,148,20,.7)}

/* ── La bande du bas ── */
.rhm-band{position:relative;display:flex;align-items:center;gap:22px;margin-top:14px;padding:12px 12px 12px 22px;border-radius:22px;background:#FAFAF9;border:1px solid #ECEAE7}
.rhm-bt{flex:1;display:flex;flex-direction:column;gap:3px}
.rhm-bt b{font:800 15px/1.25 'Sora',sans-serif;letter-spacing:-.015em;color:#1A1410}
.rhm-bt span{font:500 13px/1.4 'Manrope',sans-serif;color:#6B6157}
.rhm-bl{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:14px;background:#fff;
  font:700 14px/1 'Manrope',sans-serif;color:#1A1410 !important;box-shadow:0 0 0 1px #ECEAE7,0 12px 22px -18px rgba(20,24,31,.45)}
.rhm-bl i{flex:none;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#F3EFEA;color:#1A1410}
.rhm-bl i svg{width:16px;height:16px;stroke-width:1.9}
.rhm-cta{display:flex;flex-direction:column;align-items:center;gap:7px}
.rhm-devis{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:14px;background:#1A1410;color:#fff !important;
  font:700 15px/1 'Manrope',sans-serif;box-shadow:0 18px 32px -18px rgba(26,20,16,.85)}
.rhm-devis svg{width:17px;height:17px;stroke-width:2.2}
.rhm-cta small{font:500 12px/1.2 'Manrope',sans-serif;color:#6B6157}
@media (max-width:1199px){.rhm-bt span{display:none}}
@media (prefers-reduced-motion:reduce){.rhm-panel,.rhm-c,.rhm-r,.rhm-btn .nav-chev{transition:none}.rhm-u.on{animation:none}}

/* ── Téléphone : la section du tiroir (mêmes classes que le tiroir existant) ── */
.mobile-menu .rhm-msur{display:block;font:700 11px/1 'Sora',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8C7D6E;margin:20px 0 6px;position:relative;z-index:2}
.mobile-menu .rhm-mh .mobile-acc-label{display:inline-flex !important;align-items:center;gap:14px;font-size:20.5px !important;padding:9px 0 !important}
.mobile-menu .rhm-mt{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 20px -12px var(--g2)}
.mobile-menu .rhm-mt svg,.mobile-menu .rhm-ms .msl-ic svg{width:22px;height:22px;stroke-width:2;fill:none}
.mobile-menu .rhm-ms .msl-ic{color:#fff;display:grid;place-items:center}
.mobile-menu .rhm-mn{font:700 11px/1 'Sora',sans-serif;font-style:normal;color:var(--f);background:var(--t);border-radius:999px;padding:5px 9px;white-space:nowrap}
.mobile-menu .mobile-acc-btn[data-acc="acc-reno"].open{color:#6D4FA8 !important}
#acc-reno .mobile-sublink.active{background:rgba(109,79,168,.13) !important;color:#5A3E94 !important}
.mobile-menu .rhm-sep{display:block;height:1px;background:#ECEAE7;margin:14px 0 6px;position:relative;z-index:2}