.elementor-2335 .elementor-element.elementor-element-8101194{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2335 .elementor-element.elementor-element-e6075f4.elementor-element{--align-self:center;}.elementor-2335 .elementor-element.elementor-element-e6075f4{text-align:center;}.elementor-2335 .elementor-element.elementor-element-1d5222db{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2335 .elementor-element.elementor-element-8101194{--content-width:1200px;}.elementor-2335 .elementor-element.elementor-element-1d5222db{--content-width:1048px;}}/* Start custom CSS for text-editor, class: .elementor-element-668f8fe4 *//* =========================
   LISTE DES INSTITUTIONS
   ========================= */

.institutions-list.compact {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
    .institutions-list.compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .institutions-list.compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================
   ITEM
   ========================= */

.institution-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 10px;
    border-left: 4px solid #00732C;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 1;
}

.institution-item:hover {
    background: #eef6f1;
}

/* Message "Cliquer pour voir les détails" */
.institution-item::before {
    content: "Cliquer pour voir les détails";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #374151;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
    margin-bottom: 8px;
}

/* Flèche du message */
.institution-item::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #374151 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

/* Afficher le message au survol (seulement si tooltip fermé) */
.institution-item:not(.active):hover::before,
.institution-item:not(.active):hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.institution-item:not(.active):hover::after {
    transform: translateX(-50%);
}

/* Item actif (tooltip ouvert) */
.institution-item.active {
    background: #eef6f1;
    transform: translateX(3px);
    z-index: 9999 !important;
}

/* DRAPEAU PLUS GRAND */
.country-flag {
    font-size: 32px;
    margin-right: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.institution-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
}

/* =========================
   TOOLTIP - STYLE DE BASE
   ========================= */

.custom-tooltip {
    position: absolute;
    left: 50%;
    background: #ffffff;
    color: #1f2937;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    max-width: 420px;
    width: max-content;
    border: 1px solid rgba(0,115,44,0.25);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 99999 !important;
    text-align: left;

    /* PERMETTRE LA SÉLECTION DU TEXTE */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
    pointer-events: none;
}

/* Tooltip visible */
.custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* TOOLTIP VERS LE BAS */
.custom-tooltip.tooltip-bottom {
    top: 100%;
    bottom: auto;
    margin-top: 14px;
    transform: translateX(-50%) translateY(-10px);
}

.custom-tooltip.tooltip-bottom.visible {
    transform: translateX(-50%) translateY(0);
}

.custom-tooltip.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

/* TOOLTIP VERS LE HAUT */
.custom-tooltip.tooltip-top {
    bottom: 100%;
    margin-bottom: 14px;
    transform: translateX(-50%) translateY(10px);
}

.custom-tooltip.tooltip-top.visible {
    transform: translateX(-50%) translateY(0);
}

.custom-tooltip.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Titre du tooltip */
.tooltip-title {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #00732C;
    border-bottom: 1px solid rgba(0,115,44,0.2);
    padding-bottom: 8px;
}

/* Lignes du tooltip */
.tooltip-line {
    display: block;
    margin: 4px 0;
    color: #374151;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
    cursor: text;
}

.tooltip-line:hover {
    background: #f0f9f4;
}

/* Sélection de texte */
.custom-tooltip ::selection {
    background: #00732C;
    color: white;
}

/* Bouton fermer */
.tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.2s ease;
    line-height: 1;
}

.tooltip-close:hover {
    background: #e5e7eb;
    color: #374151;
}

/* =========================
   RESPONSIVE MOBILE
   ========================= */

@media (max-width: 767px) {
    .custom-tooltip {
        width: 85vw;
        max-width: 85vw;
        left: 0 !important;
    }

    .custom-tooltip.tooltip-bottom {
        transform: translateX(0) translateY(-10px);
    }

    .custom-tooltip.tooltip-bottom.visible {
        transform: translateX(0) translateY(0);
    }

    .custom-tooltip.tooltip-top {
        transform: translateX(0) translateY(10px);
    }

    .custom-tooltip.tooltip-top.visible {
        transform: translateX(0) translateY(0);
    }

    .custom-tooltip::after {
        left: 30px !important;
        transform: translateX(0) !important;
    }
}/* End custom CSS */