/* Accueil — section « Ce que fait un responsable énergie et RSE ».
   Schéma « vous déposez → Hotelium → vous recevez », dans la marque E :
   noir, blanc, gris chauds ; la couleur ne sert qu'aux données (alerte,
   tendance). Les chiffres des cartes de droite sont ceux d'un hôtel fictif,
   et la section le dit. */

.rr { padding: 112px 0 104px; background: var(--m-bg-soft, #F7F7F5); }
.rr-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

.rr-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.rr-kicker { font-family: var(--m-ff); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3, #666); margin: 0 0 16px; }
.rr-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -.03em; margin: 0; color: var(--m-ink, #111); font-weight: 600; }
.rr-head p { margin: 0; color: var(--m-ink-2, #444); font-size: 1.04rem; line-height: 1.65; }

/* ── Le schéma ─────────────────────────────────────────── */
.rr-flow { display: grid; grid-template-columns: 1fr 290px 1.15fr; gap: 0; align-items: center; position: relative; }
.rr-col-label { font-family: var(--m-ff); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3, #666); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.rr-col-label::before { content: ''; width: 18px; height: 1px; background: currentColor; }

.rr-in { display: grid; gap: 10px; }
.rr-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--m-line, #EAEAEA); border-radius: 14px; padding: 14px 16px; transition: border-color .2s, transform .2s; }
.rr-item:hover { border-color: var(--m-line-2, #D6D6D3); transform: translateX(2px); }
.rr-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--m-bg-alt, #F2F2F0); display: grid; place-items: center; color: var(--m-ink, #111); }
.rr-ico svg { width: 19px; height: 19px; }
.rr-item b { display: block; font-size: .95rem; font-weight: 600; color: var(--m-ink, #111); letter-spacing: -.005em; }
.rr-item span { display: block; font-size: .8rem; color: var(--m-ink-3, #666); margin-top: 2px; }
.rr-item.soon { background: transparent; border-style: dashed; }
.rr-item .rr-tag { display: inline-block; margin: 0 0 0 6px; font-family: var(--m-ff); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--m-line-2, #D6D6D3); border-radius: 999px; padding: 1px 7px; line-height: 1.5; font-weight: 500; color: var(--m-ink-3, #666); vertical-align: 2px; }

/* Liaisons : un trait pointillé qui circule, de part et d'autre du cœur */
.rr-core-wrap { position: relative; display: flex; justify-content: center; padding: 0 28px; }
.rr-core-wrap::before, .rr-core-wrap::after { content: ''; position: absolute; top: 50%; width: 28px; height: 2px; background-image: linear-gradient(90deg, var(--m-ink, #111) 50%, transparent 50%); background-size: 8px 2px; animation: rr-dash 1.2s linear infinite; opacity: .5; }
.rr-core-wrap::before { left: 0; }
.rr-core-wrap::after { right: 0; }
@keyframes rr-dash { to { background-position: 8px 0; } }

.rr-core { width: 100%; background: var(--m-dark, #111); color: #fff; border-radius: 22px; padding: 26px 22px 22px; box-shadow: 0 30px 60px -24px rgba(17,17,17,.45); }
.rr-core-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.rr-core-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.rr-core-brand svg { flex: none; width: 26px !important; height: 26px !important; min-width: 26px; }
.rr-live { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-family: var(--m-ff); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.rr-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: rr-pulse 2s ease-in-out infinite; }
@keyframes rr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rr-steps li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.rr-steps li:first-child { border-top: 0; }
.rr-steps em { font-style: normal; font-family: var(--m-ff); font-size: .7rem; color: rgba(255,255,255,.5); min-width: 18px; }

/* Cartes d'interface : ce que l'hôtelier reçoit */
.rr-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-card { background: #fff; border: 1px solid var(--m-line, #EAEAEA); border-radius: 14px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(17,17,17,.04); transition: box-shadow .2s, transform .2s; }
.rr-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(17,17,17,.25); }
.rr-card.wide { grid-column: 1 / -1; }
.rr-card-label { font-size: .74rem; color: var(--m-ink-3, #666); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rr-card-value { font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; color: var(--m-ink, #111); margin-top: 6px; line-height: 1.1; }
.rr-card-value small { font-size: .82rem; font-weight: 500; color: var(--m-ink-3, #666); margin-left: 4px; letter-spacing: 0; }
.rr-trend { font-family: var(--m-ff); font-size: .72rem; color: #166534; }
.rr-spark { display: block; width: 100%; height: 34px; margin-top: 10px; }
.rr-bar { height: 6px; border-radius: 99px; background: var(--m-bg-alt, #F2F2F0); margin-top: 12px; overflow: hidden; }
.rr-bar i { display: block; height: 100%; width: 50%; background: var(--m-ink, #111); border-radius: 99px; }
.rr-bar-legend { display: flex; justify-content: space-between; font-size: .72rem; color: var(--m-ink-3, #666); margin-top: 7px; }
.rr-alert { display: flex; gap: 12px; align-items: flex-start; }
.rr-alert-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--m-alert, #9A3412); margin-top: 6px; box-shadow: 0 0 0 4px rgba(154,52,18,.12); }
.rr-alert b, .rr-action b { display: block; font-size: .9rem; font-weight: 600; color: var(--m-ink, #111); }
.rr-alert span, .rr-action span { display: block; font-size: .78rem; color: var(--m-ink-3, #666); margin-top: 2px; line-height: 1.45; }
.rr-action { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.rr-action strong { font-size: 1.05rem; font-weight: 600; white-space: nowrap; color: var(--m-ink, #111); }
.rr-fict { font-family: var(--m-ff); font-size: .68rem; letter-spacing: .04em; color: var(--m-ink-3, #666); margin: 12px 2px 0; text-align: right; }

/* ── Les quatre rôles ─────────────────────────────────── */
.rr-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 88px; border-top: 1px solid var(--m-line-2, #D6D6D3); }
.rr-role { padding: 26px 24px 4px 0; }
.rr-role + .rr-role { padding-left: 24px; border-left: 1px solid var(--m-line, #EAEAEA); }
.rr-role-num { font-family: var(--m-ff); font-size: .72rem; color: var(--m-ink-3, #666); letter-spacing: .06em; }
.rr-role h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; margin: 14px 0 8px; color: var(--m-ink, #111); }
.rr-role p { font-size: .9rem; line-height: 1.6; color: var(--m-ink-2, #444); margin: 0; }
.rr-note { max-width: 760px; margin: 56px 0 0; font-size: .9rem; line-height: 1.6; color: var(--m-ink-3, #666); }
.rr-note a { color: var(--m-ink, #111); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .rr-core-wrap::before, .rr-core-wrap::after, .rr-live::before { animation: none; }
  .rr-item, .rr-card { transition: none; }
}

@media (max-width: 1000px) {
  .rr-head { grid-template-columns: 1fr; gap: 20px; }
  .rr-flow { grid-template-columns: 1fr; gap: 0; }
  .rr-core-wrap { padding: 28px 0; max-width: 420px; margin: 0 auto; width: 100%; }
  .rr-core-wrap::before, .rr-core-wrap::after { left: 50%; right: auto; width: 2px; height: 28px; top: auto; background-image: linear-gradient(180deg, var(--m-ink, #111) 50%, transparent 50%); background-size: 2px 8px; animation-name: rr-dash-v; }
  .rr-core-wrap::before { top: 0; }
  .rr-core-wrap::after { bottom: 0; }
  .rr-roles { grid-template-columns: 1fr 1fr; }
  .rr-role:nth-child(3) { padding-left: 0; border-left: 0; }
}
@keyframes rr-dash-v { to { background-position: 0 8px; } }

@media (max-width: 560px) {
  .rr { padding: 72px 0 64px; }
  .rr-wrap { padding: 0 16px; }
  .rr-out { grid-template-columns: 1fr; }
  .rr-roles { grid-template-columns: 1fr; margin-top: 56px; }
  .rr-role, .rr-role + .rr-role { padding: 22px 0 6px; border-left: 0; border-top: 1px solid var(--m-line, #EAEAEA); }
  .rr-role:first-child { border-top: 0; }
}