.input-animation{
    border: none;
    border-bottom: 2px solid darkgrey;
    width: 100%;
    background-color: #f9f9f9;
}

.label-animation{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
}

.input-animation, .input-animation~label{
    transition: 0.3s color ease-in-out;
}

.input-animation:hover{
    border-color: #F79691;
    --tw-ring-color: transparent;
}
.input-animation:hover~label {
    color: #F79691;
}

.input-animation:focus{
    border-color: #EE2E25;
    --tw-ring-color: transparent;
}
.input-animation:focus~label {
    color: #EE2E25;
}

nav .hidden a{
    color: #0000008C;
    font-size: 1rem;
}
nav .hidden a:hover{
    color: #000000;
}

.btn-ideal{
    border-radius: 0.375rem;
    text-decoration: none;
}

.btn-ideal:hover *{
    color: #FFFFFF;
}

.btn-ideal:hover, .btn-ideal:hover *{
    background-color: #A31F1F;
    color: #FFFFFF;
    border-color: #A31F1F;
}

.btn-danger-ideal{
    background-color: #D32121;
    color: #FFFFFF;
}

.btn-danger-ideal:hover{
    background-color: #A31F1F;
}

.btn-white-ideal *{
    color: #000000;
}


.btn-white-ideal{
    background-color: #FFFFFFFF;
    border: 1px solid;
}


/* ---- Suivi des packs (octobre 2026) ---- */
.pack-hint-ok{
    background-color: #FDECEC;
    color: #8E1616;
    font-weight: 600;
}
.pack-hint-error{
    background-color: #FFF4DD;
    color: #7A4B00;
    font-weight: 600;
}
.pack-card{
    border: 1px solid #E9E2E2;
    border-radius: 10px;
    padding: 16px 18px;
    background-color: #FFFFFF;
}
.pack-card + .pack-card{
    margin-top: 12px;
}
.pack-line{
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
}
.pack-line .pack-count{
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pack-dots{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.pack-dot{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    background-color: #F1ECEC;
    color: #8A7F7F;
}
.pack-dot.done{
    background-color: #D32121;
    color: #FFFFFF;
}
.pack-dot.gift{
    background-color: transparent;
    outline: 2px dashed #D32121;
    outline-offset: -2px;
    color: #D32121;
}
.pack-dot.gift.done{
    background-color: #D32121;
    color: #FFFFFF;
    outline: none;
}
.pack-badge{
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
}
.pack-badge.running{ background-color: #FDECEC; color: #B01B1B; }
.pack-badge.done{ background-color: #E3F3EA; color: #1F7A4D; }
.pack-badge.todo{ background-color: #FFF4DD; color: #7A4B00; }
.pack-rank{
    display: inline-block;
    font-weight: 700;
    color: #B01B1B;
    background-color: #FDECEC;
    border-radius: 6px;
    padding: 1px 8px;
}
@media (max-width: 576px){
    .pack-line{ grid-template-columns: 1fr 50px; }
    .pack-line .pack-dots{ grid-column: 1 / -1; grid-row: 2; }
}