/* public/assets/css/trust.css
   ==========================================================================
   Corvus — « Ils nous font confiance » (trust.php)
   --------------------------------------------------------------------------
   DÉPEND DE, ET DOIT ÊTRE CHARGÉ APRÈS : tokens.css, components.css, style.css.
   Chargé UNIQUEMENT par trust.php. Préfixe `trust-` pour tout ce qui lui est
   propre.

   Aucune couleur ni durée nouvelle : la feuille ne consomme que les tokens
   (--accent*, --surface*, --line*, --space*, --t*, --ease*, --shadow-*, --r*).
   Même grammaire visuelle que le reste du site — la page doit se fondre dans
   l'ensemble, pas se distinguer.
   ========================================================================== */

/* ==========================================================================
   1. CHIFFRES CLÉS
   ========================================================================== */

.trust-stats {
    display: grid; gap: var(--space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
    .trust-stats { grid-template-columns: repeat(3, 1fr) }
}

.trust-stat {
    position: relative; overflow: hidden;
    background-color: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: var(--space-6) var(--space-5);
    text-align: center;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out),
                box-shadow var(--t) var(--ease-out);
}
.trust-stat:hover {
    border-color: var(--accent-line-weak); transform: translateY(-4px);
    box-shadow: var(--shadow-card), var(--shadow-lift);
}
/* Filet indigo en tête de tuile, révélé au survol : rappelle le liseré des
   cartes de l'accueil, en plus sobre. */
.trust-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0; transition: opacity var(--t) var(--ease);
}
.trust-stat:hover::before { opacity: 1 }

.trust-stat-n {
    display: block;
    font-family: var(--f-display); font-weight: 700;
    font-size: var(--fs-h2); line-height: 1;
    letter-spacing: var(--tr-heading);
    color: var(--text);
    /* Nombres tabulaires : le compteur qui défile ne fait pas « sautiller »
       la largeur du chiffre pendant l'animation. */
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.trust-stat-n--text { color: var(--accent-2) }
.trust-stat-sep { color: var(--muted); margin-inline: .06em; font-weight: 500 }
.trust-stat-l {
    display: block; margin-top: var(--space-3);
    font-family: var(--f-mono); font-size: var(--fs-2xs);
    text-transform: uppercase; letter-spacing: var(--tr-wide);
    color: var(--muted);
}

/* ==========================================================================
   2. EN-TÊTE DU RÉPERTOIRE
   ========================================================================== */

.trust-head {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.trust-head-titles .eyebrow { margin-bottom: var(--space-3) }
.trust-head-hint {
    font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--muted);
    max-width: 32ch;
}

/* ==========================================================================
   3. BARRE D'OUTILS — recherche + filtres
   ========================================================================== */

.trust-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* ---------- Recherche ---------- */
.trust-search {
    position: relative; display: flex; align-items: center;
    flex: 1 1 15rem; min-width: 12rem;
}
.trust-search-ico {
    position: absolute; left: var(--space-4);
    width: 17px; height: 17px; color: var(--muted); pointer-events: none;
    transition: color var(--t-fast) var(--ease);
}
.trust-search:focus-within .trust-search-ico { color: var(--accent-2) }
.trust-search-input {
    width: 100%;
    background-color: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-ctl);
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 26px);
    font-family: var(--f-body); font-size: var(--fs-sm);
    min-height: 44px;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.trust-search-input::placeholder { color: var(--muted) }
.trust-search-input:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
/* Croix native du champ search : discrète, alignée sur la palette. */
.trust-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; cursor: pointer;
    background: currentColor;
    color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Filtres (chips) ---------- */
.trust-filters { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.trust-chip {
    font-family: var(--f-mono); font-size: var(--fs-2xs);
    color: var(--text-2);
    background-color: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: var(--space-2) var(--space-4);
    min-height: 34px; cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
    touch-action: manipulation;
}
.trust-chip:hover { color: var(--text); border-color: var(--muted) }
.trust-chip:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring) }
.trust-chip.is-on {
    color: var(--accent-2); border-color: var(--accent-line);
    background-color: var(--accent-ghost);
}

/* ==========================================================================
   4. PANNEAU + LISTE SCROLABLE
   ========================================================================== */

.trust-panel {
    background-color: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden;
    box-shadow: var(--shadow-card);
}

/* En-tête de colonnes — hors zone de défilement, toujours visible. */
.trust-panel-head {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    background-color: var(--bg-2);
    font-family: var(--f-mono); font-size: var(--fs-2xs);
    text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--muted);
}

/* Zone scrolable : dimensionnée pour ~5,5 lignes visibles, le reste défile.
   Pensée pour absorber une centaine de serveurs sans étirer la page. */
.trust-list {
    max-height: clamp(24rem, 58vh, 40rem);
    overflow-y: auto; overscroll-behavior: contain;
    /* Estompe le haut et le bas : les lignes entrent et sortent du cadre au
       lieu d'être coupées net. */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}
.trust-list:focus-visible { outline: none; box-shadow: var(--ring) inset }
.trust-list::-webkit-scrollbar { width: 10px }
.trust-list::-webkit-scrollbar-track { background: transparent }
.trust-list::-webkit-scrollbar-thumb {
    background-color: var(--surface-3); border-radius: var(--r-pill);
    border: 3px solid var(--surface);
}
.trust-list::-webkit-scrollbar-thumb:hover { background-color: var(--line) }

/* ---------- Ligne ---------- */
.trust-row {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--line-soft);
    /* État d'entrée : révélé par trust.js (classe .is-in), cascade via --i. */
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out),
                background-color var(--t-fast) var(--ease);
    /* Cascade volontairement courte et plafonnée (--i borné à 6 côté PHP) :
       les premières lignes s'enchaînent en douceur, et une ligne révélée plus
       tard au défilement interne n'attend jamais plus de ~110 ms. */
    transition-delay: calc(var(--i, 0) * 18ms);
}
.trust-row.is-in { opacity: 1; transform: none }
.trust-row:last-of-type { border-bottom: 0 }
.trust-row:hover { background-color: var(--surface-2) }
/* Masqué par un filtre : retiré du flux (le délai de cascade ne s'applique
   plus, la réapparition est immédiate). */
.trust-row.is-hidden { display: none }

/* Liseré indigo qui apparaît à gauche au survol — repère de ligne discret. */
.trust-row { position: relative }
.trust-row::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 2px; height: 0; border-radius: var(--r-pill);
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    transition: height var(--t) var(--ease);
}
.trust-row:hover::before { height: 56% }

/* ---------- Avatar (initiale) ---------- */
.trust-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--r-sm);
    /* Deux teintes indigo très proches, l'angle (--a, posé en PHP) varie d'un
       serveur à l'autre : de la vie, sans sortir de la palette. */
    background-image: linear-gradient(var(--a, 135deg), var(--accent-ghost-strong), var(--surface-3));
    border: 1px solid var(--accent-line-weak);
    color: var(--accent-3);
    font-family: var(--f-display); font-weight: 700; font-size: var(--fs-md);
    line-height: 1; user-select: none;
    transition: transform var(--t) var(--ease-spring), border-color var(--t) var(--ease);
}
.trust-row:hover .trust-avatar { transform: scale(1.06); border-color: var(--accent-line) }

/* ---------- Nom + catégorie ---------- */
.trust-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px }
.trust-name {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--f-display); font-weight: 500; font-size: var(--fs-base);
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trust-star { display: inline-flex; color: var(--accent-2); flex-shrink: 0 }
.trust-star .ico { width: 14px; height: 14px }
.trust-tag {
    align-self: flex-start;
    font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--muted);
}

/* ---------- Membres ---------- */
.trust-members { text-align: right; flex-shrink: 0 }
.trust-members-n {
    display: block; font-family: var(--f-mono); font-size: var(--fs-sm);
    color: var(--text-2); font-variant-numeric: tabular-nums;
}
.trust-members-l {
    display: block; font-family: var(--f-mono); font-size: var(--fs-2xs);
    color: var(--muted); text-transform: uppercase; letter-spacing: .1em;
}

/* ---------- État vide ---------- */
.trust-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-2); padding: var(--space-9) var(--space-5);
    color: var(--muted);
}
.trust-empty .ico { width: 26px; height: 26px; color: var(--surface-3); margin-bottom: var(--space-2) }
.trust-empty-t { font-family: var(--f-display); font-weight: 500; color: var(--text-2); font-size: var(--fs-md) }
.trust-empty-d { font-size: var(--fs-sm) }

/* ---------- Pied de panneau ---------- */
.trust-panel-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--line);
    background-color: var(--bg-2);
    font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--muted);
}
.trust-count { color: var(--text-2) }
.trust-panel-legend { display: inline-flex; align-items: center; gap: var(--space-2) }
.trust-panel-legend .ico { width: 13px; height: 13px; color: var(--accent-2) }

/* ==========================================================================
   5. NOTE + CTA
   ========================================================================== */

.trust-note {
    margin-top: var(--space-5); text-align: center;
    font-size: var(--fs-sm); color: var(--muted);
    max-width: var(--measure-narrow); margin-inline: auto;
    text-wrap: pretty;
}

/* Halo indigo ambiant derrière le CTA final — même geste que sur l'accueil,
   pour que les deux pages respirent pareil. */
.trust-cta { position: relative }
.trust-cta::before {
    content: ""; position: absolute; z-index: 0;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(42rem, 92%); aspect-ratio: 2 / 1;
    background: radial-gradient(closest-side, var(--accent-ghost), transparent 72%);
    pointer-events: none;
}
.trust-cta > * { position: relative; z-index: 1 }
.trust-cta .btn { margin-top: var(--space-3) }

@media (prefers-reduced-motion: no-preference) {
    .trust-cta::before {
        animation: trust-breathe 9s cubic-bezier(.4, 0, .2, 1) infinite;
    }
}
@keyframes trust-breathe {
    0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1) }
    50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.05) }
}

/* ==========================================================================
   6. MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .trust-stat, .trust-avatar { transition: none }
    .trust-row {
        opacity: 1; transform: none; transition: background-color var(--t-fast) var(--ease);
        transition-delay: 0ms;
    }
    .trust-cta::before { animation: none }
}