/* =========================================================
   UI partagée — home_header, hero-title, save-settings-btn
   Chargé dans le socle global (header.php)
   ========================================================= */
@keyframes hero-title-wave {
    0%, 100% { transform: translateX(0); }
    8%      { transform: translateX(4px); }
    16%     { transform: translateX(0); }
}

.hero-title {
    display: inline-block;
}

.hero-title .title-letter {
    display: inline-block;
    animation: hero-title-wave 4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.035s);
}

/* Conserver l'espacement entre les mots : les spans contenant un espace ont une largeur minimale */

.hero-title .title-letter--space {
    min-width: 0.3em;
}

.home_header{
    width: 100%;
    display: flex;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10%;
    margin-top: 2%;
    position: relative;
    overflow: visible;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
.home_header {
        padding-left: 0;
        padding-right: 0;
    }
}

.home_header .shop_header_texts {
    width: 100%;
    text-align: left;
}

.save-settings-container {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.save-settings-btn {
    background: var(--accent-gradient-135);
    color: white;
    border: none;
    border-radius: var(--radius-btn);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 180px;
    position: relative;
    overflow: hidden;
}

.save-settings-btn:hover {
    background: var(--accent-gradient-135-hover);
}

.save-settings-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-loading {
    display: none;
}

.save-settings-btn.loading .btn-text {
    display: none;
}

.save-settings-btn.loading .btn-loading {
    display: inline;
}

@media (max-width: 1000px) {
.save-settings-container {
        margin-top: 1.5rem;
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 480px) {
.save-settings-btn {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}