/* ============================================================
   Top Bar — barre d'annonces moderne (bloc PrettyBlocks).
   Desktop : colonnes equilibrees. Mobile : defilement automatique
   (une colonne a la fois, fondu) + fleches de navigation.
   ============================================================ */

.tb {
    --tb-text: #ffffff;
    --tb-size: 14px;

    box-sizing: border-box;
    color: var(--tb-text);
    font-size: var(--tb-size);
    line-height: 1.4;
    width: 100%;
}

.tb *,
.tb *::before,
.tb *::after {
    box-sizing: border-box;
}

/* Fusionnee dans le header collant du theme (mode sticky) : si cet hote est un
   conteneur flex (navbar Bootstrap...), la barre occupe sa propre rangee au lieu
   de se poser a cote du logo/menu. Sans effet si l'hote est un bloc classique. */
.tb--merged {
    flex-basis: 100%;
    max-width: 100%;
}

/* Mode "content" : la barre porte AUSSI la classe .container du theme (posee
   dans le template) -> meme largeur maxi et meme centrage que le reste de la
   page. Si la barre se retrouve DANS un .container du theme (zone deja
   contenue), on neutralise le container interne pour eviter le double gouttiere. */
.container .tb.tb--content.container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Sticky : la classe tb--fixed est posee par le JS au scroll (plus fiable que
   position sticky, qui casse des qu'un parent a un overflow). En mode fixe la
   barre occupe toute la largeur de l'ecran, meme en mode "content". */
.tb--fixed {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1055; /* au-dessus des headers collants du theme (Bootstrap ~1030) */
    margin-top: 0 !important;
    max-width: none;
    width: 100%;
}

.tb-inner {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 0 auto;
    min-height: 40px;
    padding: 8px 16px;
    position: relative;
}

/* Hauteur imposee : la barre fait exactement --tb-height, le contenu reste
   centre verticalement (align-items) et le padding vertical s'efface pour ne
   pas depasser. La largeur/les icones/le texte s'adaptent automatiquement. */
.tb[style*="--tb-height"] .tb-inner {
    min-height: var(--tb-height);
    height: var(--tb-height);
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.tb-col {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

/* Separateurs discrets entre colonnes (desktop). rgba en secours pour les
   navigateurs sans color-mix (< 2023) : le separateur reste visible. */
.tb-col + .tb-col {
    border-left: 1px solid rgba(255, 255, 255, .25);
    border-left: 1px solid color-mix(in srgb, var(--tb-text) 25%, transparent);
    padding-left: 24px;
}

.tb-link {
    align-items: center;
    color: var(--tb-text);
    display: inline-flex;
    gap: var(--tb-gap, 8px);
    min-width: 0;
    text-decoration: none;
}

/* Icone / image apres le texte : on inverse l'ordre des enfants du lien. */
.tb--icon-after .tb-link { flex-direction: row-reverse; }
.tb--icon-after .tb-phone { flex-direction: row; } /* phone garde icone + label + numero */

a.tb-link:hover {
    color: var(--tb-text);
    opacity: .85;
    text-decoration: none;
}

.tb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-number {
    font-weight: 700;
    white-space: nowrap;
}

.tb-ico {
    flex-shrink: 0;
    height: var(--tb-icon-h, 18px);
    width: var(--tb-icon-h, 18px);
}

.tb-img {
    flex-shrink: 0;
    height: var(--tb-icon-h, 18px);
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.tb-phone .tb-ico {
    color: var(--tb-text);
}

/* Fleches de navigation (mobile uniquement) */
.tb-nav {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--tb-text);
    cursor: pointer;
    display: none;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    opacity: .8;
    padding: 0;
    width: 28px;
}

.tb-nav svg {
    height: 18px;
    width: 18px;
}

.tb-nav:hover {
    opacity: 1;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .tb-inner {
        gap: 8px;
    }

    .tb-col + .tb-col {
        border-left: 0;
        padding-left: 0;
    }

    /* Mode defilement : une colonne visible a la fois, fondu croise. */
    .tb--slide .tb-inner {
        display: grid;
        grid-template-columns: 28px 1fr 28px;
        align-items: center;
    }

    .tb--slide .tb-col {
        grid-area: 1 / 2;
        opacity: 0;
        pointer-events: none;
        transition: opacity .5s ease;
    }

    .tb--slide .tb-col.tb-col--active {
        opacity: 1;
        pointer-events: auto;
    }

    .tb--slide.tb--arrows .tb-nav {
        display: flex;
    }

    .tb--slide.tb--arrows .tb-nav--prev { grid-area: 1 / 1; }
    .tb--slide.tb--arrows .tb-nav--next { grid-area: 1 / 3; }

    /* Sans defilement : colonnes empilees. */
    .tb:not(.tb--slide) .tb-inner {
        flex-direction: column;
        gap: 6px;
        padding: 10px 16px;
    }
}

@media (min-width: 768px) {
    .tb-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb--slide .tb-col {
        transition: none;
    }
}