/* ==========================================================================
   SVG Button — svgbutton.css
   Structure : <a class="svgbtn"> contient les <img> absolues + le label.
   L'<a> est en flux normal (inline-flex), donne sa taille aux images absolues.
   Les images : position:absolute; top:0; left:0; width:100% — sans height.
   ========================================================================== */

.svgbtn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    cursor:          pointer;
    background:      transparent;
    border:          none;
    text-decoration: none;
    color:           inherit;
    overflow:        hidden;
    /* padding, border-radius, box-shadow via scoped CSS */
}

/* Images SVG — absolues, width:100% sans height */
.svgbtn .svgbtn-img {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    display:    block;
    object-fit: fill;
    z-index:    1;
}

.svgbtn-img--rest  { opacity: 1; }
.svgbtn-img--hover { opacity: 0; z-index: 2; }
.svgbtn-img--click { opacity: 0; z-index: 3; }

/* Hover */
.svgbtn:hover .svgbtn-img--hover,
.svgbtn:focus-visible .svgbtn-img--hover { opacity: 1; }
.svgbtn:hover .svgbtn-img--rest,
.svgbtn:focus-visible .svgbtn-img--rest   { opacity: 0; }

/* Active */
.svgbtn:active .svgbtn-img--click { opacity: 1; }
.svgbtn:active .svgbtn-img--rest,
.svgbtn:active .svgbtn-img--hover { opacity: 0; }

/* Label au-dessus des images */
.svgbtn__label {
    position:       relative;
    z-index:        10;
    display:        block;
    white-space:    nowrap;
    font-weight:    inherit;
    line-height:    1.2;
    pointer-events: none;
}

.svgbtn:hover,
.svgbtn:focus-visible {
    text-decoration: none;
    color:           inherit;
}

.svgbtn:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   Alignment wrapper
   ========================================================================== */

/* Horizontal — text-start/center/end (Bootstrap) already handles inline elements */
.svgbtn-align {
    display: block;
    width:   100%;
}

/* Vertical — the wrapper must have a height for vertical alignment to work.
   These classes use flexbox; the parent container defines the height. */
.svgbtn-align.svgbtn-vtop {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-start;
    height:          100%;
}
.svgbtn-align.svgbtn-vmiddle {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    height:          100%;
}
.svgbtn-align.svgbtn-vbottom {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    height:          100%;
}

/* Horizontal inside flex wrapper — map text-* to align-items */
.svgbtn-align.text-start  { align-items: flex-start; }
.svgbtn-align.text-center { align-items: center; }
.svgbtn-align.text-end    { align-items: flex-end; }