/* =============================================================
   Announcement Slider — style.css
   Chemin : blocks/announcement-slider/style.css
   ============================================================= */

.asb-wrapper {
    --asb-bg:       #ffffff;
    --asb-text:     rgba(7, 21, 84, 1);
    --asb-accent:   rgba(7, 21, 84, 1);
    --asb-dot-size: 5px;
    --asb-h:        52px;
    --asb-interval: 5000ms;
}

.asb-wrapper {
      display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--asb-h);
    background: var(--asb-bg);
    color: var(--asb-text);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    font-size: .875rem;
        max-width: fit-content;
}
button.asb-dot.asb-dot--active{
    width: 30px;
}
/* ── Dots ── */
.asb-dots {
    display:     flex;
    gap:         6px;
    align-items: center;
    flex-shrink: 0;
}

.asb-dot {
    position:      relative;
    width:         var(--asb-dot-size);
    height:        var(--asb-dot-size);
    border-radius: 999px;
    border:        none;
    background:    color-mix(in srgb, var(--asb-accent) 20%, transparent);
    cursor:        pointer;
    padding:       0;
    overflow:      hidden;
    flex-shrink:   0;
}

.asb-dot__fill {
    position:         absolute;
    inset:            0;
    background:       var(--asb-accent);
    border-radius:    999px;
    transform:        scaleX(0);
    transform-origin: left center;
}

.asb-dot--active .asb-dot__fill {
    animation: asb-fill var(--asb-interval) linear forwards;
}

@keyframes asb-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Dans l'éditeur : dot actif plein, sans animation */
.asb-editor .asb-dot--active .asb-dot__fill,
.asb-dot--static .asb-dot__fill {
    animation: none;
    transform: scaleX(1);
}

/* ── Track ── */
.asb-track {
    flex:      1;
    display:   grid;
    grid-template-columns: 1fr;
    overflow:  hidden;
    min-width: 0;
}

/* ── Slides ── */
.asb-slide {
    grid-row:       1;
    grid-column:    1;
    display:        flex;
    align-items:    center;
    gap:            12px;
    flex-wrap:      wrap;
    min-width:      0;
    opacity:        0;
    transform:      translateY(6px);
    pointer-events: none;
    transition:     opacity .3s ease, transform .3s ease;
}

.asb-slide--active {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

.asb-slide__title {
   font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    color: rgba(7, 21, 84, 1);
    font-size: 1.2em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 225px;
}

.asb-slide__excerpt {
    font-weight:   400;
    color:         rgba(7, 21, 84, 1);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    flex:          1;
    min-width:     0;
    font-size: 1.2em;
}

.asb-slide__cta {
       display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 1.1em;
    font-weight: 500;
    color: rgba(7, 21, 84, 1);
    text-decoration: none;
    border: 1px solid rgba(7, 21, 84, 1);
    border-radius: 100px;
    padding: 8px 18px 10px;
    transition: background .2s, border-color .2s, color .2s;
    white-space: nowrap;
}
a.asb-slide__cta svg {
    margin-top: 2px;
}
.asb-slide__cta:hover {
    background:   var(--asb-accent);
    border-color: var(--asb-accent);
    color:        #fff;
}
a.asb-slide__cta:hover svg path {
    stroke: #fff;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .asb-slide__excerpt {

            white-space: normal;
    }
   .asb-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    gap: 10px !important;
    align-items: flex-start;
}

.asb-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px ;
}
.asb-slide__cta {
    margin-top: 15px;
}
.actu {
    margin-top: 10px !important;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
}

@media (prefers-reduced-motion: reduce) {
    .asb-dot--active .asb-dot__fill { animation: none; transform: scaleX(1); }
    .asb-slide { transition: opacity .1s; }
}

/* ── Éditeur : panneau latéral ── */
.asb-se {
    border:        1px solid #e2e2e2;
    border-radius: 4px;
    padding:       8px 10px;
    margin-bottom: 6px;
    cursor:        pointer;
    background:    #fafafa;
}
.asb-se:hover, .asb-se--open {
    border-color: #1e3a8a;
    background:   #fff;
}
.asb-se__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
.asb-se__label {
    font-size:     .8125rem;
    font-weight:   600;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     180px;
}
.asb-se__fields {
    margin-top:  10px;
    padding-top: 10px;
    border-top:  1px solid #e2e2e2;
}