body {
            background-color: var(--light-gray);
            color: var(--dark-gray);
           /*  line-height: 1.6; */
        }

        /* Main Container */
        .settingsMain {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }

        /* Frames */
        .frame {
            background-color: var(--white);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }

        .frame h1 {
            color: var(--dark-blue);
            margin-bottom: 15px;
            font-size: 24px;
            border-bottom: 2px solid var(--medium-gray);
            padding-bottom: 10px;
        }

        .frame p {
            color: var(--text-gray);
            margin-bottom: 20px;
        }

        /* Form Elements */
        .settingsForm {
            width: 100%;
        }

        .generalSettingsDetails {
            margin-bottom: 20px;
            border: 1px solid var(--medium-gray);
            border-radius: 6px;
            overflow: hidden;
        }

        .generalSettingsDetails summary {
            background-color: var(--light-blue);
            padding: 15px;
            cursor: pointer;
            font-weight: 600;
            color: var(--violet);
            list-style: none;
            transition: background-color 0.3s;
        }

        .generalSettingsDetails summary:hover {
            background-color: var(--light-gray);
        }

        .generalSettingsDetails summary::-webkit-details-marker {
            display: none;
        }

        .generalSettingsDetails summary::after {
            content: '+';
            float: right;
            font-size: 18px;
            font-weight: bold;
            transition: transform 0.3s;
        }

        .generalSettingsDetails[open] summary::after {
            content: '-';
        }

        .form-title {
            display: inline;
            font-size: 18px;
        }

        .divi {
            padding: 15px;
            background-color: var(--white);
        }

        .param,.paramBis {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background-color: var(--light-gray);
            border-radius: 4px;
            max-height: 60px; /*Pour que ça ne prenne pas trop de hauteur en mode tablet*/
            /* overflow: scroll; */
        }
        .paramBis{
            position: relative;
        }

        .param label,.paramBis label {
            flex: 1 1 200px;
            font-weight: 500;
            color: var(--dark-gray);
            margin-right: 10px;
        }
/* input:focus {
    outline: 2px solid ;
    outline-offset: 4px;
    transition: outline 0.2s ease-in-out; // DEMANDER À GAËLLE COMMENT METTRE UNE OUTLINE
} */
        .param label span,.paramBis label span {
            color: var(--violet);
            font-weight: normal;
            margin-left: 5px;
        }

        .paramBis input[type="number"],
        .paramBis input[type="text"],
        .paramBis input[type="password"],
        .paramBis select,        
        .param input[type="number"],
        .param input[type="text"],
        .param input[type="password"],
        .param select {
            flex: 1 1 200px;
            padding: 8px 12px;
            border: 1px solid var(--medium-gray);
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.5s ease-in-out;
        }

        .paramBis input[type="number"]:focus,
        .paramBis input[type="text"]:focus,
        .paramBis input[type="password"]:focus,
        .paramBis select:focus,        
        .param input[type="number"]:focus,
        .param input[type="text"]:focus,
        .param input[type="password"]:focus,
        .param select:focus {
            outline: none;
            border-color: var(--violet);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        .paramBis input[type="checkbox"],.param input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--violet);
        }

        /* Dots for required fields */
        .greenDot,.redDot {
            color: var(--violet);
            font-weight: bold;
        }

        /* Warnings */
        .littleWarning {
            font-size: 13px;
            color: var(--text-gray);
            margin-top: 10px;
            font-style: italic;
        }

        /* Separators */
        .separator {
            width: 100%;
            height: 1px;
            background-color: var(--medium-gray);
            margin: 15px 0;
        }

        /* OR text */
        .or {
            text-align: center;
            margin: 10px 0;
            color: var(--text-gray);
            font-weight: 500;
        }

        /* Buttons */
        .button-85 {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            margin-top: 10px;
        }

        .load {
            background-color: var(--violet);
            color: var(--white);
            width: 100%;
        }

        .save {
            background-color: var(--light-green);
            color: var(--black);
            width: 100%;
        }

        .load:hover {
            background-color: var(--violet);
        }

        .save:hover {
            background-color:  var(--light-green);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .param {
                flex-direction: column;
                align-items: flex-start;
            }

            .param label {
                margin-bottom: 5px;
            }

            .param input,
            .param select {
                width: 100%;
            }
        }
/*         Recherche */

  #resultsContainer {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 50%;
    overflow-y: auto;
    background-color: var(--white);
    border: 1px solid var(--text-gray);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    border-radius: 6px;
    padding: 6px 0;
    box-sizing: border-box;
  }
  
  /* Résultat */
  .resultPreset {
    z-index: 1000;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .resultPreset:hover {
    background-color: var(--light-gray);
  }
  
  .resultPreset h2 {
    font-size: 14px;
    margin: 0 0 4px 0;
    font-weight: 600;
  }
  
  .resultPreset p {
    font-size: 13px;
    margin: 0;
    color: var(--text-gray);
  }
    /* Selected Preset */
    #selectedPreset{
        background-color: var(--light-gray);
        border: 1px solid var(--medium-gray);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        padding: 6px ;
        margin: 15px ;
        transition: all 0.7s ease-in-out;
    }

    #selectedPreset h2{
        font-size: 1rem;
        margin-top: 4px;
        margin-bottom: 8px;
    }
    #selectedPreset p{
        font-size: 0.8rem;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .consent-check{
        margin: 15px;
        display: none;
        visibility: hidden;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        transition: all ease-in-out 0.6s;
    }

    .consent-check button{
        width: 45%;
    }

    .consent-check #applynt{
        background-color: var(--red);
        color: var(--black);
    }

    .consent-check #applynt:hover{
        background-color: var(--dark-red);
        color: var(--white);
    }

    .consent-check p{
        width: 90%;
        /* padding: 20px; */
    }

    /* Range */ 
    .rangeContainer {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .rangeContainer span {
        font-weight: 600;
        color: var(--violet);
        min-width: 40px;
        text-align: right;
    }
    
    /* Barre de progression */
    input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        background: var(--medium-gray);
        border-radius: 4px;
        outline: none;
        cursor: pointer;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        background: var(--violet);
        box-shadow: 0 0 0 2px var(--white), 0 0 4px rgba(0, 0, 0, 0.3);
    }
    
    input[type="range"]::-moz-range-thumb {
        height: 14px;
        width: 14px;
        border-radius: 50%;
        background: var(--violet);
        border: none;
        box-shadow: 0 0 0 2px var(--white), 0 0 4px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }


input[type="range"]:focus::-webkit-slider-thumb {
    background: var(--black);
        height: 20px;
        width: 20px;
}


input[type="range"]:focus::-moz-range-thumb {
    background: var(--black);
        height: 20px;
        width: 20px;
}