/**
 * Célébrités HD - archive + single
 * Refonte éditoriale magazine (Vogue / NYT Magazine) v2.0
 *
 * - Dark mode = défaut (palette bleu nuit du thème global)
 * - Light mode = body.light-mode (inversion via variables globales)
 * - Utilise strictement les variables du style.css principal
 *   (--bg-primary, --bg-secondary, --bg-card, --gold, --accent, --text-*, --font-*)
 */

/* ══════════════════════════════════════════════════
   TOKENS SPÉCIFIQUES CÉLÉBRITÉS
   ══════════════════════════════════════════════════ */
:root {
    /* Couleurs HD officielles (types) - vifs sur sombre, assombris sur clair */
    --celeb-gen:   #e74c5e;       /* Générateur - rouge HD */
    --celeb-mg:    #f39c52;       /* Manifesting Generator - rouge-orange */
    --celeb-proj:  #4eb88a;       /* Projecteur - vert */
    --celeb-mani:  #d94c5e;       /* Manifesteur - rouge intense */
    --celeb-refl:  #b0b7c9;       /* Réflecteur - argent */

    --celeb-card-radius: var(--radius-lg, 16px);
    --celeb-hover-glow: 0 0 0 1px rgba(var(--gold-rgb), .28), 0 24px 60px -20px rgba(var(--gold-rgb), .35);
}

body.light-mode {
    --celeb-gen:   #c0354a;
    --celeb-mg:    #d67a20;
    --celeb-proj:  #2f8f64;
    --celeb-mani:  #b53648;
    --celeb-refl:  #6a7188;
}

/* ══════════════════════════════════════════════════
   LAYOUT WRAPPER
   ══════════════════════════════════════════════════ */
.celeb-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 64px) clamp(16px, 3vw, 40px) 96px;
    position: relative;
}

/* ══════════════════════════════════════════════════
   ARCHIVE - HERO ÉDITORIAL
   ══════════════════════════════════════════════════ */
.celeb-hero {
    position: relative;
    padding: clamp(40px, 7vw, 96px) 20px clamp(32px, 5vw, 64px);
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}

/* Halo or subtil en arrière-plan */
.celeb-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 860px;
    max-width: 140%;
    height: 100%;
    background:
        radial-gradient(ellipse 60% 50% at 50% 20%, rgba(var(--gold-rgb), .12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 80% 70%, rgba(123, 104, 238, .08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Étoile décorative or au-dessus du titre */
.celeb-hero__ornament {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 18px;
    color: var(--gold);
    opacity: .85;
}

.celeb-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
    font-weight: 600;
    position: relative;
}
.celeb-hero__eyebrow::before,
.celeb-hero__eyebrow::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
    vertical-align: middle;
    margin: 0 12px;
    opacity: .6;
}
.celeb-hero__eyebrow::after {
    background: linear-gradient(to left, transparent, var(--gold));
}

.celeb-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(40px, 7vw, 88px);
    line-height: 1.02;
    margin: 0 0 20px;
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--text-primary);
}
.celeb-hero__title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}

.celeb-hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.7;
    font-weight: 400;
}

/* Compteur vivant - typographie magazine */
.celeb-hero__count {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 22px;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), .04));
    border: 1px solid rgba(var(--gold-rgb), .22);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    letter-spacing: .04em;
}
.celeb-hero__count strong {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════
   MOTEUR DE RECHERCHE - BARRE IMMERSIVE
   ══════════════════════════════════════════════════ */
.celeb-search {
    position: relative;
    max-width: 680px;
    margin: 0 auto 48px;
    z-index: 2;
}

.celeb-search__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
    box-shadow: var(--shadow-md);
}
.celeb-search__field:hover {
    border-color: rgba(var(--gold-rgb), .35);
}
.celeb-search__field:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .14), 0 12px 40px rgba(var(--gold-rgb), .18);
    transform: translateY(-1px);
}

.celeb-search__icon {
    flex-shrink: 0;
    color: var(--gold);
    width: 20px;
    height: 20px;
    opacity: .8;
    transition: opacity var(--transition-fast);
}
.celeb-search__field:focus-within .celeb-search__icon { opacity: 1; }

.celeb-search__input {
    flex: 1;
    padding: 14px 0;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    letter-spacing: .01em;
}
.celeb-search__input::placeholder {
    color: var(--text-muted);
    font-style: italic;
    opacity: 1;
}
.celeb-search__input:focus { outline: none; }

/* Raccourci clavier affiché à droite */
.celeb-search__kbd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), .12), rgba(var(--gold-rgb), .05));
    border: 1px solid rgba(var(--gold-rgb), .2);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--gold);
    letter-spacing: .1em;
    font-weight: 600;
    flex-shrink: 0;
    pointer-events: none;
}
.celeb-search__kbd::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
    animation: celeb-pulse 2.4s ease-in-out infinite;
}
@keyframes celeb-pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.25); }
}

/* État "recherche active" : badge devient un bouton reset */
.celeb-search__clear {
    display: none;
    margin: 0;
    padding: 8px 14px;
    background: rgba(var(--gold-rgb), .1);
    border: 1px solid rgba(var(--gold-rgb), .3);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.celeb-search__clear:hover {
    background: var(--gold);
    color: var(--bg-primary);
}
.celeb-search.has-query .celeb-search__clear { display: inline-flex; }
.celeb-search.has-query .celeb-search__kbd   { display: none; }

/* ══════════════════════════════════════════════════
   FILTRES - DOCK STICKY FLOTTANT
   ══════════════════════════════════════════════════ */
.celeb-filters {
    margin: 0 auto 48px;
    padding: 14px 18px;
    background: linear-gradient(
        180deg,
        rgba(11, 20, 40, .88) 0%,
        rgba(11, 20, 40, .82) 100%
    );
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 24px);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1280px;
    transition: border-color var(--transition);
}
body.light-mode .celeb-filters {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 246, 242, .88) 100%);
}

.celeb-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 36px;
}

.celeb-filters__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 700;
    color: var(--gold);
    margin-right: 4px;
    padding-right: 10px;
    border-right: 1px solid var(--border);
    min-width: 90px;
}
.celeb-filters__label::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .6;
}

.celeb-filters__row--cross {
    flex-wrap: nowrap;
}
.celeb-filters__cross-input {
    flex: 1 1 auto;
    min-width: 180px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color .2s, background .2s;
}
.celeb-filters__cross-input::placeholder {
    color: var(--text-muted);
    opacity: .75;
    font-style: italic;
}
.celeb-filters__cross-input:focus {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), .06);
}
body.light-mode .celeb-filters__cross-input {
    background: rgba(255, 255, 255, .7);
    color: var(--text-primary);
}
body.light-mode .celeb-filters__cross-input:focus {
    border-color: var(--gold-dark);
    background: #fff;
}
@media (max-width: 560px) {
    .celeb-filters__row--cross { flex-wrap: wrap; }
    .celeb-filters__cross-input { width: 100%; }
}

.celeb-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 12.5px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    color: var(--text-secondary);
    text-decoration: none;
    user-select: none;
    letter-spacing: .015em;
    white-space: nowrap;
}
body.light-mode .celeb-pill { background: rgba(0, 0, 0, .03); }

.celeb-pill:hover {
    background: rgba(var(--gold-rgb), .12);
    border-color: rgba(var(--gold-rgb), .4);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.celeb-pill[aria-pressed="true"],
.celeb-pill.is-active {
    background: var(--gold);
    color: var(--bg-primary);
    border-color: var(--gold);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--gold-rgb), .3);
}

/* Pills type HD - couleur par type quand actif (avec texte noir lisible) */
.celeb-pill--generator[aria-pressed="true"]             { background: var(--celeb-gen);  border-color: var(--celeb-gen);  color: #fff; box-shadow: 0 4px 14px rgba(231, 76, 94, .35); }
.celeb-pill--manifesting-generator[aria-pressed="true"] { background: var(--celeb-mg);   border-color: var(--celeb-mg);   color: #fff; box-shadow: 0 4px 14px rgba(243, 156, 82, .35); }
.celeb-pill--projector[aria-pressed="true"]             { background: var(--celeb-proj); border-color: var(--celeb-proj); color: #fff; box-shadow: 0 4px 14px rgba(78, 184, 138, .35); }
.celeb-pill--manifestor[aria-pressed="true"]            { background: var(--celeb-mani); border-color: var(--celeb-mani); color: #fff; box-shadow: 0 4px 14px rgba(217, 76, 94, .35); }
.celeb-pill--reflector[aria-pressed="true"]             { background: var(--celeb-refl); border-color: var(--celeb-refl); color: var(--bg-primary); box-shadow: 0 4px 14px rgba(176, 183, 201, .35); }

/* Petit disque coloré sur les pills de type (état inactif) */
.celeb-pill--generator::before,
.celeb-pill--manifesting-generator::before,
.celeb-pill--projector::before,
.celeb-pill--manifestor::before,
.celeb-pill--reflector::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.celeb-pill--generator::before             { background: var(--celeb-gen); }
.celeb-pill--manifesting-generator::before { background: var(--celeb-mg); }
.celeb-pill--projector::before             { background: var(--celeb-proj); }
.celeb-pill--manifestor::before            { background: var(--celeb-mani); }
.celeb-pill--reflector::before             { background: var(--celeb-refl); }
.celeb-pill[aria-pressed="true"]::before   { background: rgba(255, 255, 255, .9) !important; }
.celeb-pill--reflector[aria-pressed="true"]::before { background: rgba(5, 12, 28, .7) !important; }

.celeb-pill__count {
    display: inline-block;
    font-size: 10.5px;
    opacity: .75;
    font-variant-numeric: tabular-nums;
    padding-left: 2px;
    letter-spacing: .04em;
}

.celeb-filters__reset {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}
.celeb-filters__reset:hover {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), .3);
    background: rgba(var(--gold-rgb), .06);
}

/* Résultats en temps réel - badge compteur */
.celeb-filters__results {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.celeb-filters__results strong {
    color: var(--gold);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   GRILLE BENTO - ASYMÉTRIQUE
   ══════════════════════════════════════════════════ */
.celeb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    grid-auto-flow: dense;
}

/* Card featured (première) - span 2 colonnes sur >=900px */
@media (min-width: 900px) {
    .celeb-grid > .celeb-card:first-child {
        grid-column: span 2;
    }
    .celeb-grid > .celeb-card:first-child .celeb-card__photo {
        aspect-ratio: 16 / 11;
    }
    .celeb-grid > .celeb-card:first-child .celeb-card__name {
        font-size: clamp(26px, 2.4vw, 34px);
    }
}

.celeb-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--celeb-card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    isolation: isolate;
    --celeb-type-color: var(--gold);
    /* Lazy rendering : skippe layout/paint des cartes hors viewport.
       contain-intrinsic-size réserve l'espace pour éviter le scroll-jump. */
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
/* La première carte (hero grand format) reste toujours visible - on lui donne
   une hauteur intrinsèque plus large pour éviter tout reflow initial. */
.celeb-grid > .celeb-card:first-child {
    contain-intrinsic-size: 0 620px;
}
.celeb-card[data-type="generator"]             { --celeb-type-color: var(--celeb-gen); }
.celeb-card[data-type="manifesting-generator"] { --celeb-type-color: var(--celeb-mg); }
.celeb-card[data-type="projector"]             { --celeb-type-color: var(--celeb-proj); }
.celeb-card[data-type="manifestor"]            { --celeb-type-color: var(--celeb-mani); }
.celeb-card[data-type="reflector"]             { --celeb-type-color: var(--celeb-refl); }

/* Glow coloré par type HD - révélé au hover */
.celeb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--celeb-type-color) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
    z-index: -1;
    filter: blur(24px);
}

.celeb-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--gold-rgb), .3);
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(var(--gold-rgb), .2);
}
.celeb-card:hover::before { opacity: .28; }

body.light-mode .celeb-card:hover {
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(var(--gold-rgb), .25);
}

.celeb-card__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-input));
}
.celeb-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-out, cubic-bezier(.22, 1, .36, 1)), filter var(--transition);
    filter: saturate(.92);
}
.celeb-card:hover .celeb-card__photo img {
    transform: scale(1.05);
    filter: saturate(1.08);
}

/* Dégradé éditorial sur la photo pour donner du texte lisible en bas */
.celeb-card__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(5, 12, 28, .4) 75%,
        rgba(5, 12, 28, .85) 100%
    );
    pointer-events: none;
    transition: opacity var(--transition);
}

.celeb-card__type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 11px 5px 9px;
    background: rgba(5, 12, 28, .75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    z-index: 2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.celeb-card__type-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--celeb-type-color);
    box-shadow: 0 0 8px var(--celeb-type-color);
}

.celeb-card__profile {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 10px;
    background: rgba(var(--gold-rgb), .92);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    z-index: 2;
}

.celeb-card__body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    position: relative;
    background: var(--bg-card);
}

.celeb-card__name {
    font-family: var(--font-heading);
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.1;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -.01em;
    transition: color var(--transition-fast);
}
.celeb-card:hover .celeb-card__name { color: var(--gold-light); }
body.light-mode .celeb-card:hover .celeb-card__name { color: var(--gold-dark); }

.celeb-card__definition {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(212, 175, 55, .07);
    margin-top: 2px;
}
.celeb-card__definition::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .85;
}
body.light-mode .celeb-card__definition {
    color: var(--gold-dark);
    background: rgba(180, 140, 30, .08);
}
body.light-mode .celeb-card__definition::before { background: var(--gold-dark); }

.celeb-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
}
.celeb-card__meta span:not(:last-child)::after {
    content: '·';
    margin-left: 8px;
    opacity: .5;
    color: var(--gold);
}

.celeb-card__authority {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-style: italic;
    opacity: .85;
    letter-spacing: .02em;
}
.celeb-card__cross {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.35;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .9;
}
body.light-mode .celeb-card__cross { color: var(--text-secondary); }

/* ── Liste HD structurée (type / profil / définition / autorité / croix) ── */
.celeb-card__hd {
    list-style: none;
    margin: 6px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}
.celeb-card__hd-row {
    display: grid;
    grid-template-columns: minmax(62px, auto) 1fr;
    gap: 8px;
    align-items: baseline;
    margin: 0;
}
.celeb-card__hd-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: .85;
}
.celeb-card__hd-value {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.celeb-card__hd-row--cross .celeb-card__hd-value {
    font-style: italic;
    color: var(--text-secondary);
    opacity: .95;
}
body.light-mode .celeb-card__hd-label { color: var(--gold-dark); }
body.light-mode .celeb-card__hd-value { color: var(--text-primary); }
body.light-mode .celeb-card__hd-row--cross .celeb-card__hd-value { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════
   ÉTAT VIDE
   ══════════════════════════════════════════════════ */
.celeb-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 15px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    background: rgba(var(--gold-rgb), .02);
}
.celeb-empty strong {
    display: block;
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 500;
}
.celeb-empty::before {
    content: '∴';
    display: block;
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--gold);
    opacity: .5;
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════
   SINGLE - HERO IMMERSIF (style magazine)
   ══════════════════════════════════════════════════ */
.celeb-single {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 96px;
    position: relative;
}

.celeb-single-hero {
    position: relative;
    min-height: clamp(520px, 70vh, 780px);
    margin-bottom: 0;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    padding: 64px clamp(20px, 5vw, 80px) clamp(56px, 8vw, 104px);
}

/* Photo full-bleed en fond */
.celeb-single-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transition: transform 1.8s var(--ease-out);
    filter: saturate(1.02);
}
.celeb-single-hero:hover .celeb-single-hero__bg { transform: scale(1.08); }

/* Fallback quand pas de photo : dégradé or/bleu nuit */
.celeb-single-hero--no-photo .celeb-single-hero__bg {
    background-image:
        radial-gradient(ellipse 50% 40% at 30% 30%, rgba(var(--gold-rgb), .25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(123, 104, 238, .2) 0%, transparent 60%),
        linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    transform: none;
}

/* Overlay éditorial - dégradé bleu nuit pour lisibilité */
.celeb-single-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to bottom,
            rgba(5, 12, 28, .25) 0%,
            rgba(5, 12, 28, .55) 45%,
            rgba(5, 12, 28, .92) 85%,
            var(--bg-primary) 100%
        ),
        linear-gradient(
            to right,
            rgba(5, 12, 28, .55) 0%,
            rgba(5, 12, 28, .15) 60%,
            rgba(5, 12, 28, .35) 100%
        );
}
body.light-mode .celeb-single-hero__overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(245, 243, 239, .2) 0%,
            rgba(245, 243, 239, .45) 45%,
            rgba(245, 243, 239, .9) 88%,
            var(--bg-primary) 100%
        ),
        linear-gradient(
            to right,
            rgba(245, 243, 239, .4) 0%,
            rgba(245, 243, 239, .1) 60%,
            rgba(245, 243, 239, .25) 100%
        );
}

/* Contenu du hero - aligné éditorial gauche */
.celeb-single-hero__content {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: left;
}

.celeb-single-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    font-weight: 700;
}
.celeb-single-hero__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--gold);
}

.celeb-single-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(44px, 8vw, 104px);
    line-height: .98;
    font-weight: 400;
    margin: 0 0 24px;
    letter-spacing: -.025em;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
    max-width: 920px;
}
body.light-mode .celeb-single-hero__title {
    color: #101e3c;
    text-shadow: 0 2px 14px rgba(255, 255, 255, .5);
}

.celeb-single-hero__dates {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.4vw, 18px);
    color: rgba(255, 255, 255, .88);
    font-style: italic;
    margin-bottom: 8px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
    letter-spacing: .02em;
}
.celeb-single-hero__dates strong {
    font-style: normal;
    font-weight: 500;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.1em;
}
body.light-mode .celeb-single-hero__dates { color: rgba(16, 30, 60, .85); text-shadow: none; }
body.light-mode .celeb-single-hero__dates strong { color: #101e3c; }

.celeb-single-hero__bio {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 20px);
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
    max-width: 640px;
    margin: 20px 0 0;
    font-weight: 400;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
body.light-mode .celeb-single-hero__bio { color: rgba(16, 30, 60, .78); text-shadow: none; }

/* Crédit photo - caption éditoriale sous le bandeau de synthèse */
.celeb-photo-caption {
    max-width: 1040px;
    margin: 14px auto 0;
    padding: 0 clamp(16px, 3vw, 24px);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px 8px;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    letter-spacing: .04em;
}
.celeb-photo-caption__label {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    font-size: 10px;
    color: var(--gold);
    opacity: .85;
}
.celeb-photo-caption__sep {
    opacity: .5;
    user-select: none;
}
.celeb-photo-caption__credit a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-strong);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.celeb-photo-caption__credit a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light);
}
.celeb-photo-caption__license {
    font-variant-numeric: tabular-nums;
    font-style: italic;
}
.celeb-photo-caption__source {
    opacity: .75;
}

/* ══════════════════════════════════════════════════
   SINGLE - DATA STRIP (chevauche le hero)
   ══════════════════════════════════════════════════ */
.celeb-strip-wrapper {
    max-width: 1040px;
    margin: -56px auto 0;
    padding: 0 clamp(16px, 3vw, 24px);
    position: relative;
    z-index: 2;
}

.celeb-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(var(--gold-rgb), .08);
}
body.light-mode .celeb-strip {
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, .2),
        0 0 0 1px rgba(var(--gold-rgb), .1);
}

.celeb-strip__item {
    padding: 20px 18px;
    background: var(--bg-card);
    text-align: center;
    transition: background var(--transition-fast);
}
.celeb-strip__item:hover { background: var(--bg-input); }

.celeb-strip__label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
}
.celeb-strip__value {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -.005em;
}
/* Type : même rendu que Profil/Définition/Autorité (pas de bouton/pill) */
.celeb-strip__value--colored {
    display: inline;
    padding: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    border-radius: 0;
}

/* Lien croix : souligné pointillé discret, même teinte que le texte */
.celeb-strip__value-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--gold-rgb), .55);
    transition: color .2s ease, border-color .2s ease;
}
.celeb-strip__value-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Croix d'incarnation : nom souvent long (ex: « Croix d'Angle Droit du
   Sphinx »), on lui donne toute la largeur de la strip et on ajuste la taille
   de police pour éviter les retours à la ligne agressifs. */
.celeb-strip__item--cross {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
}
.celeb-strip__item--cross .celeb-strip__value {
    font-size: 16px;
    font-style: italic;
    color: var(--gold);
}

/* ══════════════════════════════════════════════════
   SINGLE - BG EMBED (cadre doré fin)
   ══════════════════════════════════════════════════ */
.celeb-bg-section {
    max-width: 1040px;
    margin: 64px auto 0;
    padding: 0 clamp(16px, 3vw, 24px);
}

.celeb-bg-inline {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(var(--gold-rgb), .2);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    padding: 10px clamp(12px, 2vw, 20px);
}

/* Toolbar BG célébrité : theme toggle + download (haut-droite) */
.celeb-bg-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 5;
}
.celeb-bg-toolbar .bodygraph-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(var(--gold-rgb), .25);
    border-radius: 8px;
    color: #3a3a3a;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
    padding: 0;
}
.celeb-bg-toolbar .bodygraph-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(var(--gold-rgb), .08);
}
.celeb-bg-inline.bg-dark .celeb-bg-toolbar .bodygraph-action-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.8);
}
.celeb-bg-inline.bg-dark .celeb-bg-toolbar .bodygraph-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(var(--gold-rgb), .12);
}

/* Share bar BG célébrité : mêmes codes visuels que la home */
.celeb-bg-inline .share-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 14px 0 6px;
    margin-top: 12px;
    border-top: 1px solid rgba(var(--gold-rgb), .15);
}
.celeb-bg-inline.bg-dark .share-bar { border-top-color: rgba(255,255,255,0.08); }
.celeb-bg-inline.bg-dark .share-bar .share-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.78);
}
.celeb-bg-inline.bg-dark .share-bar .share-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(var(--gold-rgb), .1);
}

.celeb-bg-inline__graph {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.celeb-bg-inline__graph svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0;
}
body.light-mode .celeb-bg-inline__graph { background: transparent; }

.celeb-bg-inline__loading,
.celeb-bg-inline__error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 60px 20px;
}
.celeb-bg-inline__loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid var(--gold);
    border-top-color: transparent;
    border-radius: 50%;
    animation: celeb-spin 1s linear infinite;
    margin-right: 12px;
}
.celeb-bg-inline__error { color: var(--danger, #c0354a); }
@keyframes celeb-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   SINGLE - ANALYSE (éditorial long-read)
   ══════════════════════════════════════════════════ */
.celeb-analysis-wrap {
    max-width: 720px;
    margin: 72px auto 0;
    padding: 0 clamp(16px, 3vw, 24px);
    position: relative;
}

.celeb-analysis__header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}
.celeb-analysis__header-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 12px;
}
.celeb-analysis__header-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    margin: 0;
    letter-spacing: -.02em;
    color: var(--text-primary);
    line-height: 1.1;
}

.celeb-analysis {
    position: relative;
    padding: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.celeb-analysis__lead {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 32px;
    font-style: italic;
    text-align: center;
    font-weight: 400;
}

/* Lettrine dorée sur premier paragraphe - typo magazine */
.celeb-analysis > p:first-of-type::first-letter,
.celeb-analysis p.has-dropcap::first-letter {
    font-family: var(--font-heading);
    font-size: 78px;
    line-height: .85;
    float: left;
    margin: 8px 14px -4px 0;
    color: var(--gold);
    font-weight: 500;
    padding: 0 2px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.celeb-analysis h2 {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    margin: 56px 0 20px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 14px;
}
/* Trait or décoratif sous chaque h2 */
.celeb-analysis h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: linear-gradient(to right, var(--gold), transparent);
}

.celeb-analysis h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    margin: 36px 0 14px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -.005em;
}

.celeb-analysis p {
    margin: 0 0 22px;
}
.celeb-analysis strong { color: var(--text-primary); font-weight: 600; }
.celeb-analysis em     { color: var(--gold-light); font-style: italic; }
body.light-mode .celeb-analysis em { color: var(--gold-dark); }

.celeb-analysis a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--gold-rgb), .35);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.celeb-analysis a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
}

.celeb-analysis blockquote {
    border-left: 2px solid var(--gold);
    margin: 36px 0;
    padding: 6px 0 6px 28px;
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.5;
    font-weight: 400;
    position: relative;
}
.celeb-analysis blockquote::before {
    content: '"';
    position: absolute;
    left: 4px;
    top: -10px;
    font-size: 60px;
    color: var(--gold);
    opacity: .4;
    font-family: var(--font-heading);
    line-height: 1;
    pointer-events: none;
}

.celeb-analysis ul,
.celeb-analysis ol { margin: 0 0 26px 1.3em; }
.celeb-analysis li { margin-bottom: 10px; }
.celeb-analysis ul li::marker { color: var(--gold); }

.celeb-analysis hr {
    border: 0;
    margin: 48px auto;
    width: 60px;
    text-align: center;
    overflow: visible;
}
.celeb-analysis hr::after {
    content: '∴';
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--gold);
    opacity: .6;
}

/* ══════════════════════════════════════════════════
   SINGLE - SOFT PAYWALL (glassmorphism or)
   ══════════════════════════════════════════════════ */
.celeb-paywall {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 24px);
}

.celeb-paywall__cta {
    position: relative;
    z-index: 2;
    margin: -80px auto 48px;
    max-width: 580px;
    text-align: center;
    padding: 36px 32px 32px;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), .14), rgba(var(--gold-rgb), .05));
    border: 1px solid rgba(var(--gold-rgb), .35);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 30px 80px -30px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}
.celeb-paywall__cta::before {
    content: '✦';
    display: block;
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--gold);
    margin-bottom: 8px;
    opacity: .8;
}
.celeb-paywall__cta h3 {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 500;
    margin: 0 0 14px;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -.01em;
}
.celeb-paywall__cta p {
    font-family: var(--font-body);
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}
.celeb-paywall__btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.celeb-paywall__btn {
    display: inline-block;
    padding: 13px 28px;
    background: var(--gold);
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    border: 1px solid var(--gold);
}
.celeb-paywall__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--gold-rgb), .35);
    background: var(--gold-light);
}
.celeb-paywall__btn--ghost {
    background: transparent;
    color: var(--gold);
    border: 1px solid rgba(var(--gold-rgb), .4);
}
.celeb-paywall__btn--ghost:hover {
    background: rgba(var(--gold-rgb), .1);
    color: var(--gold-light);
}

/* Fade dégradé sur l'analyse quand paywall actif */
.celeb-analysis.is-gated {
    position: relative;
    max-height: 900px;
    overflow: hidden;
}
.celeb-analysis.is-gated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 460px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(5, 12, 28, .9) 70%,
        var(--bg-primary) 100%
    );
    pointer-events: none;
}
body.light-mode .celeb-analysis.is-gated::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(245, 243, 239, .9) 70%,
        var(--bg-primary) 100%
    );
}

/* ══════════════════════════════════════════════════
   SINGLE - FOOTER (crédits & CTA final)
   ══════════════════════════════════════════════════ */
.celeb-outro {
    max-width: 720px;
    margin: 64px auto 0;
    padding: 48px clamp(16px, 3vw, 24px) 0;
    text-align: center;
    border-top: 1px solid var(--border);
    position: relative;
}
.celeb-outro::before {
    content: '✦';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    padding: 0 14px;
    color: var(--gold);
    font-size: 20px;
    font-family: var(--font-heading);
    line-height: 1;
}

.celeb-outro__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    margin-bottom: 32px;
}
.celeb-outro__cta:hover {
    background: var(--gold);
    color: var(--bg-primary);
    transform: translateY(-2px);
}
.celeb-outro__cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}
.celeb-outro__cta:hover svg { transform: translateX(4px); }

.celeb-credits {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.8;
    letter-spacing: .02em;
}
.celeb-credits a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--border);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.celeb-credits a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.celeb-credits__row { margin-bottom: 6px; }
.celeb-credits__row:last-child { margin-bottom: 0; }
.celeb-credits__row strong { color: var(--text-secondary); font-weight: 600; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   DRAWER MOBILE - bouton + header + footer + backdrop
   (par défaut cachés ; activés sous 900px)
   ══════════════════════════════════════════════════ */
.celeb-filters-toggle,
.celeb-filters-backdrop,
.celeb-filters__header,
.celeb-filters__footer { display: none; }

@media (max-width: 900px) {
    .celeb-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }

    /* Bouton flottant "Filtres" (sticky haut) */
    .celeb-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 12px;
        z-index: 40;
        margin: 0 0 16px;
        padding: 11px 18px 11px 16px;
        background: var(--bg-card);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .03em;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
        transition: transform .2s ease, box-shadow .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .celeb-filters-toggle:active { transform: scale(.97); }
    .celeb-filters-toggle svg { width: 18px; height: 18px; color: var(--gold); }
    body.light-mode .celeb-filters-toggle svg { color: var(--gold-dark); }
    .celeb-filters-toggle__badge {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--gold);
        color: var(--bg-primary);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        transform: scale(0);
        transition: transform .2s ease;
    }
    .celeb-filters-toggle.has-active .celeb-filters-toggle__badge { transform: scale(1); }

    /* Backdrop */
    .celeb-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(5, 12, 28, .72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    body.celeb-drawer-open .celeb-filters-backdrop { opacity: 1; pointer-events: auto; }

    /* Le form devient un sheet bas */
    .celeb-filters {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 100;
        max-height: 85vh;
        margin: 0;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        gap: 14px;
        background: var(--bg-card);
        border-radius: 22px 22px 0 0;
        border: 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.2,.7,.2,1);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.celeb-drawer-open .celeb-filters { transform: translateY(0); }

    /* Header sticky dans le drawer */
    .celeb-filters__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg-card);
        padding: 14px 0 12px;
        margin: 0 0 4px;
    }
    .celeb-filters__header::before {
        content: '';
        position: absolute;
        top: 6px; left: 50%;
        width: 44px; height: 4px;
        background: var(--border);
        border-radius: 2px;
        transform: translateX(-50%);
    }
    .celeb-filters__title {
        font-family: var(--font-heading);
        font-size: 18px;
        font-weight: 500;
        color: var(--text-primary);
        letter-spacing: -.01em;
        padding-top: 8px;
    }
    .celeb-filters__close {
        width: 36px; height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 50%;
        color: var(--text-secondary);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .celeb-filters__close svg { width: 16px; height: 16px; }

    /* Rows : chaque section devient un bloc vertical */
    .celeb-filters__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        overflow-x: visible;
        flex-wrap: wrap;
        padding: 4px 0 14px;
        border-bottom: 1px solid var(--border);
    }
    .celeb-filters__row:last-of-type { border-bottom: 0; padding-bottom: 6px; }
    .celeb-filters__label {
        border-right: 0;
        padding: 0;
        min-width: auto;
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    /* Wrapper flex-wrap pour les pills dans le sheet */
    .celeb-filters__row > .celeb-pill {
        flex-shrink: 1;
    }
    .celeb-filters__row {
        display: flex;
    }
    .celeb-pill { flex-shrink: 0; font-size: 12.5px; padding: 7px 12px; }
    .celeb-filters__reset,
    .celeb-filters__results { margin-left: 0; }

    /* Footer CTA sticky bas du sheet */
    .celeb-filters__footer {
        display: block;
        position: sticky;
        bottom: 0;
        padding: 10px 0 4px;
        background: linear-gradient(to top, var(--bg-card) 70%, transparent);
        margin: 0 -4px -6px;
    }
    .celeb-filters__apply {
        width: 100%;
        padding: 14px 20px;
        background: var(--gold);
        color: var(--bg-primary);
        border: 0;
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(212, 175, 55, .3);
        -webkit-tap-highlight-color: transparent;
    }
    .celeb-filters__apply:active { transform: scale(.98); }
    body.light-mode .celeb-filters__apply {
        background: var(--gold-dark);
        color: #fff;
    }

    /* Hide scroll body behind drawer */
    body.celeb-drawer-open { overflow: hidden; }

    .celeb-single-hero { min-height: clamp(420px, 60vh, 560px); padding: 48px 20px 72px; }
    .celeb-strip-wrapper { margin-top: -44px; }
    .celeb-photo-caption { justify-content: center; text-align: center; }
}

@media (max-width: 768px) {
    .celeb-wrapper { padding: 16px 14px 48px; }
    .celeb-hero { padding: 24px 10px 32px; }
    .celeb-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 14px;
    }
    .celeb-grid > .celeb-card:first-child { grid-column: span 1; }
    .celeb-grid > .celeb-card:first-child .celeb-card__photo { aspect-ratio: 3 / 4; }
    .celeb-card__name { font-size: 18px; }
    .celeb-card__body { padding: 14px 14px 18px; }

    .celeb-search { margin-bottom: 28px; }
    .celeb-search__field { padding: 5px 5px 5px 18px; gap: 10px; }
    .celeb-search__input { font-size: 15px; padding: 12px 0; }
    .celeb-search__kbd { display: none; }

    .celeb-single-hero {
        min-height: 400px;
        padding: 40px 16px 64px;
        align-items: flex-end;
    }
    .celeb-single-hero__bio { display: none; }

    .celeb-strip { grid-template-columns: repeat(2, 1fr); }
    .celeb-strip__item { padding: 16px 12px; }
    .celeb-strip__value { font-size: 15px; }

    .celeb-bg-section { margin-top: 48px; }
    .celeb-bg-inline { border-radius: var(--radius-lg); padding: 10px; }
    .celeb-bg-inline__graph { min-height: 340px; }

    .celeb-analysis-wrap { margin-top: 52px; }
    .celeb-analysis { font-size: 16px; line-height: 1.8; }
    .celeb-analysis h2 { font-size: 24px; margin: 40px 0 16px; }
    .celeb-analysis h3 { font-size: 19px; margin: 28px 0 12px; }
    .celeb-analysis > p:first-of-type::first-letter,
    .celeb-analysis p.has-dropcap::first-letter { font-size: 60px; }
    .celeb-analysis blockquote { font-size: 19px; padding-left: 20px; }

    .celeb-paywall__cta {
        margin: -60px auto 32px;
        padding: 28px 22px 26px;
    }
    .celeb-paywall__btn { padding: 12px 22px; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION & PRINT
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .celeb-card,
    .celeb-card__photo img,
    .celeb-pill,
    .celeb-paywall__btn,
    .celeb-search__field,
    .celeb-single-hero__bg,
    .celeb-outro__cta svg { transition: none; }
    .celeb-bg-inline__loading::before { animation: none; }
    .celeb-search__kbd::before { animation: none; }
}

@media print {
    .celeb-filters,
    .celeb-search,
    .celeb-paywall__cta,
    .site-header,
    .site-footer { display: none; }
    .celeb-single-hero { min-height: auto; }
    .celeb-single-hero__bg,
    .celeb-single-hero__overlay { display: none; }
    .celeb-single-hero__title,
    .celeb-single-hero__dates,
    .celeb-single-hero__bio { color: #000 !important; text-shadow: none !important; }
    .celeb-analysis.is-gated { max-height: none; overflow: visible; }
    .celeb-analysis.is-gated::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   AFFINITÉS - bloc « Tes 5 affinités célébrités »
   Même design que .hd-nav-archive (bandeau vert des archives CPT)
   ══════════════════════════════════════════════════════════════════ */

.celeb-affinity {
    max-width: 1240px;
    margin: 1.75rem auto 2.25rem;
    padding: 1.75rem 1.75rem 1.5rem;
    background:
        radial-gradient(ellipse at top left, rgba(139,195,74,0.18), transparent 65%),
        linear-gradient(135deg, #1b3a20 0%, #0f2814 100%);
    border: 1px solid rgba(102,187,106,0.55);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 30px rgba(46,125,50,0.25),
        0 0 0 1px rgba(102,187,106,0.15);
    position: relative;
    overflow: hidden;
    color: #fff;
}
.celeb-affinity::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8bc34a, transparent);
    pointer-events: none;
}

.celeb-affinity__header {
    text-align: center;
    margin-bottom: 1.25rem;
    position: relative;
}

.celeb-affinity__source-note {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #aed581;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.celeb-affinity__source-note span {
    display: inline-block;
    margin-right: 0.25rem;
    opacity: 0.9;
}
.celeb-affinity__source-note strong {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.celeb-affinity__source-note em {
    color: #fff;
    font-style: normal;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.celeb-affinity__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 0.35rem;
    letter-spacing: 0.01em;
    color: #fff;
    font-weight: 500;
}

.celeb-affinity__subtitle {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    margin: 0;
}

.celeb-affinity__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.celeb-affinity__item { margin: 0; }

.celeb-affinity__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(76,175,80,0.08);
    border: 1px solid rgba(76,175,80,0.35);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    min-height: 100%;
}

.celeb-affinity__card:hover,
.celeb-affinity__card:focus-visible {
    transform: translateY(-2px);
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.6);
    box-shadow: 0 8px 22px rgba(46,125,50,0.3);
    outline: 2px solid rgba(174,213,129,0.5);
    outline-offset: 2px;
    text-decoration: none;
}

.celeb-affinity__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.celeb-affinity__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
    align-items: center;
}

.celeb-affinity__name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    color: #fff;
}

.celeb-affinity__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.celeb-affinity__type {
    color: rgba(255,255,255,0.75);
}
.celeb-affinity__type.is-match {
    color: #aed581;
    font-weight: 600;
}

.celeb-affinity__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    background: rgba(76,175,80,0.2);
    color: #aed581;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.celeb-affinity__shared {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
}

/* ── CTA fallback « Sauvegarde ton BG » ── */
.celeb-affinity__cta {
    text-align: center;
    padding: 1rem 1rem 0.5rem;
}
.celeb-affinity__cta-msg {
    font-size: 1rem;
    margin: 0 0 1rem;
    color: rgba(255,255,255,0.9);
}
.celeb-affinity__cta-link {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: linear-gradient(135deg, #81c784 0%, #388e3c 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 2px 8px rgba(46,125,50,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.celeb-affinity__cta-link:hover,
.celeb-affinity__cta-link:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 6px 18px rgba(46,125,50,0.55);
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
    text-decoration: none;
}

/* ── Mode jour (light-mode) - palette vert clair/parchemin ── */
body.light-mode .celeb-affinity {
    background:
        radial-gradient(ellipse at top left, rgba(76,175,80,0.2), transparent 65%),
        linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
    border: 1px solid rgba(46,125,50,0.5);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 6px 24px rgba(46,125,50,0.2);
    color: #1b2e0f;
}
body.light-mode .celeb-affinity::before {
    background: linear-gradient(90deg, transparent, #2e7d32, transparent);
}
body.light-mode .celeb-affinity__source-note {
    color: #2e7d32;
}
body.light-mode .celeb-affinity__source-note strong,
body.light-mode .celeb-affinity__source-note em {
    color: #1b2e0f;
}
body.light-mode .celeb-affinity__title { color: #1b2e0f; }
body.light-mode .celeb-affinity__subtitle { color: #2e4a1c; }

body.light-mode .celeb-affinity__card {
    background: rgba(46,125,50,0.05);
    border-color: rgba(46,125,50,0.3);
}
body.light-mode .celeb-affinity__card:hover,
body.light-mode .celeb-affinity__card:focus-visible {
    background: rgba(76,175,80,0.12);
    border-color: #2e7d32;
    box-shadow: 0 8px 20px rgba(46,125,50,0.18);
    outline-color: rgba(46,125,50,0.4);
}
body.light-mode .celeb-affinity__photo {
    border-color: rgba(0,0,0,0.08);
}
body.light-mode .celeb-affinity__name { color: #1b2e0f; }
body.light-mode .celeb-affinity__type { color: rgba(30,50,20,0.75); }
body.light-mode .celeb-affinity__type.is-match { color: #2e7d32; }
body.light-mode .celeb-affinity__score {
    background: rgba(76,175,80,0.18);
    color: #2e7d32;
}
body.light-mode .celeb-affinity__shared { color: rgba(30,50,20,0.7); }

body.light-mode .celeb-affinity__cta-msg { color: #2e4a1c; }
body.light-mode .celeb-affinity__cta-link {
    background: linear-gradient(135deg, #66bb6a 0%, #2e7d32 100%);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 2px 8px rgba(46,125,50,0.4);
}

/* ── Variante HOME - intégrée à la charte home (gold + bleu nuit) ──
   Override complet du design vert "nav-archive" pour se fondre sous
   l'analyse du BG (même famille visuelle que .chart-recap / .tab-content).  */
.celeb-affinity--home {
    margin: 2.5rem auto 1.5rem;
    padding: 2rem 2rem 1.75rem;
    background: var(--bg-card);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 6px 24px rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    overflow: visible;
}
.celeb-affinity--home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(260px, 60%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    pointer-events: none;
    opacity: 0.7;
}

.celeb-affinity--home .celeb-affinity__header {
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.celeb-affinity--home .celeb-affinity__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.celeb-affinity__title-suffix {
    color: var(--text-secondary, rgba(255,255,255,0.72));
    font-weight: 400;
    font-style: normal;
}
.celeb-affinity__title-name {
    color: var(--gold);
    font-style: italic;
    font-weight: 500;
}
body.light-mode .celeb-affinity__title-suffix { color: #3a3850; }
body.light-mode .celeb-affinity__title-name { color: #8b6914; }
.celeb-affinity--home .celeb-affinity__subtitle {
    margin-top: 0.4rem;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
}
.celeb-affinity--home .celeb-affinity__subtitle a {
    color: var(--gold);
    font-style: normal;
    text-decoration: none;
    border-bottom: 1px dotted rgba(201, 168, 76, 0.5);
    transition: border-color 0.2s ease;
}
.celeb-affinity--home .celeb-affinity__subtitle a:hover {
    border-bottom-color: var(--gold);
}

/* ── Bloc référence : rappel du BG courant sous le titre ── */
.celeb-affinity__reference {
    margin-top: 0.9rem;
    padding: 0.7rem 1rem 0.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    background: rgba(201, 168, 76, 0.04);
}
.celeb-affinity__reference-synth {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    line-height: 1.4;
}
.celeb-affinity__reference-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.celeb-affinity__reference-label {
    font-family: 'Lora', serif;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.celeb-affinity__reference-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gold);
}
.celeb-affinity__reference-sep {
    color: var(--gold);
    opacity: 0.45;
    font-size: 0.7rem;
}
.celeb-affinity__reference-cross {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.88rem;
    font-style: italic;
    letter-spacing: 0.04em;
    color: rgba(201, 168, 76, 0.85);
    text-align: center;
    margin-top: 0.15rem;
}

body.light-mode .celeb-affinity__reference {
    border-top-color: rgba(139, 105, 20, 0.14);
    border-bottom-color: rgba(139, 105, 20, 0.14);
    background: rgba(139, 105, 20, 0.04);
}
body.light-mode .celeb-affinity__reference-label { color: rgba(58, 56, 80, 0.75); }
body.light-mode .celeb-affinity__reference-value { color: #8b6914; }
body.light-mode .celeb-affinity__reference-sep   { color: rgba(139, 105, 20, 0.45); }
body.light-mode .celeb-affinity__reference-cross { color: rgba(139, 105, 20, 0.8); }

@media (max-width: 640px) {
    .celeb-affinity__reference { padding: 0.6rem 0.7rem 0.5rem; }
    .celeb-affinity__reference-synth { gap: 0.25rem 0.4rem; }
    .celeb-affinity__reference-label { font-size: 0.62rem; letter-spacing: 0.1em; }
    .celeb-affinity__reference-value { font-size: 0.92rem; }
    .celeb-affinity__reference-cross { font-size: 0.82rem; }
}

.celeb-affinity--home .celeb-affinity__list {
    grid-template-columns: repeat(3, 1fr);
    max-width: 780px;
    margin: 0 auto;
    gap: 1.25rem;
}

.celeb-affinity--home .celeb-affinity__card {
    background: rgba(201, 168, 76, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 12px;
    padding: 0.85rem 0.85rem 1rem;
    gap: 0.7rem;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.celeb-affinity--home .celeb-affinity__card:hover,
.celeb-affinity--home .celeb-affinity__card:focus-visible {
    transform: translateY(-3px);
    background: rgba(201, 168, 76, 0.09);
    border-color: rgba(201, 168, 76, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    outline: 2px solid rgba(201, 168, 76, 0.35);
    outline-offset: 2px;
}

.celeb-affinity--home .celeb-affinity__photo {
    border-radius: 10px;
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.celeb-affinity--home .celeb-affinity__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.005em;
    line-height: 1.25;
}
.celeb-affinity--home .celeb-affinity__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.72rem;
    gap: 0.18rem;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-family: 'Lora', serif;
    line-height: 1.35;
    text-align: center;
}
.celeb-affinity--home .celeb-affinity__meta span {
    color: var(--text-muted);
}
.celeb-affinity--home .celeb-affinity__meta span:first-child {
    color: var(--gold);
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.01em;
}
.celeb-affinity--home .celeb-affinity__cross {
    margin-top: 0.35rem;
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-primary);
    opacity: 0.85;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
}
.celeb-affinity--home .celeb-affinity__cross-label {
    font-style: normal;
    font-weight: 600;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.75);
}
.celeb-affinity--home .celeb-affinity__cascade-note {
    margin: 1rem 0 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.75;
}
.celeb-affinity--home .celeb-affinity__type {
    color: var(--text-muted);
    font-family: 'Lora', serif;
    font-style: italic;
}
.celeb-affinity--home .celeb-affinity__type.is-match {
    color: var(--gold);
    font-style: normal;
    font-weight: 600;
}
.celeb-affinity--home .celeb-affinity__score {
    background: transparent;
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.76rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.celeb-affinity--home .celeb-affinity__shared {
    color: var(--text-muted);
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    opacity: 0.85;
}

/* CTA "Sauvegarder mon BG" : bouton or sur bleu nuit */
.celeb-affinity--home .celeb-affinity__cta-msg {
    font-family: 'Lora', serif;
    font-style: italic;
    color: var(--text-muted);
}
.celeb-affinity--home .celeb-affinity__cta-link {
    background: linear-gradient(135deg, var(--gold) 0%, #8b6914 100%);
    color: #0b1428;
    border: 1px solid rgba(201, 168, 76, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 10px rgba(201, 168, 76, 0.25);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.celeb-affinity--home .celeb-affinity__cta-link:hover,
.celeb-affinity--home .celeb-affinity__cta-link:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 6px 18px rgba(201, 168, 76, 0.4);
    outline-color: rgba(201, 168, 76, 0.6);
}

/* ── Mode jour site : garde la charte gold sombre + parchemin ── */
body.light-mode .celeb-affinity--home {
    background: var(--bg-card);
    border: 1px solid rgba(139, 105, 20, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 6px 20px rgba(139, 105, 20, 0.08);
    color: var(--text-primary);
}
body.light-mode .celeb-affinity--home::before {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.55;
}
body.light-mode .celeb-affinity--home .celeb-affinity__header {
    border-bottom-color: rgba(139, 105, 20, 0.12);
}
body.light-mode .celeb-affinity--home .celeb-affinity__title { color: var(--gold); }
body.light-mode .celeb-affinity--home .celeb-affinity__subtitle { color: var(--text-muted); }
body.light-mode .celeb-affinity--home .celeb-affinity__card {
    background: rgba(139, 105, 20, 0.03);
    border-color: rgba(139, 105, 20, 0.18);
}
body.light-mode .celeb-affinity--home .celeb-affinity__card:hover,
body.light-mode .celeb-affinity--home .celeb-affinity__card:focus-visible {
    background: rgba(139, 105, 20, 0.07);
    border-color: rgba(139, 105, 20, 0.42);
    box-shadow: 0 8px 20px rgba(139, 105, 20, 0.15);
    outline-color: rgba(139, 105, 20, 0.35);
}
body.light-mode .celeb-affinity--home .celeb-affinity__photo {
    border-color: rgba(139, 105, 20, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
body.light-mode .celeb-affinity--home .celeb-affinity__name { color: var(--text-primary); }
body.light-mode .celeb-affinity--home .celeb-affinity__type { color: var(--text-muted); }
body.light-mode .celeb-affinity--home .celeb-affinity__type.is-match { color: var(--gold); }
body.light-mode .celeb-affinity--home .celeb-affinity__meta { color: var(--text-muted); }
body.light-mode .celeb-affinity--home .celeb-affinity__meta span:first-child { color: var(--gold); }
body.light-mode .celeb-affinity--home .celeb-affinity__cross { color: var(--text-primary); }
body.light-mode .celeb-affinity--home .celeb-affinity__cross-label { color: rgba(139, 105, 20, 0.85); }
body.light-mode .celeb-affinity--home .celeb-affinity__cascade-note { color: var(--text-muted); }
body.light-mode .celeb-affinity--home .celeb-affinity__score {
    background: transparent;
    border-color: rgba(139, 105, 20, 0.4);
    color: var(--gold);
}
body.light-mode .celeb-affinity--home .celeb-affinity__shared { color: var(--text-muted); }
body.light-mode .celeb-affinity--home .celeb-affinity__cta-link {
    color: #fff;
    background: linear-gradient(135deg, #b98d28 0%, #8b6914 100%);
}

@media (max-width: 640px) {
    .celeb-affinity--home {
        padding: 1.35rem 1.1rem 1.25rem;
        margin: 1.5rem auto 1rem;
    }
    .celeb-affinity--home .celeb-affinity__title {
        font-size: 1.2rem;
    }
    .celeb-affinity--home .celeb-affinity__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.7rem;
    }
    .celeb-affinity--home .celeb-affinity__name {
        font-size: 0.95rem;
    }
    .celeb-affinity--home .celeb-affinity__card {
        padding: 0.6rem 0.55rem 0.75rem;
    }
}

/* ── Responsive (liste grid legacy, non utilisée en mode slider) ── */
@media (max-width: 900px) {
    .celeb-affinity__list:not(.celeb-affinity__list--slider) {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .celeb-affinity {
        padding: 1.25rem 1rem;
    }
    .celeb-affinity__title {
        font-size: 1.15rem;
    }
}
@media (max-width: 600px) {
    .celeb-affinity__list:not(.celeb-affinity__list--slider) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══════════════════════════════════════════════════
   SLIDER HORIZONTAL - toutes les célébrités matchantes
   Scroll-snap + flèches prev/next (wireSlider côté JS)
   ══════════════════════════════════════════════════ */
.celeb-affinity__slider {
    position: relative;
    margin: 0 -0.25rem;
    padding: 0 3rem; /* espace pour les flèches sur desktop */
}
/* Fades latéraux pour indiquer la scrollabilité - disparaissent en début/fin */
.celeb-affinity__slider::before,
.celeb-affinity__slider::after {
    content: '';
    position: absolute;
    top: 0.5rem; bottom: 1rem;
    width: 2.6rem;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.celeb-affinity__slider::before {
    left: 3rem;
    background: linear-gradient(90deg,
        var(--bg-primary, #050c1c) 0%,
        rgba(5, 12, 28, 0) 100%);
}
.celeb-affinity__slider::after {
    right: 3rem;
    background: linear-gradient(270deg,
        var(--bg-primary, #050c1c) 0%,
        rgba(5, 12, 28, 0) 100%);
}
.celeb-affinity__slider.is-at-start::before { opacity: 0; }
.celeb-affinity__slider.is-at-end::after    { opacity: 0; }
.celeb-affinity__slider.is-static::before,
.celeb-affinity__slider.is-static::after    { opacity: 0; }

/* Home : pas de fades latéraux (« Les célébrités avec un Body Graph proche ») */
.celeb-affinity__slider--home::before,
.celeb-affinity__slider--home::after { display: none; }

body.light-mode .celeb-affinity__slider::before {
    background: linear-gradient(90deg, #fdf7e9 0%, rgba(253, 247, 233, 0) 100%);
}
body.light-mode .celeb-affinity__slider::after {
    background: linear-gradient(270deg, #fdf7e9 0%, rgba(253, 247, 233, 0) 100%);
}

.celeb-affinity__list--slider {
    display: flex;
    grid-template-columns: none; /* override grid global */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 0.5rem 0.25rem 1rem;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 168, 76, 0.4) transparent;
    -webkit-overflow-scrolling: touch;
}
.celeb-affinity__list--slider::-webkit-scrollbar { height: 6px; }
.celeb-affinity__list--slider::-webkit-scrollbar-track { background: transparent; }
.celeb-affinity__list--slider::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.35);
    border-radius: 999px;
}

.celeb-affinity__list--slider .celeb-affinity__item {
    flex: 0 0 calc((100% - 4 * 1rem) / 5);
    min-width: 160px;
    max-width: 220px;
    scroll-snap-align: start;
}

/* Dans variante home : même cadence que Nav BG (5 cards desktop) - lisible + scannable.
   Override nécessaire car grid global impose repeat(3, 1fr) sur .celeb-affinity--home. */
.celeb-affinity--home .celeb-affinity__list--slider {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    gap: 0.85rem;
    padding: 0.5rem 0.25rem 1.1rem;
}
.celeb-affinity--home .celeb-affinity__list--slider .celeb-affinity__item {
    flex: 0 0 calc((100% - 4 * 0.85rem) / 5);
    min-width: 150px;
    max-width: 210px;
    scroll-snap-align: start;
}

/* ── Boutons de navigation prev/next ── */
.celeb-affinity__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(201, 168, 76, 0.38);
    background: rgba(11, 20, 40, 0.82);
    color: var(--gold, #c9a84c);
    font-size: 1.6rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.celeb-affinity__nav:hover:not(:disabled),
.celeb-affinity__nav:focus-visible:not(:disabled) {
    background: rgba(201, 168, 76, 0.18);
    border-color: rgba(201, 168, 76, 0.75);
    transform: translateY(-50%) scale(1.05);
    outline: 2px solid rgba(201, 168, 76, 0.35);
    outline-offset: 2px;
}
.celeb-affinity__nav:disabled {
    opacity: 0.35;
    cursor: default;
}
.celeb-affinity__nav--prev { left: 0; }
.celeb-affinity__nav--next { right: 0; }

/* Si tout tient sans scroll possible : masque les flèches et ramène le padding */
.celeb-affinity__slider.is-static { padding: 0 0.25rem; }
.celeb-affinity__slider.is-static .celeb-affinity__nav { display: none; }

/* Mobile : on retire le padding de 3rem (réservé aux flèches desktop) qui mange
   l'espace, et on baisse le min-width des cards pour permettre à 2-3 cards
   d'être visibles sans saturer l'écran (lecture multi-card scrollable). */
@media (max-width: 640px) {
    .celeb-affinity__slider { padding: 0 0.25rem; }
    .celeb-affinity__slider::before { left: 0.25rem; }
    .celeb-affinity__slider::after  { right: 0.25rem; }
    .celeb-affinity__nav { display: none; }
    .celeb-affinity__list--slider { gap: 0.7rem; padding: 0.4rem 0.25rem 0.85rem; }
    .celeb-affinity__list--slider .celeb-affinity__item {
        flex: 0 0 42%;
        min-width: 130px;
        max-width: 180px;
    }
    .celeb-affinity--home .celeb-affinity__list--slider {
        gap: 0.65rem;
        padding: 0.4rem 0.25rem 0.85rem;
    }
    .celeb-affinity--home .celeb-affinity__list--slider .celeb-affinity__item {
        flex: 0 0 44%;
        min-width: 130px;
        max-width: 180px;
    }
}

/* ── Vert (archive Jaccard) : recolorise les flèches ── */
.celeb-affinity:not(.celeb-affinity--home) .celeb-affinity__nav {
    color: #aed581;
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(10, 25, 12, 0.75);
}
.celeb-affinity:not(.celeb-affinity--home) .celeb-affinity__nav:hover:not(:disabled),
.celeb-affinity:not(.celeb-affinity--home) .celeb-affinity__nav:focus-visible:not(:disabled) {
    background: rgba(76, 175, 80, 0.22);
    border-color: rgba(76, 175, 80, 0.7);
    outline-color: rgba(174, 213, 129, 0.45);
}

/* ── Badge croix - mise en valeur du match ── */
.celeb-affinity__cross {
    font-size: 0.72rem;
    color: var(--text-muted, rgba(255,255,255,0.65));
    font-style: italic;
    line-height: 1.3;
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.celeb-affinity__cross.is-match {
    color: var(--gold, #c9a84c);
    font-style: normal;
    font-weight: 600;
}

/* ── Light mode pour le slider ── */
body.light-mode .celeb-affinity__list--slider {
    scrollbar-color: rgba(139, 105, 20, 0.45) transparent;
}
body.light-mode .celeb-affinity__list--slider::-webkit-scrollbar-thumb {
    background: rgba(139, 105, 20, 0.45);
}
body.light-mode .celeb-affinity__nav {
    background: rgba(253, 247, 233, 0.92);
    border-color: rgba(139, 105, 20, 0.35);
    color: #8b6914;
    box-shadow: 0 4px 12px rgba(139, 105, 20, 0.15);
}
body.light-mode .celeb-affinity__nav:hover:not(:disabled),
body.light-mode .celeb-affinity__nav:focus-visible:not(:disabled) {
    background: rgba(139, 105, 20, 0.12);
    border-color: rgba(139, 105, 20, 0.55);
}
body.light-mode .celeb-affinity:not(.celeb-affinity--home) .celeb-affinity__nav {
    background: rgba(241, 248, 233, 0.92);
    border-color: rgba(46, 125, 50, 0.4);
    color: #2e7d32;
}
body.light-mode .celeb-affinity:not(.celeb-affinity--home) .celeb-affinity__nav:hover:not(:disabled),
body.light-mode .celeb-affinity:not(.celeb-affinity--home) .celeb-affinity__nav:focus-visible:not(:disabled) {
    background: rgba(76, 175, 80, 0.14);
    border-color: rgba(46, 125, 50, 0.7);
}

/* ── Responsive slider : ajuste la largeur des cards ── */
@media (max-width: 1100px) {
    .celeb-affinity__list--slider .celeb-affinity__item,
    .celeb-affinity--home .celeb-affinity__list--slider .celeb-affinity__item {
        flex-basis: calc((100% - 3 * 1rem) / 4);
    }
}
@media (max-width: 900px) {
    .celeb-affinity__slider { padding: 0 2.4rem; }
    .celeb-affinity__list--slider .celeb-affinity__item,
    .celeb-affinity--home .celeb-affinity__list--slider .celeb-affinity__item {
        flex-basis: calc((100% - 2 * 1rem) / 3);
        min-width: 150px;
    }
    .celeb-affinity__nav { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
    .celeb-affinity__slider { padding: 0 2.6rem; }
    .celeb-affinity__slider::before { left: 2.6rem; width: 1.8rem; }
    .celeb-affinity__slider::after  { right: 2.6rem; width: 1.8rem; }
    .celeb-affinity__list--slider,
    .celeb-affinity--home .celeb-affinity__list--slider {
        gap: 0.8rem;
    }
    .celeb-affinity__list--slider .celeb-affinity__item,
    .celeb-affinity--home .celeb-affinity__list--slider .celeb-affinity__item {
        flex-basis: calc((100% - 0.8rem) / 2);
        min-width: 140px;
    }
    /* Touch targets WCAG : ≥ 44×44px */
    .celeb-affinity__nav {
        width: 44px; height: 44px; font-size: 1.5rem;
    }
}
@media (max-width: 420px) {
    .celeb-affinity__slider { padding: 0 2.4rem; }
    .celeb-affinity__slider::before { left: 2.4rem; }
    .celeb-affinity__slider::after  { right: 2.4rem; }
    .celeb-affinity__list--slider .celeb-affinity__item,
    .celeb-affinity--home .celeb-affinity__list--slider .celeb-affinity__item {
        flex-basis: 78%;
        min-width: 0;
        max-width: none;
    }
    .celeb-affinity__nav { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* ══════════════════════════════════════════════════
   PERFECT MATCH - card mise en avant (home)
   Déclenché quand level cascade === 4 ET même croix
   ══════════════════════════════════════════════════ */
.celeb-affinity--home .celeb-affinity__item.is-perfect-match {
    position: relative;
}
.celeb-affinity--home .celeb-affinity__card.is-perfect-match {
    position: relative;
    border: 2px solid #4caf50;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.14), rgba(76, 175, 80, 0.04));
    box-shadow:
        0 0 0 1px rgba(76, 175, 80, 0.3),
        0 8px 28px rgba(46, 125, 50, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: visible;
}
.celeb-affinity--home .celeb-affinity__card.is-perfect-match:hover,
.celeb-affinity--home .celeb-affinity__card.is-perfect-match:focus-visible {
    border-color: #66bb6a;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.08));
    box-shadow:
        0 0 0 1px rgba(76, 175, 80, 0.5),
        0 12px 32px rgba(46, 125, 50, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    outline-color: rgba(174, 213, 129, 0.5);
}

/* Badge "Même croix" / "Même variante" - sobre, intégré à la palette verte HD.
 * Pastille discrète en coin haut-droit. Pas d'animation, pas d'uppercase,
 * contraste modéré. Signale le match sans crier. */
.celeb-affinity__match-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(46, 125, 50, 0.28);
    color: #c8e6c9;
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    border: 1px solid rgba(174, 213, 129, 0.32);
    backdrop-filter: blur(2px);
    z-index: 2;
    pointer-events: none;
}

/* Light mode : garde le vert HD saturé mais adapte la luminosité */
body.light-mode .celeb-affinity--home .celeb-affinity__card.is-perfect-match {
    border-color: #2e7d32;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.16), rgba(76, 175, 80, 0.06));
    box-shadow:
        0 0 0 1px rgba(46, 125, 50, 0.35),
        0 6px 20px rgba(46, 125, 50, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.light-mode .celeb-affinity__match-badge {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.28);
}

/* ══════════════════════════════════════════════════
   RECHERCHE CROIX DANS LA BARRE PRINCIPALE (hero)
   ══════════════════════════════════════════════════ */
.celeb-search--cross {
    margin-top: 0.75rem;
}
.celeb-search--cross .celeb-search__field {
    background: rgba(139, 105, 20, 0.05);
    border-color: rgba(201, 168, 76, 0.28);
}
.celeb-search--cross .celeb-search__field:focus-within {
    border-color: rgba(201, 168, 76, 0.65);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}
body.light-mode .celeb-search--cross .celeb-search__field {
    background: rgba(139, 105, 20, 0.04);
    border-color: rgba(139, 105, 20, 0.32);
}

/* ══════════════════════════════════════════════════
   AFFINITÉS CÉLÉBRITÉS - TEASER MEMBRES (gated)
   ══════════════════════════════════════════════════ */
.celeb-affinity--gated .celeb-affinity__gate {
    margin-top: 1.25rem;
    padding: 1.75rem 1.5rem;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at top, rgba(201, 168, 76, 0.10) 0%, transparent 70%),
        linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(201, 168, 76, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.celeb-affinity--gated .celeb-affinity__gate::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.35), rgba(139, 92, 246, 0.2), rgba(201, 168, 76, 0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}
.celeb-affinity__gate-msg {
    margin: 0 0 1.1rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-primary, #e8e6f0);
    letter-spacing: 0.01em;
}
.celeb-affinity__gate-msg strong {
    color: var(--gold, #c9a84c);
    font-weight: 600;
}
.celeb-affinity__gate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 0.85rem;
}
.celeb-affinity__gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
    white-space: nowrap;
}
.celeb-affinity__gate-btn--primary {
    background: linear-gradient(135deg, #c9a84c 0%, #b8953d 100%);
    color: #1a1530;
    border: 1px solid rgba(201, 168, 76, 0.6);
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.celeb-affinity__gate-btn--primary:hover,
.celeb-affinity__gate-btn--primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: #0d0a1e;
}
.celeb-affinity__gate-btn--ghost {
    background: transparent;
    color: var(--text-primary, #e8e6f0);
    border: 1px solid rgba(201, 168, 76, 0.35);
}
.celeb-affinity__gate-btn--ghost:hover,
.celeb-affinity__gate-btn--ghost:focus-visible {
    background: rgba(201, 168, 76, 0.08);
    border-color: rgba(201, 168, 76, 0.6);
    transform: translateY(-1px);
}
.celeb-affinity__gate-btn:focus-visible {
    outline: 2px solid rgba(201, 168, 76, 0.8);
    outline-offset: 3px;
}

/* Light mode */
body.light-mode .celeb-affinity--gated .celeb-affinity__gate {
    background:
        radial-gradient(ellipse at top, rgba(139, 105, 20, 0.08) 0%, transparent 70%),
        linear-gradient(135deg, rgba(139, 105, 20, 0.05) 0%, rgba(107, 70, 193, 0.04) 100%);
    border-color: rgba(139, 105, 20, 0.25);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 8px 24px rgba(139, 105, 20, 0.12);
}
body.light-mode .celeb-affinity--gated .celeb-affinity__gate::before {
    background: linear-gradient(135deg, rgba(139, 105, 20, 0.4), rgba(107, 70, 193, 0.25), rgba(139, 105, 20, 0.4));
    opacity: 0.5;
}
body.light-mode .celeb-affinity__gate-msg { color: #3a3850; }
body.light-mode .celeb-affinity__gate-msg strong { color: #8b6914; }
body.light-mode .celeb-affinity__gate-btn--primary {
    background: linear-gradient(135deg, #c9a84c 0%, #a0822f 100%);
    color: #fff;
    border-color: rgba(139, 105, 20, 0.5);
    box-shadow: 0 4px 14px rgba(139, 105, 20, 0.3);
}
body.light-mode .celeb-affinity__gate-btn--primary:hover,
body.light-mode .celeb-affinity__gate-btn--primary:focus-visible {
    color: #fff;
    box-shadow: 0 6px 20px rgba(139, 105, 20, 0.45);
}
body.light-mode .celeb-affinity__gate-btn--ghost {
    color: #3a3850;
    border-color: rgba(139, 105, 20, 0.35);
}
body.light-mode .celeb-affinity__gate-btn--ghost:hover,
body.light-mode .celeb-affinity__gate-btn--ghost:focus-visible {
    background: rgba(139, 105, 20, 0.06);
    border-color: rgba(139, 105, 20, 0.55);
}

/* Mobile */
@media (max-width: 640px) {
    .celeb-affinity--gated .celeb-affinity__gate {
        padding: 1.4rem 1.1rem;
        margin-top: 1rem;
    }
    .celeb-affinity__gate-msg {
        font-size: 0.92rem;
    }
    .celeb-affinity__gate-actions {
        flex-direction: column;
        gap: 0.55rem;
    }
    .celeb-affinity__gate-btn {
        width: 100%;
        padding: 0.75rem 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .celeb-affinity__gate-btn { transition: none; }
    .celeb-affinity__gate-btn:hover,
    .celeb-affinity__gate-btn:focus-visible { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────── */
/* Bloc compatibilité célébrités (composite Quantum)                         */
/* ──────────────────────────────────────────────────────────────────────── */
.celeb-compat {
    margin-top: 1.4rem;
}
.celeb-compat[hidden] { display: none; }

/* Accent teal pour distinguer du bloc affinités (gold) */
.celeb-compat--home::before {
    background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
    opacity: 0.6;
}
.celeb-compat__title {
    color: #4ecdc4 !important;
}
body.light-mode .celeb-compat__title {
    color: #2a9d8f !important;
}

.celeb-compat__subtitle em {
    color: #4ecdc4;
    font-style: italic;
}
body.light-mode .celeb-compat__subtitle em { color: #2a9d8f; }

/* Carte compat : fond teal délicat */
.celeb-compat__card {
    position: relative;
    background: rgba(78, 205, 196, 0.04) !important;
    border-color: rgba(78, 205, 196, 0.22) !important;
}
.celeb-compat__card:hover,
.celeb-compat__card:focus-visible {
    background: rgba(78, 205, 196, 0.09) !important;
    border-color: rgba(78, 205, 196, 0.5) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
    outline-color: rgba(78, 205, 196, 0.4) !important;
}
body.light-mode .celeb-compat__card {
    background: rgba(42, 157, 143, 0.05) !important;
    border-color: rgba(42, 157, 143, 0.24) !important;
}
body.light-mode .celeb-compat__card:hover,
body.light-mode .celeb-compat__card:focus-visible {
    background: rgba(42, 157, 143, 0.1) !important;
    border-color: rgba(42, 157, 143, 0.5) !important;
    outline-color: rgba(42, 157, 143, 0.4) !important;
}

/* Badge score en coin supérieur droit */
.celeb-compat__score-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    padding: 0.22rem 0.55rem;
    background: linear-gradient(135deg, #4ecdc4, #2a9d8f);
    color: #051418;
    border-radius: 999px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.35);
    z-index: 2;
}
.celeb-compat__score-num {
    font-size: 1rem;
}
.celeb-compat__score-unit {
    font-size: 0.62rem;
    opacity: 0.75;
    font-weight: 500;
}
body.light-mode .celeb-compat__score-badge {
    background: linear-gradient(135deg, #2a9d8f, #1d6e65);
    color: #f5fffb;
    box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
}

/* Label qualitatif ("Magnétique", "Harmonieuse", …) */
.celeb-compat__label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #4ecdc4;
    margin-top: 0.1rem;
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}
body.light-mode .celeb-compat__label { color: #2a9d8f; }

/* Pastilles par type de canal */
.celeb-compat__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}
.celeb-compat__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    font-family: 'Lora', serif;
    font-size: 0.66rem;
    border-radius: 999px;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    line-height: 1.3;
}
.celeb-compat__chip strong {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
}
/* Couleurs alignées sur COMP_COLORS (hd-engine.js) */
.celeb-compat__chip--compagnonnage {
    background: rgba(78, 205, 196, 0.14);
    border-color: rgba(78, 205, 196, 0.4);
    color: #4ecdc4;
}
.celeb-compat__chip--electro {
    background: rgba(232, 212, 139, 0.14);
    border-color: rgba(232, 212, 139, 0.4);
    color: #e8d48b;
}
.celeb-compat__chip--dominance {
    background: rgba(244, 162, 97, 0.12);
    border-color: rgba(244, 162, 97, 0.35);
    color: #f4a261;
}
.celeb-compat__chip--compromis {
    background: rgba(179, 157, 219, 0.12);
    border-color: rgba(179, 157, 219, 0.35);
    color: #b39ddb;
}
body.light-mode .celeb-compat__chip--compagnonnage {
    background: rgba(42, 157, 143, 0.1);
    border-color: rgba(42, 157, 143, 0.35);
    color: #2a9d8f;
}
body.light-mode .celeb-compat__chip--electro {
    background: rgba(139, 105, 20, 0.1);
    border-color: rgba(139, 105, 20, 0.35);
    color: #8b6914;
}
body.light-mode .celeb-compat__chip--dominance {
    background: rgba(196, 98, 45, 0.1);
    border-color: rgba(196, 98, 45, 0.35);
    color: #c4622d;
}
body.light-mode .celeb-compat__chip--compromis {
    background: rgba(126, 87, 194, 0.1);
    border-color: rgba(126, 87, 194, 0.35);
    color: #7e57c2;
}

/* Meta : formule + portes partagées (centré, séparé) */
.celeb-compat__meta {
    margin-top: 0.2rem;
}
.celeb-compat__meta span:first-child {
    color: #4ecdc4 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 0.82rem;
    font-style: italic;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}
body.light-mode .celeb-compat__meta span:first-child { color: #2a9d8f !important; }

.celeb-compat__ctx {
    margin-top: 0.35rem;
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.78;
    text-align: center;
}

/* Note pédagogique sous le slider */
.celeb-compat__note {
    margin-top: 1.2rem;
    text-align: center;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Lora', serif;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .celeb-compat__score-badge {
        top: 0.4rem;
        right: 0.4rem;
        padding: 0.18rem 0.45rem;
    }
    .celeb-compat__score-num { font-size: 0.9rem; }
    .celeb-compat__label { font-size: 0.88rem; }
    .celeb-compat__chip { font-size: 0.6rem; padding: 0.12rem 0.38rem; }
    .celeb-compat__chip strong { font-size: 0.7rem; }
}


/* ══════════════════════════════════════════════════
   Bloc célébrités sur single-croix (variante exacte + autres)
   ══════════════════════════════════════════════════ */
.celeb-affinity--croix {
    margin: 2.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(180deg,
        rgba(11, 20, 40, 0.55) 0%,
        rgba(5, 12, 28, 0.35) 100%);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 16px;
}
body.light-mode .celeb-affinity--croix {
    background: linear-gradient(180deg, #fdf7e9 0%, rgba(250, 241, 220, 0.6) 100%);
    border-color: rgba(180, 140, 60, 0.25);
}

.celeb-affinity__group {
    margin-top: 1.5rem;
}
.celeb-affinity__group:first-of-type { margin-top: 1rem; }

.celeb-affinity__group-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-primary, #f0e6d4);
}
body.light-mode .celeb-affinity__group-title { color: #3e2e14; }

.celeb-affinity__group-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd88a, #c9a84c);
    color: #1a1208;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.celeb-affinity__group-count {
    font-weight: 400;
    color: var(--text-secondary, #bfb5a4);
    font-size: 0.92rem;
}
body.light-mode .celeb-affinity__group-count { color: #6b5a3a; }

/* Groupe « variante exacte » : fond doré discret pour mettre en valeur */
.celeb-affinity__group--exact {
    padding: 0.75rem 0.85rem 0.5rem;
    background: radial-gradient(ellipse at top,
        rgba(201, 168, 76, 0.12) 0%,
        rgba(201, 168, 76, 0.03) 60%,
        transparent 100%);
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 12px;
}
body.light-mode .celeb-affinity__group--exact {
    background: radial-gradient(ellipse at top,
        rgba(201, 168, 76, 0.18) 0%,
        rgba(201, 168, 76, 0.05) 60%,
        transparent 100%);
    border-color: rgba(180, 140, 60, 0.42);
}

.celeb-affinity__footer-cta {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(11, 20, 40, 0.5);
    border: 1px dashed rgba(201, 168, 76, 0.3);
    border-radius: 12px;
    text-align: center;
}
body.light-mode .celeb-affinity__footer-cta {
    background: #fff8ea;
    border-color: rgba(180, 140, 60, 0.4);
}
.celeb-affinity__footer-cta p {
    margin: 0 0 0.75rem 0;
    font-size: 0.96rem;
    color: var(--text-secondary, #cfc5b2);
}
body.light-mode .celeb-affinity__footer-cta p { color: #4a3820; }

/* Le slider --croix n'a pas de fade latéraux trop marqués (le bloc a déjà un fond) */
.celeb-affinity__slider--croix::before,
.celeb-affinity__slider--croix::after { display: none; }

/* ══════════════════════════════════════════════════
   Cartes single-croix : mirroring exact du style home
   (gold + Cormorant + meta empilée centrée)
   ══════════════════════════════════════════════════ */
.celeb-affinity--croix .celeb-affinity__card {
    background: rgba(201, 168, 76, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 12px;
    padding: 0.85rem 0.85rem 1rem;
    gap: 0.7rem;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.celeb-affinity--croix .celeb-affinity__card:hover,
.celeb-affinity--croix .celeb-affinity__card:focus-visible {
    transform: translateY(-3px);
    background: rgba(201, 168, 76, 0.09);
    border-color: rgba(201, 168, 76, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    outline: 2px solid rgba(201, 168, 76, 0.35);
    outline-offset: 2px;
}

.celeb-affinity--croix .celeb-affinity__photo {
    border-radius: 10px;
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.celeb-affinity--croix .celeb-affinity__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary, #f0e6d4);
    letter-spacing: 0.005em;
    line-height: 1.25;
}

.celeb-affinity--croix .celeb-affinity__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.72rem;
    gap: 0.18rem;
    margin-top: 0.2rem;
    color: var(--text-muted, #9a9080);
    font-family: 'Lora', serif;
    line-height: 1.35;
    text-align: center;
    justify-content: flex-start;
}
.celeb-affinity--croix .celeb-affinity__meta span {
    color: var(--text-muted, #9a9080);
}
.celeb-affinity--croix .celeb-affinity__meta span:first-child {
    color: var(--gold, #c9a84c);
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.01em;
}

.celeb-affinity--croix .celeb-affinity__cross {
    margin-top: 0.35rem;
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-primary, #f0e6d4);
    opacity: 0.85;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
}

/* Light mode mirroring */
body.light-mode .celeb-affinity--croix .celeb-affinity__name { color: var(--text-primary); }
body.light-mode .celeb-affinity--croix .celeb-affinity__meta,
body.light-mode .celeb-affinity--croix .celeb-affinity__meta span { color: var(--text-muted); }
body.light-mode .celeb-affinity--croix .celeb-affinity__meta span:first-child { color: var(--gold); }
body.light-mode .celeb-affinity--croix .celeb-affinity__cross { color: var(--text-primary); }

/* ═════════════════════════════════════════════════════════════════════
 * Celeb affinity teaser (visiteur anonyme post-chart)
 * 3 cards floutées + fade + CTA signup - remplace l'ancien mur "Réservé"
 * ═══════════════════════════════════════════════════════════════════ */
.celeb-affinity--teaser { position: relative; }
.celeb-affinity-teaser { position: relative; margin: 1.2rem 0 0; }
.celeb-affinity-teaser__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1rem; list-style: none; padding: 0; margin: 0;
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
@media (max-width: 640px) {
    .celeb-affinity-teaser__grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
}
.celeb-affinity-teaser__card {
    position: relative; border-radius: 12px; overflow: hidden;
    background: rgba(201, 168, 76, 0.05);
    border: 1px solid rgba(201, 168, 76, 0.15);
    aspect-ratio: 3 / 4;
    transition: transform 0.4s cubic-bezier(.2,.9,.3,1.1);
}
.celeb-affinity-teaser__card:nth-child(2) { transform: translateY(-4px); }
.celeb-affinity-teaser__card:nth-child(3) { transform: translateY(-10px); opacity: 0.85; }
.celeb-affinity-teaser__photo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center top;
    filter: blur(18px) saturate(0.75) brightness(0.75);
    transform: scale(1.15);
}
.celeb-affinity-teaser__label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
    color: #f5f2ea; text-align: center;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.celeb-affinity-teaser__name {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 1.05rem; letter-spacing: 0.25em;
}
.celeb-affinity-teaser__meta {
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(201, 168, 76, 0.85);
}
.celeb-affinity-teaser__fade {
    position: absolute; left: 0; right: 0; bottom: -12px; height: 80px;
    background: linear-gradient(180deg, transparent, var(--bg-primary, #0b1428));
    pointer-events: none;
}
.celeb-affinity__gate--teaser {
    margin-top: 0.6rem; padding: 1rem 1.2rem 1.2rem; text-align: center;
}
.celeb-affinity__gate--teaser .celeb-affinity__gate-msg {
    margin: 0 0 0.9rem; font-size: 0.98rem; color: var(--text-primary);
}
body.light-mode .celeb-affinity-teaser__fade {
    background: linear-gradient(180deg, transparent, var(--bg-primary, #fdfaf2));
}
body.light-mode .celeb-affinity-teaser__card {
    background: rgba(139, 105, 20, 0.04);
    border-color: rgba(139, 105, 20, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════
 * STICKY BAR résumé filtres - apparaît quand on scrolle sous le form
 * Compacte : compteur + filtres actifs + bouton "Modifier"
 * ═══════════════════════════════════════════════════════════════════ */
.celeb-sticky-bar {
    position: sticky;
    top: 64px; /* hauteur header ≈ 64px, ajustable */
    z-index: var(--z-sticky);
    margin: 0 0 1rem;
    padding: 0.55rem 0.9rem;
    background: rgba(13, 24, 48, 0.92);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}
.celeb-sticky-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.celeb-sticky-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.celeb-sticky-bar__count strong {
    color: var(--gold);
    font-weight: 700;
}
.celeb-sticky-bar__active {
    flex: 1 1 auto;
    opacity: 0.78;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.celeb-sticky-bar__edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 999px;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.celeb-sticky-bar__edit:hover {
    background: rgba(201, 168, 76, 0.2);
    border-color: rgba(201, 168, 76, 0.5);
}
body.light-mode .celeb-sticky-bar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(139, 105, 20, 0.2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
body.light-mode .celeb-sticky-bar__edit {
    background: rgba(139, 105, 20, 0.08);
    border-color: rgba(139, 105, 20, 0.25);
    color: #8b6914;
}
@media (max-width: 768px) {
    .celeb-sticky-bar { display: none; } /* Drawer mobile déjà présent */
}