/* ---------------------------------------------------------
   Page interne "Rénovation énergétique". Réutilise le système de
   design du site (tokens, polices, .tool-panel/.result-panel/
   .search-box/.metric-head/.metric-bar…) depuis ../styles.css.
   Ce fichier ne contient que l'habillage propre à cette page,
   sur le même modèle que zan.css.
--------------------------------------------------------- */

.intro-ren .lede { margin-top: 2px; margin-bottom: 0; }

.intro-ren .tool-panel { max-width: none; margin: 22px 0 0; }
.intro-ren .ren-result { max-width: none; margin: 24px 0 0; }

.ren-info { position: relative; display: inline-block; margin: 10px 0 0; }

.ren-info-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--blue);
  background: var(--blue-soft);
  border: 0;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: .82rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ren-info-btn:hover,
.ren-info-btn:focus-visible { background: var(--blue); color: #fff; }
.ren-info-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ren-info-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  width: min(380px, 82vw);
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
}

.ren-info-panel[hidden] { display: none; }
.ren-info:hover .ren-info-panel[hidden],
.ren-info:focus-within .ren-info-panel[hidden] { display: block; }

.ren-info-panel p { margin: 0 0 8px; color: var(--ink); font-size: .9rem; line-height: 1.5; }
.ren-info-panel p:last-child { margin-bottom: 0; }
.ren-info-panel strong { color: var(--blue-deep); }

.ren-source-note { color: var(--muted) !important; font-size: .8rem !important; }
.ren-source-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.ren-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------
   Pictogramme "100 maisons" — une maison = 1 % du parc.
   Dégradé de 7 teintes A→G dérivé des couleurs de la charte
   (vert → or → terre cuite → rouge), avec un ordre de lecture
   et une légende textuelle qui ne dépendent jamais de la seule
   couleur pour être compris (RGAA 3.3). La grille prend toute la
   largeur disponible (le nombre de colonnes — toujours un
   diviseur de 100, pour finir sur une ligne complète — s'adapte
   à la largeur du conteneur via une container query), sans
   jamais être plus haute que large (10 colonnes minimum).
--------------------------------------------------------- */
.ren-pictogram {
  --dpe-a: var(--green-deep);
  --dpe-b: var(--green);
  --dpe-c: #647e2f;
  --dpe-d: var(--gold);
  --dpe-e: #ad6614;
  --dpe-f: var(--clay);
  --dpe-g: var(--red);
  position: relative;
  margin: 24px 0;
}

.ren-pictogram-caption { max-width: 900px; margin: 0 auto 14px; color: var(--muted); font-size: .88rem; text-align: center; }

.ren-pictogram-frame { container-type: inline-size; width: 100%; max-width: 900px; margin: 0 auto 18px; }

.ren-houses {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  width: 100%;
}

@container (min-width: 560px) {
  .ren-houses { grid-template-columns: repeat(20, 1fr); gap: 5px; }
}

@container (min-width: 760px) {
  .ren-houses { grid-template-columns: repeat(25, 1fr); gap: 5px; }
}

.ren-house {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  cursor: default;
  transition: opacity .15s ease;
}
.ren-house use { fill: currentColor; }

.ren-house--A { color: var(--dpe-a); }
.ren-house--B { color: var(--dpe-b); }
.ren-house--C { color: var(--dpe-c); }
.ren-house--D { color: var(--dpe-d); }
.ren-house--E { color: var(--dpe-e); }
.ren-house--F { color: var(--dpe-f); }
.ren-house--G { color: var(--dpe-g); }

.ren-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.ren-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: .82rem;
  cursor: default;
  transition: opacity .15s ease;
}

.ren-legend-swatch {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: currentColor;
}

.ren-legend-label { color: var(--ink); font-weight: 700; }
.ren-legend-value { color: var(--muted); }

/* Survol d'une maison ou d'une légende : les autres classes s'estompent
   pour faire ressortir le groupe survolé — jamais la seule information
   disponible, puisque légende et fiches "échéance" restent toujours
   visibles en texte. */
.ren-pictogram[data-hover-letters] .ren-house,
.ren-pictogram[data-hover-letters] .ren-legend-item { opacity: .22; }

.ren-pictogram[data-hover-letters~="A"] [data-letter="A"],
.ren-pictogram[data-hover-letters~="B"] [data-letter="B"],
.ren-pictogram[data-hover-letters~="C"] [data-letter="C"],
.ren-pictogram[data-hover-letters~="D"] [data-letter="D"],
.ren-pictogram[data-hover-letters~="E"] [data-letter="E"],
.ren-pictogram[data-hover-letters~="F"] [data-letter="F"],
.ren-pictogram[data-hover-letters~="G"] [data-letter="G"] { opacity: 1; }

.ren-tooltip {
  position: fixed;
  z-index: 60;
  padding: 6px 10px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 480px) {
  .ren-houses { gap: 5px; }
}

.ren-national { padding-top: clamp(28px, 5vw, 48px); padding-bottom: clamp(28px, 5vw, 48px); }

.ren-national-kicker {
  margin: 0 0 18px;
  color: rgba(242, 242, 246, .7);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ren-stat-label {
  display: block;
  margin-bottom: 10px;
  color: rgba(242, 242, 246, .68);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ren-national .stats-grid strong { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

.ren-city-sub { margin-top: 2px; color: var(--muted); font-size: .84rem; }

.ren-gauge-card { min-height: 130px; background: var(--green); }
.ren-gauge-card.tier-ok { background: var(--green); color: #fff; }
.ren-gauge-card.tier-avg { background: var(--blue); color: #fff; }
.ren-gauge-card.tier-over { background: var(--red); color: #fff; }
.ren-gauge-card.tier-na { background: var(--muted); color: #fff; }

/* ---------------------------------------------------------
   Les 4 échéances : une carte par échéance, information
   hiérarchisée (année, sous-titre, chiffre clé, détail, moyennes).
--------------------------------------------------------- */
/* Toujours 1, 2 ou 4 cartes par ligne — jamais 3 (qui laisserait une carte
   seule sur la ligne suivante) : pas d'auto-fit, des paliers explicites. */
.ren-objectives {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 16px;
  margin: 22px 0;
}

@media (min-width: 480px) {
  .ren-objectives { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .ren-objectives { grid-template-columns: repeat(4, 1fr); }
}

/* Chaque carte partage les mêmes pistes de ligne que ses voisines (année,
   sous-titre, chiffre, détail, moyennes) via une sous-grille : même si le
   texte d'une carte fait sauter une ligne de plus qu'une autre, les
   informations de même nature restent alignées entre les cartes d'une même
   rangée. Dégradation sans casse sur les navigateurs sans subgrid : chaque
   carte garde alors sa hauteur propre, comme avant. */
.ren-objective-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  align-content: start;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: default;
  transition: box-shadow .15s ease;
}

.ren-objective-card:hover { box-shadow: var(--shadow); }

.ren-objective-year {
  margin: 0;
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.ren-objective-subtitle { margin: 2px 0 14px; color: var(--muted); font-size: .84rem; }

.ren-objective-value {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.ren-objective-count { margin: 8px 0 14px; color: var(--muted); font-size: .82rem; }

.ren-objective-avg { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.ren-objective-avg strong { color: var(--ink); font-weight: 700; }

.ren-delta { font-weight: 700; }
.ren-delta.is-favorable { color: var(--green-deep); }
.ren-delta.is-unfavorable { color: var(--red); }
.ren-delta.is-neutral { color: var(--muted); }

.ren-sample-caveat {
  margin: 18px 0 0;
  padding: 10px 14px;
  background: var(--gold-soft);
  border-radius: var(--radius);
  color: #7a5f04;
  font-size: .84rem;
  font-weight: 600;
}

.ren-compare-caveat { margin: 18px 0 0; color: var(--muted); font-size: .78rem; }

/* ---------------------------------------------------------
   Tableaux (classement régions, classement départements)
--------------------------------------------------------- */
.ren-table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ren-table-wrap--tall { max-height: 560px; overflow-y: auto; }

.ren-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .88rem;
}

.ren-table th,
.ren-table td {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.ren-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.ren-table tbody tr:last-child td { border-bottom: 0; }
.ren-table tbody tr:hover { background: var(--blue-soft); }

.ren-table td.is-name { white-space: normal; font-weight: 600; color: var(--ink); }

.ren-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  white-space: nowrap;
}

.ren-tier::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.ren-tier--ok { color: var(--green-deep); background: var(--green-soft); }
.ren-tier--avg { color: var(--blue-deep); background: var(--blue-soft); }
.ren-tier--high { color: #7a5f04; background: var(--gold-soft); }
.ren-tier--over { color: #fff; background: var(--red); }
.ren-tier--na { color: var(--muted); background: var(--paper); }

.ren-table tbody tr.is-clickable { cursor: pointer; }
.ren-table tbody tr.is-clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ren-table tbody tr.is-clickable td.is-name { color: var(--blue); text-decoration: underline; text-decoration-color: transparent; }
.ren-table tbody tr.is-clickable:hover td.is-name,
.ren-table tbody tr.is-clickable:focus-visible td.is-name { text-decoration-color: currentColor; }

.ren-table thead th:first-child,
.ren-table tbody td:first-child { width: 34px; color: var(--muted); text-align: right; }

.ren-table--regions .ren-region-caret {
  width: 28px;
  padding-right: 0;
  color: var(--muted);
  text-align: center;
  transition: transform .15s ease;
}

.ren-table--regions tr.is-open .ren-region-caret { transform: rotate(90deg); color: var(--blue); }

.ren-region-detail-cell { padding: 0 !important; background: var(--paper); }

.ren-region-detail { padding: 12px 14px 16px 42px; }
.ren-region-detail p { margin: 0 0 10px; color: var(--muted); font-size: .82rem; }

@media (max-width: 640px) {
  .ren-col-optional { display: none; }
  .ren-table { min-width: 0; table-layout: fixed; }
  .ren-table td.is-name { overflow-wrap: break-word; }
  .ren-region-detail { padding-left: 20px; }
}