/* =========================================================================
 * LBYLCL Badge — Apple Pay : styles du shadow root.
 *
 * Aucun token n'est DÉCLARÉ ici. Tous viennent du :host du Footer et sont
 * hérités à travers l'arbre APLATI ; chaque var() porte un repli littéral pour
 * que le badge reste lisible s'il est déposé hors d'un Footer (rien ne l'en
 * empêche dans le Designer) et dans le harnais Vite, où il n'y a pas de shadow
 * root : `:host` n'y correspond à rien, donc aucun token n'y est défini et
 * l'aperçu tourne intégralement sur les replis. C'est attendu.
 *
 * ═══ TOUTE LA COULEUR VIENT DE --lcl-ink / --lcl-ink-soft ═══
 *
 * Le Footer redéfinit ces deux tokens par variante de marque : aubergine
 * #2a2240 sur le corps jaune de la variante standard, blanc sur le fond foncé
 * #2a2240 de la variante Pro. Un badge doit donc être construit uniquement à
 * partir d'eux et de `currentColor` — un hex en dur le rendrait invisible sur
 * l'une des deux variantes. C'est la seule contrainte non négociable de ce
 * fichier.
 *
 * Typographie : Inter pour la ligne du haut, « Cstm Neighbor » 700 pour le nom
 * du service. « Cstm Neighbor » n'existe qu'en 400 / 700 / 900 — jamais 500 ni
 * 600, le navigateur les synthétiserait sans erreur.
 * ========================================================================= */

/*
 * Le dimensionnement vit sur :host, pas sur .root, et c'est structurel :
 * l'ÉLÉMENT HÔTE est l'enfant que la colonne met en page ; .root est déjà à
 * l'intérieur du shadow root et n'a aucune prise sur cette mise en page.
 *
 * Mais ni largeur ni pourcentage, jamais — même raison que sur le `:host` de
 * « Nav — Colonne » et de « Footer — Colonne » : c'est le CONTENEUR qui place
 * son enfant, et les règles de l'arbre externe (le CSS de la page Webflow)
 * battent `:host`, donc le sizing ne peut pas vivre du côté de l'enfant.
 * Déclarer une largeur ici serait au mieux inutile, au pire perdant.
 *
 * `inline-flex` : la pilule doit se réduire à son contenu, pas réclamer la
 * largeur de la colonne. `vertical-align: top` évite que deux badges posés côte
 * à côte pendent l'un par rapport à l'autre sur la ligne de base quand leurs
 * hauteurs diffèrent (même ceinture de sécurité que sur « Footer — Colonne »).
 */
:host {
  display: inline-flex;
  vertical-align: top;
}

/*
 * La pilule. Entièrement en `currentColor` et en tokens d'encre : filet à 30 %
 * d'encre au repos, encre pleine au survol, et un voile d'encre à 8 % en fond.
 *
 * Chaque `color-mix()` est PRÉCÉDÉ d'une déclaration `rgba()` équivalente, qui
 * sert de repli aux moteurs sans `color-mix()` : un `color-mix()` non supporté
 * — ou portant un `var()` non résolu — n'invalide que sa propre déclaration, et
 * la précédente reprend la main. Franchise sur ce repli : il est calibré sur
 * l'aubergine de la variante standard, donc sur un moteur sans `color-mix()` le
 * filet sera trop discret sur la variante Pro (fond foncé). Le survol, lui,
 * reste correct partout puisqu'il passe par `var(--lcl-ink)` nu.
 */
.BXxir4W2FLGlrImdBP5q {
  /*
   * `align-self: flex-start` : la colonne du footer neutralise le nœud slotté
   * (`display: contents !important`). Si Webflow distribue le badge sans
   * wrapper, cette règle atteint l'hôte du badge, sa boîte disparaît et `.root`
   * devient item flex direct de la pile de liens — qui étire ses items. La
   * pilule ferait alors toute la largeur de la colonne. On ne peut pas
   * contredire leur `!important` depuis l'intérieur, mais on peut refuser
   * l'étirement.
   */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(42, 34, 64, 0.3);
  border: 1px solid color-mix(in srgb, var(--lcl-ink, #2a2240) 30%, transparent);
  color: var(--lcl-ink, #2a2240);
  background-color: transparent;
  text-decoration: none;
  transition:
    border-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.BXxir4W2FLGlrImdBP5q *,
.BXxir4W2FLGlrImdBP5q *::before,
.BXxir4W2FLGlrImdBP5q *::after {
  box-sizing: border-box;
}

.BXxir4W2FLGlrImdBP5q:hover {
  border-color: var(--lcl-ink, #2a2240);
  background-color: rgba(42, 34, 64, 0.08);
  background-color: color-mix(in srgb, var(--lcl-ink, #2a2240) 8%, transparent);
}

.BXxir4W2FLGlrImdBP5q:focus-visible {
  outline: 2px solid var(--lcl-ink, #2a2240);
  outline-offset: 2px;
}

/*
 * Wrapper du logo slotté. `color: inherit` n'est pas décoratif : c'est ce qui
 * fait qu'un SVG dessiné en fill/stroke="currentColor" prend l'encre du badge à
 * travers la frontière shadow, sans une ligne de JavaScript — l'héritage suit
 * l'arbre APLATI, donc `color` descend dans le contenu distribué. Un logo
 * officiel monochrome suit alors la variante de marque tout seul ; un logo
 * multicolore ignore simplement cette règle, ce qui est correct aussi.
 */
.etnQkba39VMDZbjyFvQ_ {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: 0 0 auto;
  color: inherit;
}

/*
 * Dimensionnement du logo slotté, et sa conséquence, assumée : une règle
 * ::slotted() écrite depuis CE shadow root BAT les règles `:host` du composant
 * d'icône lui-même, et bat aussi les attributs width/height du SVG déposé —
 * pour les déclarations normales, l'arbre extérieur gagne sur `:host`, quelle
 * que soit la spécificité (claude.md § 4.11). C'est donc LE BADGE qui dicte la
 * taille du logo, et c'est voulu : le designer peut déposer n'importe quel SVG
 * fourni par Apple, la pilule reste cohérente.
 *
 * Le seul levier pour changer cette taille est le token
 * `--lcl-badge-icon-size`. Il n'est volontairement pas déclaré par défaut : la
 * valeur vit dans le repli du `var()`, ce qui laisse la possibilité de le poser
 * plus haut (sur le Footer, sur la colonne) et de le laisser hériter.
 *
 * `::slotted()` ne matche que les nœuds de PREMIER niveau distribués : cette
 * règle ne touche donc pas les enfants du SVG.
 */
.etnQkba39VMDZbjyFvQ_ slot::slotted(*) {
  width: var(--lcl-badge-icon-size, 22px);
  height: var(--lcl-badge-icon-size, 22px);
  flex: 0 0 auto;
}

.cp4YTTkFdlyH7Lrrnhsv {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}

/*
 * Ligne du haut, en encre douce : c'est la seule chose de ce badge qui n'est
 * pas en encre pleine, et `--lcl-ink-soft` est justement redéfini par le Footer
 * pour chaque variante (62 % d'aubergine sur le jaune, 76 % de blanc sur le
 * fond foncé). Le repli rgba() couvre la variante standard.
 */
.EXuKEFphtyKYwxdURd_G {
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--lcl-ink-soft, rgba(42, 34, 64, 0.62));
}

/*
 * Nom du service : police d'affichage, 700 — une graisse qui EXISTE dans
 * « Cstm Neighbor ». `color: inherit` pour suivre l'encre de la pilule, y
 * compris au survol.
 */
.Zd1tnyrS3d9_BPj5wgv_ {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: inherit;
}

/* ─────────────────────────────── Responsive ─────────────────────────────── */
/*
 * Mobile : pilule resserrée et logo un peu plus petit. Le token est posé sur
 * `.root` — il descend dans le contenu slotté par l'arbre aplati, le <slot>
 * étant à l'intérieur de `.root`. Une media query fonctionne dans un shadow
 * root : elle interroge le viewport, donc le badge s'adapte seul, sans rien
 * apprendre de son parent (aucun sélecteur descendant ne traverse la
 * frontière).
 */
@media (max-width: 599px) {
  .BXxir4W2FLGlrImdBP5q {
    --lcl-badge-icon-size: 20px;
    padding: 8px 12px;
  }
}

/* Deux propriétés sont transitionnées ci-dessus : ce bloc est obligatoire. */
@media (prefers-reduced-motion: reduce) {
  .BXxir4W2FLGlrImdBP5q {
    transition: none;
  }
}