::spelling-error {
  text-decoration: wavy blue underline;
}

.a-zdc {
    font-family: REM, sans-serif;
    color: #212121;
}

button[disabled], button[disabled]:hover {
  background-color: #bababa !important;
}

.w-input:focus, .w-select:focus{
	border-color: #aa52b2 !important;
}

.promo-success{
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.error-message{
    color: #EB1C26 !important;
    font-size: 14px;
}

.double-champs-payment{
    width: 50%;
    justify-content: flex-end;
}


@media screen and (max-width: 479px) {
    .double-champs-payment{
        width: 100%;
    }
}

#allGoodMessage {
    color: green !important;
    cursor: default !important;
    display: none;
}

#adblock-modal {
    position: fixed;
    /* Positionnement par rapport à l'écran */
    top: 50%;
    /* Positionné à la moitié de la hauteur de l'écran */
    left: 50%;
    /* Positionné à la moitié de la largeur de l'écran */
    transform: translate(-50%, -50%);
    /* Centre précisément la modal */
    z-index: 1001;
    /* S'assure qu'il est au-dessus de l'overlay */
    width: 620px;
    /*width: 80%; 
    max-width: 500px;*/
    display: none;
    /* Caché par défaut */
    width: 620px;
    padding: 40px 80px 60px 80px;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    background: #fff;
    font-family: REM, sans-serif;
    gap: 12px;
}

#adblock-modal p {
    color: #7E3984;
    font-size: 18px;
}

#adblock-modal h2 {
    color: #7E3984;
    font-weight: 800;
    padding-bottom: 16px;
    font-size: 36px;
}


#adblock-modal a {
    padding: 12px 40px;
    cursor: pointer;
    background-color: #212121;
    color: white;
    margin-top: 16px !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
}

#adblock-modal svg {
    margin-bottom: 40px;
}

.modal-overlay-adblock {
    display: none;
    /* Invisible par défaut */
    position: fixed;
    /* Plein écran */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Gris semi-transparent */
    z-index: 100;
    /* Assurez-vous qu'il est en dessous de la modal mais au-dessus du reste */
}

#container {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 40px rgb(11 0 81 / 5%);
    font-family: REM, sans-serif;
    font-weight: 300;
}

#inputText {
    /*width: 95%;*/
    padding: 24px;
    font-size: 20px;
    max-height: 15em;
    /*white-space: pre-line;*/
}

#optionsContainer {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 18px;
}


/* Boutons radio modes de conversion*/
.option {
    display: none;
    cursor: pointer !important;
    /*display: flex;*/
    align-items: center;
    /* Alignement vertical des enfants */
    margin-right: 24px;
    gap: 4px;
}

.option label {
    cursor: pointer;
    font-weight: 300;
    margin-bottom: 2px;
}


.option input[type="radio"] {
    vertical-align: middle;
    /* Alignement vertical avec le texte */
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 8px 0 0;
    cursor: pointer;
}

/* Style lorsque le bouton radio n'est pas coché */
.option input[type="radio"]::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #000;
    /* Couleur de la bordure du bouton radio non coché */
    position: absolute;
    top: -4px;
    cursor: pointer;
}

/* Style lorsque le bouton radio est coché */
.option input[type="radio"]:checked::before {
    border: 2px solid #F57805;
    /* Couleur de la bordure quand le bouton est coché */
}

.option input[type="radio"]:checked::after {
    content: '';
    display: inline-block;
    width: 18px;
    /* Taille de la boule intérieure */
    height: 18px;
    /* Taille de la boule intérieure */
    background-color: #F57805;
    /* Couleur de la boule intérieure */
    border-radius: 50%;
    position: absolute;
    top: 1px;
    /* Positionnement de la boule intérieure */
    left: 5px;
    /* Positionnement de la boule intérieure */
    cursor: pointer;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    padding: 15px;
    z-index: 10;
}

.modal-content {
    list-style: none;
}

.parametresModal {
    display: none;
    /* La modal est cachée par défaut */
    position: absolute;
    /* Position absolue par rapport à son parent positionné */
    left: 0;
    /* Alignez à gauche du bouton */
    top: 100%;
    /* Juste en dessous du bouton */
    transform: translateY(10px);
    /* Décalage pour un peu d'espace sous le bouton */
    padding: 16px;
    background: #ffffff;
    /* Ajoutez une couleur de fond si nécessaire */
    z-index: 10;
    width: max-content;
    box-shadow: 0px 0px 30px 0px rgba(9, 0, 66, 0.10);
    border-radius: 10px;
    color: #212121;
}

.clickable-option {
    cursor: pointer;
    text-decoration: underline;
}

.clickable-option:hover {
    background-color: rgba(255, 166, 0, 0.295);
}

.clickable-word {
    cursor: pointer;
    text-decoration: underline;
    /* Ajoute un soulignement */
    text-decoration-style: solid;
    /* Style du soulignement (solid, double, dotted, dashed, wavy) */
    text-decoration-thickness: 2px;
    /* Épaisseur du soulignement */
    text-underline-offset: 4px;
}

.canConvert {
    text-decoration-color: #CDD3D5 !important;
    /* Définit la couleur du soulignement */
    text-decoration: none !important;
}

.canConvert.active,
.canConvert:hover {
    background-color: #cdd3d580 !important;
}


.needConvert {
    /*text-decoration-color: #FBD7B7;*/
    text-decoration-color: #F79337 !important;
    /* Définit la couleur du soulignement */
}

.needConvert.active,
.needConvert:hover {
    background-color: #fbd6b780;
}





#container {
    p {
        padding: 0;
        margin: 0;
    }
}

.editable-div {
    font-family: arial, sans-serif;
    font-weight: 400;
    color: black;
    /* Couleur du texte normal */
    /*border-top: 1px solid #F1F3F4;*/
    /*border-bottom: 1px solid #ccc;*/
    /*min-height: 180px;*/
    padding: 10px;
    overflow-y: auto;
    outline: none;
    /* Empêche l'affichage de l'outline lors du focus */
    line-height: 26px;
    /* 130% */
    letter-spacing: 0.4px;
}

#placeholderText {
    color: grey;
    /* Couleur du placeholder */
    pointer-events: none;
    /* Empêche le texte d'être sélectionnable */
    user-select: none;
    /* Empêche le texte d'être sélectionné */
}

/* Lexique modal */
.lexique-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    /* Position relative pour positionner la modal par rapport à cela */
    margin-left: auto;
    /* Pour pousser le lexique à la droite */
    color: #777777;
    flex-direction: row-reverse;
    justify-content: right;
}

.parametres-container {
    position: relative;
    align-items: center;
    /*display: inline-flex;*/
    display: none;
    margin-left: auto;
    color: #777777;
    cursor: pointer;
    padding: 5px 10px 5px 5px;
    border-radius: 5px;
}

.parametres-container:hover {
    background-color: #f0f0f0;
}

.lexique-icon {
    display: inline-block;
    border-radius: 50%;
    padding: 5px 5px 0 5px;
    font-size: 14px;
    margin-right: 5px;
}

.modal_lexique {
    display: block;
    /* La modal est cachée par défaut */
    position: absolute;
    /*right: 100%; /* Pour aligner la modal à gauche du point d'interrogation */
    top: 100%;
    width: 300px;
    /* Ou la largeur que vous préférez */
    background-color: #fff;
    box-shadow: 0px 0px 30px 0px rgba(9, 0, 66, 0.10);
    border-radius: 10px;
    padding: 24px;
    z-index: 1000;
    /* Assurez-vous que ce soit au-dessus des autres éléments */
    opacity: 0;
    /* Commencez avec la modal complètement transparente */
    visibility: hidden;
    /* La modal n'est pas visible par défaut */
    transition: opacity 0.3s, visibility 0.3s;
    /* Transition pour l'opacité et la visibilité */
    pointer-events: none;
    /* Assurez-vous que la modal ne capte pas de clics lorsqu'elle est invisible */
    cursor: default;
    color: #212121;
    font-size: 16px;
}

.lexique-container:hover .modal_lexique {
    display: block;
    /* Montre la modal */
    opacity: 1;
    /* Fait la modal complètement opaque */
    visibility: visible;
    /* Rend la modal visible */
    pointer-events: auto;
    /* Permet à la modal de capter des clics lorsqu'elle est visible */

}

#buttonsContainer {
    display: flex;
    justify-content: space-between;
    /* Répartit les enfants aux extrémités du conteneur */
    align-items: center;
    padding-top: 16px;
    /* Espace entre le conteneur #container et les boutons */
    width: 100%;
    /* Assurez-vous que cela correspond à la largeur du #container si nécessaire */
    /*max-width: 800px; /* Assurez-vous que cela correspond au max-width du #container si nécessaire */
}

.convertButton {
    order: 1;
    background-color: #212121;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: REM;
    font-weight: bold;
    font-size: 18px;
    padding: 16px 40px;
    text-decoration: none;
    border: none;
    /* Ajout pour supprimer la bordure */
    text-wrap: nowrap;
    height: fit-content;
}


#convertButton:hover {
    background-color: #1b1b1b;
}

#suggestButton {
    /* Styles spécifiques pour le bouton Suggérer un nouveau mot */
    order: 2;
    /* Assurez-vous que le bouton Suggérer reste à droite */
    margin-left: auto;
    /* Cela pousse le bouton Suggérer tout à droite */
    border: none;
    background-color: transparent;
    text-decoration: underline;
    display: none;
}

.infos-zdc {
    padding: 16px 24px;
    color: #212121;
    display: flex;
    justify-content: space-between;
}

.infos-zdc-subdiv{
    /*padding: 4px;*/
    padding: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    /*align-items: flex-end;*/
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    .infos-zdc {
        flex-direction: column;
        gap: 16px;
    }

    .infos-zdc-subdiv {
        order: 2;
    }
}



#linkContainer {
    padding: 0 24px;
    box-sizing: border-box;
    /*border-bottom: 1px solid #F1F3F4;*/
    text-decoration: none;
    height: 180px;
    width: fit-content;
}

.link {
    text-decoration: none;
    color: #777777;
    padding: 5px 10px;
    font-size: 18px;
    cursor: pointer;
    background-color: transparent;
    /* Couleur de fond initiale */
    transition: background-color 0.3s;
    /* Transition pour l'arrière-plan */
    border-radius: 5px;
    /* Optionnel: pour arrondir les coins du fond */
    display: flex;
    /* Faites du lien un conteneur flex */
    align-items: center;
    /* Alignez les éléments enfants verticalement au centre */
}

.link svg {
    display: block;
}

.link:hover {
    background-color: #f0f0f0;
    /* Couleur de fond au survol */
}


.link-right {
    display: none;
    justify-content: flex-end;
}

#copyLink {
    margin-right: 10px;
    /* Ajouter de l'espace entre les liens Copier et Supprimer */
}

.modal-overlay {
    display: none;
    /* Invisible par défaut */
    position: fixed;
    /* Plein écran */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Gris semi-transparent */
    z-index: 100;
    /* Assurez-vous qu'il est en dessous de la modal mais au-dessus du reste */
}

.modal-suggest {
    display: none;
    /* Invisible par défaut */
    position: fixed;
    /* Position fixe pour rester au centre */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centrer la modal */
    width: clamp(280px, 60vw, 800px);
    /* Ou la largeur que vous préférez */
    background: white;
    padding: 40px;
    border-radius: 10px;
    z-index: 101;
    /* Au-dessus de l'overlay */
    /* Ajoutez d'autres styles si nécessaire */
    font-family: REM, sans-serif;
}

.confirmChoice:hover {
    background-color: #f5f5f5;
}

.confirmSignalement {
    display: flex;
    /* Utilisez Flexbox pour aligner les enfants */
    align-items: center;
    /* Alignez les enfants verticalement au centre */
    justify-content: start;
    /* Alignez les enfants au début de la div */
    gap: 12px;
}

.confirmSignalement span {
    margin-right: 10px;
    /* Ajoutez un peu d'espace entre le texte et les SVG */
    padding: 5px 0 5px 10px;
    color: #777777;
    font-size: 18px;
}

.confirmChoice {
    display: flex;
    /* Utilisez Flexbox pour aligner les enfants (SVG et texte) */
    align-items: center;
    /* Alignez les enfants verticalement au centre */
    text-decoration: none;
    /* Supprimez le soulignement par défaut des ancres */
    cursor: pointer;
    margin-right: 5px;
}

#separatorOptions {
    display: flex;
    /* Utilisez Flexbox */
    flex-direction: column;
    /* Alignez les enfants verticalement */
    padding: 0 24px 8px 24px;
}

#separatorOptions p {
    font-weight: 500;
    /* Optionnel: pour mettre en évidence les titres de groupe */
    margin-top: 16px;
    margin-bottom: 12px;
    /* Espacement avant chaque nouveau groupe */
}

#separatorOptions label {
    display: block;
    padding: 8px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-weight: 300;
    margin-bottom: 0 !important;
}

#separatorOptions label:hover {
    background-color: #f0f0f0;
}

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
}

.radio-custom {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
}

/* Quand le bouton radio est coché, afficher le SVG */
input[type="radio"]:checked+.radio-custom {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOC41MDAwMSAxNi41ODYgTDQuNzA3MDEgMTIuNzkzQzQuNTE4NDEgMTIuNjEwOSA0LjI2NTgxIDEyLjUxMDEgNC4wMDM2MSAxMi41MTI0QzMuNzQxNDEgMTIuNTE0NiAzLjQ5MDYgMTIuNjE5OCAzLjMwNTE5IDEyLjgwNTJDMy4xMTk3OCAxMi45OTA2IDMuMDE0NjEgMTMuMjQxNCAzLjAxMjM0IDEzLjUwMzZDMy4wMTAwNiAxMy43NjU4IDMuMTEwODUgMTQuMDE4NCAzLjI5MzAxIDE0LjIwN0w3Ljc5MzAxIDE4LjcwN0M3Ljk4MDU0IDE4Ljg5NDUgOC4yMzQ4NSAxOC45OTk4IDguNSAxOC45OTk4QzguNzY1MTcgMTguOTk5OCA5LjAxOTQ4IDE4Ljk0OTUgOS4yMDcwMSAxOC43MDdMMjAuMjA3IDcuNzA3MDRDMjAuMzg5MiA3LjUxODQ0IDIwLjQ5IDcuMjY1ODQgMjAuNDg3NyA3LjAwMzY0QzIwLjQ4NTQgNi43NDE0NCAyMC4zODAyIDYuNDkwNjMgMjAuMTk0OCA2LjMwNTIyQzIwLjAwOTQgNi4xMTk4MSAxOS43NTg2IDYuMDE0NjUgMTkuNDk2NCA2LjAxMjM3QzE5LjIzNCA2LjAxMDA5IDE4Ljk4MTYgNi4xMTA4OCAxOC43OTMgNi4yOTMwNEw4LjUwMDAxIDE2LjU4NloiIGZpbGw9IiMyMTIxMjEiLz4KPC9zdmc+Cg==');
    background-repeat: no-repeat;
    background-position: center;
}

.icon-text-align {
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal_lexique_div1 p {
    margin-bottom: 16px !important;
}

.modal_lexique_div2 p:first-child {
    font-weight: bold;
    margin-bottom: 8px !important;
}

.orangeUnderlined {
    text-decoration: underline;
    /* Ajoute un soulignement */
    text-decoration-style: solid;
    /* Style du soulignement (solid, double, dotted, dashed, wavy) */
    text-decoration-thickness: 3px;
    /* Épaisseur du soulignement */
    text-decoration-color: #FBD7B7;
}

.greyUnderlined {
    text-decoration: underline;
    /* Ajoute un soulignement */
    text-decoration-style: solid;
    /* Style du soulignement (solid, double, dotted, dashed, wavy) */
    text-decoration-thickness: 3px;
    /* Épaisseur du soulignement */
    text-decoration-color: #CDD3D5;
}

.suggestModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.suggestModalHeader h3 {
    margin: 0;
}

.closeSuggestModalButton {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

#suggestWordForm {
    margin: 40px 0 0 0;
}

.modal-body form label {
    display: block;
    font-weight: bold;
}

#nonInclusiveWord,
#inclusiveAlternative {
    width: -webkit-fill-available;
    padding: 24px;
    margin: 8px 0px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.submitSuggestButton {
    background-color: #212121;
    color: white;
    padding: 12px 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 40px;
}

.submitSuggestButton:hover {
    background-color: #212121b8;
}

.instructionSmall {
    color: #777777;
    margin: 0;
}

#dicoDisplay {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 12px 24px;
    margin: 0 0 20px 0;
    /* Ajustez les marges selon votre mise en page */
    gap: 16px;
    border-top: 1px solid #F1F3F4;
}

#dicoDisplay h3 {
    color: #777777;
    font-weight: normal;
}

.dicoDisplayConv h3 {
    margin: 0 0 10px 10px;
    /* Ajustez selon vos besoins */
    font-size: 16px;
    /* Ajustez selon vos besoins */
}

.dicoDisplayConv p {
    margin: 0;
    /* Ajustez selon vos besoins */
    font-size: 18px;
    /* Ajustez selon vos besoins */
}

.iconDisplay svg {
    visibility: hidden;
    /* Le span est invisible par défaut */
    opacity: 0;
    /* Le span est complètement transparent par défaut */
    transition: visibility 0s, opacity 0.3s linear;
    /* Transition pour l'effet de fondu */
}

.iconDisplay:hover svg {
    visibility: visible;
    /* Le span devient visible au survol */
    opacity: 1;
    /* Le span devient opaque au survol */
}

/* Pour le dernier élément dicoDisplayConv, retirez la marge droite si nécessaire */
#dicoDisplay .dicoDisplayConv:last-child {
    margin-right: 0;
}

.fondGris:hover {
    background-color: #f0f0f0;
    /* Couleur de fond gris clair au survol */
}

.fondGris {
    transition: background-color 0.3s;
    /* Animation douce pour le changement de fond */
    border-radius: 5px;
    padding: 5px 10px !important;
    cursor: pointer;
}

.fondGrisAlternative {
    border-radius: 5px;
    opacity: 0.3;
    padding: 10px !important;

}

.highlighted-title {
    color: #F57805 !important;
    font-weight: bold !important;
}

.hidden {
    display: none !important;
    /* Assurez-vous que cette règle a la priorité */
}

/* Définissez le style de base de votre modal dans le CSS */
.info-modal {
    position: absolute;
    z-index: 1000;
    padding: 16px 16px 0 16px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 30px 0px rgba(9, 0, 66, 0.10);
}

.conversion-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px;
    border-radius: 4px;
}

.conversion-option:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.svg-icon {
    /* Réservez de l'espace pour le SVG même lorsqu'il est absent */
    min-width: 24px;
    /* Assurez-vous que cela correspond à la largeur de votre SVG */
    min-height: 24px;
    /* Assurez-vous que cela correspond à la hauteur de votre SVG */
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversion-text {
    display: flex;
    flex-direction: column;
}

.conversion-word {
    /* Style pour le mot de conversion */
    font-size: normal;
}

.conversion-type {
    color: #F57805;
    font-size: 14px;
}

.non-clickable {
    opacity: 0.3;
    cursor: not-allowed;
}

#modal hr {
    margin: 10px 0;
    border: 0;
    height: 1px;
    background-color: #ccc;
    /* Ou une couleur qui correspond à votre design */
}

#reportIssue {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* Si vous voulez que cela ressemble à un élément cliquable */
}

#reportIssue .svg-icon {
    margin-right: 8px;
}


#insertExampleButton {
    display: block;
    /* Afficher par défaut */
}

#errorLink {
    display: none;
    /* Cacher par défaut */
}


/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */
.dot-elastic {
    display: none;
    position: relative;
    width: 10px;
    height: 10px;
    margin: 6px 28px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dot-elastic 1s infinite linear;
}

.dot-elastic::before,
.dot-elastic::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-elastic::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dot-elastic-before 1s infinite linear;
}

.dot-elastic::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dot-elastic-after 1s infinite linear;
}

@keyframes dot-elastic-before {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 1.5);
    }

    50% {
        transform: scale(1, 0.67);
    }

    75% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes dot-elastic {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1, 1.5);
    }

    75% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes dot-elastic-after {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1, 0.67);
    }

    75% {
        transform: scale(1, 1.5);
    }

    100% {
        transform: scale(1, 1);
    }
}


.custom-select {
    background-color: #fff;
    position: relative;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    padding: 16px 40px 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 203px;
    height: fit-content;
    border-radius: var(--1366-Small-Radius, 10px);
    border: 1px solid var(--Contour-soulignage-grisbleu, #CDD3D5);
    background: var(--Gris-gris-000, #FFF);
    text-wrap: nowrap;
}

.custom-select-selected {
    padding-right: 20px;
    /* Make room for the arrow */
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    border-radius: 5px;
    width: 100%;
}

.custom-select-arrow {
    /* Style pour la flèche */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
    pointer-events: none;
    /* Désactive les événements de souris sur la flèche */
}


.custom-select-options {
    display: none;
    /* Cache les options par défaut */
    position: absolute;
    bottom: 60px;
    /*top: 100%;*/
    /*top: 0;*/
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    padding: 24px 24px 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    /*gap: 24px;*/
}

.custom-select-option {
    /*padding: 10px;*/
    border-bottom: 1px solid #eee;
    /* Séparateur entre les options */
    transition: background-color 0.3s ease;
}

.custom-select-option:last-child {
    border-bottom: none;
    /* Pas de bordure pour la dernière option */
}

.custom-select-option:hover {
    background-color: #f6f6f6;
}

.custom-select.open .custom-select-selected {
    color: #777;
}


/* Lorsque les options sont affichées, changez l'ombre portée du conteneur */
/*.custom-select.open .custom-select-selected {
    /*box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
}*/

/* Rotation de la flèche lorsque le menu est ouvert */
.custom-select.open .custom-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-option.selected-option {
    /*background-color: #e9e9e9;*/
    /* Couleur de fond pour l'option sélectionnée */
    /* Ajoutez d'autres styles si nécessaire */
}

#optionCombine1,
#optionCombine2 {
    display: none;
}

#optionsContainer {
    padding: 0 19px 0 0;
}

.custom-select-arrow {
    right: 24px;
}

/* RESPONSIVE */

@media screen and (max-width: 990px) {
    /**{
        font-size: 16px !important;
    }*/

    #inputText {
        font-size: 18px;
    }

    .conversion-type {
        font-size: 12px;
    }

    .lexique-text {
        display: none;
    }

    .option {
        display: none;
    }

    .custom-select {
        display: flex;
        padding: 16px 40px 16px 32px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 192px;
        border-radius: var(--1366-Small-Radius, 10px);
        border: 1px solid var(--Contour-soulignage-grisbleu, #CDD3D5);
        background: var(--Gris-gris-000, #FFF);
    }

    .parametresModal {
        right: 0;
        left: auto;
    }

    #dicoDisplay {
        flex-direction: column;
    }

    .dicoDisplayConv {
        border-bottom: 1px solid #F1F3F4;
        width: 100%;
    }

    .dicoDisplayConv h3 {
        margin: 0 0 0 10px;
    }

    .confirmSignalement span {
        font-size: 16px;
    }

    .custom-select-option {
        /*padding: 16px 24px;*/
    }

    .clickable-word {
        text-underline-offset: 4px;
    }
}


@media screen and (max-width: 768px) {
    .link-right span {
        display: none;
    }

    .link {
        padding: 4px 8px;
        font-size: 16px;
    }

    #buttonsContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Répartit les enfants aux extrémités du conteneur */
        align-items: center;

        gap: 16px;

        width: 100%;
        /* Assurez-vous que cela correspond à la largeur du #container si nécessaire */
    }

    #suggestButton {
        margin-left: unset;
    }

    .convertButton {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal_lexique {
        width: 280px;
        padding: 16px;
    }

    #characterCounter {
        font-size: 12px !important;
    }
}

.newOptions{
    display: flex;
    align-items: center;
    gap: 8px;
}

.newOptions:hover{
    background-color: red;
}

/* Bloc historique + style */

.container2 {
    width: 100%;
    height: 344px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 30px 0px rgba(11, 0, 91, 0.05);
}

.tabs {
    display: flex;
    justify-content: space-around;
    background-color: white;
    padding: 0px 32px;
    gap: 16px;
    border-bottom: 1px solid #F0E8DB;
}


.tab-button {
    flex: 1;
    cursor: pointer;
    background-color: #fff;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
    padding: 16px 8px;
    font-family: REM;
    font-weight: 400;
}

.tab-button.active {
    border-bottom: 2px solid #F57805;
}

.tab-content {
    display: none;
    background-color: white;
    height: 300px;
    overflow: auto;
    font-family: REM;
    font-weight: 300;
}

.tab-content.active {
    display: block;
}

.conversion-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    padding: 16px 8px;
}

.conversion-item:hover {
    background-color:#FEF2E8;
}

.conversion-item .icon {
    margin-right: 10px;
}

.conversion-item span {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.dot-windmill-placement{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.dot-windmill {
  position: relative;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #F57805;
  color: #F57805;
  transform-origin: 5px 15px;
  animation: dot-windmill 2s infinite linear;
}
.dot-windmill::before, .dot-windmill::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.dot-windmill::before {
  left: -8.66254px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #F57805;
  color: #F57805;
}
.dot-windmill::after {
  left: 8.66254px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #F57805;
  color: #F57805;
}

@keyframes dot-windmill {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}