/* ==========================================================================
   Bébéliste – Moteur de prénoms
   Tout est préfixé .bbp pour ne pas interférer avec le thème de la boutique.

   Parti pris : le prénom est le héros. Il est posé grand, sans ornement,
   au-dessus de sa courbe de popularité tracée d'un bord à l'autre de la
   carte. Tout le reste — filtres, onglets, chiffres — se tient en retrait.
   ========================================================================== */

.bbp {
    /* Aucun fond propre : le module se pose sur celui de la boutique.
       --bbp-doux sert uniquement aux champs et pastilles, qui ont besoin
       de se détacher légèrement du blanc. */
    --bbp-doux: #f1f4f7;
    --bbp-carte: #ffffff;
    --bbp-encre: #253141;
    --bbp-encre-doux: #6a7787;
    --bbp-trait: rgba(37, 49, 65, .1);

    /* Cinq teintes pastel, chacune avec sa version pâle pour les fonds et sa
       version soutenue pour le texte : la couleur porte l'information plutôt
       que de décorer. */
    --bbp-lagon: #35bdb6;
    --bbp-lagon-fonce: #14837f;
    --bbp-lagon-voile: #d6f2f0;
    --bbp-peche: #ff9d6b;
    --bbp-peche-fonce: #c25a25;
    --bbp-peche-voile: #ffe6d7;
    --bbp-lilas: #9b84e8;
    --bbp-lilas-fonce: #5f47ad;
    --bbp-lilas-voile: #ebe4fc;
    --bbp-menthe: #7fd6a8;
    --bbp-menthe-fonce: #218a56;
    --bbp-menthe-voile: #ddf5e8;
    --bbp-rose: #f28cb1;
    --bbp-rose-fonce: #b8437a;
    --bbp-rose-voile: #ffe6f0;
    --bbp-orange: #f08c3c;
    --bbp-bleu: #6aaee0;
    --bbp-bleu-fonce: #2b6d9e;
    --bbp-bleu-voile: #e2f0fb;

    --bbp-r-s: 12px;
    --bbp-r-m: 18px;
    --bbp-r-l: 26px;
    --bbp-r-pastille: 999px;

    --bbp-ombre: 0 1px 2px rgba(36, 31, 43, .04), 0 10px 30px rgba(36, 31, 43, .06);
    --bbp-ombre-haute: 0 2px 6px rgba(36, 31, 43, .06), 0 18px 44px rgba(36, 31, 43, .12);

    --bbp-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  "Noto Sans", Arial, sans-serif;

    font-family: var(--bbp-police);
    color: var(--bbp-encre);
    background: transparent;
    padding: 0 0 5rem;
    -webkit-font-smoothing: antialiased;
}

.bbp *,
.bbp *::before,
.bbp *::after { box-sizing: border-box; }

/* Rien ne doit déborder de la largeur disponible : sur mobile, un seul
   élément trop large fait apparaître des barres de défilement un peu partout.
   Les enfants de conteneurs souples ont besoin de min-width: 0 pour accepter
   de rétrécir, ce que les navigateurs ne font pas par défaut. */
.bbp { overflow-x: hidden; max-width: 100%; }
.bbp img,
.bbp svg,
.bbp input,
.bbp select,
.bbp table { max-width: 100%; }

.bbp-grille > *,
.bbp-liste > *,
.bbp-filtres__ligne > *,
.bbp-duo__scene > *,
.bbp-palmares__colonnes > * { min-width: 0; }

/* break-word ne coupe qu'en dernier recours, là où anywhere découpait des
   prénoms parfaitement plaçables et les écrivait à la verticale. */
.bbp-ligne__nom,
.bbp-carte__nom,
.bbp-fiche__nom,
.bbp-hero__titre { overflow-wrap: break-word; }

/* Les surcouches sont déplacées à la racine du document par le script : elles
   ne sont donc plus dans .bbp et ont besoin de leurs propres variables. */
.bbp-fiche,
.bbp-duo-match,
.bbp-message {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bbp__contenu {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Le module reste dans le conteneur du thème, à toutes les tailles d'écran :
   en sortir demandait des marges négatives qui débordaient sur cette mise en
   page. La seule économie conservée est la gouttière, allégée sur mobile pour
   ne pas doubler celle du thème. */

.bbp-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Entête -------------------------------------------------------------- */

.bbp-hero { padding: 3rem 0 1.75rem; }

.bbp-hero__titre {
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 640;
    margin: 0 0 .7rem;
}

.bbp-hero__intro {
    max-width: 52ch;
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--bbp-encre-doux);
}

/* Le champ de recherche est l'objet principal de la page. */
.bbp-chercher {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bbp-doux);
    border-radius: var(--bbp-r-pastille);
    padding: .45rem .5rem .45rem 1.5rem;
    max-width: 620px;
    transition: background-color .18s ease;
}

.bbp-chercher:focus-within { background: var(--bbp-lagon-voile); }

.bbp-chercher input[type="text"] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: .7rem 0;
    color: var(--bbp-encre);
    min-width: 0;
}

.bbp-chercher input::placeholder { color: #b3abbd; font-weight: 400; }

.bbp-chercher select {
    border: 0;
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-pastille);
    padding: .6rem .9rem;
    font-family: inherit;
    font-size: .88rem;
    color: var(--bbp-encre-doux);
    cursor: pointer;
}

/* --- Navigation ---------------------------------------------------------- */

.bbp-barre-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 2.25rem 0 1.5rem;
}

/* Les onglets forment un bloc segmenté : ils sont de même nature. */
.bbp-onglets {
    display: flex;
    align-items: center;
    gap: .2rem;
    background: var(--bbp-doux);
    border-radius: var(--bbp-r-pastille);
    padding: .3rem;
    max-width: 100%;
}

.bbp-onglet {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    color: var(--bbp-encre-doux);
    padding: .6rem 1.1rem;
    cursor: pointer;
    border-radius: var(--bbp-r-pastille);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.bbp-onglet:hover { color: var(--bbp-encre); }

.bbp-onglet__icone,
.bbp-onglet__court { display: none; }

.bbp-onglet[aria-selected="true"] {
    background: var(--bbp-carte);
    color: var(--bbp-lagon-fonce);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(37, 49, 65, .12);
}

.bbp-onglet__compteur {
    display: inline-block;
    min-width: 1.35em;
    padding: 0 .4em;
    margin-left: .4em;
    border-radius: var(--bbp-r-pastille);
    background: var(--bbp-peche);
    color: #4a1f00;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    vertical-align: 1px;
}

.bbp-onglet__compteur--neutre {
    background: rgba(36, 31, 43, .09);
    color: var(--bbp-encre-doux);
}

/* Deux passages sortent du bloc segmenté : l'un invite ailleurs, l'autre
   ramène en arrière. Ce ne sont pas des onglets et ils ne doivent pas y
   ressembler. */
.bbp-passerelle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.4rem;
    border-radius: var(--bbp-r-pastille);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--bbp-orange);
    color: #fff;
    box-shadow: 0 4px 14px rgba(240, 140, 60, .35);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.bbp-passerelle:hover,
.bbp-passerelle:focus {
    background: #e07a2c;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(240, 140, 60, .45);
}

.bbp-passerelle__coeurs {
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.bbp-passerelle__coeurs svg {
    position: absolute;
    top: 0;
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

.bbp-passerelle__coeurs svg:first-child { left: 0; opacity: .6; }
.bbp-passerelle__coeurs svg:last-child { left: .45rem; }

.bbp-retour {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    padding: .5rem 0;
    font-size: .92rem;
    font-weight: 500;
    color: var(--bbp-encre-doux);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.bbp-retour:hover,
.bbp-retour:focus {
    color: var(--bbp-encre);
    text-decoration: none;
    border-bottom-color: var(--bbp-trait);
}

.bbp-retour svg { width: .75rem; height: .75rem; fill: currentColor; }

.bbp-panneau[hidden] { display: none; }

/* --- Filtres ------------------------------------------------------------- */

.bbp-filtres {
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--bbp-ombre);
}

.bbp-filtres__ligne {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.bbp-filtres__ligne + .bbp-filtres__ligne {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bbp-trait);
}

.bbp-filtres__etiquette {
    font-size: .88rem;
    font-weight: 600;
    color: var(--bbp-encre-doux);
    width: 100%;
    margin-bottom: .3rem;
}

.bbp-groupe {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.bbp-groupe + .bbp-groupe {
    border-left: 1px solid var(--bbp-trait);
    padding-left: 1.1rem;
    margin-left: .7rem;
    align-self: stretch;
}

.bbp-pastille {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .48rem .95rem;
    border-radius: var(--bbp-r-pastille);
    background: var(--bbp-doux);
    font-size: .89rem;
    line-height: 1.2;
    color: var(--bbp-encre-doux);
    cursor: pointer;
    user-select: none;
    transition: background-color .14s ease, color .14s ease;
}

.bbp-pastille input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    cursor: pointer;
}

@media (hover: hover) {
    .bbp-pastille:hover { background: var(--bbp-lilas-voile); color: var(--bbp-lilas-fonce); }
}

.bbp-pastille--active,
.bbp-pastille--active:hover {
    background: var(--bbp-lagon);
    color: #fff;
    font-weight: 600;
}

.bbp-pastille input:focus-visible + span {
    outline: 2px solid var(--bbp-lilas);
    outline-offset: 5px;
    border-radius: 4px;
}

.bbp-pastille--lettre {
    padding: .4rem 0;
    width: 2.3rem;
    justify-content: center;
    font-weight: 500;
}

.bbp-champ {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .89rem;
    color: var(--bbp-encre-doux);
}

.bbp-champ select,
.bbp-champ input[type="number"],
.bbp-champ input[type="text"] {
    border: 0;
    background: var(--bbp-doux);
    border-radius: var(--bbp-r-s);
    padding: .48rem .65rem;
    font-family: inherit;
    font-size: .89rem;
    color: var(--bbp-encre);
    cursor: pointer;
}

.bbp-champ input[type="number"],
.bbp-champ input[type="text"] { cursor: text; }

.bbp-plus {
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    font-size: .89rem;
    font-weight: 600;
    color: var(--bbp-lagon-fonce);
    cursor: pointer;
    padding: .35rem 0;
}

.bbp-plus:hover { color: var(--bbp-encre); }
.bbp-plus--danger { color: var(--bbp-peche-fonce); }

/* Le thème encadre les boutons au clic. Ces commandes se lisent comme des
   liens : le cadre n'y a pas sa place. Le repère clavier est conservé. */
.bbp-plus:focus,
.bbp-plus:active {
    outline: none;
    box-shadow: none;
}

.bbp-plus:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.bbp-avance[hidden] { display: none; }

/* --- Barre de résultats -------------------------------------------------- */

.bbp-resume {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 .3rem 1.1rem;
}

.bbp-resume__nombre {
    font-size: .95rem;
    color: var(--bbp-encre-doux);
    margin: 0;
}

.bbp-resume__nombre strong {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--bbp-encre);
}

/* --- Grille de prénoms --------------------------------------------------- */

.bbp-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 1rem;
}

.bbp-carte {
    position: relative;
    background: var(--bbp-carte);
    border: 0;
    border-radius: var(--bbp-r-l);
    padding: 1.3rem 1.2rem 0;
    display: flex;
    flex-direction: column;
    min-height: 192px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    overflow: hidden;
    box-shadow: var(--bbp-ombre);
    transition: transform .16s ease, box-shadow .16s ease;
}

@media (hover: hover) {
    .bbp-carte:hover {
        transform: translateY(-3px);
        box-shadow: var(--bbp-ombre-haute);
    }
}

.bbp-carte:focus-visible { outline: 2px solid var(--bbp-lilas); outline-offset: 3px; }

.bbp-carte[data-sexe="f"] { background: linear-gradient(178deg, #ffeef5 0%, #fff 48%); }
.bbp-carte[data-sexe="m"] { background: linear-gradient(178deg, #e6f2fb 0%, #fff 48%); }

.bbp-carte__nom {
    font-size: 1.65rem;
    line-height: 1.1;
    font-weight: 620;
    letter-spacing: -0.03em;
    margin: 0 1.8rem .25rem 0;
    word-break: break-word;
}

.bbp-carte__rang {
    font-size: .8rem;
    color: var(--bbp-encre-doux);
    margin: 0 0 .8rem;
    line-height: 1.4;
}

.bbp-carte__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 .8rem;
}

/* La courbe court d'un bord à l'autre : c'est la signature du prénom,
   pas une vignette posée dans une boîte. */
.bbp-carte__courbe {
    display: block;
    width: calc(100% + 2.4rem);
    margin: auto -1.2rem 0;
    height: 48px;
}

/* Chaque pastille porte la couleur de ce qu'elle dit : les paliers de rareté
   se distinguent d'un coup d'œil, sans avoir à lire. */
.bbp-tag {
    font-size: .73rem;
    font-weight: 600;
    padding: .24rem .65rem;
    border-radius: var(--bbp-r-pastille);
    background: var(--bbp-lagon-voile);
    color: var(--bbp-lagon-fonce);
    white-space: nowrap;
    border: 0;
    font-family: inherit;
}

button.bbp-tag { cursor: pointer; }
button.bbp-tag:hover { background: var(--bbp-lilas-voile); color: var(--bbp-lilas-fonce); }

/* Le sexe */
.bbp-tag--sexe-f { background: var(--bbp-rose-voile); color: var(--bbp-rose-fonce); }
.bbp-tag--sexe-m { background: var(--bbp-bleu-voile); color: var(--bbp-bleu-fonce); }
.bbp-tag--sexe-x { background: var(--bbp-lilas-voile); color: var(--bbp-lilas-fonce); }

/* Les cinq paliers de rareté, du plus confidentiel au plus répandu */
.bbp-tag--rarete1 { background: #ede7f9; color: #5b3fa8; }
.bbp-tag--rarete2 { background: #e0e8fa; color: #37509b; }
.bbp-tag--rarete3 { background: var(--bbp-lagon-voile); color: var(--bbp-lagon-fonce); }
.bbp-tag--rarete4 { background: var(--bbp-menthe-voile); color: var(--bbp-menthe-fonce); }
.bbp-tag--rarete5 { background: #fdf0d6; color: #96660d; }

/* La tendance */
.bbp-tag--hausse { background: #e2f6dd; color: #3d7a2a; }
.bbp-tag--baisse { background: var(--bbp-peche-voile); color: var(--bbp-peche-fonce); }

/* Le reste : longueur, rang, mention neutre */
.bbp-tag--neutre { background: var(--bbp-doux); color: var(--bbp-encre-doux); }

.bbp-coeur {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #cfc8d8;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    z-index: 2;
    transition: color .14s ease;
}

.bbp-coeur svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* Sur écran tactile, le survol reste collé après l'appui : un prénom qu'on
   retire du cœur resterait coloré. On réserve donc l'effet aux pointeurs. */
@media (hover: hover) {
    .bbp-coeur:hover { color: var(--bbp-peche); }
}

.bbp-coeur[aria-pressed="true"] { color: #f4674c; }

/* Le cœur dit déjà son état par sa couleur : le cercle de focus n'ajoute rien. */
.bbp-coeur:focus,
.bbp-coeur:active {
    outline: none;
    box-shadow: none;
    background: transparent;
}

.bbp-coeur:focus-visible { outline: 2px solid var(--bbp-lilas); outline-offset: 1px; }
.bbp-coeur[aria-pressed="true"].bbp-coeur--anime { animation: bbp-pop .3s cubic-bezier(.2, .9, .3, 1.3); }

@keyframes bbp-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* --- États --------------------------------------------------------------- */

.bbp-vide {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--bbp-encre-doux);
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    box-shadow: var(--bbp-ombre);
    line-height: 1.6;
}

.bbp-vide strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 620;
    letter-spacing: -0.02em;
    color: var(--bbp-encre);
    margin-bottom: .45rem;
}

.bbp-squelette {
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    min-height: 192px;
    opacity: .5;
}

/* --- Boutons ------------------------------------------------------------- */

.bbp-bouton {
    appearance: none;
    border: 0;
    border-radius: var(--bbp-r-pastille);
    padding: .72rem 1.4rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bbp-lagon);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: opacity .14s ease;
}

.bbp-bouton:hover { opacity: .88; color: #fff; }
.bbp-bouton--secondaire,
.bbp-bouton--secondaire:hover { background: var(--bbp-lagon-voile); color: var(--bbp-lagon-fonce); }
.bbp-bouton--abricot,
.bbp-bouton--abricot:hover { background: var(--bbp-peche); color: #4a1f00; }

.bbp-bouton--discret {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--bbp-trait);
    color: var(--bbp-encre-doux);
}

.bbp-bouton[disabled] { opacity: .4; cursor: default; }

.bbp-pagination {
    display: flex;
    justify-content: center;
    gap: .8rem;
    align-items: center;
    margin-top: 2rem;
    color: var(--bbp-encre-doux);
    font-size: .9rem;
}

/* --- Fiche détaillée ----------------------------------------------------- */

.bbp-fiche {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;

    --bbp-doux: #f1f4f7;
    --bbp-carte: #ffffff;
    --bbp-encre: #253141;
    --bbp-encre-doux: #6a7787;
    --bbp-trait: rgba(37, 49, 65, .1);
    --bbp-lagon: #35bdb6;
    --bbp-lagon-fonce: #14837f;
    --bbp-lagon-voile: #d6f2f0;
    --bbp-peche: #ff9d6b;
    --bbp-peche-fonce: #c25a25;
    --bbp-peche-voile: #ffe6d7;
    --bbp-lilas: #9b84e8;
    --bbp-lilas-fonce: #5f47ad;
    --bbp-lilas-voile: #ebe4fc;
    --bbp-menthe: #7fd6a8;
    --bbp-menthe-fonce: #218a56;
    --bbp-menthe-voile: #ddf5e8;
    --bbp-rose: #f28cb1;
    --bbp-rose-fonce: #b8437a;
    --bbp-rose-voile: #ffe6f0;
    --bbp-bleu: #6aaee0;
    --bbp-bleu-fonce: #2b6d9e;
    --bbp-bleu-voile: #e2f0fb;
    --bbp-r-s: 12px;
    --bbp-r-m: 18px;
    --bbp-r-l: 26px;
    --bbp-r-pastille: 999px;
    --bbp-ombre: 0 1px 2px rgba(37, 49, 65, .04), 0 10px 30px rgba(37, 49, 65, .06);
    --bbp-ombre-haute: 0 2px 6px rgba(37, 49, 65, .06), 0 18px 44px rgba(37, 49, 65, .12);
}

.bbp-fiche--ouverte { display: block; }

.bbp-fiche__voile {
    position: absolute;
    inset: 0;
    background: rgba(36, 31, 43, .38);
    border: 0;
    width: 100%;
}

.bbp-fiche__panneau {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(440px, 100%);
    max-width: 100vw;
    background: var(--bbp-doux);
    overflow-y: auto;
    padding: 1.6rem 1.6rem 4rem;
    animation: bbp-glisse .24s cubic-bezier(.2, .8, .3, 1);
}

@keyframes bbp-glisse {
    from { transform: translateX(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.bbp-fiche__fermer {
    float: right;
    border: 0;
    background: rgba(36, 31, 43, .06);
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.15rem;
    color: var(--bbp-encre);
    line-height: 1;
}

.bbp-fiche__nom {
    font-size: 2.5rem;
    margin: .5rem 0 .25rem;
    font-weight: 640;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.bbp-fiche__sous {
    color: var(--bbp-encre-doux);
    margin: 0 0 1.3rem;
    font-size: .95rem;
}

.bbp-fiche__retenu {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .72rem 1.4rem;
    border-radius: var(--bbp-r-pastille);
    background: var(--bbp-peche-voile);
    color: var(--bbp-peche-fonce);
    font-weight: 600;
    font-size: .95rem;
}

.bbp-fiche__retenu::before { content: "\2665"; color: #f4674c; }

.bbp-fiche__panneau h4 {
    font-size: 1rem;
    font-weight: 620;
    letter-spacing: -0.015em;
    margin: 2.2rem 0 .7rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--bbp-trait);
}

.bbp-fiche__panneau h4:first-of-type {
    padding-top: 0;
    border-top: 0;
    margin-top: 1.6rem;
}

.bbp-fiche__graphe {
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    padding: 1rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--bbp-ombre);
}

.bbp-fiche__graphe svg { display: block; width: 100%; height: 150px; }

.bbp-chiffres {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin: 0;
}

.bbp-chiffre {
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-m);
    padding: .8rem .9rem;
    box-shadow: var(--bbp-ombre);
}

.bbp-chiffre:nth-child(1) { background: var(--bbp-lagon-voile); box-shadow: none; }
.bbp-chiffre:nth-child(2) { background: var(--bbp-peche-voile); box-shadow: none; }
.bbp-chiffre:nth-child(3) { background: var(--bbp-lilas-voile); box-shadow: none; }
.bbp-chiffre:nth-child(4) { background: var(--bbp-menthe-voile); box-shadow: none; }
.bbp-chiffre:nth-child(5) { background: var(--bbp-rose-voile); box-shadow: none; }

.bbp-chiffre dt {
    font-size: .76rem;
    color: var(--bbp-encre-doux);
    margin: 0 0 .2rem;
}

.bbp-chiffre dd {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 620;
    letter-spacing: -0.02em;
}

/* --- Classement et comparaison ------------------------------------------- */

.bbp-tableau {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    overflow: hidden;
    box-shadow: var(--bbp-ombre);
}

.bbp-tableau th,
.bbp-tableau td {
    padding: .7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--bbp-trait);
    font-size: .94rem;
}

.bbp-tableau th {
    background: transparent;
    font-size: .8rem;
    color: var(--bbp-encre-doux);
    font-weight: 600;
}

.bbp-tableau tr:last-child td { border-bottom: 0; }

.bbp-tableau td:first-child {
    width: 3.2rem;
    color: var(--bbp-encre-doux);
    font-variant-numeric: tabular-nums;
}

.bbp-tableau__prenom {
    font-size: 1.05rem;
    font-weight: 550;
    letter-spacing: -0.015em;
    border: 0;
    background: none;
    padding: 0;
    color: var(--bbp-encre);
    cursor: pointer;
    font-family: inherit;
}

.bbp-tableau__prenom:hover { color: var(--bbp-lagon-fonce); }

.bbp-barre {
    height: 6px;
    border-radius: var(--bbp-r-pastille);
    background: var(--bbp-lagon);
    min-width: 3px;
}

.bbp-tableau tr[data-sexe="f"] .bbp-barre { background: var(--bbp-peche); }

.bbp-tableau--comparaison { margin-top: 1.2rem; }

.bbp-tableau--comparaison th[scope="row"] {
    color: var(--bbp-encre-doux);
    font-weight: 500;
    width: 12rem;
}

.bbp-tableau--comparaison thead th {
    font-size: 1.15rem;
    font-weight: 620;
    letter-spacing: -0.02em;
}

/* --- Listes -------------------------------------------------------------- */

.bbp-ajout {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    padding: .6rem .7rem;
    margin-bottom: 1.3rem;
    box-shadow: var(--bbp-ombre);
}

.bbp-ajout input[type="text"] {
    flex: 1 1 200px;
    border: 0;
    outline: 0;
    background: transparent;
    padding: .6rem .8rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--bbp-encre);
}

.bbp-liste { display: grid; gap: .55rem; }

.bbp-ligne {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-m);
    padding: .85rem 1.1rem;
    box-shadow: var(--bbp-ombre);
}

.bbp-ligne__nom {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    flex: 1 1 auto;
    min-width: 8rem;
    text-align: left;
}

/* Le prénom cliquable reste du texte à l'œil : ni cadre, ni soulignement.
   Le repère de focus prend la forme d'une pastille, pour rester utilisable
   au clavier sans le rectangle du navigateur. */
button.bbp-ligne__nom {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    appearance: none;
    font-family: inherit;
}

@media (hover: hover) {
    button.bbp-ligne__nom:hover { color: var(--bbp-lagon-fonce); }
}
button.bbp-ligne__nom:focus,
button.bbp-ligne__nom:active { outline: none; box-shadow: none; }

button.bbp-ligne__nom:focus-visible {
    outline: none;
    background: var(--bbp-lilas-voile);
    border-radius: var(--bbp-r-pastille);
    box-shadow: 0 0 0 .45rem var(--bbp-lilas-voile);
}

.bbp-ligne__meta { font-size: .82rem; color: var(--bbp-encre-doux); }

.bbp-supprimer {
    border: 0;
    background: transparent;
    color: #b8b0c2;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: .3rem .45rem;
    border-radius: 50%;
}

@media (hover: hover) {
    .bbp-supprimer:hover { color: var(--bbp-peche-fonce); background: var(--bbp-peche-voile); }
}

/* --- Complétion et comparateur ------------------------------------------- */

.bbp-suggestions {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-m);
    overflow-y: auto;
    box-shadow: var(--bbp-ombre-haute);
    max-height: 18rem;
}

.bbp-suggestions[hidden] { display: none; }

.bbp-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: .65rem 1rem;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--bbp-encre);
    cursor: pointer;
}

.bbp-suggestion span { font-size: .76rem; font-weight: 400; color: var(--bbp-encre-doux); }
.bbp-suggestion:hover:not([disabled]) { background: var(--bbp-lagon-voile); }
.bbp-suggestion[disabled] { opacity: .5; cursor: default; }

.bbp-suggestion--vide {
    font-size: .9rem;
    font-weight: 400;
    color: var(--bbp-encre-doux);
    margin: 0;
    padding: .8rem 1rem;
}

.bbp-jetons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.4rem;
}

.bbp-jeton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem .45rem 1rem;
    border-radius: var(--bbp-r-pastille);
    background: var(--bbp-carte);
    box-shadow: inset 0 0 0 2px var(--jeton, var(--bbp-lagon)), var(--bbp-ombre);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.bbp-jeton button {
    border: 0;
    background: var(--bbp-doux);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bbp-encre-doux);
    line-height: 1;
    font-size: 1rem;
    padding: 0;
}

.bbp-jeton button:hover { background: var(--bbp-peche-voile); color: var(--bbp-peche-fonce); }

/* --- Palmarès rendu par le serveur --------------------------------------- */

.bbp-palmares {
    margin-top: 3rem;
    background: var(--bbp-carte);
    border-radius: var(--bbp-r-l);
    padding: .3rem 1.5rem;
    box-shadow: var(--bbp-ombre);
}

.bbp-palmares summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.15rem 0;
    font-size: 1.05rem;
    font-weight: 620;
    letter-spacing: -0.02em;
}

.bbp-palmares summary::-webkit-details-marker { display: none; }

.bbp-palmares summary::after {
    content: "";
    width: .55rem;
    height: .55rem;
    margin-left: auto;
    border-right: 2px solid var(--bbp-encre-doux);
    border-bottom: 2px solid var(--bbp-encre-doux);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.bbp-palmares[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.bbp-palmares[open] summary { border-bottom: 1px solid var(--bbp-trait); margin-bottom: 1.4rem; }

.bbp-palmares > p {
    max-width: 62ch;
    color: var(--bbp-encre-doux);
    margin: 0 0 1.5rem;
    line-height: 1.65;
    font-size: .95rem;
}

.bbp-palmares > .bbp-palmares__colonnes { padding-bottom: 1.6rem; }

.bbp-palmares h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bbp-encre-doux);
    margin: 0 0 .7rem;
}

.bbp-palmares__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
}

.bbp-palmares__liste { margin: 0; padding-left: 1.7rem; }

.bbp-palmares__liste li {
    padding: .3rem 0;
    border-bottom: 1px solid var(--bbp-trait);
}

.bbp-palmares__liste li::marker { color: #b8b0c2; font-size: .78rem; }

.bbp-palmares__liste button {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 550;
    letter-spacing: -0.02em;
    color: var(--bbp-encre);
    cursor: pointer;
}

.bbp-palmares__liste button:hover { color: var(--bbp-lagon-fonce); }
.bbp-palmares__liste span { float: right; font-size: .8rem; color: var(--bbp-encre-doux); }

/* --- Messages ------------------------------------------------------------ */

.bbp-message {
    position: fixed;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    background: #241f2b;
    color: #fff;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: .92rem;
    z-index: 1100;
    box-shadow: 0 10px 30px rgba(36, 31, 43, .3);
    max-width: min(90vw, 30rem);
}

.bbp-message--erreur { background: #b6432f; }

.bbp-info {
    background: var(--bbp-lilas-voile);
    border-radius: var(--bbp-r-l);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.4rem;
    line-height: 1.6;
    color: var(--bbp-lilas-fonce);
}

.bbp-info a { color: var(--bbp-lilas-fonce); font-weight: 700; }

/* --- Adaptations --------------------------------------------------------- */

@media (max-width: 767px) {
    /* Le thème pose déjà une gouttière : la doubler coûte une quarantaine de
       pixels de largeur utile, soit une carte de moins par rangée. */
    .bbp__contenu { padding: 0 .75rem; }

    .bbp-hero { padding-top: 1.75rem; }
    .bbp-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .bbp-carte__nom { font-size: 1.4rem; }
    .bbp-fiche__panneau { width: 100%; }

    /* Un bloc segmenté qui passe à la ligne devient un amas de pastilles
       dans une pastille. Sur téléphone, on lui préfère une barre d'onglets :
       une icône, un mot court, tout tient sur une seule rangée. */
    .bbp-onglets {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: 100%;
        gap: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid var(--bbp-trait);
        overflow: visible;
    }

    .bbp-onglet {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .18rem;
        padding: .5rem .15rem .55rem;
        border-radius: 0;
        font-size: .68rem;
        font-weight: 500;
        line-height: 1.2;
        white-space: normal;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }

    .bbp-onglet[aria-selected="true"] {
        background: transparent;
        box-shadow: none;
        border-bottom-color: var(--bbp-lagon);
        font-weight: 700;
    }

    .bbp-onglet__long { display: none; }
    .bbp-onglet__court { display: block; }

    .bbp-onglet__icone {
        display: block;
        width: 1.35rem;
        height: 1.35rem;
    }

    .bbp-onglet__icone svg { width: 100%; height: 100%; fill: currentColor; }

    .bbp-onglet__compteur {
        position: absolute;
        transform: translate(.85rem, -.35rem);
        margin: 0;
        min-width: 1.1em;
        font-size: .62rem;
    }

    .bbp-onglet { position: relative; }

    .bbp-barre-nav { gap: .6rem; }
    .bbp-passerelle { width: 100%; justify-content: center; }
    .bbp-retour { margin-left: 0; }

    /* Un tableau ne rentre pas sur un écran étroit : on le laisse défiler
       lui-même plutôt que d'élargir toute la page. */
    .bbp-tableau { display: block; overflow-x: auto; }
    .bbp-tableau th,
    .bbp-tableau td { padding: .6rem .7rem; }

    .bbp-chiffres { grid-template-columns: 1fr 1fr; }
    .bbp-filtres { padding: 1rem; }

    /* Sur une ligne étroite, le prénom passe au-dessus de sa légende plutôt
       que de se réduire à une colonne d'une lettre de large. */
    .bbp-ligne {
        position: relative;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .15rem;
        padding: .8rem 2.8rem .85rem 1rem;
    }

    .bbp-ligne__nom,
    .bbp-ligne__meta { flex: 1 1 100%; min-width: 0; }
    .bbp-ligne__nom { font-size: 1.2rem; }

    .bbp-supprimer {
        position: absolute;
        top: .6rem;
        right: .5rem;
    }

    /* Le panneau de filtres occupait la moitié de l'écran avant le premier
       prénom. Replié, il ne montre que le critère le plus utilisé. */
    #bbp-filtres .bbp-filtres:not(.bbp-filtres--ouvert) .bbp-filtres__ligne + .bbp-filtres__ligne {
        display: none;
    }

    .bbp-filtres { padding: .9rem 1rem; }
    .bbp-hero { padding: 1.25rem 0 1rem; }
    .bbp-hero__intro { margin-bottom: 1.25rem; font-size: .98rem; }

    .bbp-groupe { flex: 1 1 100%; }
    .bbp-groupe + .bbp-groupe {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
        margin-top: .6rem;
    }
}

@media print {
    .bbp { background: #fff; color: #000; padding: 0; }

    .bbp-onglets,
    .bbp-passerelle,
    .bbp-retour,
    .bbp-filtres,
    .bbp-ajout,
    .bbp-pagination,
    .bbp-hero__intro,
    .bbp-info,
    .bbp-fiche,
    .bbp-message,
    #bbp-tri-favoris,
    .bbp-panneau[data-panneau="recherche"],
    .bbp-panneau[data-panneau="classement"],
    .bbp-panneau[data-panneau="comparer"],
    .bbp-supprimer { display: none !important; }

    .bbp-panneau[data-panneau="liste"] { display: block !important; }
    .bbp-hero__titre { font-size: 22pt; margin-bottom: .4cm; }
    .bbp-liste { display: block; }

    .bbp-ligne {
        box-shadow: none;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        padding: .25cm 0;
        break-inside: avoid;
    }

    .bbp-ligne__nom { font-size: 15pt; }
    .bbp-ligne__meta { font-size: 9pt; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
    .bbp *,
    .bbp-fiche__panneau { animation: none !important; transition: none !important; }
}