/* =================================*/
/* STYLES */
/* =================================*/
.custom-select {
    width: 185px !important;
}@media (max-width: 600px) {
    .custom-select {
        width: 100% !important;
    }
}
/* INJECTION BARÈME INLINE (intégré dans morphological-parameters) */

.inputs-morphological div label,
.parameters-container h3,
.type-uniformite h3,
.checkbox-div label,
.legend-title {
    font-size: var(--ht-texte-08);
    color: var(--cl-texte-i1);
    font-weight: var(--wg-texte-medium);
}
.inputs-morphological > div  {
    border-bottom: 1px solid var(--cl-transparent-noir-i6);
    padding-bottom: 5px;
    border-radius: 3px;
}

#btn-choose-bareme {
    width: calc(100% - 100px);
}#btn-inject-bareme {
    width: 90px;
}@media (max-width: 800px) {
    #btn-choose-bareme {
        width: 100%;
    }
    #btn-inject-bareme {
        width: 100%;
    }
}
.bareme-injection-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    font-size: 0.9rem;
}
.bareme-injection-inline label {
    white-space: nowrap;
    width: 100%;

}
.bareme-injection-inline select {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
}
.bareme-injection-inline label,
.bareme-injection-inline select {
    color: var(--cl-texte-i1);
    font-size: var(--ht-texte-09-uv);
    border-radius: 4px;
}

@media (max-width: 600px) {
    .bareme-injection-inline button {
        width: 100%;
    }
    
    
}

/*DATA SET*/

.inputs-morphological {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 15px 10px 15px;
}
.inputs-morphological div {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}
.input-div input {
    width: 75px;
}

@media (max-width: 600px) {
    .inputs-morphological div {
        flex-wrap: wrap;
    }
    .input-div {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

}
.parameters-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 15px 5px 15px;
}
.parameters-container * {
    margin: 0;
    padding: 0;
}
.inputs-morphological div label {
    width: 100%;
}
.checkbox-div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
    margin-top: 10px;
}
.checkbox-div label {
    border-left: 1px solid var(--cl-transparent-noir-i5);
    padding-left: 5px;
}


.graphical-visualizer,
.graphical-waist-section {
    background-color: var(--cl-transparent-blanc-i5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--cl-transparent-noir-i6);
}
/*DATA CONFIRMATION*/
/* =================================*/
/* STYLES STRUCTURE*/
/* =================================*/
.systeme-step1,
.systeme-step2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*DATA SET*/
.data-set {
    padding: var(--dynamic-padding);
    background-color: var(--cl-transparent-i3blanc-i4);
    border-radius: var(--border-radius-classic);
    border: 1px solid var(--cl-transparent-blanc-i1);
    width: 90vw;
    max-width: 1000px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--dynamic-padding);
    margin-top: 25px;
    margin-bottom: 20px;
    height: auto;
}
.morphological-parameters,
.other-parameters,
.graphs-container,
.graphs-wrapper .validation-graph-placeholder {
    background-color: var(--cl-transparent-i2blanc-i3);
    padding: var(--dynamic-padding);
    border-radius: var(--border-radius-classic);
    border: 1px solid var(--cl-transparent-blanc-i1);
}
.other-parameters,
.morphological-parameters {
    width: 100%;
}

.parameters-inputs {
    height: 100%;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.graphs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 67%;
    height: 100%;
    position: relative;
}
.graphs-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
}
/* Placeholder affiché quand les graphiques sont bloqués */
.graphs-wrapper .validation-graph-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}
@media (max-width: 1000px) {
    .parameters-inputs {
        width: 45%;
    }
    .graphs-wrapper {
        width: 55%;
    }
}
@media (max-width: 800px) {
    .data-set {
        flex-direction: column;
    }
    .parameters-inputs {
        width: 100%;
        flex-direction: row;
        height: auto;
        gap: 10px;
    }
    .graphs-wrapper {
        width: 100%;
        position: relative;
    }
    .graphs-container {
        width: 100%;
        flex-direction: row;
        gap: 10px;
    }
}
@media (max-width: 600px) {
    .graphs-container {
        flex-direction: column;
    }
}

.graph {
    width: 100%;
}
.graph-title {
    text-transform: uppercase;
    text-shadow: 0 0 5px var(--cl-transparent-blanc-i1);
    font-size: var(--ht-texte-08);
    font-weight: 500;
    color: var(--cl-transparent-blanc-i1);
    background-color: var(--cl-transparent-noir-i3);
    border-radius: var(--border-radius-classic) var(--border-radius-classic) 0 0;
    margin: 0;
    padding: 5px 10px 5px 10px;
}

.type-uniformite {
    display: none;
}
.type-uniformite h3 {
    margin-bottom: 5px;
}


/* Conteneur du graphique */
.graphical-visualizer {
    width: 100%;
    /* La hauteur est gérée dynamiquement par le JS */
}

/* Tooltip pour les coordonnées */
.graph-tooltip {
    position: absolute;
    background-color: var(--cl-transparent-blanc-i2);
    backdrop-filter: blur(5px);
    border: 1px solid var(--cl-transparent-blanc-i1);
    border-radius: var(--border-radius-classic);
    padding: 8px 12px;
    color: var(--cl-texte-i2);
    font-size: var(--ht-texte-09);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 1.5;
    white-space: nowrap;
    min-width: 150px;
    text-align: center;
}

/* Légende du graphique */
.graph-legend {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: var(--cl-blanc-i2);
    border-radius: 0 0 var(--border-radius-classic) var(--border-radius-classic);
    border-bottom: 1px solid var(--cl-transparent-noir-i6);
    border-right: 1px solid var(--cl-transparent-noir-i6);
    border-left: 1px solid var(--cl-transparent-noir-i6);
}
@media (max-width: 800px) {
    .graph-legend {
        padding: 10px;
        gap: 5px;
    }
    
}

.legend-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}



.legend-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-color {
    width: 20px;
    height: 5px;
    border-radius: 5px;
    display: inline-block;
}

.legend-label {
    font-size: var(--ht-texte-08);
    font-weight: var(--wg-texte-regular);
    color: var(--cl-texte-i3);
}

/*DATA CONSOLE (validation)*/
.data-console {
    width: 90vw;
    max-width: 1000px;
    margin-bottom: calc(var(--data-check-height) + 20px);
}

/* Styles spécifiques à système-taille pour data-check */
.check-method {
    max-width: calc(100% - 210px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.check-method h3,
#selected-method {
    font-family: "Intertight", sans-serif;
    font-size: var(--ht-texte-13);
    font-weight: var(--wg-texte-regular);
    color: var(--cl-texte-i1);
}#selected-method {
    font-weight: var(--wg-texte-bold);
}
#method-description {
    font-size: var(--ht-texte-09);
    color: var(--cl-texte-i2);
    margin-top: 5px;
}

.check-tonextstep {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

/* Bouton avec icône SVG */
.check-tonextstep button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-tonextstep button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .data-check {
        flex-direction: column;
        align-items: stretch;
    }
    :root {
        --data-check-height: 200px;
    }
    
    .check-method {
        max-width: 100%;
    }
    .check-tonextstep {
        width: 100%;
        margin-top: 20px;
    }
    .check-tonextstep button {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   GRAPHIQUE SECTION DE TAILLE (Vue de dessus)
   ===================================================== */

.graphical-waist-section {
    width: 100%;
    /* La hauteur est gérée dynamiquement par le JS */
    display: flex;
    justify-content: center;
}

.waist-section-title {
    text-align: center;
    font-size: var(--ht-texte-10);
    margin: 0;
    padding: 10px 0 5px 0;
}

.waist-section-labels {
    font-size: var(--ht-texte-08);
    fill: var(--cl-texte-i2);
    font-weight: 600;
    text-anchor: left;
}

/* =====================================================
   SECTION OBJETS INTERMÉDIAIRES (pliable)
   ===================================================== */

.data-objets-intermediaires {
    margin-bottom: 20px;
}

.objets-intermediaires-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-classic);
    transition: background-color 0.2s ease;
}

.objets-intermediaires-header:hover {
    background-color: var(--cl-transparent-blanc-i3);
    border-color: var(--cl-transparent-blanc-i1);
}

.objets-intermediaires-arrow {
    font-size: 10px;
    color: var(--cl-texte-i2);
    transition: transform 0.3s ease;
}

.objets-intermediaires-header.expanded .objets-intermediaires-arrow {
    transform: rotate(45deg);
}

.objets-intermediaires-header h4 {
    margin: 0;
    font-size: var(--ht-texte-10);
    font-weight: var(--wg-texte-semibold);
    color: var(--cl-texte-i2);
}

.objets-intermediaires-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: var(--cl-transparent-white-1);
    border: 1px solid var(--cl-transparent-white-1);
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.objets-intermediaires-content.expanded {
    max-height: 600px;
    padding: 12px;
}

.objets-intermediaires-grid {
    width: 90vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 5px;
}

.objet-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px var(--dynamic-padding);
    background-color: var(--cl-transparent-blanc-i5);
    border: 1px solid var(--cl-transparent-blanc-i3);
    border-radius: var(--border-radius-classic);
}

.objet-label {
    font-size: var(--ht-texte-08);
    color: var(--cl-texte-i3);
    font-weight: var(--wg-texte-medium);
}

.objet-value {
    font-size: var(--ht-texte-09);
    color: var(--cl-texte-i1);
    font-weight: var(--wg-texte-bold);
}