/* ==========================================================================
   Buttons — Globules-style CTA
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 25px;
    border-radius: 25px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    transition: ease-out 0.4s;
}

.btn::after {
    content: '';
    height: 12px;
    width: 22px;
    background-repeat: no-repeat;
    background-position: right center;
    margin-left: 8px;
    display: inline-block;
    transition: all .5s ease-in-out;
    transform: translateY(1px);
}

.btn:hover::after {
    transform: translate(4px, 1px) scale(1.2, 1);
}

/* --- Yellow (hero CTA) --- */
.btn--yellow {
    background-color: var(--doing-noir);
    border: 2px solid var(--doing-noir);
    color: var(--doing-white) !important;
}

.btn--yellow:hover {
    box-shadow: inset 400px 0 0 0 var(--doing-gold);
    color: var(--doing-noir) !important;
}

.btn--yellow::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.btn--yellow:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23141816'/%3E%3C/svg%3E");
}

/* --- Dark (hero banner CTA) — bg noir, texte cyan → hover bg cyan, texte noir --- */
.btn--dark {
    background-color: #323234;
    border: 2px solid #323234;
    color: var(--doing-cyan) !important;
}

.btn--dark:hover {
    box-shadow: inset 400px 0 0 0 var(--doing-cyan);
    color: var(--doing-noir) !important;
}

.btn--dark::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%2398D2D2'/%3E%3C/svg%3E");
}

.btn--dark:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23141816'/%3E%3C/svg%3E");
}

/* --- White (footer banner CTA) — default outline blanc/texte blanc → hover bg blanc, texte noir --- */
.btn--white {
    background-color: transparent;
    border: 2px solid var(--doing-white);
    color: var(--doing-white);
}

.btn--white:hover {
    box-shadow: inset 400px 0 0 0 var(--doing-white);
    color: var(--doing-noir) !important;
}

.btn--white::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.btn--white:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23141816'/%3E%3C/svg%3E");
}

/* --- Green (footer main CTA) — bg noir, texte vert clair → hover bg vert clair, texte/border noir --- */
.btn--green {
    background-color: var(--doing-noir);
    border: 2px solid var(--doing-noir);
    color: var(--doing-green);
}

.btn--green:hover {
    box-shadow: inset 400px 0 0 0 var(--doing-green);
    border-color: var(--doing-noir);
    color: var(--doing-noir);
}

.btn--green::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23ADBE96'/%3E%3C/svg%3E");
}

.btn--green:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.6967C9.46447 0.403806 8.98959 0.403806 8.6967 0.6967C8.40381 0.989593 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.4038 10.5355 8.4038 11.0104 8.6967 11.3033C8.98959 11.5962 9.46446 11.5962 9.75736 11.3033L14.5303 6.53033ZM1 6.75L14 6.75L14 5.25L1 5.25L1 6.75Z' fill='%23141816'/%3E%3C/svg%3E");
}

/* --- Outline (pill Poppins, bordure noire fine, fond transparent, sans flèche, hover fond noir/texte blanc) --- */
/* .btn.btn--outline requis pour override la règle GP `.inside-article a` (spécificité 0,1,1) */
.btn.btn--outline {
    height: 50px;
    padding: 0 40px;
    border-radius: 999px;
    background-color: transparent;
    border: 1.2px solid var(--doing-noir);
    color: var(--doing-noir);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 0 var(--doing-noir);
    transition: box-shadow 0.4s ease-out, color 0.4s ease-out;
}

.btn.btn--outline:hover {
    box-shadow: inset 800px 0 0 0 var(--doing-noir);
    color: var(--doing-white);
}

.btn.btn--outline::after {
    content: none;
}