.clients-list {
    background: var(--chirripo-color-bg, #0D0D0D);
    color: var(--chirripo-color-text, #f5f5f5);
}

.clients-list__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--chirripo-space-xl, 6rem) var(--chirripo-space-md, 1.5rem) var(--chirripo-space-lg, 3rem);
    text-align: center;
    min-height: 66vh;
    justify-content: center;
}

.clients-list__title {
    position: relative;
    margin: 0 0 0.3em;
    font-family: var(--chirripo-font-display, serif);
    font-weight: 300;
    font-size: clamp(2.5rem, 8vw, 96px);
    line-height: 1;
    text-transform: uppercase;
}

/*
 * Balayage flou -> net au défilement : même mécanisme que le bloc "Titre -
 * Apparition nette/floue" (blocks/title-reveal), réimplémenté ici en CSS
 * pur car ce hero appartient à un template PHP classique, pas à un bloc
 * Gutenberg. Déclenché par assets/js/hero-title-reveal.js.
 */
.clients-list__title-blur,
.clients-list__title-sharp {
    display: block;
}

.clients-list__title-blur {
    filter: blur(28px);
    opacity: 0.28;
}

@property --clients-title-reveal {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.clients-list__title-sharp {
    position: absolute;
    inset: 0;
    --clients-title-reveal: -10%;
    -webkit-mask-image: linear-gradient(to right, black 0%, black var(--clients-title-reveal), transparent calc(var(--clients-title-reveal) + 10%));
    mask-image: linear-gradient(to right, black 0%, black var(--clients-title-reveal), transparent calc(var(--clients-title-reveal) + 10%));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Texte du calque net via attr(data-text) plutôt qu'un vrai texte dupliqué
   dans le DOM : évite un H1 "vu en double" par les outils qui lisent le
   textContent sans respecter aria-hidden. */
.clients-list__title-sharp::before {
    content: attr(data-text);
}

.hero-reveal.is-visible .clients-list__title-blur {
    opacity: 0;
    transition: opacity 500ms ease 600ms;
}

.hero-reveal.is-visible .clients-list__title-sharp {
    --clients-title-reveal: 100%;
    transition: --clients-title-reveal 2800ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}

@media (prefers-reduced-motion: reduce) {
    .clients-list__title-blur {
        opacity: 0;
    }

    .clients-list__title-sharp {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.clients-list__subtitle {
    margin: 0 auto var(--chirripo-space-lg, 3rem);
    max-width: 45ch;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 24px;
    line-height: 1.6;
    color: var(--chirripo-color-text, #9a9a9a);
    /* Fondu léger seul (pas de balayage directionnel comme le titre). */
    opacity: 0;
    filter: blur(6px);
    transform: translateY(12px);
    transition: opacity 900ms ease 600ms, filter 900ms ease 600ms, transform 900ms ease 600ms;
}

.hero-reveal.is-visible .clients-list__subtitle {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .clients-list__subtitle {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

.clients-list__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 3rem;
    /* Démarre une fois le fondu du descriptif terminé (600ms + 900ms). */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease 1500ms, transform 700ms ease 1500ms;
}

.hero-reveal.is-visible .clients-list__filters {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .clients-list__filters {
        opacity: 1;
        transform: none;
    }
}

.clients-list__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    border: 1px solid rgba(245, 245, 245, 0.3);
    border-radius: 4px;
    color: #f5f5f5;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    background: rgba(245, 245, 245, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.clients-list__filter:hover .clients-list__media {
    border-color: rgba(245, 245, 245, 0.6);
    background: rgba(245, 245, 245, 0.15);
}

.clients-list__filter.is-active {
    background: rgba(245, 245, 245, 0.15);
    border-color: #f5f5f5;
    font-weight: 700;
}

.clients-list__row:hover {
    padding-left: 5%;
    transition: 0.2s ease-in;
}

.clients-list__filter.is-active::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chirripo-color-accent, #B6B6FB);
}

.clients-list__row:first-child {
    border-top: 0;
}

.clients-list__rows {
    max-width: var(--chirripo-container-width, 1280px);
    margin: 0 auto;
    padding: 0 10% var(--chirripo-space-lg, 3rem);
}

.clients-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chirripo-space-lg, 3rem);
    padding: var(--chirripo-space-md, 1.5rem) 0;
    border-top: 1px solid rgba(245, 245, 245, 0.15);
}

.clients-list__row:last-child {
    border-bottom: 1px solid rgba(245, 245, 245, 0.15);
}

.clients-list__info {
    flex: 1;
    min-width: 0;
}

.clients-list__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 0.4em;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--chirripo-color-text, #9a9a9a);
}

.clients-list__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--chirripo-color-accent, #B6B6FB);
}

.clients-list__eyebrow-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.clients-list__eyebrow-link:hover {
    color: var(--chirripo-color-text, #f5f5f5);
}

.clients-list__name {
    margin: 0 0 0.5em;
    font-family: var(--chirripo-font-display, serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
}

.clients-list__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clients-list__tags li a {
    display: inline-block;
    padding: 0.4em 0.9em;
    border: 1px solid rgba(245, 245, 245, 0.3);
    border-radius: 999px;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chirripo-color-text-muted, #9a9a9a);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.clients-list__tags li a:hover {
    color: var(--chirripo-color-text, #f5f5f5);
    border-color: rgba(245, 245, 245, 0.6);
}

/*
 * Description révélée au survol/focus de la ligne entière : repliée par
 * défaut (max-height sur le wrapper, pas sur le <p> directement, pour ne
 * pas avoir à connaître sa hauteur finale à l'avance).
 */
.clients-list__description-wrap {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.clients-list__row:hover .clients-list__description-wrap,
.clients-list__row:focus-within .clients-list__description-wrap {
    max-height: 10rem;
    margin-top: 0.75em;
    opacity: 1;
}

.clients-list__description {
    margin: 0;
    max-width: 60ch;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--chirripo-color-text-muted, #9a9a9a);
}

.clients-list__description-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 1em;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chirripo-color-text, #f5f5f5);
    text-decoration: none;
}

.clients-list__description-cta .cta-arrow {
    transition: transform 0.2s ease;
}

.clients-list__description-cta:hover .cta-arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .clients-list__description-wrap {
        transition: none;
    }
}

.clients-list__media {
    flex-shrink: 0;
    width: 22%;
    max-width: 220px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    transition: width 0.4s ease, max-width 0.4s ease;
}

.clients-list__row:hover .clients-list__media,
.clients-list__row:focus-within .clients-list__media {
    width: 45%;
    max-width: 480px;
}

@media (prefers-reduced-motion: reduce) {
    .clients-list__media {
        transition: none;
    }
}

.clients-list__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clients-list__empty {
    text-align: center;
    color: var(--chirripo-color-text-muted, #9a9a9a);
    padding: var(--chirripo-space-xl, 6rem) 0;
}

.clients-list__load-more {
    text-align: center;
    padding: 0 0 var(--chirripo-space-xl, 6rem);
}

.clients-list__load-more-button {
    display: inline-block;
    padding: 0.7em 1.6em;
    border: none;
    border-radius: 999px;
    background: var(--chirripo-color-accent, #B6B6FB);
    color: #0D0D0D;
    cursor: pointer;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
}

.clients-list__load-more-button:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 768px) {
    .clients-list__rows {
        padding-left: var(--chirripo-space-md, 1.5rem);
        padding-right: var(--chirripo-space-md, 1.5rem);
    }

    .clients-list__row {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: var(--chirripo-space-sm, 0.75rem);
    }

    .clients-list__media {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;
    }
}