/* Palette DPE */
  .dpe-A { --dpe: #2ecc71; }   /* vert */
  .dpe-B { --dpe: #7bd66c; }
  .dpe-C { --dpe: #f1c40f; }   /* jaune */
  .dpe-D { --dpe: #f39c12; }   /* orange */
  .dpe-E { --dpe: #e67e22; }
  .dpe-F { --dpe: #e74c3c; }   /* rouge */
  .dpe-G { --dpe: #c0392b; }   /* rouge foncé */

  .dpe-picker .btn {
    background: var(--dpe);
    color: #fff;
    border: none;
    font-weight: 700;
    min-width: 3rem;
  }
  .dpe-picker .btn:hover { filter: brightness(0.95); }
  .dpe-picker .btn:focus { outline: 2px solid #00000022; }
  /* État actif (radio coché) */
  .dpe-picker input[type="radio"]:checked + label {
    box-shadow: 0 0 0 .2rem #00000022, inset 0 0 0 2px #fff;
  }

  /* Variante ruban (barres empilées façon étiquette DPE) */
  .dpe-ribbon .dpe-step {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: center;
    gap: .5rem;
    margin: .3rem 0;
    padding: .4rem .6rem;
    border-radius: .5rem;
    background: var(--dpe);
    color: #fff;
    font-weight: 600;
  }
  .dpe-ribbon .dpe-step.active {
    outline: 3px solid #00000022;
  }

   /* Palette GES (violet clair → violet foncé) */
  .ges-A { --ges: #d7bde2; }  /* violet très clair */
  .ges-B { --ges: #c39bd3; }
  .ges-C { --ges: #af7ac5; }
  .ges-D { --ges: #9b59b6; }
  .ges-E { --ges: #884ea0; }
  .ges-F { --ges: #76448a; }
  .ges-G { --ges: #633974; }  /* violet très foncé */

  .ges-picker .btn {
    background: var(--ges);
    color: #fff;
    border: none;
    font-weight: 700;
    min-width: 3rem;
    margin-right:.25rem;
  }
  .ges-picker .btn:hover { filter: brightness(0.95); }
  .ges-picker .btn:focus { outline: 2px solid #00000022; }

  /* État actif (radio coché) */
  .ges-picker input[type="radio"]:checked + label {
    box-shadow: 0 0 0 .2rem #00000022, inset 0 0 0 2px #fff;
  }

  /* Variante ruban (barres empilées façon étiquette GES) */
  .ges-ribbon .ges-step {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: center;
    gap: .5rem;
    margin: .3rem 0;
    padding: .4rem .6rem;
    border-radius: .5rem;
    background: var(--ges);
    color: #fff;
    font-weight: 600;
  }
  .ges-ribbon .ges-step.active {
    outline: 3px solid #00000022;
  }