/* =========================================================
   CL Buttons — v1
   Canonique :
   - Gold  : .cl-btn.cl-btn--gold
   - Store : .cl-btn.cl-btn--store
   - Layout responsive opt-in : .cl-btn--fluid
   ========================================================= */

/* Base (minimal, commun) */
.cl-btn {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(11, 34, 54, .16);
    text-decoration: none;
    font-weight: 900;
    font-size: .95rem;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    white-space: nowrap;
    cursor: pointer;
}

.cl-btn:hover {
    transform: translateY(-1px)
}

.cl-btn-primary {
    background: rgba(11, 34, 54, .96);
    border-color: rgba(11, 34, 54, .96);
    color: #fff;
    box-shadow: 0 14px 36px rgba(3, 16, 28, .14);
}

/* Fancy */
.cl-btn-wide {
    width: 100%
}

/* =========================================================
     GOLD — identique au site
     carré + shine + soulignement deluxe
     ========================================================= */
.cl-btn--gold {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.7rem 2.4rem;
    font-size: 0.9rem;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;

    color: #ffffff;
    background: linear-gradient(135deg, #c89c4f, #f5d19a, #b8832b);
    border: none;
    border-radius: 0;

    box-shadow: 0 10px 22px rgba(148, 117, 54, 0.35);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;

    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Shine diagonal */
.cl-btn--gold::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: cl-btn-gold-shine 5.5s cubic-bezier(0.45, 0.05, 0.30, 0.95) infinite;
}

/* Soulignement deluxe */
.cl-btn--gold::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0.70rem;

    height: 1px;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0.9;

    transition: all 0.25s ease;
}

.cl-btn--gold:hover {
    background: linear-gradient(135deg, #d9b260, #ffe2b3, #c89237);
    box-shadow: 0 16px 32px rgba(148, 117, 54, 0.50);
    transform: translateY(-2px);
    color: #fff;
}

.cl-btn--gold:hover::after {
    left: 14%;
    right: 14%;
    opacity: 1;
}

.cl-btn--gold:focus-visible {
    outline: 2px solid rgba(200, 156, 79, .45);
    outline-offset: 3px;
}

@keyframes cl-btn-gold-shine {

    0%,
    75%,
    100% {
        left: -70%;
    }

    40% {
        left: 130%;
    }
}

/* =========================================================
STORE — Bleu “étiquette vitrine”
========================================================= */

.cl-btn--store {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 42px;
    padding: 0 14px;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: #e5f2f7;
    background: linear-gradient(135deg, #004366, #0369a1);
    border: none;
    border-radius: 0;

    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
    text-decoration: none;
    cursor: pointer;

    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cl-btn--store:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22);
    color: #e5f2f7;
}

.cl-btn--store:focus-visible {
    outline: 2px solid rgba(0, 67, 102, 0.35);
    outline-offset: 2px;
}

/* Si vous utilisez .is-active via JS (optionnel) */
.cl-btn--store.is-active {
    outline: 2px solid rgba(0, 67, 102, 0.35);
    outline-offset: 2px;
}

/* =========================================================
     Modifier layout : un seul nom, plusieurs breakpoints
     - Ajoutez .cl-btn--fluid dans le HTML quand nécessaire
     ========================================================= */

/* Desktop : rien à faire (comportement inchangé) */
.cl-btn--fluid {
    width: 100%;
    justify-content: center;
}

/* Tablet + mobile landscape (<= 900px) */
@media (max-width: 900px) {
    .cl-btn--fluid {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile portrait (<= 600px) : ajustements optionnels
     (gardez vide tant que vous n’en avez pas besoin) */
@media (max-width: 600px) {
    .cl-btn--fluid {
        width: 100%;
        justify-content: center;
    }

    /* Exemple si vous trouvez les boutons trop larges en hauteur/typo :
      padding-left: 1.6rem;
      padding-right: 1.6rem;
      */

    /* Optionnel : si un bouton "Store" avec height fixe gêne sur petit écran,
       vous pouvez relâcher un peu la contrainte (à activer seulement si besoin) :
    .cl-btn--store.cl-btn--fluid {
      height: 44px;
    }
    */
}