/* ============================================================
   kip-buttons.css — Bibliothèque de boutons Kiplearn
   Chargé via functions.php (wp_enqueue_style 'kip-buttons')

   SPÉCIFICITÉ : body .kip-btn-lib.kip-btn-lib (0,2,1)
   Bat les sélecteurs natifs Salient (a.button, .nectar-button, etc.)
   !important appliqué sur background, color, font-family, border-color
   pour neutraliser toute surcharge de l'éditeur Salient.

   ── CLASSE DE BASE ──────────────────────────────────────────
     .kip-btn-lib

   ── SOLID (fond plein) ──────────────────────────────────────
     .kip-btn-lib--solid--mint      vert mint — texte sombre, hover texte noir
     .kip-btn-lib--solid--orange    orange — pulse ring + coins animés + [brackets]
     .kip-btn-lib--solid--violet    violet — coins animés, hover texte blanc
     .kip-btn-lib--solid--anis      vert anis — coins animés, hover texte noir

   ── OUTLINE (bordure + remplissage au hover) ────────────────
     .kip-btn-lib--outline--mint    transparent→mint — animation flèche
     .kip-btn-lib--outline--orange  transparent→orange — animation flèche
     .kip-btn-lib--outline--violet  transparent→violet — animation flèche, hover texte blanc
     .kip-btn-lib--outline--anis    transparent→anis — animation flèche

     HTML requis (outline) :
       <a class="kip-btn-lib kip-btn-lib--outline--mint">
         <span class="kip-btn-lib__text">Libellé</span>
         <span class="kip-btn-lib__circle"></span>
         <svg class="kip-btn-lib__arr kip-btn-lib__arr--1">…</svg>
         <svg class="kip-btn-lib__arr kip-btn-lib__arr--2">…</svg>
       </a>

   ── GHOST (bordure seule, pas de remplissage au hover) ───────
     .kip-btn-lib--ghost--white     bordure blanche (fonds sombres)
     .kip-btn-lib--ghost--mint      bordure mint
     .kip-btn-lib--ghost--orange    bordure orange
     .kip-btn-lib--ghost--violet    bordure violet

   ── MODIFICATEURS TAILLE ────────────────────────────────────
     .kip-btn-lib--nav    petit navigation (10px / 9px×18px)
     .kip-btn-lib--sm     petit inline     (9px  / 8px×16px)
     .kip-btn-lib--lg     grand hero CTA   (1rem / 18px×48px)
     .kip-btn-lib--full   pleine largeur + shimmer au hover

   ── ÉLÉMENTS INTERNES ───────────────────────────────────────
     .kip-btn-lib__text       libellé (outline)
     .kip-btn-lib__circle     bulle de remplissage (outline)
     .kip-btn-lib__arr        flèche SVG (outline, ×2)
     .kip-btn-lib__arr--1     flèche droite (repos)
     .kip-btn-lib__arr--2     flèche gauche (hover)
     .kip-btn-lib__bip        point pulsant
     .kip-btn-lib__bracket    crochet [ ou ]
     .kip-btn-lib__bracket--l crochet gauche
     .kip-btn-lib__bracket--r crochet droit

   ── POLICE ──────────────────────────────────────────────────
     Martian Mono (Google Fonts).
     Si utilisé hors landing, ajouter :
     @import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;700&display=swap');
   ============================================================ */


/* ── Tokens couleurs ───────────────────────────────────────── */
:root {
  --kip-mint:   #76E9A5;
  --kip-orange: #FF4E00;
  --kip-violet: #7D39EB;
  --kip-anis:   #C6FF33;
  --kip-bg:     #050505;
  --kip-white:  #F5F4E9;
  --font-mono:  'Martian Mono', monospace;
}


/* ════════════════════════════════════════════════════════════
   BASE — .kip-btn-lib
   Spécificité (0,2,1) — bat a.button (0,1,1) et .nectar-button (0,1,0)
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, 'Martian Mono', monospace) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, transform .15s, box-shadow .2s, color .2s;
}

/* Neutralise les pseudo-éléments injectés par Salient.
   Les variantes réactivent ::before/::after en overridant content. */
body .kip-btn-lib.kip-btn-lib::before,
body .kip-btn-lib.kip-btn-lib::after {
  content: none;
  position: absolute;
  width: 8px;
  height: 8px;
  border-style: solid;
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════
   SOLID — .kip-btn-lib--solid--mint
   Fond vert mint, texte sombre, hover translateY
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib--solid--mint {
  background: #6feaa8 !important;
  color: var(--kip-bg) !important;
}
body .kip-btn-lib.kip-btn-lib--solid--mint:hover {
  background: var(--kip-mint) !important;
  color: var(--kip-bg) !important;
  transform: translateY(-1px);
}
body .kip-btn-lib.kip-btn-lib--solid--mint:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--solid--mint:focus-visible {
  outline: 2px solid var(--kip-mint);
  outline-offset: 3px;
}


/* ════════════════════════════════════════════════════════════
   SOLID — .kip-btn-lib--solid--orange
   Fond orange, pulse ring, coins animés, support [brackets] + bip
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib--solid--orange {
  background: var(--kip-orange) !important;
  color: var(--kip-bg) !important;
  animation: kip-bip-ring 2.2s ease-out infinite;
}

/* Coins décoratifs — partent loin, se rapprochent au hover */
body .kip-btn-lib.kip-btn-lib--solid--orange::before {
  content: '';
  top: -8px; left: -8px;
  border-width: 2px 0 0 2px;
  border-color: rgba(255,255,255,.6);
  transition: top .35s cubic-bezier(.23,1,.32,1), left .35s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--solid--orange::after {
  content: '';
  bottom: -8px; right: -8px;
  border-width: 0 2px 2px 0;
  border-color: rgba(255,255,255,.6);
  transition: bottom .35s cubic-bezier(.23,1,.32,1), right .35s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--solid--orange:hover::before { top: -2px; left: -2px; }
body .kip-btn-lib.kip-btn-lib--solid--orange:hover::after  { bottom: -2px; right: -2px; }
body .kip-btn-lib.kip-btn-lib--solid--orange:hover {
  background: #ff6a22 !important;
  color: var(--kip-bg) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255,78,0,.4);
  animation: none;
}
body .kip-btn-lib.kip-btn-lib--solid--orange:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--solid--orange:focus-visible {
  outline: 2px solid var(--kip-orange);
  outline-offset: 4px;
}

/* Brackets [ ] */
body .kip-btn-lib.kip-btn-lib--solid--orange .kip-btn-lib__bracket        { color: rgba(255,255,255,.5); }
body .kip-btn-lib.kip-btn-lib--solid--orange:hover .kip-btn-lib__bracket  { color: rgba(255,255,255,.9); }
body .kip-btn-lib.kip-btn-lib--solid--orange:hover .kip-btn-lib__bracket--l { transform: translateX(-4px); }
body .kip-btn-lib.kip-btn-lib--solid--orange:hover .kip-btn-lib__bracket--r { transform: translateX(4px); }


/* ════════════════════════════════════════════════════════════
   SOLID — .kip-btn-lib--solid--violet
   Fond violet, coins animés, hover texte blanc
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib--solid--violet {
  background: var(--kip-violet) !important;
  color: #fff !important;
}
body .kip-btn-lib.kip-btn-lib--solid--violet::before {
  content: '';
  top: -8px; left: -8px;
  border-width: 2px 0 0 2px;
  border-color: rgba(255,255,255,.4);
  transition: top .35s cubic-bezier(.23,1,.32,1), left .35s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--solid--violet::after {
  content: '';
  bottom: -8px; right: -8px;
  border-width: 0 2px 2px 0;
  border-color: rgba(255,255,255,.4);
  transition: bottom .35s cubic-bezier(.23,1,.32,1), right .35s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--solid--violet:hover::before { top: -2px; left: -2px; }
body .kip-btn-lib.kip-btn-lib--solid--violet:hover::after  { bottom: -2px; right: -2px; }
body .kip-btn-lib.kip-btn-lib--solid--violet:hover {
  background: #9b5ef5 !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(125,57,235,.4);
}
body .kip-btn-lib.kip-btn-lib--solid--violet:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--solid--violet:focus-visible {
  outline: 2px solid var(--kip-violet);
  outline-offset: 4px;
}


/* ════════════════════════════════════════════════════════════
   SOLID — .kip-btn-lib--solid--anis
   Fond vert anis, coins animés, hover texte noir
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib--solid--anis {
  background: var(--kip-anis) !important;
  color: var(--kip-bg) !important;
}
body .kip-btn-lib.kip-btn-lib--solid--anis::before {
  content: '';
  top: -8px; left: -8px;
  border-width: 2px 0 0 2px;
  border-color: rgba(0,0,0,.25);
  transition: top .35s cubic-bezier(.23,1,.32,1), left .35s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--solid--anis::after {
  content: '';
  bottom: -8px; right: -8px;
  border-width: 0 2px 2px 0;
  border-color: rgba(0,0,0,.25);
  transition: bottom .35s cubic-bezier(.23,1,.32,1), right .35s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--solid--anis:hover::before { top: -2px; left: -2px; }
body .kip-btn-lib.kip-btn-lib--solid--anis:hover::after  { bottom: -2px; right: -2px; }
body .kip-btn-lib.kip-btn-lib--solid--anis:hover {
  background: #d4ff5c !important;
  color: var(--kip-bg) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(198,255,51,.3);
}
body .kip-btn-lib.kip-btn-lib--solid--anis:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--solid--anis:focus-visible {
  outline: 2px solid var(--kip-anis);
  outline-offset: 4px;
}


/* ════════════════════════════════════════════════════════════
   OUTLINE — structure partagée (animation flèche + bulle)
   HTML requis : __text, __circle, __arr--1, __arr--2
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib--outline--mint,
body .kip-btn-lib.kip-btn-lib--outline--orange,
body .kip-btn-lib.kip-btn-lib--outline--violet,
body .kip-btn-lib.kip-btn-lib--outline--anis {
  background: transparent !important;
  border: 1px solid;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  padding: 12px 40px 12px 36px;
  transition: color .5s cubic-bezier(.23,1,.32,1), border-color .3s ease, transform .15s;
}

/* Coin décoratif intérieur haut-gauche */
body .kip-btn-lib.kip-btn-lib--outline--mint::before,
body .kip-btn-lib.kip-btn-lib--outline--orange::before,
body .kip-btn-lib.kip-btn-lib--outline--violet::before,
body .kip-btn-lib.kip-btn-lib--outline--anis::before {
  content: '';
  top: 4px; left: 4px;
  border-width: 2px 0 0 2px;
  border-color: currentColor;
  z-index: 3;
  transition: border-color .5s cubic-bezier(.23,1,.32,1);
}

/* Coin décoratif intérieur bas-droite */
body .kip-btn-lib.kip-btn-lib--outline--mint::after,
body .kip-btn-lib.kip-btn-lib--outline--orange::after,
body .kip-btn-lib.kip-btn-lib--outline--violet::after,
body .kip-btn-lib.kip-btn-lib--outline--anis::after {
  content: '';
  bottom: 4px; right: 4px;
  border-width: 0 2px 2px 0;
  border-color: currentColor;
  z-index: 3;
  transition: border-color .5s cubic-bezier(.23,1,.32,1);
}

/* Bulle de remplissage — taille et animation partagées */
body .kip-btn-lib.kip-btn-lib--outline--mint .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--orange .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--violet .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--anis .kip-btn-lib__circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 340px; height: 340px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform .7s cubic-bezier(.23,1,.32,1), opacity .7s cubic-bezier(.23,1,.32,1);
}

/* Flèches SVG — partagées */
body .kip-btn-lib.kip-btn-lib--outline--mint .kip-btn-lib__arr,
body .kip-btn-lib.kip-btn-lib--outline--orange .kip-btn-lib__arr,
body .kip-btn-lib.kip-btn-lib--outline--violet .kip-btn-lib__arr,
body .kip-btn-lib.kip-btn-lib--outline--anis .kip-btn-lib__arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 2;
  transition: all .6s cubic-bezier(.23,1,.32,1);
}
body .kip-btn-lib.kip-btn-lib--outline--mint .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--orange .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--violet .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--anis .kip-btn-lib__arr--1 { right: 14px; }

body .kip-btn-lib.kip-btn-lib--outline--mint .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--orange .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--violet .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--anis .kip-btn-lib__arr--2 { left: -22px; opacity: 0; }

/* Texte — partagé */
body .kip-btn-lib.kip-btn-lib--outline--mint .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--orange .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--violet .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--anis .kip-btn-lib__text {
  position: relative;
  z-index: 1;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}

/* Hover partagé — animation flèche + texte */
body .kip-btn-lib.kip-btn-lib--outline--mint:hover .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--orange:hover .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--violet:hover .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--anis:hover .kip-btn-lib__circle { transform: translate(-50%, -50%) scale(1); opacity: 1; }

body .kip-btn-lib.kip-btn-lib--outline--mint:hover .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--orange:hover .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--violet:hover .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--anis:hover .kip-btn-lib__arr--1 { right: -22px; opacity: 0; }

body .kip-btn-lib.kip-btn-lib--outline--mint:hover .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--orange:hover .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--violet:hover .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--anis:hover .kip-btn-lib__arr--2 { left: 14px; opacity: 1; }

body .kip-btn-lib.kip-btn-lib--outline--mint:hover .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--orange:hover .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--violet:hover .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--anis:hover .kip-btn-lib__text { transform: translateX(10px); }

body .kip-btn-lib.kip-btn-lib--outline--mint:hover,
body .kip-btn-lib.kip-btn-lib--outline--orange:hover,
body .kip-btn-lib.kip-btn-lib--outline--violet:hover,
body .kip-btn-lib.kip-btn-lib--outline--anis:hover { transform: translateY(-1px); }

body .kip-btn-lib.kip-btn-lib--outline--mint:active,
body .kip-btn-lib.kip-btn-lib--outline--orange:active,
body .kip-btn-lib.kip-btn-lib--outline--violet:active,
body .kip-btn-lib.kip-btn-lib--outline--anis:active { transform: scale(0.97); }

body .kip-btn-lib.kip-btn-lib--outline--mint:focus-visible,
body .kip-btn-lib.kip-btn-lib--outline--orange:focus-visible,
body .kip-btn-lib.kip-btn-lib--outline--violet:focus-visible,
body .kip-btn-lib.kip-btn-lib--outline--anis:focus-visible { outline: none; }

/* Focus reset — annule le hover quand focus seul */
body .kip-btn-lib.kip-btn-lib--outline--mint:focus:not(:hover),
body .kip-btn-lib.kip-btn-lib--outline--orange:focus:not(:hover),
body .kip-btn-lib.kip-btn-lib--outline--violet:focus:not(:hover),
body .kip-btn-lib.kip-btn-lib--outline--anis:focus:not(:hover) { color: inherit !important; }

body .kip-btn-lib.kip-btn-lib--outline--mint:focus:not(:hover) .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--orange:focus:not(:hover) .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--violet:focus:not(:hover) .kip-btn-lib__circle,
body .kip-btn-lib.kip-btn-lib--outline--anis:focus:not(:hover) .kip-btn-lib__circle { transform: translate(-50%,-50%) scale(0); opacity: 0; }

body .kip-btn-lib.kip-btn-lib--outline--mint:focus:not(:hover) .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--orange:focus:not(:hover) .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--violet:focus:not(:hover) .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--outline--anis:focus:not(:hover) .kip-btn-lib__arr--1 { right: 14px; opacity: 1; }

body .kip-btn-lib.kip-btn-lib--outline--mint:focus:not(:hover) .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--orange:focus:not(:hover) .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--violet:focus:not(:hover) .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--outline--anis:focus:not(:hover) .kip-btn-lib__arr--2 { left: -22px; opacity: 0; }

body .kip-btn-lib.kip-btn-lib--outline--mint:focus:not(:hover) .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--orange:focus:not(:hover) .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--violet:focus:not(:hover) .kip-btn-lib__text,
body .kip-btn-lib.kip-btn-lib--outline--anis:focus:not(:hover) .kip-btn-lib__text { transform: none; }


/* ── OUTLINE — couleurs par variante ──────────────────────── */

body .kip-btn-lib.kip-btn-lib--outline--mint {
  color: var(--kip-mint) !important;
  border-color: var(--kip-mint) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--mint .kip-btn-lib__circle { background-color: var(--kip-mint); }
body .kip-btn-lib.kip-btn-lib--outline--mint:hover {
  color: var(--kip-bg) !important;
  border-color: var(--kip-mint) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--mint:focus:not(:hover) { color: var(--kip-mint) !important; }

body .kip-btn-lib.kip-btn-lib--outline--orange {
  color: var(--kip-orange) !important;
  border-color: var(--kip-orange) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--orange .kip-btn-lib__circle { background-color: var(--kip-orange); }
body .kip-btn-lib.kip-btn-lib--outline--orange:hover {
  color: var(--kip-bg) !important;
  border-color: var(--kip-orange) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--orange:focus:not(:hover) { color: var(--kip-orange) !important; }

body .kip-btn-lib.kip-btn-lib--outline--violet {
  color: var(--kip-violet) !important;
  border-color: var(--kip-violet) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--violet .kip-btn-lib__circle { background-color: var(--kip-violet); }
body .kip-btn-lib.kip-btn-lib--outline--violet:hover {
  color: #fff !important;
  border-color: var(--kip-violet) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--violet:focus:not(:hover) { color: var(--kip-violet) !important; }

body .kip-btn-lib.kip-btn-lib--outline--anis {
  color: var(--kip-anis) !important;
  border-color: var(--kip-anis) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--anis .kip-btn-lib__circle { background-color: var(--kip-anis); }
body .kip-btn-lib.kip-btn-lib--outline--anis:hover {
  color: var(--kip-bg) !important;
  border-color: var(--kip-anis) !important;
}
body .kip-btn-lib.kip-btn-lib--outline--anis:focus:not(:hover) { color: var(--kip-anis) !important; }


/* ════════════════════════════════════════════════════════════
   GHOST — bordure seule, pas de remplissage au hover
   Pour fonds sombres
   ════════════════════════════════════════════════════════════ */

body .kip-btn-lib.kip-btn-lib--ghost--white {
  background: transparent !important;
  color: var(--kip-white) !important;
  border: 1px solid rgba(245,244,233,.35);
  box-shadow: none;
  transition: border-color .2s, color .2s;
}
body .kip-btn-lib.kip-btn-lib--ghost--white:hover {
  background: transparent !important;
  color: var(--kip-white) !important;
  border-color: rgba(245,244,233,.8);
}
body .kip-btn-lib.kip-btn-lib--ghost--white:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--ghost--white:focus-visible {
  outline: 2px solid rgba(245,244,233,.5);
  outline-offset: 3px;
}

body .kip-btn-lib.kip-btn-lib--ghost--mint {
  background: transparent !important;
  color: var(--kip-mint) !important;
  border: 1px solid rgba(118,233,165,.4);
  box-shadow: none;
  transition: border-color .2s, color .2s;
}
body .kip-btn-lib.kip-btn-lib--ghost--mint:hover {
  background: transparent !important;
  color: var(--kip-mint) !important;
  border-color: rgba(118,233,165,.85);
}
body .kip-btn-lib.kip-btn-lib--ghost--mint:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--ghost--mint:focus-visible {
  outline: 2px solid rgba(118,233,165,.5);
  outline-offset: 3px;
}

body .kip-btn-lib.kip-btn-lib--ghost--orange {
  background: transparent !important;
  color: var(--kip-orange) !important;
  border: 1px solid rgba(255,78,0,.4);
  box-shadow: none;
  transition: border-color .2s, color .2s;
}
body .kip-btn-lib.kip-btn-lib--ghost--orange:hover {
  background: transparent !important;
  color: var(--kip-orange) !important;
  border-color: rgba(255,78,0,.85);
}
body .kip-btn-lib.kip-btn-lib--ghost--orange:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--ghost--orange:focus-visible {
  outline: 2px solid rgba(255,78,0,.5);
  outline-offset: 3px;
}

body .kip-btn-lib.kip-btn-lib--ghost--violet {
  background: transparent !important;
  color: var(--kip-violet) !important;
  border: 1px solid rgba(125,57,235,.4);
  box-shadow: none;
  transition: border-color .2s, color .2s;
}
body .kip-btn-lib.kip-btn-lib--ghost--violet:hover {
  background: transparent !important;
  color: var(--kip-violet) !important;
  border-color: rgba(125,57,235,.85);
}
body .kip-btn-lib.kip-btn-lib--ghost--violet:active { transform: scale(0.97); }
body .kip-btn-lib.kip-btn-lib--ghost--violet:focus-visible {
  outline: 2px solid rgba(125,57,235,.5);
  outline-offset: 3px;
}


/* ════════════════════════════════════════════════════════════
   MODIFICATEURS TAILLE
   ════════════════════════════════════════════════════════════ */

/* Navigation — petit, nowrap garanti */
body .kip-btn-lib.kip-btn-lib--nav {
  font-size: 10px;
  padding: 9px 18px;
  white-space: nowrap;
}
/* Nav + solid--orange = pulse ring continu */
body .kip-btn-lib.kip-btn-lib--nav.kip-btn-lib--solid--orange {
  animation: kip-bip-ring 2.2s ease-out infinite;
}

/* Small — inline, discret */
body .kip-btn-lib.kip-btn-lib--sm {
  font-size: 9px;
  padding: 8px 16px;
  letter-spacing: .06em;
}

/* Large — hero CTA */
body .kip-btn-lib.kip-btn-lib--lg {
  font-size: 1rem;
  padding: 18px 48px;
  min-width: 260px;
  justify-content: center;
}

/* Large + outline : décalage flèches ajusté */
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--mint,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--orange,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--violet,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--anis {
  padding: 18px 56px 18px 52px;
}
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--mint .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--orange .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--violet .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--anis .kip-btn-lib__arr--1 { right: 18px; }

body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--mint .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--orange .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--violet .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--anis .kip-btn-lib__arr--2 { left: -26px; }

body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--mint:hover .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--orange:hover .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--violet:hover .kip-btn-lib__arr--1,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--anis:hover .kip-btn-lib__arr--1 { right: -26px; }

body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--mint:hover .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--orange:hover .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--violet:hover .kip-btn-lib__arr--2,
body .kip-btn-lib.kip-btn-lib--lg.kip-btn-lib--outline--anis:hover .kip-btn-lib__arr--2 { left: 18px; }


/* ── Pleine largeur + shimmer au hover ─────────────────────── */

body .kip-btn-lib.kip-btn-lib--full {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
}
body .kip-btn-lib.kip-btn-lib--full::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  border: none;
  pointer-events: none;
}
body .kip-btn-lib.kip-btn-lib--full:hover::before { left: 160%; }

/* Annule les coins décoratifs sur --full (incompatibles avec shimmer) */
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--solid--orange::before,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--solid--violet::before,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--solid--anis::before  { content: none; }
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--solid--orange::after,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--solid--violet::after,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--solid--anis::after   { content: none; }

/* Annule les coins intérieurs sur --full + outline (shimmer prend le dessus) */
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--outline--mint::after,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--outline--orange::after,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--outline--violet::after,
body .kip-btn-lib.kip-btn-lib--full.kip-btn-lib--outline--anis::after  { content: none; }


/* ════════════════════════════════════════════════════════════
   ÉLÉMENTS DÉCORATIFS PARTAGÉS
   ════════════════════════════════════════════════════════════ */

/* Point pulsant */
.kip-btn-lib__bip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  flex-shrink: 0;
  animation: kip-bip-dot 1.6s ease-in-out infinite;
}
@keyframes kip-bip-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .35; transform: scale(.6); }
}

/* Brackets [ ] */
.kip-btn-lib__bracket {
  font-family: var(--font-mono, 'Martian Mono', monospace);
  font-size: 1.1em;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  transition: color .3s, transform .35s cubic-bezier(.23,1,.32,1);
}
.kip-btn-lib__bracket--l { transform: translateX(3px); }
.kip-btn-lib__bracket--r { transform: translateX(-3px); }


/* ════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════ */

/* Pulse ring — solid--orange */
@keyframes kip-bip-ring {
  0%   { box-shadow: 0 0 0  0    rgba(255,78,0,.60); }
  70%  { box-shadow: 0 0 0  16px rgba(255,78,0,0);   }
  100% { box-shadow: 0 0 0  0    rgba(255,78,0,0);   }
}