/* ========================================================================
   biomebounty — skin Peregrine (look SaasyKit gaming premium)
   ------------------------------------------------------------------------
   Surcharge des classes .peregrine-* exposées par les blocs du plugin
   Peregrine. Chargé conditionnellement (si plugin actif).

   Désactiver biomebounty → blocs retombent sur leur CSS neutre par défaut.

   Refonte 2026-05 : densité, icônes SVG par spec, spotlight follow-cursor,
   layout adaptatif 1/N tier, typography hiérarchisée.
   ======================================================================== */

/* ============================================================
   CYCLE FILTER — tabs Mensuel / Annuel / etc.
   ============================================================ */
.peregrine-cycle-filter {
    display: flex;
    justify-content: center;
    margin: 0 0 2rem;
}

.peregrine-cycle-filter__rail {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem;
    border-radius: 9999px;
    background: var(--pk-bg-card);
    border: 1px solid var(--pk-border);
    box-shadow: var(--pk-glass-highlight);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.peregrine-cycle-filter__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pk-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.peregrine-cycle-filter__btn:hover { color: white; }

.peregrine-cycle-filter__btn.is-active {
    background: rgba(220, 38, 38, 0.18);
    color: var(--pk-primary-soft);
    border-color: rgba(220, 38, 38, 0.32);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.15);
}

.peregrine-cycle-filter__btn:focus-visible {
    outline: 2px solid var(--pk-primary);
    outline-offset: 2px;
}

/* ============================================================
   PRODUIT RECOMMANDÉ — carte hero plus grande, badge "Recommandé"
   ============================================================ */

/* Sur tablet+ : la carte recommandée prend 2 colonnes de la grille
   auto-fill. Sur mobile (1 colonne), reste sur 1 colonne. */
.peregrine-products-container .peregrine-tier.is-recommended {
    position: relative;
    padding: 2.5rem 2.25rem !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
    background: linear-gradient(
        135deg,
        rgba(30, 26, 42, 0.95) 0%,
        rgba(22, 19, 30, 0.85) 100%
    ) !important;
    box-shadow:
        0 0 0 1px rgba(220, 38, 38, 0.18) inset,
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(220, 38, 38, 0.18) !important;
}

@media (min-width: 768px) {
    .peregrine-products-container .peregrine-tier.is-recommended {
        grid-column: span 2;
    }
}

/* Badge "Recommandé" en haut-gauche de la carte hero */
.peregrine-tier.is-recommended::before {
    content: "★ Recommandé";
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, #dc2626, #be123c);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    white-space: nowrap;
}

/* Le nom du produit "hero" peut être encore plus grand */
.peregrine-tier.is-recommended .peregrine-tier__product-name {
    font-size: clamp(2rem, 3vw, 2.75rem) !important;
}

.peregrine-tier.is-recommended .peregrine-tier__product-image {
    width: 7rem;
    height: 7rem;
}

@media (prefers-reduced-motion: reduce) {
    .peregrine-tier.is-recommended {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }
}

/* ============================================================
   BANNIÈRE CATÉGORIE — structure + look encadré (autosuffisant)
   ───────────────────────────────────────────────────────────
   Les règles de STRUCTURE (position, overflow, image absolute…)
   sont aussi dans le bloc src/blocks/category-banner/style.scss
   mais on les duplique ici en !important pour garantir qu'elles
   s'appliquent même si le CSS du bloc plugin n'est pas chargé
   (cas où le serveur a un opcache PHP qui retient un ancien
   block.json sans référence à style-index.css).
   ============================================================ */
.peregrine-category-banner {
    /* Structure : isole l'image en arrière-plan absolu */
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem) !important;
    color: white;
    /* Look : encadré avec ombre et radius */
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Image de fond — collée aux 4 côtés, cover, derrière l'overlay */
.peregrine-category-banner__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}

.peregrine-category-banner__bg--fallback {
    background: linear-gradient(135deg, #1e1a2a 0%, #0c0a14 100%);
}

/* Overlay — au-dessus de l'image, sous le contenu */
.peregrine-category-banner__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Contenu (breadcrumb, titre, bouton…) — au-dessus de tout */
.peregrine-category-banner__content {
    position: relative !important;
    z-index: 2 !important;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    color: white;
}

.peregrine-category-banner__content > * {
    color: white;
}

/* Si l'utilisateur a explicitement choisi align:full, on enlève le radius */
.peregrine-category-banner.alignfull {
    border-radius: 0;
}

/* ============================================================
   TOKENS (locaux au skin Peregrine — découplés du thème global)
   ============================================================ */
.peregrine-tiers,
.peregrine-tab-slider,
.peregrine-categories-grid,
.peregrine-products-grid,
.peregrine-my-servers {
    --pk-radius: 1rem;
    --pk-radius-sm: 0.625rem;
    --pk-bg-card: rgba(22, 19, 30, 0.72);
    --pk-bg-card-hover: rgba(30, 26, 42, 0.85);
    --pk-bg-tile: rgba(255, 255, 255, 0.025);
    --pk-bg-tile-hover: rgba(255, 255, 255, 0.05);
    --pk-border: rgba(255, 255, 255, 0.08);
    --pk-border-strong: rgba(255, 255, 255, 0.14);
    --pk-border-primary: rgba(220, 38, 38, 0.45);
    --pk-text: rgba(241, 240, 245, 0.95);
    --pk-text-muted: rgba(156, 163, 175, 0.9);
    --pk-text-subtle: rgba(107, 114, 128, 0.85);
    --pk-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
    --pk-shadow-card-hover: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(220, 38, 38, 0.12);
    --pk-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --pk-primary: #dc2626;
    --pk-primary-soft: #fb7185;
    --pk-success: #34d399;
    --pk-tabular: "tnum", "lnum";
}

/* ============================================================
   1) TIER CARD — premium glass + rim conic animé + spotlight
   ============================================================ */
.peregrine-tier {
    position: relative;
    isolation: isolate;
    padding: 1.75rem;
    background: var(--pk-bg-card);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-glass-highlight), var(--pk-shadow-card);
    color: var(--pk-text);
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1),
                box-shadow 0.35s cubic-bezier(.22, 1, .36, 1),
                border-color 0.3s ease,
                background 0.3s ease;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    height: 100%;
    overflow: hidden;
    /* Container query — permet aux specs/header de s'adapter à la LARGEUR
       de la card (pas du viewport). Une card étroite réduit ses font-sizes
       et padding via cqi (container query inline). */
    container-type: inline-size;
}

/* Cursor-follow spotlight (rouge subtil) */
.peregrine-tier::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        520px circle at var(--pk-mx, 50%) var(--pk-my, 50%),
        rgba(220, 38, 38, 0.12),
        transparent 45%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.peregrine-tier:hover::after {
    opacity: 1;
}

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

.peregrine-tier:hover {
    background: var(--pk-bg-card-hover);
    border-color: var(--pk-border-primary);
    transform: translateY(-4px);
    box-shadow: var(--pk-glass-highlight), var(--pk-shadow-card-hover);
}

/* FEATURED — rim conic animé permanent */
.peregrine-tier[data-featured="true"] {
    border-color: var(--pk-border-primary);
}

.peregrine-tier::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--pk-rim-angle, 0deg),
        rgba(220, 38, 38, 0)    0deg,
        rgba(220, 38, 38, 0)    200deg,
        rgba(220, 38, 38, 0.55) 250deg,
        rgba(244, 63, 94, 0.85) 280deg,
        rgba(220, 38, 38, 0.55) 310deg,
        rgba(220, 38, 38, 0)    360deg
    );
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
            mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
    animation: pk-rim 8s linear infinite;
}

.peregrine-tier:hover::before,
.peregrine-tier[data-featured="true"]::before {
    opacity: 1;
}

@property --pk-rim-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes pk-rim {
    to { --pk-rim-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .peregrine-tier::before { animation: none; }
    .peregrine-tier:hover { transform: none; }
}

/* Badge "Populaire" — aspect pill rouge (en flux normal par défaut).
   100% déplaçable n'importe où dans la card : c'est le bloc Gutenberg
   peregrine/plan-badge.

   Deux block style variations :
   - default (.is-style-flow ou rien) : en flux, suit la composition
   - .is-style-sticker : position absolute en haut centre de la card */
.peregrine-tier__badge {
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, #dc2626, #be123c);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    white-space: nowrap;
}

/* Style variation : sticker en haut au centre (comportement legacy) */
.peregrine-tier__badge.is-style-sticker,
.wp-block-peregrine-plan-badge.is-style-sticker {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
}

.peregrine-tier__badge::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path fill-rule='evenodd' d='M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z' clip-rule='evenodd'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Icone (emoji du tier) */
.peregrine-tier__icon {
    font-size: 2.25rem;
    line-height: 1;
    margin: 0 0 0.5rem;
}

/* Header produit : image carrée + nom du produit (style SaasyKit fidèle).
   Container-query-friendly : si la card est étroite, le header reste lisible.
   text-wrap: balance répartit le titre intelligemment sur 1-2 lignes. */
.peregrine-tier__product-header {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    min-width: 0; /* permet à flex enfants de shrink */
}

.peregrine-tier__product-image {
    position: relative;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border-radius: 0.875rem;
    overflow: hidden;
    /* PAS de background gradient ici — la couleur de la card derrière suffit.
       Si l'image a un canal alpha, ce qu'on voit derrière = couleur card. */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pk-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.peregrine-tier__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.peregrine-tier__product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
}

.peregrine-tier__product-name {
    margin: 0 !important;
    padding: 0;
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: clamp(1.25rem, 1.4vw + 0.7rem, 1.875rem);
    font-weight: 800;
    color: white;
    line-height: 1.1;
    letter-spacing: -0.025em;
    flex: 1 1 0;
    min-width: 0;
    /* break-word : casse seulement entre mots ou si un mot est plus long
       que le container (jamais au milieu d'un mot normal comme 'minecraft')
       — résout le bug 'minecraf' / 't' du au overflow-wrap:anywhere */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}
.peregrine-tier__product-name a {
    color: inherit;
    text-decoration: none;
}
.peregrine-tier__product-name a:hover {
    color: var(--pk-primary-soft);
}

/* Nom + description (mode sans header produit — fallback original) */
.peregrine-tier__name {
    margin: 0;
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.peregrine-tier__description {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--pk-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prix SaasyKit-style — amount + currency en gradient rouge énorme,
   interval petit uppercase gris. Le currency reste GROS comme l'amount,
   pas riquiqui à côté. */
.peregrine-tier__price {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.peregrine-tier__price-amount,
.peregrine-tier__price-currency {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
    font-weight: 800;
    color: #ef4444;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #be123c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 32px rgba(220, 38, 38, 0.28);
}

.peregrine-tier__price-interval {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pk-text-muted);
    line-height: 1.4;
    align-self: center;
    margin-left: 0.25rem;
}

/* ============================================================
   2) SPECS GRID — tiles auto-fill avec icônes SVG par spec
   ============================================================ */
/* 3 tuiles SaasyKit-style : grid FORCÉ 3 colonnes en desktop, auto-fit en mobile.
   minmax(0, 1fr) au lieu de minmax(7rem, 1fr) évite les overflow horizontaux
   sur cards étroites — les tuiles shrinkent gracieusement au lieu de wrap. */
.peregrine-tier__specs,
.peregrine-tier__specs--primary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
}

/* En dessous de 380px de container, on bascule en 1 colonne pour lisibilité */
@media (max-width: 380px) {
    .peregrine-tier__specs,
    .peregrine-tier__specs--primary {
        grid-template-columns: 1fr;
    }
}

/* Si beaucoup de specs activées dans 1 card étroite : permet le wrap */
.peregrine-tier__spec {
    position: relative;
    padding: 1rem 0.625rem;
    min-height: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.875rem;
    border: 1px solid var(--pk-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    overflow: hidden;
    text-align: center;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.peregrine-tier__spec:hover {
    background: var(--pk-bg-tile-hover);
    border-color: var(--pk-border-strong);
    transform: translateY(-2px);
}

/* ========== Mode vCore Performance ==========
   Quand un produit a META_CPU_PERFORMANCE_MODE activé, la tuile CPU reçoit
   la classe .is-performance + un badge texte (default 'Boosted').
   Style accent : border rouge plus marquée, background gradient rouge,
   icône CPU lumineuse, badge en haut-droite. */
.peregrine-tier__spec.is-performance {
    border-color: rgba(220, 38, 38, 0.45) !important;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.14), rgba(220, 38, 38, 0.03)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(220, 38, 38, 0.18),
        0 8px 24px -12px rgba(220, 38, 38, 0.45) !important;
}

.peregrine-tier__spec.is-performance::before {
    /* Icône CPU lumineuse en mode performance — drop-shadow rouge plus intense */
    opacity: 1 !important;
    filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.55)) !important;
}

.peregrine-tier__spec.is-performance .peregrine-tier__spec-value,
.peregrine-tier__spec.is-performance .peregrine-spec__value {
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(220, 38, 38, 0.3);
}

.peregrine-tier__spec.is-performance .peregrine-tier__spec-label,
.peregrine-tier__spec.is-performance .peregrine-spec__label {
    color: rgba(251, 113, 133, 0.95) !important;
}

/* Badge texte (Boosted, Pro, etc.) positionné en haut-droite de la tuile.
   Style identique au badge "Populaire" du plan (gradient rouge + glow). */
.peregrine-tier__spec-badge {
    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    z-index: 5;
    padding: 0.1875rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: white !important;
    background: linear-gradient(135deg, #dc2626, #be123c);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    white-space: nowrap;
    line-height: 1.2;
}

/* Topline lumineuse */
.peregrine-tier__spec::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

/* Icône SVG par spec — injecté via background-image */
.peregrine-tier__spec::before {
    content: "";
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.18));
}

.peregrine-tier__spec[data-spec="ram"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='9' rx='1.5'/><path d='M6 7v4M10 7v4M14 7v4M18 7v4'/><path d='M5 16v2M9 16v2M15 16v2M19 16v2'/></svg>");
}

.peregrine-tier__spec[data-spec="cpu"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='12' height='12' rx='1.5'/><rect x='9' y='9' width='6' height='6' rx='0.5'/><path d='M9 3v3M12 3v3M15 3v3'/><path d='M9 18v3M12 18v3M15 18v3'/><path d='M3 9h3M3 12h3M3 15h3'/><path d='M18 9h3M18 12h3M18 15h3'/></svg>");
}

.peregrine-tier__spec[data-spec="disk"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='16' height='6' rx='1'/><path d='M19 11h2v2h-2'/><rect x='6' y='11' width='3' height='2' rx='0.3'/><rect x='11' y='11' width='3' height='2' rx='0.3'/><circle cx='16.5' cy='12' r='0.6' fill='%23fb7185'/></svg>");
}

.peregrine-tier__spec[data-spec="swap"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10l-3 3 3 3'/><path d='M4 13h16'/><path d='M17 14l3-3-3-3'/><path d='M20 11H4'/></svg>");
}

.peregrine-tier__spec[data-spec="backups"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 18A4.5 4.5 0 0 0 19 9.5h-1.05a7 7 0 1 0-13.4 3.5'/><path d='M12 13v7'/><path d='M9 17l3 3 3-3'/></svg>");
}

.peregrine-tier__spec[data-spec="databases"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='8' ry='2.5'/><path d='M4 5v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5'/><path d='M4 11v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-6'/></svg>");
}

.peregrine-tier__spec[data-spec="io_weight"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18'/><path d='M6 6l-3 6 3 6'/><path d='M18 6l3 6-3 6'/></svg>");
}

.peregrine-tier__spec[data-spec="cpu_pinning"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='10' r='3'/><path d='M12 13v8'/><path d='M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11s-7-6-7-11a7 7 0 0 1 7-7z'/></svg>");
}

/* Ports (allocations) — icône réseau/ethernet (RJ45 stylisé) */
.peregrine-tier__spec[data-spec="allocations"]::before,
.peregrine-tier__feature-limit[data-spec="allocations"]:not(:has(.peregrine-tier__feature-limit-icon))::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='9' width='20' height='6' rx='1'/><path d='M6 9v-3'/><path d='M10 9v-2'/><path d='M14 9v-3'/><path d='M18 9v-2'/><path d='M6 15v3'/><path d='M10 15v2'/><path d='M14 15v3'/><path d='M18 15v2'/></svg>");
}

.peregrine-tier__spec-value {
    font-family: var(--wp--preset--font-family--display, inherit);
    /* clamp adaptatif : commence à 0.875rem sur cards étroites, monte à
       1rem sur cards normales. Plus de wrap "4,0\nGB" → 1 seule ligne. */
    font-size: clamp(0.875rem, 1.5cqi + 0.55rem, 1.0625rem);
    font-weight: 800;
    color: white;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    /* ZÉRO break interne : on autorise UNIQUEMENT le wrap aux espaces.
       'vCores' / 'Go' / 'GB' restent intacts. Le wrap se fait entre
       chiffre et unité ('3' / 'vCores') quand la tuile est étroite, pas
       au milieu du mot. text-wrap: balance équilibre les 2 lignes pour
       un rendu pro même en wrap. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

/* Exception : cpu_pinning peut avoir une longue liste 'CPU 0,1,2,3,…' —
   on autorise le wrap aux virgules pour éviter le débordement. */
.peregrine-tier__spec[data-spec="cpu_pinning"] .peregrine-tier__spec-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.peregrine-tier__spec-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-text-muted);
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Icône SVG custom (collée par l'utilisateur via Inspector) — quand
   .peregrine-tier__spec a un enfant <svg class="peregrine-tier__spec-icon">,
   on cache l'icône default du ::before */
.peregrine-tier__spec:has(.peregrine-tier__spec-icon)::before {
    display: none;
}

.peregrine-tier__spec-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: var(--pk-primary-soft);
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.18));
}

.peregrine-tier__spec-icon svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   2.bis) FEATURE LIMITS — ligne inline secondaire (BDD · Backups · Ports)
   ============================================================ */
.peregrine-tier__feature-limits {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* gap row 0.5rem + col 0 — le séparateur · prend le rôle de col gap */
    gap: 0.5rem 0;
    font-size: 0.875rem;
    color: white;
}

.peregrine-tier__feature-limit {
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.2;
    /* Empêche le wrap interne d'un item ("1 BDD" reste sur 1 ligne) */
    white-space: nowrap;
}

/* Séparateur "·" entre items via margin + content (PAS absolute).
   Robuste : visible même si le CSS est partiellement chargé,
   et ne casse pas le layout si on enlève un item. */
.peregrine-tier__feature-limit + .peregrine-tier__feature-limit {
    margin-left: 0.5rem;
}
.peregrine-tier__feature-limit + .peregrine-tier__feature-limit::before {
    content: "·";
    margin-right: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 0;
    pointer-events: none;
}

.peregrine-tier__feature-limit-icon {
    display: inline-flex;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--pk-primary-soft);
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.20));
}

.peregrine-tier__feature-limit-icon svg {
    width: 100%;
    height: 100%;
}

.peregrine-tier__feature-limit-value {
    font-weight: 700;
    color: white;
    font-variant-numeric: tabular-nums;
}

.peregrine-tier__feature-limit-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-text-muted);
}

/* Icônes SVG par défaut pour les feature-limits (quand aucun iconSvg
   custom n'est défini par l'utilisateur) — injecté via ::before */
.peregrine-tier__feature-limit:not(:has(.peregrine-tier__feature-limit-icon))[data-spec]::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.20));
    flex-shrink: 0;
}

.peregrine-tier__feature-limit[data-spec="databases"]:not(:has(.peregrine-tier__feature-limit-icon))::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='8' ry='2.5'/><path d='M4 5v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5'/><path d='M4 11v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-6'/></svg>");
}

.peregrine-tier__feature-limit[data-spec="backups"]:not(:has(.peregrine-tier__feature-limit-icon))::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 18A4.5 4.5 0 0 0 19 9.5h-1.05a7 7 0 1 0-13.4 3.5'/><path d='M12 13v7'/><path d='M9 17l3 3 3-3'/></svg>");
}

.peregrine-tier__feature-limit[data-spec="swap"]:not(:has(.peregrine-tier__feature-limit-icon))::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10l-3 3 3 3'/><path d='M4 13h16'/><path d='M17 14l3-3-3-3'/><path d='M20 11H4'/></svg>");
}

.peregrine-tier__feature-limit[data-spec="io_weight"]:not(:has(.peregrine-tier__feature-limit-icon))::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18'/><path d='M6 6l-3 6 3 6'/><path d='M18 6l3 6-3 6'/></svg>");
}

.peregrine-tier__feature-limit[data-spec="cpu_pinning"]:not(:has(.peregrine-tier__feature-limit-icon))::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='10' r='3'/><path d='M12 13v8'/><path d='M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11s-7-6-7-11a7 7 0 0 1 7-7z'/></svg>");
}

/* ============================================================
   3) CTA glow avec shimmer
   ============================================================ */
.peregrine-tier__form {
    margin: 1.5rem 0 0;
    /* Pousse le CTA en bas de la card pour aligner les boutons entre cards */
    margin-top: auto;
    padding-top: 1.5rem;
}

.peregrine-tier__cta {
    /* Apparence du bouton — appliquée partout où la classe est présente
       (card produit + bouton standalone hors card). */
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #dc2626, #be123c);
    color: white;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    min-height: 2.75rem;
    /* Défensif : ne dépasse JAMAIS du parent (card, section). Le padding
       est inclus dans la largeur calculée (border-box) → pas de débordement
       latéral en mode custom checkout où le bouton est un <a> standalone. */
    box-sizing: border-box;
    max-width: 100%;
    /* Centrage horizontal hors d'une grille — utile en mode custom checkout
       où le bouton n'a pas le full-width forcé. */
    margin-left: auto;
    margin-right: auto;
}

/* DANS UNE CARD : le bouton prend toute la largeur disponible (design
   classique des cards d'offre). À l'extérieur (mode 'Checkout Peregrine'
   sur un buy-button standalone), il garde sa taille naturelle inline-flex. */
.peregrine-tier .peregrine-tier__cta,
article.peregrine-tier .peregrine-tier__cta {
    display: flex;
    width: 100%;
}

.peregrine-tier__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.peregrine-tier__cta:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 8px 36px rgba(220, 38, 38, 0.5);
}

.peregrine-tier__cta:hover::after { transform: translateX(100%); }
.peregrine-tier__cta:active { transform: translateY(0) scale(0.98); }
.peregrine-tier__cta:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .peregrine-tier__cta::after { display: none; }
}

/* Missing config */
.peregrine-tier__missing-config {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 0 0.375rem 0.375rem 0;
}

/* ============================================================
   4) GRID + HEADING + cas spécial 1 seul tier
   ============================================================ */
.peregrine-tiers__heading {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: white;
    text-align: center;
    margin: 0 0 1rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.peregrine-tiers__grid {
    display: grid;
    grid-template-columns: repeat(var(--pk-cols, 3), minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1280px;
    margin-inline: auto;
}

.peregrine-tiers[data-cols="1"] .peregrine-tiers__grid { --pk-cols: 1; max-width: 720px; }
.peregrine-tiers[data-cols="2"] .peregrine-tiers__grid { --pk-cols: 2; max-width: 960px; }
.peregrine-tiers[data-cols="3"] .peregrine-tiers__grid { --pk-cols: 3; }
.peregrine-tiers[data-cols="4"] .peregrine-tiers__grid { --pk-cols: 4; }
.peregrine-tiers[data-cols="5"] .peregrine-tiers__grid { --pk-cols: 5; max-width: 1480px; }

@media (max-width: 1280px) {
    .peregrine-tiers[data-cols="5"] .peregrine-tiers__grid,
    .peregrine-tiers[data-cols="4"] .peregrine-tiers__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .peregrine-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .peregrine-tiers__grid { grid-template-columns: 1fr; }
}

/* ── Cas spécial : 1 seul tier (que ce soit en mode grid OU en
   tab actif avec 1 plan) → 1 seule colonne centrée, card pleine
   largeur (mais bornée), pas 1/N de la largeur ─────────────── */
.peregrine-tiers__grid:has(.peregrine-tier:only-child) {
    grid-template-columns: minmax(0, 640px) !important;
    justify-content: center;
    max-width: 720px;
}

.peregrine-tier:only-child {
    padding: 2.25rem 2rem;
}

/* ============================================================
   5) TAB SLIDER — port SaasyKit
   ============================================================ */
.peregrine-tab-slider {
    margin: 0 auto 2rem;
    display: flex;
    justify-content: center;
}

.peregrine-tab-slider__rail {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem;
    height: auto;
    border-radius: 9999px;
    background: var(--pk-bg-card);
    border: 1px solid var(--pk-border);
    box-shadow: var(--pk-glass-highlight);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

.peregrine-tab-slider__rail::-webkit-scrollbar { display: none; }

.peregrine-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pk-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    min-height: 2.5rem; /* touch target */
}

.peregrine-tab:hover { color: white; }

.peregrine-tab[data-active-tab="true"] {
    background: rgba(220, 38, 38, 0.18);
    color: var(--pk-primary-soft);
    border-color: rgba(220, 38, 38, 0.32);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.15);
}

.peregrine-tab:focus-visible {
    outline: 2px solid var(--pk-primary);
    outline-offset: 2px;
}

.peregrine-tab__saving {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(16, 185, 129, 0.18);
    color: var(--pk-success);
    border: 1px solid rgba(16, 185, 129, 0.30);
    line-height: 1.2;
    text-transform: uppercase;
}

.peregrine-tab[data-active-tab="true"] .peregrine-tab__saving {
    background: rgba(16, 185, 129, 0.28);
    border-color: rgba(16, 185, 129, 0.48);
}

.peregrine-tab-slider__panels { position: relative; }

.peregrine-tab-panel {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.peregrine-tab-panel.is-hidden,
.peregrine-tab-panel[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .peregrine-tab, .peregrine-tab-panel { transition: none; }
}

/* ============================================================
   6) CATEGORY CARD — cover image + overlay + nom dessus
   ============================================================ */
.peregrine-category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--pk-radius);
    border: 1px solid var(--pk-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
    aspect-ratio: 4 / 3;
    min-height: 14rem;
    background: linear-gradient(135deg, #1e1a2a, #0c0a14);
}

.peregrine-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    border-color: var(--pk-border-strong);
}

.peregrine-category-card__link {
    display: block;
    position: relative;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.peregrine-category-card__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.peregrine-category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    border-radius: 0;
}

.peregrine-category-card:hover .peregrine-category-card__image img {
    transform: scale(1.08);
}

.peregrine-category-card__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1.5rem;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(12, 10, 20, 0.95) 0%,
        rgba(12, 10, 20, 0.55) 35%,
        rgba(12, 10, 20, 0.05) 75%
    );
}

.peregrine-category-card__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.peregrine-category-card__description {
    margin: 0;
    color: rgba(241, 240, 245, 0.85);
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.peregrine-category-card__count {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.2);
    color: var(--pk-success);
    border: 1px solid rgba(16, 185, 129, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.peregrine-categories-grid__heading {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: white;
    text-align: center;
    margin: 0 0 1.5rem;
    letter-spacing: -0.025em;
}

/* Grille auto-fill : chaque card a au moins 280px et max 1fr.
   Si 1 seule catégorie → 1 card de ~280px (centrée), pas une card
   immense qui prend toute la largeur. Si N catégories → N colonnes
   responsives. */
.peregrine-categories-grid .peregrine-categories-grid__grid,
.peregrine-categories-grid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    justify-content: center;
    max-width: 1280px;
    margin-inline: auto;
}

/* Si l'utilisateur a forcé un nombre de colonnes via le bloc, on
   respecte. Sinon auto-fill prend le relais. */
.peregrine-categories-grid[data-cols="1"] .peregrine-categories-grid__grid { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); max-width: 420px; }
.peregrine-categories-grid[data-cols="2"] .peregrine-categories-grid__grid { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); max-width: 760px; }
.peregrine-categories-grid[data-cols="3"] .peregrine-categories-grid__grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); max-width: 1080px; }
.peregrine-categories-grid[data-cols="4"] .peregrine-categories-grid__grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); max-width: 1280px; }

/* Mode "carousel" — flex horizontal scrollable (carrousel natif simple) */
.peregrine-categories-grid[data-layout="carousel"] .peregrine-categories-grid__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    grid-template-columns: none;
    max-width: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}

.peregrine-categories-grid[data-layout="carousel"] .peregrine-category-card {
    flex: 0 0 min(320px, 85%);
    scroll-snap-align: start;
}

/* Mode "flat" — wrapper transparent, les cards deviennent enfants du
   PARENT du bloc. Idéal pour les carrousels externes (Greenshift, etc.)
   qui s'attendent à pouvoir distribuer chaque enfant en slide. */
.peregrine-categories-grid[data-layout="flat"] .peregrine-categories-grid__inner.is-flat {
    display: contents;
}

/* ============================================================
   7) PRODUCT CARD (Group avec class is-style-peregrine-product-card)
   ============================================================ */
.peregrine-product-card,
.wp-block-group.is-style-peregrine-product-card {
    background: var(--pk-bg-card);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1),
                box-shadow 0.35s cubic-bezier(.22, 1, .36, 1),
                border-color 0.3s ease,
                background 0.3s ease;
    color: var(--pk-text);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.peregrine-product-card:hover,
.wp-block-group.is-style-peregrine-product-card:hover {
    background: var(--pk-bg-card-hover);
    border-color: var(--pk-border-primary);
    transform: translateY(-6px);
    box-shadow: var(--pk-shadow-card-hover);
}

.wp-block-group.is-style-peregrine-product-card .wp-block-post-featured-image {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.wp-block-group.is-style-peregrine-product-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    border-radius: var(--pk-radius) var(--pk-radius) 0 0;
}

.wp-block-group.is-style-peregrine-product-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

.wp-block-group.is-style-peregrine-product-card .wp-block-post-title a {
    color: white;
    text-decoration: none;
    transition: color 0.25s ease;
}

.wp-block-group.is-style-peregrine-product-card:hover .wp-block-post-title a {
    color: var(--pk-primary-soft);
}

.wp-block-group.is-style-peregrine-product-card .wp-block-buttons {
    margin-top: auto !important;
}

/* ============================================================
   8) BUY BUTTON + BILLING PORTAL LINK
   ============================================================ */
.peregrine-buy-button__btn,
.wp-block-peregrine-buy-button form button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #dc2626, #be123c);
    color: white;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    min-height: 2.75rem;
}

.peregrine-buy-button__btn:hover,
.wp-block-peregrine-buy-button form button:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 8px 36px rgba(220, 38, 38, 0.5);
}

.peregrine-billing-portal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--pk-border);
    background: transparent;
    color: var(--pk-text);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    min-height: 2.75rem;
}

.peregrine-billing-portal-link:hover {
    border-color: var(--pk-border-primary);
    background: rgba(220, 38, 38, 0.10);
    color: var(--pk-primary-soft);
    transform: translateY(-2px);
}

/* ============================================================
   9) MY SERVERS — dashboard
   ============================================================ */
.peregrine-my-servers__heading {
    font-family: var(--wp--preset--font-family--display, inherit);
    color: white;
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
}

.peregrine-my-server {
    background: var(--pk-bg-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--pk-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
}

.peregrine-my-server:hover {
    border-color: var(--pk-border-primary);
    transform: translateX(2px);
}

.peregrine-my-server__name {
    font-family: var(--wp--preset--font-family--display, inherit);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
}

.peregrine-my-server__meta {
    color: var(--pk-text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.peregrine-my-server--active .peregrine-my-server__status-value { color: var(--pk-success); }
.peregrine-my-server--provisioning .peregrine-my-server__status-value {
    color: #fbbf24;
    animation: pk-pulse 2s ease-in-out infinite;
}
.peregrine-my-server--pending_resubscribe .peregrine-my-server__status-value { color: #22d3ee; }

@keyframes pk-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.peregrine-my-server__order code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: rgba(241, 240, 245, 0.7);
    font-family: var(--wp--preset--font-family--mono, monospace);
}

.peregrine-my-servers__empty,
.peregrine-my-servers__login-prompt {
    text-align: center;
    padding: 2rem;
    background: rgba(22, 19, 30, 0.4);
    border-radius: 0.75rem;
    border: 1px dashed var(--pk-border);
    color: var(--pk-text-muted);
}

.peregrine-my-servers__login-prompt a {
    color: var(--pk-primary-soft);
    text-decoration: underline;
    font-weight: 600;
}

/* ============================================================
   10) RESUBSCRIBE + autres
   ============================================================ */
.peregrine-resubscribe {
    text-align: center;
    padding: 3rem 1rem;
}

.peregrine-resubscribe__loading {
    color: var(--pk-text-muted);
    font-size: 1.125rem;
}

.peregrine-resubscribe__error {
    color: #ef4444;
    font-size: 1rem;
}

.peregrine-tiers__empty,
.peregrine-categories-grid__empty,
.peregrine-products-grid__empty {
    padding: 2rem;
    text-align: center;
    color: var(--pk-text-muted);
    background: var(--pk-bg-card);
    border-radius: var(--pk-radius);
    border: 1px dashed var(--pk-border);
}

/* ============================================================
   AUTH SUBMIT BUTTONS — align with the theme's is-style-glow CTA
   so the login/register pages match every other primary button.
   The Peregrine blocks emit a plain <button class="peregrine-login-submit">
   (not a wp-block-button), so we replicate the glow styling directly.
   ============================================================ */
.peregrine-login-submit,
.peregrine-register-submit {
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: calc(.667em + 2px) calc(1.333em + 2px) !important;
    background: linear-gradient(135deg,
        var(--wp--preset--color--primary) 0%,
        #be123c 100%) !important;
    color: var(--wp--preset--color--primary-content) !important;
    border-radius: var(--wp--custom--radius--md) !important;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);
    transition: transform var(--wp--custom--transition--base),
                box-shadow var(--wp--custom--transition--base);
}

/* When the "Center the content" toggle is on, the centering rule in
   peregrine-base-layout.css applies `display: block; width: fit-content;
   margin-inline: auto`. That rule lives inside @layer peregrine-base, so
   we mirror it here (outside the layer) to override the default <button>
   inline-block and let the centering actually take effect. */
.peregrine-centered.peregrine-login-submit,
.peregrine-centered.peregrine-register-submit {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.peregrine-login-submit::after,
.peregrine-register-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.peregrine-login-submit:hover,
.peregrine-register-submit:hover,
.peregrine-login-submit:focus-visible,
.peregrine-register-submit:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 40px rgba(220, 38, 38, 0.5);
    outline: none;
}

.peregrine-login-submit:hover::after,
.peregrine-register-submit:hover::after,
.peregrine-login-submit:focus-visible::after,
.peregrine-register-submit:focus-visible::after {
    transform: translateX(100%);
}

.peregrine-login-submit:active,
.peregrine-register-submit:active {
    transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .peregrine-login-submit::after,
    .peregrine-register-submit::after {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Support tickets — peregrine/ticket-form, my-tickets, ticket-detail
   ══════════════════════════════════════════════════════════════════ */

/* Shared card */
.peregrine-ticket-form,
.peregrine-my-tickets,
.peregrine-ticket-detail {
    background: rgba(22, 19, 30, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--wp--preset--color--base-400, #475569);
    border-radius: var(--wp--custom--radius--lg, 16px);
    padding: clamp(20px, 4vw, 36px);
    color: var(--wp--preset--color--contrast, #f1f0f5);
}

/* Flash */
.peregrine-account-form__flash {
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
}
.peregrine-account-form__flash--success { background: rgba(34, 197, 94, 0.12); color: #4ade80; border-left: 3px solid #22c55e; }
.peregrine-account-form__flash--error   { background: rgba(220, 38, 38, 0.12); color: #fca5a5; border-left: 3px solid #dc2626; }
.peregrine-account-form__flash--info    { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-left: 3px solid #3b82f6; }

/* Form rows */
.peregrine-ticket-form__row { margin-bottom: 18px; }
.peregrine-ticket-form__row label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--muted, #94a3b8);
    margin-bottom: 6px;
}
.peregrine-ticket-form__row input[type="text"],
.peregrine-ticket-form__row select,
.peregrine-ticket-form__row textarea,
.peregrine-ticket-detail__reply textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--wp--preset--color--base-400, #475569);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--wp--preset--color--contrast, #f1f0f5);
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}
.peregrine-ticket-form__row input:focus,
.peregrine-ticket-form__row select:focus,
.peregrine-ticket-form__row textarea:focus,
.peregrine-ticket-detail__reply textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary, #e11d48);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
}
.peregrine-ticket-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 600px) {
    .peregrine-ticket-form__grid { grid-template-columns: 1fr; }
}

/* Submit button */
.peregrine-ticket-form__submit {
    background: linear-gradient(135deg, #e11d48, #dc2626);
    color: #fff;
    padding: 12px 28px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.peregrine-ticket-form__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(225, 29, 72, 0.42); }
.peregrine-ticket-form__actions { margin-top: 24px; text-align: right; }

/* My-tickets list */
.peregrine-my-tickets__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.peregrine-my-tickets__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.peregrine-my-tickets__new {
    display: inline-block;
    background: linear-gradient(135deg, #e11d48, #dc2626);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.28);
}
.peregrine-my-tickets__new:hover { color: #fff; opacity: 0.95; }

.peregrine-my-tickets__empty { text-align: center; padding: 48px 16px; color: var(--wp--preset--color--muted, #94a3b8); }
.peregrine-my-tickets__cta { color: var(--wp--preset--color--primary, #e11d48); font-weight: 600; text-decoration: none; }

.peregrine-my-tickets__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.peregrine-my-tickets__item { transition: transform 0.15s ease; }
.peregrine-my-tickets__item:hover { transform: translateX(2px); }
.peregrine-my-tickets__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--wp--preset--color--base-400, #475569);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.peregrine-my-tickets__link:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(225, 29, 72, 0.4); }

.peregrine-my-tickets__badge {
    display: inline-block;
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
}
.peregrine-my-tickets__badge--open      { background: #2271b1; }
.peregrine-my-tickets__badge--pending   { background: #b45309; }
.peregrine-my-tickets__badge--resolved  { background: #16a34a; }
.peregrine-my-tickets__badge--closed    { background: #6b7280; }

.peregrine-my-tickets__main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.peregrine-my-tickets__subject { font-weight: 600; font-size: 14px; color: var(--wp--preset--color--contrast, #f1f0f5); }
.peregrine-my-tickets__meta { font-size: 12px; color: var(--wp--preset--color--muted, #94a3b8); }
.peregrine-my-tickets__arrow { color: var(--wp--preset--color--muted, #94a3b8); font-size: 18px; flex: 0 0 auto; }

/* Ticket detail */
.peregrine-ticket-detail__back { color: var(--wp--preset--color--muted, #94a3b8); text-decoration: none; font-size: 14px; }
.peregrine-ticket-detail__back:hover { color: var(--wp--preset--color--primary, #e11d48); }
.peregrine-ticket-detail__header { padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--base-400, #475569); }
.peregrine-ticket-detail__subject { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.peregrine-ticket-detail__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--wp--preset--color--muted, #94a3b8); }

.peregrine-ticket-detail__thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.peregrine-ticket-detail__msg { padding: 14px 18px; border-radius: 14px; max-width: 88%; line-height: 1.6; }
.peregrine-ticket-detail__msg--user { background: rgba(59, 130, 246, 0.10); border-left: 3px solid #3b82f6; align-self: flex-start; }
.peregrine-ticket-detail__msg--admin { background: rgba(225, 29, 72, 0.10); border-left: 3px solid #e11d48; align-self: flex-end; }
.peregrine-ticket-detail__msg-meta { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted, #94a3b8); margin-bottom: 6px; }
.peregrine-ticket-detail__msg-body { font-size: 14px; white-space: pre-wrap; word-break: break-word; }

.peregrine-ticket-detail__reply { padding-top: 18px; border-top: 1px solid var(--wp--preset--color--base-400, #475569); }
.peregrine-ticket-detail__reply label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted, #94a3b8); margin-bottom: 8px; }
.peregrine-ticket-detail__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 14px; flex-wrap: wrap; }
.peregrine-ticket-detail__close-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wp--preset--color--muted, #94a3b8); cursor: pointer; }

/* ============================================================
   « Accéder au panel » — bouton en tête de la page Abonnements.
   Le bloc plugin (peregrine/subscriptions-list) rend un bouton agnostique ;
   on lui applique ici le look premium BiomeBounty (dégradé rouge + glow +
   hover). Scopé à .__panel pour ne pas affecter les boutons d'action
   par-abonnement (résilier, renouvellement…).
   ============================================================ */
.peregrine-subscriptions-list__panel { display: flex; justify-content: flex-end; }
.peregrine-subscriptions-list__panel .peregrine-subscriptions-list__btn {
    background: linear-gradient(135deg, #dc2626, #be123c);
    border: none;
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: var(--wp--custom--radius--md, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.peregrine-subscriptions-list__panel .peregrine-subscriptions-list__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.5);
    filter: brightness(1.05);
}
@media (prefers-reduced-motion: reduce) {
    .peregrine-subscriptions-list__panel .peregrine-subscriptions-list__btn { transition: none; }
    .peregrine-subscriptions-list__panel .peregrine-subscriptions-list__btn:hover { transform: none; }
}