/* =============================================================
   MYPROD — Comparatif aérogommeuses
   Cohérent avec le thème existant : variables @primary-typo /
   @secondary-typo, couleurs #070C16 / #3BC551 / #F3F3F3
   ============================================================= */

.myprod-comparatif {
    padding: 80px 0;
    background: #fff;
}

/* ---- Header ---- */

.myprod-comparatif__header {
    margin: 0 0 48px;
}

.myprod-comparatif__title {
    color: var(--Blue-3, #070C16);
    font-family: "Open Sans", sans-serif;
    font-size: 3.2rem;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
}

.myprod-comparatif__title strong {
    color: var(--Blue-3, #070C16);
}

.myprod-comparatif__subtitle {
    color: var(--Blue-3, #070C16);
    font-family: "Open Sans", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 24px;
}

/* ---- Layout grille commun ---- */
/*
  La grille est :
    col-labels (desktop) | col-valeur-1 | col-valeur-2 (desktop) | col-valeur-3 (desktop)
  Sur mobile : seulement col-valeur-1 visible.
*/

.myprod-comparatif__selects-row,
.myprod-comparatif__prix-row,
.myprod-comparatif__caracs-grid {
    display: grid;
    grid-template-columns: 260px repeat(3, 1fr);
    gap: 0 16px;
    align-items: start;
}

@media (max-width: 991px) {
    .myprod-comparatif__selects-row,
    .myprod-comparatif__prix-row,
    .myprod-comparatif__caracs-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .myprod-comparatif__selects-row,
    .myprod-comparatif__prix-row,
    .myprod-comparatif__caracs-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Cellule label gauche ---- */

.myprod-comparatif__label-cell {
    display: flex;
    align-items: center;
    padding: 12px 0;
    color: var(--Blue-3, #070C16);
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
}

@media (max-width: 767px) {
    .myprod-comparatif__label-cell {
        display: none;
    }
}

/* ---- Selects ---- */

.myprod-comparatif__select-wrap {
    padding: 8px 0;
}

.myprod-comp-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 14px 42px 14px 18px;
    background: #F3F3F3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23070C16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 2px solid transparent;
    border-radius: 999px;
    color: var(--Blue-3, #070C16);
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.myprod-comp-select:hover {
    background-color: #eaeaea;
}

.myprod-comp-select:focus {
    outline: none;
    border-color: #3BC551;
    background-color: #fff;
}

/* ---- Row Prix ---- */

.myprod-comparatif__data-row {
    margin-top: 8px;
}

.myprod-comparatif__value-cell {
    padding: 12px 0;
    color: var(--Blue-3, #070C16);
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
}

/* ---- Séparateur ---- */

.myprod-comparatif__sep {
    height: 1px;
    background: #F3F3F3;
    margin: 24px 0;
}

/* ---- Titre Caractéristiques ---- */

.myprod-comparatif__caracs-title {
    color: var(--Blue-3, #070C16);
    font-family: "Open Sans", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 24px;
}

/* ---- Grille caractéristiques ---- */

.myprod-comparatif__labels-col {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .myprod-comparatif__labels-col {
        display: none;
    }
}

.myprod-comparatif__carac-label {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    color: var(--Blue-3, #070C16);
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    border-bottom: 1px solid #F3F3F3;
}

.myprod-comparatif__carac-label:last-child {
    border-bottom: 0;
}

.myprod-comparatif__values-col {
    display: flex;
    flex-direction: column;
}

.myprod-comparatif__carac-value {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F3F3;
    color: var(--Blue-3, #070C16);
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
}

.myprod-comparatif__carac-value:last-child {
    border-bottom: 0;
}

.myprod-comparatif__carac-value strong {
    font-weight: 700;
    color: var(--Blue-3, #070C16);
}

/* ---- Colonnes desktop-only (col 2 et 3) ---- */

.myprod-comparatif__select-wrap--desktop,
.myprod-comparatif__value-cell--desktop,
.myprod-comparatif__values-col--desktop {
    /* Visible sur desktop */
}

@media (max-width: 991px) {
    .myprod-comparatif__select-wrap--desktop,
    .myprod-comparatif__value-cell--desktop,
    .myprod-comparatif__values-col--desktop {
        display: none;
    }
}

/* Sur tablette on remet la col 2 visible */
@media (min-width: 768px) and (max-width: 991px) {
    .myprod-comparatif__selects-row,
    .myprod-comparatif__prix-row,
    .myprod-comparatif__caracs-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Affiche la 2ème colonne select/valeurs sur tablette */
    .myprod-comparatif__select-wrap:nth-child(2),
    .myprod-comparatif__value-cell:nth-child(2),
    .myprod-comparatif__values-col:nth-child(2) {
        display: flex;
    }
}

/* ---- Footer CTA ---- */

.myprod-comparatif__footer {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}