/* ╔═══════════════════════════════════════════════════════════╗
   ║ WHR BOUTON SOLO v3.0.0 — système presets visuels          ║
   ║ Les couleurs des presets sont inline (générées en PHP).   ║
   ║ Ce CSS gère : structure, tailles, formes, hover effects,   ║
   ║ anim icône, anim entrée, badge, sous-texte.                ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ──────────────── BASE ──────────────── */
.tbs-wrap{line-height:1;}
.tbs-wrap[data-align="stretch"] .tbs{
    width:100%;
    justify-content:center;
}

.tbs{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none !important;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:all .4s cubic-bezier(.25,.8,.25,1);
    box-sizing:border-box;
    line-height:1.4;
    font-weight:600;
    letter-spacing:0.3px;
}
/* Garde la couleur définie dans les presets */
.tbs:visited, .tbs:active, .tbs:focus{color:inherit;}

.tbs.tbs-col{flex-direction:column;}

.tbs-icon{
    transition:all .4s cubic-bezier(.25,.8,.25,1);
    flex-shrink:0;
    position:relative;
    z-index:2;
}

.tbs-text{
    position:relative;
    z-index:2;
    white-space:nowrap;
}

.tbs-txt-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    z-index:2;
    position:relative;
}

.tbs-sub{
    font-size:0.72em;
    opacity:0.85;
    font-weight:500;
    letter-spacing:0.4px;
    text-transform:uppercase;
}

/* Badge (en haut à droite) */
.tbs-badge{
    position:absolute;
    top:-8px;
    right:-8px;
    background:#000;
    color:#fff;
    font-size:9.5px;
    font-weight:800;
    letter-spacing:0.8px;
    text-transform:uppercase;
    padding:4px 8px;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(0,0,0,0.30);
    z-index:5;
    white-space:nowrap;
    line-height:1;
    border:2px solid #fff;
}

/* Effet overlay (utilisé par certains hovers) */
.tbs-fx{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    transition:all .55s cubic-bezier(.25,.8,.25,1);
    border-radius:inherit;
}

/* ──────────────── TAILLES ──────────────── */
.tbs-size-xs    {padding:8px 18px;  font-size:12px;}
.tbs-size-small {padding:11px 22px; font-size:13px;}
.tbs-size-medium{padding:14px 28px; font-size:14.5px;}
.tbs-size-large {padding:17px 34px; font-size:16px;}
.tbs-size-xl    {padding:21px 44px; font-size:18px;}

/* ──────────────── FORMES ──────────────── */
.tbs-shape-pill   {border-radius:999px;}
.tbs-shape-rounded{border-radius:12px;}
.tbs-shape-square {border-radius:0;}
.tbs-shape-cut    {
    border-radius:0;
    clip-path:polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

/* Le brutalist a son radius forcé à 0 dans le PHP, mais on neutralise au cas où */
.tbs-preset-brutalist.tbs-shape-pill{border-radius:0 !important;}

/* Le underline n'a pas de radius */
.tbs-preset-underline{
    border-radius:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Pleine largeur mobile */
@media(max-width:640px){
    .tbs.tbs-fwm{
        width:100%;
        max-width:100%;
        justify-content:center;
    }
}

/* Majuscules global */
.tbs.tbs-upper .tbs-text{
    text-transform:uppercase;
    letter-spacing:1px;
}

/* Animation gradient (pour le preset "duo") */
@keyframes tbs-gradient-shift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ EFFETS HOVER SUPPLÉMENTAIRES                              ║
   ║ "preset" laisse le hover par défaut du preset             ║
   ║ "none" annule complètement le hover                       ║
   ╚══════════════════════════════════════════════════════════╝ */

.tbs-hv-none:hover{
    transform:none !important;
    box-shadow:none !important;
}

/* Les autres effets sont ADDITIFS au hover du preset */
.tbs-hv-lift:hover{transform:translateY(-3px) !important;}
.tbs-hv-grow:hover{transform:scale(1.06) !important;}
.tbs-hv-shrink:hover{transform:scale(0.96) !important;}

.tbs-hv-pulse:hover{animation:tbs-pulse 0.7s !important;}
@keyframes tbs-pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}
}

.tbs-hv-shake:hover{animation:tbs-shake 0.5s !important;}
@keyframes tbs-shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-4px);}
    40%{transform:translateX(4px);}
    60%{transform:translateX(-3px);}
    80%{transform:translateX(3px);}
}

.tbs-hv-wobble:hover{animation:tbs-wobble 0.6s !important;}
@keyframes tbs-wobble{
    0%,100%{transform:rotate(0);}
    15%{transform:rotate(-3deg);}
    30%{transform:rotate(3deg);}
    45%{transform:rotate(-2deg);}
    60%{transform:rotate(2deg);}
    75%{transform:rotate(-1deg);}
}

.tbs-hv-bounce:hover{
    animation:tbs-bounce 0.6s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes tbs-bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

.tbs-hv-tilt:hover{transform:rotate(-3deg) scale(1.04) !important;}

/* Shine — reflet brillant qui passe */
.tbs-hv-shine{overflow:hidden;}
.tbs-hv-shine::before{
    content:'';
    position:absolute;
    top:0; left:-100%;
    width:60%; height:100%;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.40) 50%, transparent 100%);
    transform:skewX(-20deg);
    transition:left 0.8s cubic-bezier(.25,.8,.25,1);
    z-index:1;
    pointer-events:none;
}
.tbs-hv-shine:hover::before{left:200%;}

/* Glow néon doux (additif) */
.tbs-hv-glow:hover{
    box-shadow:0 0 24px rgba(189,34,47,0.5), 0 0 48px rgba(189,34,47,0.25) !important;
}

/* Effets sur l'icône uniquement */
.tbs-hv-rotate-icon:hover .tbs-icon{transform:rotate(-15deg) scale(1.1);}

.tbs-hv-bounce-icon:hover .tbs-icon{
    animation:tbs-icon-bounce 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tbs-icon-bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}

.tbs-hv-slide-icon:hover .tbs-icon{transform:translateX(5px);}

.tbs-hv-flip-icon:hover .tbs-icon{
    animation:tbs-flip-icon .55s ease;
}
@keyframes tbs-flip-icon{
    0%{transform:rotateY(0);}
    50%{transform:rotateY(180deg);}
    100%{transform:rotateY(360deg);}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ ANIMATIONS ICÔNE PERMANENTES                              ║
   ╚══════════════════════════════════════════════════════════╝ */

.tbs-ia-spin{animation:tbs-spin 2.5s linear infinite;}
@keyframes tbs-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

.tbs-ia-pulse{animation:tbs-icon-pulse 1.5s ease-in-out infinite;}
@keyframes tbs-icon-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

.tbs-ia-bounce{animation:tbs-icon-pop 1.2s cubic-bezier(.34,1.56,.64,1) infinite;}
@keyframes tbs-icon-pop{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

.tbs-ia-shake{animation:tbs-icon-shake 0.6s ease-in-out infinite;}
@keyframes tbs-icon-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-2px);}75%{transform:translateX(2px);}}

.tbs-ia-float{animation:tbs-icon-float 3s ease-in-out infinite;}
@keyframes tbs-icon-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

.tbs-ia-ring{animation:tbs-ring 2s ease-in-out infinite;}
@keyframes tbs-ring{0%,50%,100%{transform:rotate(0);}10%,30%{transform:rotate(-15deg);}20%,40%{transform:rotate(15deg);}}

.tbs-ia-tada{animation:tbs-tada 1.5s ease-in-out infinite;}
@keyframes tbs-tada{
    0%,100%{transform:scale(1) rotate(0);}
    10%,20%{transform:scale(0.95) rotate(-3deg);}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
}

.tbs-ia-swing{animation:tbs-swing 1.5s ease-in-out infinite; transform-origin:top center;}
@keyframes tbs-swing{
    20%{transform:rotate(15deg);}
    40%{transform:rotate(-10deg);}
    60%{transform:rotate(5deg);}
    80%{transform:rotate(-5deg);}
}

.tbs-ia-rubber{animation:tbs-rubber 1.5s ease-in-out infinite;}
@keyframes tbs-rubber{
    0%,100%{transform:scale(1);}
    30%{transform:scale(1.25,0.75);}
    40%{transform:scale(0.75,1.25);}
    60%{transform:scale(1.15,0.85);}
}

.tbs-ia-jello{animation:tbs-jello 2s ease-in-out infinite;}
@keyframes tbs-jello{
    0%,100%{transform:skew(0,0);}
    30%{transform:skew(-12deg,-12deg);}
    40%{transform:skew(6deg,6deg);}
    50%{transform:skew(-3deg,-3deg);}
}

.tbs-ia-heartbeat{animation:tbs-heart 1.3s ease-in-out infinite;}
@keyframes tbs-heart{
    0%,100%{transform:scale(1);}
    14%,42%{transform:scale(1.2);}
    28%,56%{transform:scale(1);}
}

.tbs-ia-flash{animation:tbs-flash 1.8s ease-in-out infinite;}
@keyframes tbs-flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0.3;}}

.tbs-ia-flip-h{animation:tbs-flip-h 2s ease-in-out infinite;}
@keyframes tbs-flip-h{0%,100%{transform:rotateY(0);}50%{transform:rotateY(180deg);}}

.tbs-ia-flip-v{animation:tbs-flip-v 2s ease-in-out infinite;}
@keyframes tbs-flip-v{0%,100%{transform:rotateX(0);}50%{transform:rotateX(180deg);}}

.tbs-ia-grow-shrink{animation:tbs-grow-shrink 1.5s ease-in-out infinite;}
@keyframes tbs-grow-shrink{0%,100%{transform:scale(1);}50%{transform:scale(1.2);}}


/* ╔══════════════════════════════════════════════════════════╗
   ║ ENTRANCE ANIMATIONS                                       ║
   ╚══════════════════════════════════════════════════════════╝ */
.tbs[class*="tbs-ent-"]{opacity:0; animation-fill-mode:both;}
.tbs[class*="tbs-ent-"].tbs-visible{
    opacity:1;
    animation-duration:var(--tbs-dur, 600ms);
    animation-fill-mode:both;
}

.tbs-ent-fade-up.tbs-visible{animation-name:tbs-fade-up;}
@keyframes tbs-fade-up{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.tbs-ent-fade-down.tbs-visible{animation-name:tbs-fade-down;}
@keyframes tbs-fade-down{from{opacity:0;transform:translateY(-30px);}to{opacity:1;transform:translateY(0);}}

.tbs-ent-fade-left.tbs-visible{animation-name:tbs-fade-left;}
@keyframes tbs-fade-left{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}

.tbs-ent-fade-right.tbs-visible{animation-name:tbs-fade-right;}
@keyframes tbs-fade-right{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}

.tbs-ent-zoom-in.tbs-visible{animation-name:tbs-zoom-in;}
@keyframes tbs-zoom-in{from{opacity:0;transform:scale(0.7);}to{opacity:1;transform:scale(1);}}

.tbs-ent-flip.tbs-visible{animation-name:tbs-ent-flip;}
@keyframes tbs-ent-flip{from{opacity:0;transform:rotateY(90deg);}to{opacity:1;transform:rotateY(0);}}

.tbs-ent-bounce.tbs-visible{animation-name:tbs-ent-bounce;}
@keyframes tbs-ent-bounce{
    0%{opacity:0;transform:translateY(40px);}
    60%{opacity:1;transform:translateY(-12px);}
    80%{transform:translateY(6px);}
    100%{transform:translateY(0);}
}