/* ------------------------------- Conteneur ------------------------------- */
.coteaux-contact-side {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    pointer-events: none !important;
}
.coteaux-contact-side--right {
    right: 0 !important;
    filter: drop-shadow(-4px 4px 12px rgba(0, 0, 0, .25)) !important;
}
.coteaux-contact-side--left  { left:  0 !important; }

/* ------------------------- Colonne d'icônes (fixe) ----------------------- */
.coteaux-contact-side__item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    min-height: 58px !important;
    padding: 14px 0 !important;
    background: var(--cs-bg, #D5A137) !important;
    color: var(--cs-text, #FFF2E0) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    transition: border-radius .35s cubic-bezier(.16, 1, .3, 1) !important;
}

/* Radius extérieurs : premier/dernier item pour former un bloc unifié */
.coteaux-contact-side--right .coteaux-contact-side__item:first-child { border-top-left-radius: 15px !important; }
.coteaux-contact-side--right .coteaux-contact-side__item:last-child  { border-bottom-left-radius: 15px !important; }
.coteaux-contact-side--left  .coteaux-contact-side__item:first-child { border-top-right-radius: 15px !important; }
.coteaux-contact-side--left  .coteaux-contact-side__item:last-child  { border-bottom-right-radius: 15px !important; }

/* ----------------------------- Icône ---------------------------------- */
.coteaux-contact-side__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cs-icon, #FFF2E0) !important;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 auto !important;
}
.coteaux-contact-side__icon svg,
.coteaux-contact-side__icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* ------------------------- Tooltip / panneau ---------------------------- */
/* Positionné en absolu à côté de l'icône, centré verticalement.
   Ne déforme pas la colonne d'icônes quoi qu'il contienne. */
.coteaux-contact-side__content {
    position: absolute !important;
    top: 50% !important;
    background: var(--cs-bg, #D5A137) !important;
    color: var(--cs-text, #FFF2E0) !important;
    font-family: var(--cs-font, 'Syne'), sans-serif !important;
    font-size: var(--cs-size, 14px) !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    max-width: 0 !important;
    width: max-content !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
    transition: max-width .45s cubic-bezier(.16, 1, .3, 1),
                opacity .25s ease,
                padding .45s cubic-bezier(.16, 1, .3, 1),
                transform .45s cubic-bezier(.16, 1, .3, 1) !important;
}

/* Ancrage + radius + direction de slide selon la position */
.coteaux-contact-side--right .coteaux-contact-side__content {
    right: calc(100% - 1px) !important;  /* -1px pour tuer le micro-gap */
    border-radius: 15px 0 0 15px !important;
    transform: translateY(-50%) translateX(24px) !important;  /* départ depuis la droite, caché derrière l'icône */
}
.coteaux-contact-side--left .coteaux-contact-side__content {
    left: calc(100% - 1px) !important;
    border-radius: 0 15px 15px 0 !important;
    transform: translateY(-50%) translateX(-24px) !important;
}

/* Ouverture par classe .is-open (mobile via JS — works partout) */
.coteaux-contact-side--right .coteaux-contact-side__item.is-open .coteaux-contact-side__content,
.coteaux-contact-side--left .coteaux-contact-side__item.is-open .coteaux-contact-side__content {
    max-width: 420px !important;
    padding: 14px 20px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* Ouverture au survol / focus : uniquement sur devices avec vrai hover.
   Évite le "sticky hover" d'iOS qui empêche la fermeture au re-tap. */
@media (hover: hover) {
    .coteaux-contact-side--right .coteaux-contact-side__item:hover .coteaux-contact-side__content,
    .coteaux-contact-side--right .coteaux-contact-side__item:focus-visible .coteaux-contact-side__content {
        max-width: 420px !important;
        padding: 14px 20px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(-50%) translateX(0) !important;
    }
    .coteaux-contact-side--left .coteaux-contact-side__item:hover .coteaux-contact-side__content,
    .coteaux-contact-side--left .coteaux-contact-side__item:focus-visible .coteaux-contact-side__content {
        max-width: 420px !important;
        padding: 14px 20px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(-50%) translateX(0) !important;
    }
    /* Hover strict : les autres items ne s'ouvrent pas */
    .coteaux-contact-side:has(.coteaux-contact-side__item:hover) .coteaux-contact-side__item:not(:hover) .coteaux-contact-side__content {
        max-width: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
    }
}

/* ------------------------ Contenu du panneau --------------------------- */
.coteaux-contact-side__label {
    display: block !important;
    font-weight: 700 !important;
    font-size: .85em !important;
    opacity: .85 !important;
    margin-bottom: 2px !important;
}

.coteaux-contact-side__value { display: block !important; }

.coteaux-contact-side__value p {
    margin: 0 !important;
    white-space: nowrap !important;
    display: block !important;
}
.coteaux-contact-side__value p + p {
    margin-top: 2px !important;
}
.coteaux-contact-side__value * {
    color: inherit !important;
}
.coteaux-contact-side__value a {
    color: inherit !important;
    text-decoration: underline !important;
}

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 767px) {
    /* Même position qu'en desktop : centré verticalement, collé à droite.
       On garde top: 50% + translateY(-50%) hérités de la règle de base. */
    .coteaux-contact-side__item {
        width: 50px !important;
        min-height: 50px !important;
        padding: 12px 0 !important;
    }
    .coteaux-contact-side__icon {
        width: 22px !important;
        height: 22px !important;
    }
    .coteaux-contact-side__content {
        font-size: var(--cs-size-mobile, 12px) !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    /* Override des styles inline (font-size:Xpx, white-space:pre-wrap) ajoutés par l'éditeur WP */
    .coteaux-contact-side__content *,
    .coteaux-contact-side__value * {
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .coteaux-contact-side__item.is-open .coteaux-contact-side__content {
        max-width: calc(100vw - 70px) !important;
        padding: 12px 16px !important;
    }
}