/**
 * ComTour - Styles personnalises pour le bloc core/button de Gutenberg.
 * Charge en front ET dans l'editeur Gutenberg (via enqueue_block_editor_assets).
 *
 * Chaque style devient .wp-block-button.is-style-{name} lors de la selection.
 */

/* =====================================================================
   BASE COMMUNE - Reset des styles WP pour les variantes ComTour
   ===================================================================== */
.wp-block-button[class*="is-style-comtour-"] .wp-block-button__link {
    border-radius: 0;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

/* =====================================================================
   1. PRIMARY (orange plein)
   ===================================================================== */
.wp-block-button.is-style-comtour-primary .wp-block-button__link {
    background-color: #f98a11;
    color: #ffffff;
    padding: 14px 28px;
    border: 2px solid #f98a11;
}
.wp-block-button.is-style-comtour-primary .wp-block-button__link:hover {
    background-color: transparent;
    color: #f98a11;
}

/* =====================================================================
   2. SECONDARY (bleu plein)
   ===================================================================== */
.wp-block-button.is-style-comtour-secondary .wp-block-button__link {
    background-color: #1b6fb3;
    color: #ffffff;
    padding: 14px 28px;
    border: 2px solid #1b6fb3;
}
.wp-block-button.is-style-comtour-secondary .wp-block-button__link:hover {
    background-color: transparent;
    color: #1b6fb3;
}

/* =====================================================================
   3. OUTLINE ORANGE
   ===================================================================== */
.wp-block-button.is-style-comtour-outline .wp-block-button__link {
    background-color: transparent;
    color: #f98a11;
    padding: 14px 28px;
    border: 2px solid #f98a11;
}
.wp-block-button.is-style-comtour-outline .wp-block-button__link:hover {
    background-color: #f98a11;
    color: #ffffff;
}

/* =====================================================================
   4. OUTLINE BLEU
   ===================================================================== */
.wp-block-button.is-style-comtour-outline-bleu .wp-block-button__link {
    background-color: transparent;
    color: #1b6fb3;
    padding: 14px 28px;
    border: 2px solid #1b6fb3;
}
.wp-block-button.is-style-comtour-outline-bleu .wp-block-button__link:hover {
    background-color: #1b6fb3;
    color: #ffffff;
}

/* =====================================================================
   5. OUTLINE BLANC (pour fonds sombres)
   ===================================================================== */
.wp-block-button.is-style-comtour-outline-blanc .wp-block-button__link {
    background-color: transparent;
    color: #ffffff;
    padding: 14px 28px;
    border: 2px solid rgba(255, 255, 255, 0.6);
}
.wp-block-button.is-style-comtour-outline-blanc .wp-block-button__link:hover {
    background-color: #ffffff;
    color: #1b6fb3;
    border-color: #ffffff;
}

/* =====================================================================
   6. GHOST (lien minimaliste avec fleche animee)
   ===================================================================== */
.wp-block-button.is-style-comtour-ghost .wp-block-button__link {
    background-color: transparent;
    color: #f98a11;
    padding: 6px 0;
    border: none;
    border-bottom: 2px solid #f98a11;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.9rem;
}
.wp-block-button.is-style-comtour-ghost .wp-block-button__link::after {
    content: '→';
    margin-left: 6px;
    transition: transform 0.25s ease;
    display: inline-block;
    font-weight: 900;
}
.wp-block-button.is-style-comtour-ghost .wp-block-button__link:hover {
    color: #1b6fb3;
    border-bottom-color: #1b6fb3;
}
.wp-block-button.is-style-comtour-ghost .wp-block-button__link:hover::after {
    transform: translateX(8px);
}

/* =====================================================================
   7. PILL (tres arrondi)
   ===================================================================== */
.wp-block-button.is-style-comtour-pill .wp-block-button__link {
    background-color: #f98a11;
    color: #ffffff;
    padding: 14px 32px;
    border: 2px solid #f98a11;
    border-radius: 999px;
}
.wp-block-button.is-style-comtour-pill .wp-block-button__link:hover {
    background-color: #1b6fb3;
    border-color: #1b6fb3;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(27, 111, 179, 0.25);
}

/* =====================================================================
   8. STICKER (incline + ombre dure)
   ===================================================================== */
.wp-block-button.is-style-comtour-sticker .wp-block-button__link {
    background-color: #fad408;
    color: #14213d;
    padding: 14px 28px;
    border: 3px solid #14213d;
    box-shadow: 6px 6px 0 #14213d;
    transform: rotate(-2deg);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wp-block-button.is-style-comtour-sticker .wp-block-button__link:hover {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 8px 8px 0 #f98a11;
}

/* =====================================================================
   9. ARROW (fleche integree qui glisse au hover)
   ===================================================================== */
.wp-block-button.is-style-comtour-arrow .wp-block-button__link {
    background-color: #1b6fb3;
    color: #ffffff;
    padding: 14px 56px 14px 28px;
    border: 2px solid #1b6fb3;
    position: relative;
}
.wp-block-button.is-style-comtour-arrow .wp-block-button__link::after {
    content: '→';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
    font-size: 1.2em;
    font-weight: 900;
}
.wp-block-button.is-style-comtour-arrow .wp-block-button__link:hover {
    background-color: #f98a11;
    border-color: #f98a11;
}
.wp-block-button.is-style-comtour-arrow .wp-block-button__link:hover::after {
    transform: translateY(-50%) translateX(10px);
}

/* =====================================================================
   10. WHATSAPP (vert WhatsApp + icone SVG)
   ===================================================================== */
.wp-block-button.is-style-comtour-whatsapp .wp-block-button__link {
    background-color: #25d366;
    color: #ffffff;
    padding: 14px 26px 14px 52px;
    border: 2px solid #25d366;
    position: relative;
}
.wp-block-button.is-style-comtour-whatsapp .wp-block-button__link::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.002-5.45 4.437-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}
.wp-block-button.is-style-comtour-whatsapp .wp-block-button__link:hover {
    background-color: #20bd5a;
    border-color: #20bd5a;
    transform: translateY(-2px);
}

/* =====================================================================
   11. MASSIVE (XXL pour CTA hero)
   ===================================================================== */
.wp-block-button.is-style-comtour-massive .wp-block-button__link {
    background-color: #f98a11;
    color: #ffffff;
    padding: 22px 48px;
    border: none;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 14px 36px rgba(249, 138, 17, 0.4);
}
.wp-block-button.is-style-comtour-massive .wp-block-button__link:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(249, 138, 17, 0.5);
    background-color: #ff9826;
}

/* =====================================================================
   12. UNDERLINE (texte avec barre degradee animee)
   ===================================================================== */
.wp-block-button.is-style-comtour-underline .wp-block-button__link {
    background: transparent;
    color: #14213d;
    padding: 8px 0;
    border: none;
    border-radius: 0;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}
.wp-block-button.is-style-comtour-underline .wp-block-button__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f98a11, #fad408);
    transform-origin: left center;
    transform: scaleX(0.4);
    transition: transform 0.35s ease;
}
.wp-block-button.is-style-comtour-underline .wp-block-button__link:hover::after {
    transform: scaleX(1);
}

/* =====================================================================
   APERCU EDITEUR - Force la visibilite des styles dans Gutenberg
   ===================================================================== */
.editor-styles-wrapper .wp-block-button[class*="is-style-comtour-"] .wp-block-button__link,
.block-editor-block-list__block .wp-block-button[class*="is-style-comtour-"] .wp-block-button__link {
    text-decoration: none;
}