/**
 * C2S — Bouton animé (Osmo)
 *
 * Combine 3 animations Osmo en un seul composant :
 *   1. Directional BG hover  (btn__circle suit la direction souris)
 *   2. Character Stagger     (chaque lettre monte avec décalage)
 *   3. Rotating Icon         (icône flèche tourne + slide sur hover)
 *
 * HTML requis : voir ARCHITECTURE.md § Bouton
 * JS requis   : bouton/js/bouton.js
 */


/* ============================================
   Base
   ============================================ */
.c2s-btn {
    --c2s-btn-height: 3em;
    /* Stabilise la font-size du composant : sans ça, .c2s-btn hérite du
       font-size du contexte (un hero à 3rem ferait un btn de 9rem de haut).
       Le label `.c2s-btn__label` a aussi var(--16px-size) pour cohérence,
       mais on fige la racine pour que `--c2s-btn-height: 3em` soit toujours
       prévisible (= 48px). Ne casse pas le desktop (la plupart des contextes
       étaient déjà à 16px), mais protège partout. */
    font-size: var(--16px-size);
    cursor: pointer;
    border-radius: calc(var(--c2s-btn-height) * 0.5);
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    height: var(--c2s-btn-height);
    padding-inline: 1.25em;
    text-decoration: none;
    display: inline-flex;
    position: relative;
}


/* ============================================
   1. BG plat
   ============================================ */
.c2s-btn__bg {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/* ============================================
   1. Cercle directionnel (Directional BG)
   ============================================ */
.c2s-btn__circle-wrap {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.btn__circle {
    pointer-events: none;
    border-radius: 50%;
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1),
                background-color var(--duration-base) var(--ease-in-out);
    transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
}

.before__100 {
    padding-top: 100%;
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .c2s-btn:hover .btn__circle {
        transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
    }
}


/* ============================================
   2. Texte avec character stagger
   ============================================ */
.c2s-btn__text {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
    transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.c2s-btn [data-button-animate-chars],
.tv-faq__a a [data-button-animate-chars],
.tv-faq__a [data-button-animate-chars] {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.c2s-btn__label {
    white-space: nowrap;
    font-size: var(--16px-size);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0;
    padding-bottom: .05em;
}

.c2s-btn [data-button-animate-chars] span,
.tv-faq__a a [data-button-animate-chars] span,
.tv-faq__a [data-button-animate-chars] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-btn:hover [data-button-animate-chars] span,
    .tv-faq__a a:hover [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
}

/* Sur tactile (hover: none) ou écran ≤ 991px, l'animation translateY ne se
   déclenche jamais, donc le text-shadow 1.3em sous chaque caractère reste
   visible → effet de double-texte / boutons illisibles.
   Multi-queries pour couvrir browsers anciens, devices hybrides et
   simulateurs DevTools (qui matchent souvent (hover: hover) sans raison). */
@media (hover: none),
       (pointer: coarse),
       not all and (hover: hover),
       screen and (max-width: 991px) {
    .c2s-btn [data-button-animate-chars] span,
    .tv-faq__a a [data-button-animate-chars] span,
    .tv-faq__a [data-button-animate-chars] span {
        text-shadow: none !important;
    }
}


/* ============================================
   3. Icône flèche rotative (Rotating Icon)
   ============================================ */
.c2s-btn__icon {
    z-index: 1;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    display: flex;
    position: relative;
    margin-left: 0.5em;
}

.c2s-btn__icon-bg {
    background-color: currentColor;
    border-radius: .125em;
    width: 100%;
    height: 100%;
    position: absolute;
}

.c2s-btn__icon-wrap {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

.c2s-btn__icon-list {
    flex: none;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    display: flex;
}

.c2s-btn__arrow {
    flex: none;
    width: 1em;
    height: 100%;
    padding: .2em;
}

/* Timing global pour tous les éléments animés de l'icône */
[data-button-anim-target] {
    transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-btn:hover .c2s-btn__icon-bg  { transform: rotate(90deg); }
    .c2s-btn:hover .c2s-btn__arrow    { transform: translate(200%, 0px); }
}


/* ============================================
   Thèmes
   ============================================ */

/* dark — fond sombre, hover orange */
.c2s-btn[data-theme="dark"] .c2s-btn__bg       { background-color: var(--color-heading); }
.c2s-btn[data-theme="dark"] .c2s-btn__text      { color: var(--white); }
.c2s-btn[data-theme="dark"] .btn__circle        { background-color: var(--color-primary); }
.c2s-btn[data-theme="dark"] .c2s-btn__icon      { color: var(--white); }
.c2s-btn[data-theme="dark"] .c2s-btn__icon-wrap { color: var(--color-heading); }

@media (hover: hover) and (pointer: fine) {
    .c2s-btn[data-theme="dark"]:hover .c2s-btn__text { color: var(--color-heading); }
}

/* light — fond clair, hover orange */
.c2s-btn[data-theme="light"] .c2s-btn__bg       { background-color: var(--color-bg-alt); }
.c2s-btn[data-theme="light"] .c2s-btn__text      { color: var(--color-heading); }
.c2s-btn[data-theme="light"] .btn__circle        { background-color: var(--color-primary); }
.c2s-btn[data-theme="light"] .c2s-btn__icon      { color: var(--color-heading); }
.c2s-btn[data-theme="light"] .c2s-btn__icon-wrap { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
    .c2s-btn[data-theme="light"]:hover .c2s-btn__text { color: var(--white); }
}

/* primary — fond orange, hover blanc */
.c2s-btn[data-theme="primary"] .c2s-btn__bg       { background-color: var(--color-primary); }
.c2s-btn[data-theme="primary"] .c2s-btn__text      { color: var(--white); }
.c2s-btn[data-theme="primary"] .btn__circle        { background-color: var(--white); }
.c2s-btn[data-theme="primary"] .c2s-btn__icon      { color: var(--white); }
.c2s-btn[data-theme="primary"] .c2s-btn__icon-wrap { color: var(--color-heading); }

@media (hover: hover) and (pointer: fine) {
    .c2s-btn[data-theme="primary"]:hover .c2s-btn__text { color: var(--color-heading); }
}