/* ===========================================================================
   Carte de fidelite - SOURCE UNIQUE des styles de la CARTE (shell, en-tete,
   resume, tampons, barre Paliers/Cagnotte, badge). Extrait de company.html
   (inline) sans changement de valeurs. Chargee par la page publique ET le
   dashboard (apercu de config) + onboarding -> apercu identique, zero copie.
   NB: chargee APRES le <style> inline de company.html pour preserver la
   cascade (ces regles doivent gagner sur les regles de police partagees
   laissees inline).
   =========================================================================== */

      /* ====== CARTE DE FIDÉLITÉ (personnalisation poussée) ======
         Polices dédiées nom/description (héritent du réglage pop-up par défaut). */
      .loyaltyCardName {
        font-family: var(--font-loyalty-name, var(--font-pop-title, inherit));
      }
      .loyaltyCardDesc {
        font-family: var(--font-loyalty-desc, var(--font-pop-text, inherit));
      }
      html[data-fc-lname] .loyaltyCardName {
        color: var(--font-loyalty-name-color) !important;
      }
      html[data-fc-ldesc] .loyaltyCardDesc {
        color: var(--font-loyalty-desc-color) !important;
      }
      /* Réglages visuels de la carte (grad/tampon/halo). L'attribut data-loyalty-*
         est posé sur <body> par la page publique (applyLoyaltyCard) ET sur le
         conteneur d'aperçu .loyaltyEditorPreviewRoot par le dashboard
         (applyEditorPreviewAppearance) → `:is(body, .loyaltyEditorPreviewRoot)`
         couvre les DEUX contextes avec une SEULE source. Aucun attribut = carte
         d'origine. */
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-grad] .loyaltyCardShell {
        background: var(--loyalty-grad);
      }
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-stamp-color] .loyaltyStepBox.filled {
        background: var(--loyalty-stamp-bg);
        border-color: var(--loyalty-stamp-border);
      }
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-stamp] .loyaltyStepBox.filled,
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-stamp-img] .loyaltyStepBox.filled {
        position: relative;
        color: transparent;
      }
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-stamp] .loyaltyStepBox.filled::after {
        content: var(--loyalty-stamp-icon, "★");
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--loyalty-stamp-fg, #ecfdf5);
        font-size: 20px;
      }
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-stamp-img] .loyaltyStepBox.filled::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 60%;
        height: 60%;
        background: var(--loyalty-stamp-img) center / contain no-repeat;
      }
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-halo] .loyaltyCardShell::before {
        opacity: var(--loyalty-halo, 1);
      }
      :is(body, .loyaltyEditorPreviewRoot)[data-loyalty-halo] .loyaltyCardShell::after {
        opacity: calc(var(--loyalty-halo, 0.7) * 0.7);
      }

      .loyaltyCardShell {
        position: relative;
        margin-top: 6px;
        padding: 20px;
        border-radius: 28px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background:
          radial-gradient(
            340px 160px at 20% 0%,
            color-mix(in oklab, var(--accent) 30%, white 10%),
            transparent 62%
          ),
          linear-gradient(
            135deg,
            color-mix(in oklab, var(--accent) 72%, black 28%),
            rgba(10, 14, 26, 0.96)
          );
        box-shadow:
          0 24px 80px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
        isolation: isolate;
      }

      .loyaltyCardShell::before {
        content: "";
        position: absolute;
        inset: -2px;
        background:
          radial-gradient(
            220px 120px at 15% 0%,
            rgba(255, 255, 255, 0.22),
            transparent 60%
          ),
          radial-gradient(
            260px 140px at 100% 0%,
            rgba(255, 255, 255, 0.1),
            transparent 65%
          );
        pointer-events: none;
      }

      .loyaltyCardShell::after {
        content: "";
        position: absolute;
        inset: auto -20% -48% auto;
        width: 220px;
        height: 220px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.12),
          transparent 72%
        );
        filter: blur(16px);
        opacity: 0.7;
        pointer-events: none;
      }

      .loyaltyCardShell > * {
        position: relative;
        z-index: 1;
      }

      .loyaltyCardTop {
        display: grid;
        gap: 10px;
      }

      .loyaltyCardName {
        font-size: 25px;
        font-weight: 980;
        line-height: 1.05;
      }

      .loyaltyCardDesc {
        color: rgba(255, 255, 255, 0.82);
        font-size: 14px;
        line-height: 1.45;
      }

      .loyaltyProgressMeta {
        display: grid;
        gap: 18px;
        margin-top: 0;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.88);
      }

      .loyaltyPointsValue {
        font-size: 26px;
        font-weight: 980;
        letter-spacing: 0.2px;
      }

      .loyaltyStepsGrid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
      }

      .loyaltyStepBox {
        min-height: 52px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.12),
          rgba(255, 255, 255, 0.05)
        );
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.86);
        transform: translateY(8px) scale(0.96);
        opacity: 0;
        transition:
          transform 180ms ease,
          background 180ms ease,
          border-color 180ms ease,
          color 180ms ease;
        animation: loyaltyStepReveal 420ms cubic-bezier(0.2, 0.9, 0.2, 1)
          forwards;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .loyaltyStepBox.filled {
        background: linear-gradient(
          180deg,
          rgba(110, 231, 183, 0.34),
          rgba(34, 197, 94, 0.2)
        );
        border-color: rgba(134, 239, 172, 0.5);
        color: #ecfdf5;
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
      }

      .loyaltyStepBox.reward {
        background:
          radial-gradient(
            120px 64px at 50% 0%,
            rgba(255, 255, 255, 0.28),
            transparent 60%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.1)
          );
      }

      .loyaltyStepBox.rewardText {
        padding: 8px 6px;
        text-align: center;
        line-height: 1.15;
        font-size: 11px;
        font-weight: 900;
      }

      .loyaltyRewardSummary {
        margin-top: 14px;
        margin-bottom: 16px;
        padding: 8px 16px 16px;
        border-radius: 18px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.16),
          rgba(255, 255, 255, 0.08)
        );
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
        display: grid;
        gap: 12px;
      }
      /* Une seule ligne (Cagnotte / Paliers, sans la phrase « Cumulez… ») :
         padding vertical symétrique → le texte « comment obtenir un point » est
         centré, sans espace vide en dessous. */
      .loyaltyRewardSummary--single {
        padding-top: 14px;
        padding-bottom: 14px;
      }

      .loyaltyRewardSummaryDesc {
        color: rgba(255, 255, 255, 0.84);
        font-size: 14px;
        line-height: 1.4;
      }
      /* Cartes à points : « comment gagner un point » mis en avant (centré, plus
         lisible) plutôt qu'une ligne de texte grise. Sans icône ; revient à la
         ligne proprement si le texte est long. */
      .loyaltyRewardSummaryDesc.loyaltyEarnRule {
        text-align: center;
        color: #f8fbff;
        font-size: 15px;
        font-weight: 800;
      }

      .loyaltyRewardSummaryLine {
        font-weight: 950;
        color: #86efac;
        font-size: 16px;
      }
      /* Cartes à points (Cagnotte / Paliers) : la ligne est une EXPLICATION, pas
         une valeur de récompense → nettement moins grosse que le « N points =
         récompense » du Tampon, mais on garde le MÊME vert (`#86efac`) pour
         rester cohérent avec lui (seule la taille/graisse la distingue). */
      .loyaltyRewardSummaryLine.loyaltyRewardSummaryLine--soft {
        font-weight: 600;
        font-size: 13px;
        color: #86efac;
      }

      .loyaltyRewardCount {
        margin-top: 14px;
        padding: 13px 15px;
        border-radius: 16px;
        background: linear-gradient(
          135deg,
          rgba(110, 231, 183, 0.3),
          rgba(34, 197, 94, 0.16)
        );
        border: 1px solid rgba(134, 239, 172, 0.3);
        font-weight: 900;
        color: #dcfce7;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
        /* Toujours sur UNE ligne (icône + texte centrés) ; la taille se réduit
           si l'espace manque plutôt que de passer à la ligne. */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
        font-size: clamp(12px, 3.6vw, 15px);
      }
      .loyaltyRewardCount .mq-ico,
      .loyaltyRewardCount svg {
        flex: 0 0 auto;
      }

      /* Carte à paliers (page publique) : solde + catalogue de récompenses. */
      .loyaltyTiersDisplay {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 6px;
      }
      /* Barre de progression + repères de récompense (markup identique au module
         partagé loyaltyTiersProgressHtml ; couleurs perso via --loyalty-point-color
         / --loyalty-bar-color posées par applyLoyaltyCardAppearance). */
      .loyTierBar {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .loyTierBalance {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 6px;
        margin-top: 6px;
        /* Espace sous le solde : Paliers → avant la barre ; Cagnotte → avant la
           liste des récompenses. */
        margin-bottom: 16px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 14px;
        font-weight: 700;
        text-align: center;
      }
      .loyTierBalance b {
        font-size: 30px;
        font-weight: 950;
        line-height: 1;
        color: var(--loyalty-point-color, #ffffff);
      }
      .loyTierEmpty {
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
      }
      .loyTierTrack {
        position: relative;
        height: 12px;
        margin: 22px 6px 28px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.2);
      }
      .loyTierFill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 999px;
        background: var(--loyalty-bar-color, var(--accent, #22c55e));
        transition: width 0.35s ease;
      }
      .loyTierMark {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0;
        transform: translateX(-50%);
      }
      .loyTierMarkTick {
        position: absolute;
        top: -3px;
        bottom: -3px;
        left: 50%;
        width: 3px;
        transform: translateX(-50%);
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.55);
      }
      .loyTierMark.is-reached .loyTierMarkTick {
        background: var(--loyalty-point-color, #ffffff);
      }
      .loyTierMarkIco {
        position: absolute;
        bottom: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
        line-height: 0;
      }
      .loyTierMark.is-reached .loyTierMarkIco {
        opacity: 1;
        color: var(--loyalty-point-color, #ffffff);
      }
      .loyTierMarkIco svg {
        width: 14px;
        height: 14px;
      }
      .loyTierMarkCost {
        position: absolute;
        top: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.72);
        white-space: nowrap;
      }
      .loyTierMark.is-reached .loyTierMarkCost {
        color: rgba(255, 255, 255, 0.95);
      }
      .loyTierHint {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.85);
      }
      .loyTierHint svg {
        width: 15px;
        height: 15px;
        flex: none;
      }
      /* Liste des récompenses (disponibilité selon le solde), sous la barre. */
      .loyTierRewards {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin-top: 2px;
      }
      /* Grille : badge de coût à GAUCHE (sur toute la hauteur), puis le nom et
         l'état empilés à droite. Le nom occupe ainsi TOUTE la largeur restante
         (au lieu d'être coincé entre le badge et l'état) : il tient sur bien
         moins de lignes et reste lisible même très long. */
      .loyTierReward {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 11px;
        row-gap: 3px;
        padding: 11px 13px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .loyTierReward.is-ready {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.42);
      }
      .loyTierRewardCost {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        min-width: 38px;
        text-align: center;
        font-weight: 800;
        padding: 5px 9px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.25);
        color: var(--loyalty-point-color, #ffffff);
      }
      .loyTierRewardName {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        font-weight: 650;
        color: #fff;
        line-height: 1.35;
        /* Nom affiché EN ENTIER : retour à la ligne autorisé (fini l'ellipsis),
           et coupure des tokens trop longs pour ne JAMAIS déborder. */
        overflow-wrap: anywhere;
      }
      .loyTierRewardState {
        grid-column: 2;
        grid-row: 2;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        justify-self: start;
        /* Taille FLUIDE : 12px sur écran ≥ ~375px, puis rétrécit jusqu'à 10px
           sur plus petit. Combinée au nowrap de la puce ci-dessous, la pastille
           « Disponible / Échangeable » tient sur UNE ligne sans déborder de la
           case, même sur un petit téléphone. */
        font-size: clamp(10px, 3.2vw, 12px);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.66);
        min-width: 0;
      }
      /* « Disponible / Échangeable » = PUCE autonome (fond vert plein + texte
         foncé). Contrairement à un simple texte vert, elle reste parfaitement
         lisible quelle que soit la couleur de la carte (foncée OU claire), sans
         dépendre du fond. `nowrap` : le libellé ne se coupe jamais en deux
         lignes ; c'est la taille fluide qui l'ajuste à la largeur dispo. */
      .loyTierReward.is-ready .loyTierRewardState {
        padding: 2px 10px;
        border-radius: 999px;
        background: #34d399;
        color: #052e1c;
        font-weight: 800;
        white-space: nowrap;
        max-width: 100%;
      }
      /* L'icône suit la taille du texte (em) : elle rétrécit avec la pastille
         sur petit écran au lieu de rester fixe et de dominer. */
      .loyTierRewardState svg {
        width: 1.15em;
        height: 1.15em;
        flex: none;
      }

      @keyframes loyaltyStepReveal {
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @media (max-width: 560px) {
        .loyaltyCardName {
          font-size: 21px;
        }

        .loyaltyStepsGrid {
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 8px;
        }
}

