/* =============================================================================
   L16 (17/05/2026) — Menu pilule unifié, CSS dédié.

   Calibré pixel-perfect sur mockup Vincent (badge connecté) :
   - Pilule fond Dark Navy solide #162232, bordure rgba taupe 30 %
   - Icône loupe/bâtiment taupe clair #c7b8a1
   - Texte CLUB OBSERVATEURS/REPRENEURS majuscules taupe pâle, letter-spacing
   - ME DÉCONNECTER : centré SOUS le badge (pas à droite), underline visible,
     taupe clair, font-size petit (~11px)

   Référence visuelle : mockup Vincent (icône loupe + label + ME DÉCONNECTER
   centré dessous, fond Dark Navy solide arrondi).

   Chargement : public/base.html + espace/base.html (pour cohérence vitrine +
   pages publiques + espace authentifié).

   Note : ce fichier est INDEPENDANT de espace-l15.css (non encore mergé)
   pour que la PR vitrine-jinja-migration soit autoporteuse. Une fois L15
   mergé, les règles esp-tier-badge dans espace-l15.css peuvent être retirées
   (doublon couvert ici).
   ============================================================================= */


/* --------- Wrapper colonne (badge + ME DÉCONNECTER centré dessous) ---- */
.public-body .esp-tier-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}


/* --------- Badge pilule CLUB OBSERVATEURS / CLUB REPRENEURS ----------- */
.public-body .esp-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #162232;
    border: 1px solid rgba(199, 184, 161, 0.30);
    border-radius: 999px;
    color: #c7b8a1;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    white-space: nowrap;
}
.public-body .esp-tier-badge:hover,
.public-body .esp-tier-badge:focus-visible {
    background: #1c2a3c;
    border-color: rgba(199, 184, 161, 0.55);
    outline: none;
    transform: translateY(-1px);
}

.public-body .esp-tier-badge-icon {
    font-size: 15px;
    line-height: 1;
    color: #c7b8a1;
}

.public-body .esp-tier-badge-label {
    color: #d4c4a8;
    letter-spacing: 0.14em;
}


/* --------- ME DÉCONNECTER : centré SOUS le badge, underline ---------- */
.public-body .esp-tier-logout-form {
    margin: 0;
    display: flex;
    justify-content: center;
}

.public-body .esp-tier-logout-btn {
    background: transparent;
    border: none;
    color: #c7b8a1;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    font-family: inherit;
    line-height: 1;
}
.public-body .esp-tier-logout-btn:hover,
.public-body .esp-tier-logout-btn:focus-visible {
    color: #e8dcc4;
    outline: none;
}


/* --------- Variantes tier (Observateurs vs Repreneurs) --------------- */
/* Différenciation subtile : Observateurs (par défaut, taupe standard)
   vs Repreneurs (taupe légèrement plus clair pour premium). */
.public-body .esp-tier-badge--repreneurs .esp-tier-badge-label {
    color: #e8dcc4;
}
.public-body .esp-tier-badge--repreneurs .esp-tier-badge-icon {
    color: #d4c4a8;
}


/* --------- Responsive mobile (< 768px) -------------------------------- */
@media (max-width: 768px) {
    .public-body .esp-tier-badge {
        font-size: 11px;
        padding: 8px 16px;
        letter-spacing: 0.10em;
    }
    .public-body .esp-tier-badge-icon {
        font-size: 13px;
    }
    .public-body .esp-tier-logout-btn {
        font-size: 10px;
    }
}

/* --- Bug-C iPhone 21/05 (< 480px) — viewport très étroit iPhone SE/12 mini.
   Sur ces viewports, logo + badge + burger ne tenaient pas dans 375px
   → burger sortait de la pilule (screenshot Vincent 9h35). Compaction
   badge plus agressive : padding réduit + gap réduit + letter-spacing 0
   + label tronqué via "OBS." si très étroit (mais on garde le label
   plein pour préserver l'info, c'est le burger qui retrouve sa place). */
@media (max-width: 480px) {
    .public-body .esp-tier-badge {
        padding: 6px 10px;
        gap: 6px;
        font-size: 10px;
        letter-spacing: 0.04em;
    }
    .public-body .esp-tier-badge-icon {
        font-size: 11px;
    }
    .public-body .esp-tier-logout-btn {
        font-size: 9px;
        letter-spacing: 0.05em;
    }
}


/* =============================================================================
   Bouton cœur favori (hotfix 20/05/2026 J-Day — Vincent retour Alicia)
   ---
   Markup attendu :
     <button class="esp-fav-heart [is-active]"
             data-fav-toggle="<id>"
             aria-pressed="true|false">♡ ou ♥</button>
   Cohérent avec backoffice/static/js/favoris.js qui toggle .is-active.
   ============================================================================= */

.esp-fav-heart {
    /* Base : pas de position:absolute par défaut. Les contextes spécifiques
       (cd-hero fiche détail) re-positionnent en absolute via sélecteur
       dédié ci-dessous. Les cards catalogue laissent le cœur en flex
       naturel dans le header (cf. .dossier-card-header-right). */
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(15, 25, 35, 0.55);
    border: 1px solid rgba(199, 184, 161, 0.4);
    border-radius: 50%;
    color: #c7b8a1;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Hotfix 20/05 : header en flex avec badge + cœur côte à côte à droite.
   Wrapper .dossier-card-header-right groupe badge + cœur avec gap. */
.dossier-card-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Fiche détail : le cœur reste en absolute top-right car cd-hero n'a pas
   de badge concurrent à cet endroit. */
.cd-hero .esp-fav-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.esp-fav-heart:hover,
.esp-fav-heart:focus-visible {
    background: rgba(15, 25, 35, 0.8);
    border-color: rgba(199, 184, 161, 0.7);
    transform: scale(1.05);
    outline: none;
}

.esp-fav-heart.is-active {
    background: rgba(15, 25, 35, 0.85);
    border-color: rgba(255, 255, 255, 0.9);
    color: #ffffff;
}

.esp-fav-heart.is-active:hover,
.esp-fav-heart.is-active:focus-visible {
    background: rgba(15, 25, 35, 0.95);
    border-color: #ffffff;
    transform: scale(1.05);
}

.esp-fav-heart.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* La card parent doit être en position:relative pour le positionnement
   absolu du bouton ci-dessus. .dossier-card a déjà position:relative
   via main.css (cf. spec catalogue-public-freemium §4). */

@media (prefers-reduced-motion: reduce) {
    .esp-fav-heart,
    .esp-fav-heart:hover,
    .esp-fav-heart:focus-visible {
        transition: none;
        transform: none;
    }
}