/* Conteneur + clearfix */
.ReprogrammationsMoteur {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  font-size: 1.1rem;
}
.ReprogrammationsMoteur::after { content:""; display:table; clear:both; }

/* Lignes / colonnes (inchangé) */
.ReprogrammationsMoteur__row { clear: both; margin-bottom: 10px; }
.ReprogrammationsMoteur__col { float:left; width:23.5%; box-sizing:border-box; margin:0 0 2% 2%; }
.ReprogrammationsMoteur__col:nth-child(4n+1) { clear:both; margin-left:0; }

/* Titres colonnes */
.ReprogrammationsMoteur__label-head{
  padding:0 20px; height:78px; line-height:78px; margin-right:35px;
  background:#e5e5e5; border-radius:4px; font-size:1.2rem; /* + grand */
  font-weight:700; text-transform:uppercase; text-align:center;
}

/* Flèche (col libellés) */
.ReprogrammationsMoteur__label-arrow{
  padding:0 20px; height:78px; line-height:78px; margin-right:35px;
  background:#e5e5e5; border-radius:4px 0 0 4px; font-size:.95rem;
  text-transform:uppercase; position:relative;
}
.ReprogrammationsMoteur__label-arrow::after{
  content:""; width:0; height:0; border-style:solid;
  border-width:39px 0 39px 35px; border-color:transparent transparent transparent #e5e5e5;
  position:absolute; top:0; right:-35px;
}

/* Nombres : base */
.ReprogrammationsMoteur__number{
  padding:0 20px; height:78px; line-height:78px;
  border:1px solid #ddd; border-radius:6px; box-sizing:border-box;
  font-size:2.8rem; font-weight:700; background:#fff; text-align:center;
}
.ReprogrammationsMoteur__number > div { display:inline; }
.ReprogrammationsMoteur__number span { font-size:1rem; }

/* Stage 1 (3e colonne de chaque ligne) */
.ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(3) .ReprogrammationsMoteur__number{
  color:#0056b3; background:#eef5ff; border-color:#0056b3;
}
/* En-tête Stage 1 en bleu (1ère ligne, 3e col) */
.ReprogrammationsMoteur__row:first-child .ReprogrammationsMoteur__col:nth-child(3) .ReprogrammationsMoteur__label-head{
  background:#e0f0ff; color:#0077cc;
}

/* Différence (col 4) – nombres + header */
.ReprogrammationsMoteur__number--atm{
  color:#d60000; background:#ffeaea; border-color:#d60000;
}
.ReprogrammationsMoteur__row:first-child .ReprogrammationsMoteur__col:nth-child(4) .ReprogrammationsMoteur__label-head{
  background:#ffe5e5; color:#d60000;
}

/* Bonus lisibilité : petit séparateur entre lignes */
.ReprogrammationsMoteur__row + .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col{
  position:relative;
}
.ReprogrammationsMoteur__row + .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col::before{
  content:""; position:absolute; top:-6px; left:0; right:0; height:1px; background:#ececec;
}


/* Ajoute un + automatiquement devant les valeurs de différence */
.ReprogrammationsMoteur__number--atm::before {
  content: "+";
  margin-right: 2px;
  font-weight: bold;
}

@media (max-width: 768px) {

  /* On garde ton conteneur et le clearfix */
  .ReprogrammationsMoteur { padding: 12px; }

  /* Cache la ligne d’entête */
  .ReprogrammationsMoteur__row:first-child { display: none; }

  /* Carte compacte par métrique */
  .ReprogrammationsMoteur__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px 10px;
    margin: 0 0 16px 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
  }

  /* Neutralise les floats et largeur */
  .ReprogrammationsMoteur__col {
    float: none;
    width: auto;
    margin: 0;
  }

  /* 1) Libellé (Puissance/Couple) sur 2 colonnes */
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(1) {
    grid-column: 1 / -1;
  }
  .ReprogrammationsMoteur__label-arrow,
  .ReprogrammationsMoteur__label-head {
    height: auto;
    line-height: 1.25;
    margin: 0;
    padding: 10px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    text-align: left;
  }
  .ReprogrammationsMoteur__label-arrow::after { display: none; }

  /* 2) Origine (col. 1) */
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(2) {
    grid-column: 1 / 2;
  }
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(2)::before {
    content: "Origine";
    display: block;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    margin: 10px;
  }

  /* 3) Stage 1 (col. 2) */
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(3) {
    grid-column: 2 / 3;
  }
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(3)::before {
    content: "Stage 1";
    display: block;
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #0077cc;
    margin: 10px;
  }
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(3) .ReprogrammationsMoteur__number {
    color: #0056b3;
    background: #eef5ff;
    border-color: #0056b3;
  }

  /* 4) Différence (sur 2 colonnes, dessous) */
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(4) {
    grid-column: 1 / -1;
  }
  .ReprogrammationsMoteur__row .ReprogrammationsMoteur__col:nth-child(4)::before {
    content: "Différence";
    display: block;
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #d60000;
    margin: 10px;
  }
  .ReprogrammationsMoteur__number--atm {
    color: #d60000;
    background: #ffeaea;
    border-color: #d60000;
  }
  .ReprogrammationsMoteur__number--atm::before {
    content: "+";
    margin-right: 2px;
    font-weight: 800;
  }

  /* Ajuste les cases chiffres pour mobile */
  .ReprogrammationsMoteur__number {
    height: auto;
    line-height: 1.25;
    padding: 12px;
    font-size: 1.8rem; /* plus compact */
    text-align: center;
  }
  .ReprogrammationsMoteur__number span { font-size: .95rem; }


    /* PUISSANCE : fond orange très clair */
  .ReprogrammationsMoteur__row:nth-of-type(2) {
    background: #fff6e9; /* orange pâle */
  }
  .ReprogrammationsMoteur__row:nth-of-type(2) .ReprogrammationsMoteur__label-arrow {
    background: #ff9800;
    color: white;
    font-weight: bold;
  }

  /* COUPLE : fond vert très clair */
  .ReprogrammationsMoteur__row:nth-of-type(3) {
    background: #f1fff4; /* vert pâle */
  }
  .ReprogrammationsMoteur__row:nth-of-type(3) .ReprogrammationsMoteur__label-arrow {
    background: #2e7d32;
    color: white;
    font-weight: bold;
  }

  /* Petit arrondi pour les cartouches */
  .ReprogrammationsMoteur__label-arrow {
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 1.05rem;
  }


}





@media only screen {
    .Chiptuning-extra__options [data-tooltip] {
        cursor: help
    }

    .Chiptuning-extra__options>span {
        float: left;
        width: 23.5%;
        margin: 2% 0 0 2%;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        padding: 16px;
        box-sizing: border-box;
        position: relative;
        text-align: center;
        font-size: .875rem;
        line-height: 1.5;
        font-weight: 700
    }

    .Chiptuning-extra__options>span:nth-child(4n+1) {
        margin-left: 0;
        clear: both
    }

    .Chiptuning-extra__options>span:nth-child(-n+4) {
        margin-top: 0
    }

    .Chiptuning-extra__options>span:before {
        content: "";
        width: 80px;
        height: 50px;
        display: block;
        margin: 0 auto 10px;
        background: url(https://www.vag-perf.fr/wp-content/themes/publisher/images/sprite-additional-options-icons.svg) no-repeat
    }

    .Chiptuning-extra__options>span:after {
        position: absolute;
        top: -6px;
        right: -6px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-disable_egr:before {
        background-position: 9px 4px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-disable_roetfilter:before {
        background-position: -96px 5px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-foutcodes_enabled:before {
        background-position: -286px 0
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-launch_control:before {
        background-position: -187px 4px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-popbang_crackle_map:before {
        background-position: -797px 12px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-disable_start_stop:before {
        background-position: -681px 0
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-option_decat:before {
        background-position: -896px 10px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-option_flaps:before {
        background-position: -391px 5px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-option_vmax:before {
        background-position: -586px 5px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-option_adblue:before {
        background-position: -484px 1px
    }

    .Chiptuning-extra__options>span.reprogrammation-moteur-option_anti_lag:before {
        background-position: -989px 2px
    }

    .Chiptuning-specs {
        margin: -10px 0 10px
    }
}

.nowrap {
    white-space: nowrap
}