:root {
    --accent:#7c3aed;     
    --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --space-lg:clamp(24px,3.4vw,56px);
    --font-splash:"Jersey 10",system-ui;
    --border:#e5e7eb;
    --muted:#475569;
    --space:clamp(12px,1.4vw,20px); 
    --site-header-height: 72px; /* ajuste si besoin */
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.page-title{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:var(--space)}
.page-title h1{
    margin:0;
    font-size:clamp(16px,3.2vw,30px);
    line-height:1.1}

/* Zone de contrôles à droite du titre, responsive et sans débordement */
/* .page-title{
    display:grid;
     grid-template-columns: 1fr auto;
    align-items:center; 
    gap:12px; 
    margin-bottom:var(--space);
} */
.page-title { position: relative; z-index: 60; }

@media (max-width:820px){ .page-title{ grid-template-columns:1fr } }

.page-controls{
    display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
}

.filter-input{
    min-width: 220px; max-width: clamp(200px, 30vw, 320px);
    padding:8px 10px; border:1px solid #d1d5db; border-radius:10px;
    font-family: var(--font-mono); font-size:.9rem;
}
@media (max-width:500px){
    .filter-input{ flex:1 1 100%; max-width:100% }
}

.badge{
    font-family:var(--font-mono);
    font-size:.9em;
    color:var(--muted);
    border:1px var(--border);
    border-radius:10px;
    padding:6px 10px;
    background:#fafafa}
/* ===== Grille de cartes (collector) ===== */


/* Grille – plafonnée à 3 colonnes max */
.container #grid{
    display: grid;
    gap: var(--space);
    align-items: start;                    /* évite l’étirement vertical */
    grid-template-columns: repeat(1, minmax(0, 1fr));   /* mobile: 1 col */
}

/* Tablette (≥ 641px) : 2 colonnes */
@media (min-width: 641px){
    .container #grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Laptop & + (≥ 1024px) : 3 colonnes (max) */
@media (min-width: 1024px){
    .container #grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tags{
    display:flex; gap:6px; flex-wrap:wrap;
    margin-bottom:6px;
}
.tag{
    font-family: var(--font-mono);
    font-size:clamp(.78rem, 2.4vw, .9rem);; 
    padding:3px 10px;
    border-radius:999px; 
    border:1px solid #e5e7eb;
    background:#fbfbfb; 
    color:#111827;
    white-space: normal;
    word-break: break-word;
}

/* Carte : base gris (old style), sélection violette */
/* .card{
    position: relative; cursor: pointer; overflow: clip;
    border-radius: 16px; padding: 10px;
    background:#fff; border: 1px solid #e6e7eb;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.10); }
.card.selected{
    border-color: color-mix(in srgb, var(--accent) 60%, #e6e7eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) inset;
} */
.card{
    position: relative; cursor: pointer; overflow: clip;
    border-radius: 16px; padding: 10px;
    background:#fff; border: 1px solid #e6e7eb;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    transition:
      transform .08s ease,
      box-shadow .2s ease,
      border-color .2s ease,
      border-width .2s ease;
}

.card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Card sélectionnée : liseré épais et teinté selon --mode-accent */
.card.selected{
    border-width: 2px;
    border-color: var(--mode-accent);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--mode-accent) 22%, transparent) inset,
      0 10px 26px rgba(0,0,0,.10);
}

.name-stats{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-bottom:6px;
}
.name{ font-weight:800; font-size:1rem;flex-wrap:wrap;}
.stats{ display:flex; gap:6px; }
.stat{
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; border-radius:10px;
    border:1px solid #ececec; background:#fafafa; color:#111827;
    font-family: var(--font-mono); 
    font-size:.8rem;
}
.stat .ico{ inline-size:16px; block-size:16px; display:inline-block; }

/* Chips type/langue (ex. Guide, FR) */
.types{ display:flex; gap:6px; flex-wrap:wrap; }
.type{
  font-family: var(--font-mono); font-size:.72rem; padding:2px 6px;
  border-radius:999px; border:1px solid #e5e7eb; background:#fbfbfb; color:#111827;
}

/* Illustration compacte (serrée autour de l’image) */
.portrait{
  aspect-ratio: 5 / 4;
  background:#f7f7fb;
  display:grid; place-items:center;
  border:1px solid #ececec; border-radius:10px;
  margin-bottom:6px; padding:4px;
}
.portrait img{ 
  max-width:70%;
  position:relative;
  z-index: 2;     
  max-height:70%;
  object-fit:contain;
  image-rendering:pixelated;
}

.portrait{ position:relative } /* pour l’overlay */

.punchline{
    position:relative; inset:auto 8px 8px 8px; /* bas, marges internes */
    display:inline-block; max-width:calc(100% - 12px);
    z-index: 10;
    font-family: var(--font-splash);           /* Jersey 10 */
    font-size: clamp(.95rem, 2.6vw, 1.1rem);
    line-height:1.25;
    color:#111827;
    background: rgba(255,255,255,.82);
    border:1px solid #e5e7eb; border-radius:10px;
    padding:6px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;    /* ✅ 2 lignes max */
    line-clamp: 2;      
    text-align:center;
    pointer-events:none; /* ne gêne pas les clics sur la card */
    overflow:hidden; text-overflow:ellipsis; white-space:normal;
}

.punchline::before{ content: "« "; }
.punchline::after { content: " »"; }
/* === Mobile : punchline sort sous l’image === */
@media (max-width: 480px){
    .punchline{
    position: static;              /* plus overlay */
    display: block;
    margin-top: 6px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;           /* fond clair, pas semi-transparent */
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    color: #111827;
    text-align: center;
    font-size: clamp(1rem, 4vw, 1.05rem);
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 8px;
    -webkit-line-clamp: unset;     /* pas de coupure */
    line-clamp: unset;
    white-space: normal;
    }

    /* Ajuste le container portrait pour laisser respirer */
    .portrait{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    }

    /* On garde les guillemets */
    .punchline::before{ content: "« "; }
    .punchline::after { content: " »"; }
}

/* Corps compact + micro-action “Chatter” */
.card-body{ display:grid; gap:6px; }

.row-title{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.row-title .title{ font-weight:700; font-size:.82rem; color:#111827; }

.traits{ display:grid; gap:2px; }
/* Phrase d’intro */
.intro-line{
    margin: 6px 0 6px;
    padding: 0 2px;
    text-align: left;
    font-size: clamp(.8rem, 2vw, 0.9rem);
    line-height: 1.3;
    color: #374151;                /* ✅ même teinte que les bullets */
    font-family: var(--font-base); /* cohérent avec le corps du texte */
}

/* Liste des traits : même couleur, mais garde son espacement “bullet style” */
.traits ul{
    margin: 0;
    margin-top: 6px;
    padding-left: 18px;            /* on garde le léger retrait */
}
.traits li{
    margin: 0 0 0px 0;
    line-height: 1.3;
    font-size: clamp(.8rem, 2vw, 0.9rem);
    color: #374151;                /* ✅ identique à l’intro */
    list-style: disc;
}


/* Micro-action (à droite du titre “Compétences”) */
.micro-action{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-mono); font-size:.95rem;
    font-weight:700;
    color: var(--accent); text-decoration:none;
    border:1px dashed #e6e7eb; padding:4px 10px; border-radius:8px;
}
.micro-action:hover{ background:#faf6ff; }
.micro-action .swap{ inline-size:20px; block-size:20px; display:inline-block; }

/* Étoile de rareté (si tu l’utilises dans .name) */
.rarity{ font-size:.9rem; line-height:1; margin-left:6px; }
.rarity[data-rarity="rare"]{ color:#f59e0b; }
.rarity[data-rarity="epic"]{ color:#8b5cf6; }
.rarity[data-rarity="legend"]{ color:#06b6d4; }

/* Holo discret (optionnel) */
.card::after{
    content:""; position:absolute; inset:-20%;
    background: conic-gradient(from 180deg at 50% 50%,
    #ffffff00 0deg, #ffffff4a 60deg, #ffffff00 120deg,
    #ffffff4a 180deg, #ffffff00 240deg, #ffffff4a 300deg, #ffffff00 360deg);
    mix-blend-mode: overlay; opacity:.18; transform: rotate(0deg);
    transition: opacity .2s ease, transform .8s ease; pointer-events:none;
}
.card:hover::after{ opacity:.28; transform: rotate(10deg); }

@media (prefers-reduced-motion: reduce){
    .card, .card::after{ transition: none !important; }
}

/* ===== CTA fin de page (violet) ===== */
.final-cta-wrap{position:sticky;bottom:12px;display:flex;justify-content:center;margin-top:var(--space-lg);pointer-events:none}
.final-cta{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:800;text-decoration:none;transform:scale(.96);opacity:.0;transition:transform .3s ease, opacity .3s ease}
.final-cta.show{transform:scale(1);opacity:1}
.final-cta:hover{filter:saturate(115%)}
/* ===== Footer solide (newsletter + liens + réseaux) ===== */
/* --- Empêche les coupures dans "Nom + stickers" --- */
.name-stats{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
    flex-wrap: wrap;           /* ✅ autorise le retour à la ligne */
}
.name-stats .name{
    flex: 1 1 120px;           /* prend la place dispo */
    min-width: 0;              /* ✅ autorise le shrink sans overflow */
}
.name-stats .stats{
    flex: 0 1 auto;            /* se réduit si besoin */
}
.stat{
    white-space: nowrap;       /* chaque badge reste sur 1 ligne */
    font-size: clamp(.72rem, 3vw, .8rem);
    padding: 2px 6px;
}
.stat .ico{
    inline-size: clamp(14px, 3.8vw, 16px);
    block-size: clamp(14px, 3.8vw, 16px);
}

/* --- Titre "Compétences" + action Chatter --- */
.row-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap: wrap;          /* ✅ passe sur 2 lignes si trop étroit */
}
.row-title .title{
    flex: 1 1 auto;           /* pousse l'action à droite ou au-dessous */
    min-width: 0;
}

/* "Chatter" plus lisible mais responsive */
.micro-action{
    font-size: clamp(.88rem, 4vw, .95rem);  /* ✅ grand mais fluide */
    font-weight: 700;
    padding: clamp(3px, 1vw, 4px) clamp(8px, 2vw, 10px);
    gap: clamp(6px, 2vw, 8px);
    max-width: 100%;                         /* ne dépasse jamais */
}
.micro-action .swap{
    inline-size: clamp(18px, 4.2vw, 20px);
    block-size: clamp(18px, 4.2vw, 20px);
}
.micro-actions {
    display: flex;
    gap: clamp(6px, 2vw, 8px);
    flex-wrap: wrap;                /* ✅ évite tout débordement sur mobile */
    justify-content: flex-end;
    align-items:center; max-width:100%;
}

.micro-actions .micro-action {
    background: #f9f9fb;
    border: 1px dashed #e6e7eb;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: clamp(.82rem, 3vw, .9rem);
    font-weight: 700;
    padding: clamp(3px, 1vw, 4px) clamp(8px, 2vw, 10px);
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 2vw, 8px);
    transition: background .2s ease;
}
.micro-actions .micro-action:hover {
    background: #f4f4ff;
}
/* --- Ajustements très petits écrans (≤ 420px) --- */
@media (max-width:420px){
    /* Place l’action "Chatter" sous le titre si ça coince */
    .row-title .title{ flex-basis: 100%; }
    .micro-action{ margin-top: 4px; }
    .row-title{ justify-content:center; text-align:center }
    .micro-actions{ justify-content:center }
    /* Laisse un peu d’air aux stickers au-dessus de l’image */
    .name-stats .stats{ margin-top: 2px; }
}
.site-header, header.site-header, .topbar {
  position: fixed;      /* ou sticky si c’est ton choix, mais positionné */
  top: 0; left: 0; right: 0;
  z-index: 1000;        /* au-dessus du reste */
}
body { padding-top: var(--site-header-height); }
.page-toolbar {
  position: sticky;
  top: var(--site-header-height);      /* clé : se caler sous le header */
  z-index: 10;                         /* sous le header (1000) */
  background: rgba(255,255,255,.85);   /* lisible sur scroll */
  backdrop-filter: blur(6px);
}
.page-toolbar .badge { position: relative; z-index: 0; }
/* --- ALIGNEMENT DE LA TOOLBAR ET DU CHAMP DE FILTRE --- */
/* On enveloppe tout le bloc du haut */
.page-toolbar {
  display: flex;
  align-items: center;             /* aligne verticalement le h1 + boutons + champ */
  justify-content: space-between;  /* laisse de l’espace entre gauche et droite */
  gap: 1rem;                       /* petit espace entre groupes */
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Le bloc gauche : Galerie + boutons */
.page-toolbar .left-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Le bloc droit : le filtre */
.page-toolbar .page-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Ajuste l’input pour le rapprocher du bord gauche sans trop coller */
.page-toolbar .page-controls input[type="search"],
.page-toolbar .page-controls input[type="text"] {
  margin-left: 0;          /* supprime marges inutiles */
  padding: 6px 10px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  width: clamp(180px, 25vw, 260px);  /* adaptatif */
}
/* === BANNDEAU GALERIE PLUS COMPACT === */

/* Vue desktop / tablette : on réduit un peu tout */
@media (max-width: 1024px) {
  :root {
    --site-header-height: 60px; /* header un peu plus bas */
  }

  /* nav plus fine (prend le dessus sur common.css) */
  .header .nav {
    padding-block: 8px;
  }

  .page-toolbar {
    padding: 0.35rem 0.75rem;  /* moins de gras en haut/bas */
    gap: 0.5rem;
  }

  .page-toolbar .left-group {
    gap: 0.5rem;               /* rapproche titre + badges */
  }

  /* .page-toolbar .splash {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
  } */

  .page-toolbar .badge {
    padding: 4px 8px;          /* boutons plus courts */
    font-size: 0.8rem;
  }

  .page-toolbar .filter-input {
    padding: 5px 8px;
    font-size: 0.85rem;
    width: clamp(170px, 30vw, 230px); /* un peu plus compact */
  }
}

/* Très petits écrans : tout reste serré mais lisible */
@media (max-width: 600px) {
  .page-toolbar {
    flex-direction: column;    /* 1 bloc au-dessus, filtre juste dessous */
    align-items: stretch;
    gap: 0.4rem;
  }

  .page-toolbar .left-group {
    justify-content: flex-start;
    row-gap: 0.3rem;
  }

  .page-toolbar .badge {
    font-size: 0.78rem;
    padding-inline: 6px;
  }

  .page-toolbar .page-controls {
    width: 100%;
  }

  .page-toolbar .filter-input {
    width: 100%;               /* barre de filtre bord-à-bord */
  }
}


:root{
  /* --mode-xp: #e7be09;   */
  --mode-1p: #f78503;  
  --mode-2p: #f05ba5; 
  --mode-3p: #ee16d1;
  --mode-xp: #ee16d1;
  --mode-accent: var(--accent); /* utilisé par les cards */
}

/* Inactif = contour coloré + texte coloré */
.badge[data-mode="1p"][aria-pressed="false"]{ border-color: var(--mode-1p); color: var(--mode-1p); }
.badge[data-mode="2p"][aria-pressed="false"]{ border-color: var(--mode-2p); color: var(--mode-2p); }
.badge[data-mode="3p"][aria-pressed="false"]{ border-color: var(--mode-3p); color: var(--mode-3p); }
.badge[data-mode="xp"][aria-pressed="false"]{ border-color: var(--mode-xp); color: var(--mode-xp); }

/* Hover (inactif) : léger fond */
/* Hover (inactif) pour chaque mode : léger fond teinté */
.badge[data-mode="1p"][aria-pressed="false"]:hover{
  background: color-mix(in srgb, var(--mode-1p) 30%, #ffffff);
  color: var(--mode-1p);
}

.badge[data-mode="2p"][aria-pressed="false"]:hover{
  background: color-mix(in srgb, var(--mode-2p) 30%, #ffffff);
  color: var(--mode-2p);
}

.badge[data-mode="3p"][aria-pressed="false"]:hover{
  background: color-mix(in srgb, var(--mode-3p) 30%, #ffffff);
  color: var(--mode-3p);
}

.badge[data-mode="xp"][aria-pressed="false"]:hover{
  background: color-mix(in srgb, var(--mode-xp) 30%, #ffffff);
  color: var(--mode-xp);
}

/* Hover générique pour les badges qui ne sont PAS des modes */
.badge:not([data-mode])[aria-pressed="false"]:hover,
.badge[data-filter-text]:hover{
  background: #c0c0c0;   /* petit jaune doux */
  color: #111827;
}


/* Actif = remplissage coloré + texte blanc */
.badge[data-mode="1p"][aria-pressed="true"]{ background: color-mix(in srgb, var(--mode-1p) 92%, #fff); color:#fff; border-color: var(--mode-1p); }
.badge[data-mode="2p"][aria-pressed="true"]{ background: color-mix(in srgb, var(--mode-2p) 92%, #fff); color:#fff; border-color: var(--mode-2p); }
.badge[data-mode="3p"][aria-pressed="true"]{ background: color-mix(in srgb, var(--mode-3p) 92%, #fff); color:#fff; border-color: var(--mode-3p); }
.badge[data-mode="xp"][aria-pressed="true"]{ background: color-mix(in srgb, var(--mode-xp) 92%, #fff); color:#fff; border-color: var(--mode-xp); }
.badge[data-filter-text][aria-pressed="true"]{ background: color-mix(in srgb, #5f5f5f 92%, #d3d3d3); color:#fff; border-color: #303030; }

/* =========================
   Cards : hover/selected = couleur du mode actif
   ========================= */

.card:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--mode-accent) 40%, #e6e7eb);
}

/* sélection */
.card.selected{
  border-color: color-mix(in srgb, var(--mode-accent) 60%, #e6e7eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-accent) 22%, transparent) inset;
}

/* rangée nom + icônes + stats */
.card .name-stats {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* le nom reste collé à gauche */
.card .name-stats .name {
  flex: 0 0 auto;
}

/* les stats (👍 142) collées à droite */
.card .name-stats .stats {
  flex: 0 0 auto;
  margin-left: 0.35rem;
}

/* rangée d’icônes au centre */
.card-icons-row {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px; /* évite les sauts quand pas encore chargées */
}

/* même style que dans la modale savoir */
.card-icons-row img {
  width: 38px;          /* +4px */
  height: 38px;
  border-radius: 999px;
  padding: 6px;         /* +2px → plus d’espace autour de l’icône */
  background: #f3f4ff;
  border: 1px solid rgba(148,163,184,.8);
  box-shadow: 0 2px 6px rgba(15,23,42,.15);
  object-fit: contain;
  flex-shrink: 0;
}

/* responsive : un peu plus petit sur téléphone */
@media (max-width: 520px) {
  .card-icons-row img {
    width: 26px;
    height: 26px;
    padding: 3px;
  }
}

.like-button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 999px;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.like-button .ico {
  transition: transform 0.15s ease;
  font-size: 1rem;
}

.like-button:hover {
  opacity: 0.9;
}

.like-button.liked {
  opacity: 1;
  color: var(--bagou-magenta);
  background: rgba(255, 0, 168, 0.08);
}

.like-button.liked .ico {
  transform: translateY(-1px) scale(1.25);
  font-weight: 700;
}

.page-toolbar .splash {
  font-size: clamp(36px, 4.8vw, 56px);  /* même logique que .brand-name */
  margin: 0;
  line-height: 1;
}

/* Layout du bandeau */

.page-toolbar {
  justify-content: center;   /* au lieu de space-between */
  flex-wrap: wrap;           /* permet le retour à la ligne si pas assez de place */
  text-align: center;
}

/* Le groupe gauche : Galerie + boutons */
.page-toolbar .left-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Le champ de filtre vient se coller à droite des boutons */
.page-toolbar .page-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 0.75rem;   /* petit espace entre dernier bouton et input */
}

/* Input un poil plus compact pour ne pas tout pousser */
.page-toolbar .page-controls .filter-input {
  width: clamp(180px, 24vw, 260px);
}

/* Sur petits écrans : on garde tout centré, mais on accepte que le filtre passe à la ligne */
@media (max-width: 520px) {
  .page-toolbar {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  .page-toolbar .left-group {
    justify-content: center;
  }

  .page-toolbar .page-controls {
    margin-left: 0;        /* plus de décalage horizontal */
  }

  .page-toolbar .page-controls .filter-input {
    width: 100%;
    max-width: 320px;
  }
}

/* === Chips & dropdowns de filtre === */

.chip-dropdown {
  position: relative;
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 0.9rem;
  font-family:var(--font-mono)
}

.chip-toggle--tone {
  /* petit look neutre, on pourra le recolorer plus tard */
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

.chip-toggle--tone:hover {
  background: #e5e7eb;
}

.chip-label {
  font-weight: 600;
}

.chip-current {
  font-weight: 500;
  opacity: 0.85;
}

.chip-arrow {
  font-size: 0.7em;
  margin-left: 2px;
}

/* Menu du dropdown */
.chip-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  padding: 4px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
  display: none;
  z-index: 40;
  gap: 4px;
}

.chip-dropdown.is-open .chip-menu {
  display: inline-flex;
}

/* Options PRO/FUN */
.chip-option {
  border: none;
  background: transparent;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  color: #4b5563;
  white-space: nowrap;
  font-family:var(--font-mono)
}

.chip-toggle .chip-label,
.chip-toggle .chip-current {
  font-family:var(--font-mono)
}

.chip-option:hover {
  background: #e5e7eb;
}

.chip-option[aria-pressed="true"] {
  background: #111827;
  color: #f9fafb;
}

/* Chip mode : même style neutre que les autres badges */
.chip-toggle--mode {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

.chip-toggle--mode:hover {
  background: #e5e7eb;
}

/* Menu mode : même style que Ambiance, tu peux réutiliser chip-menu tel quel */
.chip-menu--mode {
  /* si tu veux un peu plus large : */
  padding-inline: 6px;
}


/* =========================
   Portrait video overlay
   ========================= */
.portrait{ position:relative; overflow:hidden; }
.portrait-video{
  position:absolute;
  z-index: 1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.portrait.has-video-playing .portrait-video{ opacity:1; }
.portrait.has-video-playing img{ opacity:0; }
.portrait img{ transition:opacity .18s ease; }

/* =========================
   Styles spéciaux de cards (opt-in)
   ========================= */

/* --- EXPERT : fond dégradé “deep tech / expert” --- */
.card--expert {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #020617, #0f172a, #1e293b);
  border-color: rgba(148,163,184,0.9); /* léger liseré plus sérieux */
}

.card--expert .card-body {
  background: rgba(15,23,42,0.86);
  border-radius: 12px;
  padding: 10px;
  color: #e5e7eb;
}

.card--expert .intro-line,
.card--expert .traits li,
.card--expert .tags .tag {
  color: #e5e7eb;
}

.card--expert .tags .tag {
  background: rgba(15,23,42,0.8);
  border-color: rgba(148,163,184,0.7);
}

.card--expert .punchline {
  background: rgba(15,23,42,0.9);
  color: #f9fafb;
  border-color: rgba(148,163,184,0.9);
}

/* On laisse le comportement .card:hover et .card.selected gérer
   la couleur de bordure et la box-shadow → pas d’override ici. */


/* --- POPULAIRE : fond doré texturé “wow grand public” --- */
.card--populaire {
  position: relative;
  background:
    /* highlight spéculaire */
    linear-gradient(120deg,
      rgba(255,255,255,0.75) 0%,
      rgba(255,255,255,0.0) 20%),
    /* stries directionnelles or */
    repeating-linear-gradient(
      -45deg,
      rgba(255,215,0,0.30) 0px,
      rgba(255,215,0,0.30) 2px,
      rgba(240,180,0,0.30) 2px,
      rgba(240,180,0,0.30) 4px
    ),
    /* gradient or profond */
    linear-gradient(135deg,
      #f9d976 0%,
      #f39f46 35%,
      #d57e26 65%,
      #c66b12 100%
    );
  background-size:
    100% 100%,
    100% 100%,
    100% 100%;
  border-color: #dba626;
  color: #2c1900; /* lecture lisible sur gold */
}

.card--populaire::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: url("/templates/transverse/WebDesign/design_assets/textures/noise-gold.png");
  mix-blend-mode: overlay;
}

.card--populaire .portrait{
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
}

@media (prefers-color-scheme: dark) {
  .card--populaire {
    filter: brightness(1.25) contrast(1.12) saturate(1.15);
  }
}

.card--populaire .card-body {
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 10px;
}

.card--populaire .tags .tag {
  background: rgba(255,255,255,0.9);
  border-color: rgba(253,224,71,0.9);
}

.card--populaire .punchline {
  background: rgba(255,255,255,0.98);
  border-color: rgba(234,179,8,0.9);
  color: #78350f;
}

/* Variante si tu veux utiliser une vraie texture image dorée :
.card--populaire {
  background:
    url("/templates/transverse/WebDesign/design_assets/textures/gold-noise.png") repeat,
    linear-gradient(135deg, #fbbf24, #f59e0b, #f97316);
  background-size: 220px 220px, 100% 100%;
}
*/