/* Styles pour la grille d'options */
.options-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    /* Espace entre les blocs d'options */
    margin-bottom: 25px;
}

/* Styles pour chaque bloc d'option individuel */
.option-block {
    box-sizing: border-box;
    flex: 1 1 calc(50% - 15px);
    /*min-width: 320px;*/
    max-width: calc(50% - 15px);
    text-align: left;
    vertical-align: top;
}

/* ============================================ */
/* Styles pour la BARRE DE TITRE D'OPTION       */
/* ============================================ */
.option-title-bar {
    display: flex;
    align-items: stretch;
    /* IMPORTANT : Permet aux enfants (.opt_num et .opt_titre) de s'étirer à la même hauteur */
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    min-height: 35px;
    /* MODIFIÉ : Hauteur minimale, peut grandir si le titre s'allonge */
    border-radius: 5px;
    border: 1px solid #cccccc;
    /* overflow: hidden; -- Supprimé pour éviter de couper les coins arrondis des enfants si on les gère séparément */
}

.option-title-bar .opt_num {
    flex-shrink: 0;
    /* Empêche ce bloc de rétrécir */
    display: flex;
    /* Pour centrer le contenu verticalement et horizontalement */
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    /* Ajuste le padding pour un bel espacement */
    background-color: #234B89;
    color: white;
    font-weight: bold;
    font-size: 110%;
    border-top-left-radius: 4px;
    /* Arrondi pour le coin, ajusté pour la bordure de 1px du parent */
    border-bottom-left-radius: 4px;
}

.option-title-bar .opt_titre {
    flex-grow: 1;
    /* Permet à ce bloc de prendre l'espace restant */
    display: flex;
    /* Pour centrer verticalement le texte, même sur plusieurs lignes */
    align-items: center;
    padding: 8px 10px;
    /* Un padding équilibré */
    background-color: #EEE;
    font-weight: bold;
    font-size: 110%;
    white-space: normal;
    /* MODIFIÉ : LA MAGIE OPÈRE ICI ! Permet le retour à la ligne */
    color: #333;
    line-height: 1.3;
    /* AJOUTÉ : Améliore la lisibilité pour le texte sur plusieurs lignes */
    /* overflow: hidden; -- Supprimé */
    /* text-overflow: ellipsis; -- Supprimé */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ============================================ */
/* Styles pour le CONTENU des options         */
/* ============================================ */

.opt_table_td {
    text-align: left;
    vertical-align: middle;
    margin-bottom: 10px padding-top: 5px;
    padding-bottom: 5px;
    /* display: flex; */
    /* align-items: center; */
}

.opt_radio {
    width: 20px;
    vertical-align: middle;
    text-align: center;
    margin-right: 8px;
    margin-left: 5px;
    display: inline-block;
    /* Fonctionne bien avec vertical-align */
}

.opt_detail_img {
    vertical-align: middle;
    margin: 5px;
    margin-right: 8px;
    flex-shrink: 0;
    /* Conserver marges */
    display: inline-block;
}

.opt_detail_text {
    vertical-align: middle;
    display: inline-block;
    font-weight: normal;
    line-height: 1.4;
}

.opt_detail_text b,
.opt_detail_text strong {
    font-weight: bold;
}

/* Boutons de couleur */
.opt_button {
    display: inline-block;
    width: 25px;
    height: 18px;
    border: 1px white solid;
    border-radius: 6px;
    cursor: pointer;
}

.opt_button:hover {
    border: 1px black solid;
}

/* Style pour les boutons de sélection de couleur */
.border-color-buttons button.opt_button {
    width: 20px;
    /* Taille des boutons de couleur */
    height: 20px;
    border: 1px solid #ccc;
    /* Bordure légère */
    margin: 2px;
    /* Petit espace autour */
    cursor: pointer;
    vertical-align: middle;
    /* Aide à aligner les boutons entre eux */
    padding: 0;
    /* Retire le padding interne par défaut */
}

/* ============================================ */
/* Styles divers et responsifs                 */
/* ============================================ */

#box {
    /* Zone d'affichage du prix final */
    text-align: left !important;
}

#box h3 {
    text-align: left !important;
}

#div_quality {
    /* Indicateur de qualité */
    position: relative !important;
    /* Nécessaire pour que 'right' fonctionne */
}

/* Styles pour le conteneur des informations de qualité */
/* Par défaut (grand écran), on laisse les floats faire leur travail */

.quality-info-container {
    /* Ce conteneur n'a pas besoin de display:flex par défaut.
       Le <div style="clear: both;"></div> dans votre PHP s'occupera de contenir les floats.
       Si vous retirez ce div du PHP, vous pouvez ajouter un clearfix ici :
    */
    /*
    overflow: auto; /* Une méthode simple de clearfix */
    /* Ou : */
    /*
    &::after {
        content: "";
        clear: both;
        display: table;
    }
    */
}

.quality-indicator-wrapper {
    float: left;
    /* Vous pouvez ajouter une marge à droite si vous voulez un peu d'espace
       entre les deux blocs sur grand écran, par exemple :
       margin-right: 15px;
    */
}

.quality-details-wrapper {
    float: right;
    text-align: right;
    /* Conserve l'alignement du texte à droite */
    font-size: 80%;
    /* Conserve la taille de police originale */
}

/* Adaptation pour petits écrans */
@media (max-width: 768px) {
    .option-block {
        flex-basis: 100%;
        /* Passe à une colonne */
        max-width: unset;
    }

    .quality-indicator-wrapper,
    .quality-details-wrapper {
        float: none;
        /* Très important : annule le float */
        width: 100%;
        /* Chaque bloc prend toute la largeur disponible */
        text-align: center;
        /* Centre le contenu à l'intérieur de chaque bloc */
        margin-right: 0;
        /* Annule toute marge droite spécifique au grand écran */
        margin-bottom: 15px;
        /* Ajoute un espacement vertical entre les blocs empilés */
    }

    .quality-details-wrapper {
        font-size: 90%;
        /* Optionnel : augmenter légèrement la taille pour la lisibilité sur mobile */
        text-align: right;
        /* S'assurer que c'est aussi centré */
    }

    /* Si la jauge elle-même (l'élément avec le dégradé) doit être centrée
           quand son parent .quality-indicator-wrapper est en text-align: center */
    .quality-indicator-wrapper div[style*="background-image"] {
        margin-left: auto;
        margin-right: auto;
    }

    /* Et pour le texte en dessous de la jauge */
    .quality-indicator-wrapper div:last-of-type {
        /* Cible le div avec "QUALITY RATIO" */
        /* text-align: center; est déjà hérité du parent .quality-indicator-wrapper */
    }
}