/* C2RB Studio 7.0.13 — C14 Bulles de navigation */
.c2rb-navigation-bubbles {
    --c2rb-bubble-gap-x: 18px;
    --c2rb-bubble-gap-y: 16px;
    --c2rb-bubble-min-height: 52px;
    --c2rb-bubble-pad-y: 11px;
    --c2rb-bubble-pad-x: 24px;
    --c2rb-bubble-radius: 18px;
    --c2rb-bubble-font-size: 1rem;
    width: 100%;
}
.c2rb-navigation-bubbles__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c2rb-bubble-gap-y) var(--c2rb-bubble-gap-x);
}
.c2rb-navigation-bubbles--align-center .c2rb-navigation-bubbles__items { justify-content: center; }
.c2rb-navigation-bubbles--align-left .c2rb-navigation-bubbles__items { justify-content: flex-start; }
.c2rb-navigation-bubbles--spacing-compact { --c2rb-bubble-gap-x: 10px; --c2rb-bubble-gap-y: 10px; }
.c2rb-navigation-bubbles--spacing-airy { --c2rb-bubble-gap-x: 26px; --c2rb-bubble-gap-y: 22px; }
.c2rb-navigation-bubbles--size-small {
    --c2rb-bubble-min-height: 44px;
    --c2rb-bubble-pad-y: 8px;
    --c2rb-bubble-pad-x: 18px;
    --c2rb-bubble-radius: 15px;
    --c2rb-bubble-font-size: .9rem;
}
.c2rb-navigation-bubbles--size-large {
    --c2rb-bubble-min-height: 60px;
    --c2rb-bubble-pad-y: 14px;
    --c2rb-bubble-pad-x: 30px;
    --c2rb-bubble-radius: 20px;
    --c2rb-bubble-font-size: 1.08rem;
}
.c2rb-navigation-bubble {
    --c2rb-bubble-color: #50a599;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--c2rb-bubble-min-height);
    padding: var(--c2rb-bubble-pad-y) var(--c2rb-bubble-pad-x);
    border: 2px solid var(--c2rb-bubble-color);
    border-radius: var(--c2rb-bubble-radius);
    color: #30464d;
    background: rgba(255,255,255,.72);
    font-family: var(--cds-font-sans, "Montserrat", Arial, sans-serif);
    font-size: var(--c2rb-bubble-font-size);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}
.c2rb-navigation-bubble--green { --c2rb-bubble-color: #50a599; }
.c2rb-navigation-bubble--pink { --c2rb-bubble-color: #dc69a0; }
.c2rb-navigation-bubble--blue { --c2rb-bubble-color: #6d9fad; }
.c2rb-navigation-bubble--terracotta { --c2rb-bubble-color: #b96f59; }
.c2rb-navigation-bubble--sand { --c2rb-bubble-color: #96743c; }
.c2rb-navigation-bubble--gray { --c2rb-bubble-color: #66757b; }

/* Alternance automatique issue de la palette C2RB. */
.c2rb-navigation-bubbles--colors-alternate .c2rb-navigation-bubble:nth-child(6n+1) { --c2rb-bubble-color: #50a599; }
.c2rb-navigation-bubbles--colors-alternate .c2rb-navigation-bubble:nth-child(6n+2) { --c2rb-bubble-color: #dc69a0; }
.c2rb-navigation-bubbles--colors-alternate .c2rb-navigation-bubble:nth-child(6n+3) { --c2rb-bubble-color: #6d9fad; }
.c2rb-navigation-bubbles--colors-alternate .c2rb-navigation-bubble:nth-child(6n+4) { --c2rb-bubble-color: #b96f59; }
.c2rb-navigation-bubbles--colors-alternate .c2rb-navigation-bubble:nth-child(6n+5) { --c2rb-bubble-color: #96743c; }
.c2rb-navigation-bubbles--colors-alternate .c2rb-navigation-bubble:nth-child(6n) { --c2rb-bubble-color: #66757b; }

.c2rb-navigation-bubble.is-linked {
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.c2rb-navigation-bubbles--animated .c2rb-navigation-bubble.is-linked:hover,
.c2rb-navigation-bubbles--animated .c2rb-navigation-bubble.is-linked:focus-visible {
    color: #fff;
    background: var(--c2rb-bubble-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(40,63,66,.12);
}
.c2rb-navigation-bubble.is-linked:focus-visible {
    outline: 3px solid rgba(48,70,77,.22);
    outline-offset: 3px;
}
.c2rb-navigation-bubble.is-static { cursor: default; }

/* Gutenberg */
.editor-styles-wrapper .c2rb-navigation-bubbles__items > .block-editor-inner-blocks,
.editor-styles-wrapper .c2rb-navigation-bubbles__items > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents;
}
.editor-styles-wrapper .c2rb-navigation-bubbles__items > .block-editor-block-list__layout,
.editor-styles-wrapper .c2rb-navigation-bubbles__items .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c2rb-bubble-gap-y) var(--c2rb-bubble-gap-x);
}
.editor-styles-wrapper .c2rb-navigation-bubbles--align-center .block-editor-block-list__layout { justify-content: center; }
.editor-styles-wrapper .c2rb-navigation-bubbles--align-left .block-editor-block-list__layout { justify-content: flex-start; }
.editor-styles-wrapper .wp-block-c2rb-navigation-bubble { margin: 0; }
.editor-styles-wrapper .c2rb-navigation-bubble { min-width: 130px; }
.c2rb-navigation-bubble__url-control > p { margin-bottom: 8px; font-weight: 600; }

@media (max-width: 680px) {
    .c2rb-navigation-bubbles {
        --c2rb-bubble-gap-x: 10px;
        --c2rb-bubble-gap-y: 10px;
    }
    .c2rb-navigation-bubble {
        min-height: 46px;
        padding: 9px 15px;
        border-radius: 14px;
        font-size: var(--c2rb-bubble-font-size);
    }
}
@media (prefers-reduced-motion: reduce) {
    .c2rb-navigation-bubble.is-linked { transition: none; }
    .c2rb-navigation-bubbles--animated .c2rb-navigation-bubble.is-linked:hover,
    .c2rb-navigation-bubbles--animated .c2rb-navigation-bubble.is-linked:focus-visible { transform: none; }
}


/* 7.0.13 — Réglages de largeur et de typographie du bloc C14 */
.c2rb-navigation-bubbles--width-100 {
    width: 100%;
    margin-inline: auto;
}
.c2rb-navigation-bubbles--width-80 {
    width: 80%;
    margin-inline: auto;
}
.c2rb-navigation-bubbles--font-small { --c2rb-bubble-font-size: .9rem; }
.c2rb-navigation-bubbles--font-standard { --c2rb-bubble-font-size: 1rem; }
.c2rb-navigation-bubbles--font-large { --c2rb-bubble-font-size: 1.1rem; }
.c2rb-navigation-bubbles--font-xlarge { --c2rb-bubble-font-size: 1.2rem; }
.c2rb-navigation-bubbles--weight-500 .c2rb-navigation-bubble { font-weight: 500; }
.c2rb-navigation-bubbles--weight-600 .c2rb-navigation-bubble { font-weight: 600; }
.c2rb-navigation-bubbles--weight-700 .c2rb-navigation-bubble { font-weight: 700; }

/* Dans l’éditeur, la largeur choisie reste visible et centrée. */
.editor-styles-wrapper .c2rb-navigation-bubbles--width-80 {
    width: 80%;
    margin-inline: auto;
}
