/* ============================================================
   rs1/puissance-pilotage — puissance de recharge et pilotage
   Cartes, pastilles, coches, boutons : mp-tokens.css
   Colonnes : 1 → 3 dès 961px · Pilotage : 1 → texte | schéma dès 961px
   ============================================================ */

.mp-pp{
  padding-block: var(--mp-section);
  color: var(--mp-texte);
}
.mp-pp--blanc{ background: var(--mp-blanc) }
.mp-pp--brume{ background: var(--mp-bleu-brume) }

.mp-pp__entete{
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.mp-pp__titre{
  margin: 0;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-pp__intro{
  margin: 1.1rem auto 0;
  max-width: 56ch;
  font-size: var(--mp-t-lg);
  line-height: var(--mp-lh-texte);
}

/* ── Colonnes de puissance ────────────────────────────────── */
.mp-pp__colonnes{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mp-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mp-pp__ico{ margin-bottom: 1.25rem }
.mp-pp__ico svg{ display: block }
.mp-pp__colonne-titre{
  margin: 0 0 1.1rem;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h3);
  font-weight: 800;
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
}
.mp-pp__ideal{
  margin: 0 0 .75rem;
  font-size: var(--mp-t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-gris);
}
.mp-pp__usages{
  display: grid;
  gap: .65rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--mp-t-sm);
  line-height: 1.5;
}
.mp-pp__usages .mp-check svg{ margin-top: .05rem }
.mp-pp__coche{ color: var(--mp-turquoise) }
.mp-pp__coche circle{ fill: var(--mp-turquoise-voile) }

/* ── Encart en exergue ────────────────────────────────────── */
.mp-pp__encart{
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--mp-r);
  background: var(--mp-bleu);
  color: var(--mp-texte-sombre);
}
.mp-pp__encart-titre{
  margin: 0;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-blanc);
}
.mp-pp__encart-texte{
  margin: .75rem 0 0;
  max-width: 60ch;
  font-size: var(--mp-t-base);
  line-height: var(--mp-lh-texte);
}
.mp-pp__encart .mp-btn{ justify-self: start }

/* ── Pilotage énergétique ─────────────────────────────────── */
.mp-pp__pilotage{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.mp-pp__pilotage-titre{
  margin: 0 0 1rem;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
}
.mp-pp__para{
  margin: 0 0 1rem;
  font-size: var(--mp-t-base);
  line-height: var(--mp-lh-texte);
}
.mp-pp__liste-intro{
  margin: 1.25rem 0 .8rem;
  font-weight: 600;
  color: var(--mp-encre);
}
.mp-pp__avantages{ font-size: var(--mp-t-base) }

/* Schéma de répartition */
.mp-pp__schema{
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r);
  background: var(--mp-bleu-brume);
}
.mp-pp--brume .mp-pp__schema{ background: var(--mp-blanc) }

.mp-pp__barres{ display: grid; gap: 1.1rem }
.mp-pp__barre-legende{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 .45rem;
  font-size: var(--mp-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mp-texte);
}
.mp-pp__barre-legende b{
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-base);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--mp-encre);
}
.mp-pp__barre-legende--irve b{ color: var(--mp-turquoise-fonce) }

.mp-pp__piste{
  display: block;
  height: .85rem;
  overflow: hidden;
  border-radius: var(--mp-r-pill);
  background: var(--mp-trait);
}
.mp-pp__remplissage{
  display: block;
  height: 100%;
  border-radius: var(--mp-r-pill);
}
.mp-pp__remplissage--site{ background: var(--mp-bleu) }
.mp-pp__remplissage--batiment{ background: var(--mp-gris) }
.mp-pp__remplissage--irve{ background: var(--mp-turquoise) }

.mp-pp__gestion{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 1.5rem 0 1rem;
  font-size: var(--mp-t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-turquoise-fonce);
}

.mp-pp__bornes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mp-pp__borne{
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: .7rem .3rem;
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r-sm);
  background: var(--mp-blanc);
  font-size: var(--mp-t-xs);
  font-weight: 600;
  color: var(--mp-bleu);
}
.mp-pp__borne span{ color: var(--mp-encre); white-space: nowrap }

.mp-pp__mention{
  margin-top: 1.1rem;
  font-size: var(--mp-t-xs);
  line-height: 1.45;
  color: var(--mp-gris);
}

/* ── Présentation « gamme » ──────────────────────────────────
   Une mention courte et forte : la plage de puissance en grand,
   centrée, valeurs en exergue ; contexte et bouton dessous.      */
.mp-pp--gamme{ padding-block: var(--mp-section-sm) }
.mp-pp__gamme{
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.mp-pp__gamme-titre{
  margin: .9rem 0 0;
  font-size: var(--mp-t-h1);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
  text-wrap: balance;
}
.mp-pp__gamme-titre .mp-exergue{ color: var(--mp-turquoise-fonce) }
.mp-pp__gamme-texte{
  margin: 1.25rem auto 0;
  max-width: 54ch;
  font-size: var(--mp-t-lg);
  line-height: var(--mp-lh-texte);
}
.mp-pp__gamme .mp-btn{ margin-top: 2rem }

@media (min-width: 601px){
  .mp-pp__bornes{ grid-template-columns: repeat(min(var(--mp-pp-n, 6), 6), minmax(0, 1fr)) }
}

@media (min-width: 961px){
  .mp-pp__colonnes{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mp-pp__encart{ grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem }
  .mp-pp__encart .mp-btn{ justify-self: end }
  .mp-pp__pilotage{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .mp-pp__pilotage--seul{ grid-template-columns: minmax(0, 1fr); max-width: 52rem }
}