/* ============================================================
   PILOTE MILITAIRE — INVITATION À LAISSER UN AVIS (ADR 0049)
   ------------------------------------------------------------
   Pop-in NON bloquant du coin bas-droit, proposé dans un espace
   POSSÉDÉ au palier de tests. Port de la surface Concours Armée
   (.ca-review-invite, html/css/dashboard.css) à la charte PM.

   Teinte : --filiere* / --accent* hérités de body[data-space]
   (pm-tokens.css) — l'avis porte une préparation, la carte porte
   donc la couleur de cette filière. Jamais un hex en dur.

   Dosage : la filière est un ACCENT (trait de tête, étoiles
   actives, remplissage du bouton principal), jamais un aplat
   derrière du texte de corps — les trois teintes sont claires.
   ============================================================ */

.pm-review-invite {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    max-width: 360px;
    width: calc(100vw - 40px);
}

.pm-review-invite__card {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    /* Trait de tête à la couleur de la filière : le seul aplat coloré de la
       carte, et il ne porte aucun texte. */
    border-top: 3px solid var(--filiere, var(--accent));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 18px 20px 16px;
    font-family: var(--font-sans);
    animation: pm-review-invite-in 0.25s var(--ease-out);
}

@keyframes pm-review-invite-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-review-invite__card {
        animation: none;
    }
}

.pm-review-invite__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.pm-review-invite__close:hover {
    background: var(--surface-raised);
    color: var(--text-secondary);
}

.pm-review-invite__kicker {
    margin: 0 0 4px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    /* --filiere-strong : la variante FONCÉE, seule lisible en texte sur fond
       clair (les trois --filiere sont des teintes claires). */
    color: var(--filiere-strong, var(--accent-strong));
}

.pm-review-invite__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.pm-review-invite__lead {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.pm-review-invite__field {
    margin-bottom: 10px;
}

.pm-review-invite__field label,
.pm-review-invite__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* « (optionnel) » accolé au libellé « Votre avis » : plus petit et atténué, il dit que
   le témoignage écrit n'est pas exigé sans peser autant que le libellé lui-même. */
.pm-review-invite__optional {
    font-weight: 400;
    font-size: 0.92em;
    opacity: 0.7;
}

.pm-review-invite__field input[type='text'],
.pm-review-invite__field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--surface-card);
    resize: vertical;
}

.pm-review-invite__field input[type='text']:focus,
.pm-review-invite__field textarea:focus {
    outline: none;
    border-color: var(--filiere, var(--accent));
    box-shadow: 0 0 0 2px var(--filiere-soft, var(--accent-soft));
}

.pm-review-invite__stars {
    display: flex;
    gap: 2px;
}

.pm-review-invite__star {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--border-strong);
    padding: 0 2px;
    transition: color 0.1s;
}

/* Exception assumée à la règle « l'accent est la filière » de l'en-tête : les
   étoiles qui portent une NOTE d'avis sont jaunes partout (cf. pm-tokens.css
   « Notation d'avis », décision du 04/08/2026). Le candidat note son expérience,
   il ne choisit pas la couleur de sa filière — et il reverra exactement ces
   étoiles-là dans le dialog d'achat et sur la vitrine. */
.pm-review-invite__star.is-active {
    color: var(--avis-etoile);
}

/* Survol piloté en JS (remplissage cumulatif 1..N via .is-active) — pas de
   règle :hover, qui ne colorerait qu'une seule étoile. */

.pm-review-invite__status {
    margin: 0 0 8px;
    font-size: 0.8rem;
    min-height: 1em;
    color: var(--text-secondary);
}

.pm-review-invite__status--err {
    color: var(--status-danger);
}

.pm-review-invite__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pm-review-invite__btn {
    appearance: none;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.pm-review-invite__btn:hover {
    background: var(--surface-raised);
}

/* Aplat --filiere à texte --filiere-ink : le couple prévu par pm-tokens.css
   (du blanc sur ces teintes claires tomberait à ~2,2:1). */
.pm-review-invite__btn--primary {
    background: var(--filiere, var(--accent));
    border-color: var(--filiere, var(--accent));
    color: var(--filiere-ink, #fff);
}

.pm-review-invite__btn--primary:hover {
    filter: brightness(0.95);
}

.pm-review-invite__btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pm-review-invite__btn--ghost {
    border-color: transparent;
    color: var(--text-muted);
    background: transparent;
}

.pm-review-invite__btn--ghost:hover {
    background: var(--surface-raised);
    color: var(--text-secondary);
}

/* Sur petit écran, la carte occupe la largeur disponible et se colle au bas
   de l'écran sans jamais recouvrir toute la vue : elle reste NON bloquante. */
@media (max-width: 520px) {
    .pm-review-invite {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }
}