/*Tooltip Icons*/
.tooltipIcon {
    position: relative;
    opacity: 1;
    line-height: initial;
}
.tooltipIcon .tooltiptext,.tooltipIcon .tooltiptext4  {
    display: none;
    font-size: 0.75em;
    line-height: 2.4;
    font-family: var(--FormPoliceChamp);
    width: auto;
    background-color: rgba(255, 255, 255, 0.8);
    color: #254893;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    right: 140%;
    text-wrap: nowrap;
    margin-left:5px;
    margin-right: 5px;
}

.tooltipIcon:hover .tooltiptext {
    display: none;
}
.tooltipIcon:hover .tooltiptext4 {
    display: block;
}
 .tooltipIcon:hover .tooltiptext3 {
    display: block;
}

.icons-menu-container .tooltip-switch:hover .tooltiptext,.icons-menu-container .tooltip-switch:hover .tooltiptext4 {
    display: block;
}
.tooltipIcon .tooltiptext::after,.tooltipIcon .tooltiptext4::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
}

.tooltipIcon .tooltiptext3::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
}

.obsStyle .accordion {
    overflow: unset;
}
.obsStyle .accordion .accordion-list {
    overflow: unset;
}

@media screen and (min-width: 1920px) {
    .icons-menu-container .tooltipIcon .tooltiptext, .icons-menu-container .tooltipIcon .tooltiptext4 {
        top: 1vh;
    }
    .tooltipIcon .tooltiptext, .tooltipIcon .tooltiptext4 {
        top: 0.5vh;
    }
}
@media screen and (min-width: 1440px) {
    .tooltipIcon .tooltiptext,.tooltipIcon .tooltiptext4 {
        padding: 3px 0;
    }
}
@media screen and (max-width: 1024px) {
    .tooltipIcon:hover .tooltiptext,.tooltipIcon:hover .tooltiptext4 {
        display: block !important;
    }
}
@media screen and (max-width: 767px) {}

/*Tooltip Menu*//*Tooltip Map*/
#ulMain .tooltipIcon .tooltiptext, .menu-map .tooltipIcon .tooltiptext,#ulMain .tooltipIcon .tooltiptext4, .menu-map .tooltipIcon .tooltiptext4 {
    width: 100%;
    white-space: nowrap;
    padding: 0 6px;

    left: 108%;
    background-color: rgba(255, 255, 255, 0.8);
    /* background-color: var(--FormCouleurSpin); */
}
.menu-map .border-top .tooltiptext,.menu-map .border-top .tooltiptext4 {
    left: 103%;
}
#ulMain .tooltipIcon .tooltiptext::after, .menu-map .tooltipIcon .tooltiptext::after ,#ulMain .tooltipIcon .tooltiptext4::after, .menu-map .tooltipIcon .tooltiptext4::after {
    left: unset;
    right: 100%;
    border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent;
    /* border-color: transparent var(--FormCouleurSpin) transparent transparent; */
}
.menu-map .optionsObs1, .menu-map .optionsObs2 {
    font-size: 18px;
}

/*sous-menu*/
#ulMain .form-check .tooltipIcon, #ulMain .accordion-subMenu.flex-row .tooltipIcon, .menu-map .ac-large .tooltipIcon, .menu-map .border-top .tooltipIcon  {
    position: unset;
}

@media (orientation: landscape) and (max-height: 700px) {
    .tooltipIcon:hover .tooltiptext,.tooltipIcon:hover .tooltiptext4 {
        display: block !important;
    }
}
/* =========================================================
   TOOLTIPS SOUS LES ÉLÉMENTS
   Aucun impact sur les images, boutons ou switches
   ========================================================= */

/*
 * On utilise uniquement position: relative comme repère.
 * Cela ne modifie ni la taille ni l'affichage du contenu.
 */
.second-accordion .tooltipIcon,
.legend2 .tooltipIcon,
.legendco .tooltipIcon {
    position: relative;
}

/*
 * Positionnement commun des textes sous leur élément parent.
 * On ne cible que les balises <p> correspondant aux tooltips.
 */
.second-accordion .tooltipIcon > p.tooltiptext3,
.legend2 .tooltipIcon > p.tooltiptext4,
.legendco .tooltipIcon > p.tooltiptext4 {
    display: none;

    position: absolute !important;

    top: calc(100% + 6px) !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 4px 8px !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: min(280px, 85vw);

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box;

    font-size: 0.75em;
    line-height: 1.4;
    font-family: var(--FormPoliceChamp);

    color: #254893;
    text-align: center;
    white-space: nowrap;

    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;

    z-index: 10000;
    pointer-events: none;
}

/*
 * Affichage au survol.
 * display:block évite toute incidence Flexbox.
 */
.second-accordion .tooltipIcon:hover > p.tooltiptext3,
.legend2 .tooltipIcon:hover > p.tooltiptext4,
.legendco .tooltipIcon:hover > p.tooltiptext4 {
    display: block !important;
}

/*
 * Flèche placée au-dessus du tooltip.
 */
.second-accordion .tooltipIcon > p.tooltiptext3::after,
.legend2 .tooltipIcon > p.tooltiptext4::after,
.legendco .tooltipIcon > p.tooltiptext4::after {
    content: "";

    position: absolute !important;

    top: auto !important;
    bottom: 100% !important;

    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    border-width: 5px;
    border-style: solid;
    border-color:
        transparent
        transparent
        rgba(255, 255, 255, 0.9)
        transparent !important;
}

/*
 * Annule les styles inline margin-top:50px et margin-left:25px
 * des tooltips du menu legendco.
 */
.legendco .tooltipIcon > p.tooltipIcon2 {
    margin: 0 !important;

    top: calc(100% + 6px) !important;
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;
}

/*
 * Les textes longs peuvent revenir à la ligne sur mobile.
 */
@media screen and (max-width: 767px) {
    .second-accordion .tooltipIcon > p.tooltiptext3,
    .legend2 .tooltipIcon > p.tooltiptext4,
    .legendco .tooltipIcon > p.tooltiptext4 {
        max-width: 220px;
        white-space: normal;
    }
}