/* Profil des membres de www et « Mon espace » (lot www-profil-20261007). Téléphone d'abord.
   Portées : .bep-pf-* (pages du membre), .bep-es-* (Mon espace). Couleurs de la recherche (bep-recherche). */

.bep-pf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bep-pf-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }

.bep-pf-tete, .bep-pf-onglets, .bep-pf-bloc, .bep-pf-feuille, .bep-pf-apercu-bandeau, .bep-pf-meta, .bep-es, .bep-pf-actions {
  font-family: "Roboto Condensed", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.bep-pf-tete *, .bep-pf-onglets *, .bep-pf-bloc *, .bep-pf-feuille *, .bep-es * { box-sizing: border-box; }

/* ---------- boutons ---------- */
.bep-pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; margin: 0; padding: 0 16px; border: 1px solid #cfd6e1; border-radius: 999px; background: #fff; color: #194172; font: 700 15px/1.1 "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; text-transform: none; letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.bep-pf-btn:hover, .bep-pf-btn:focus { border-color: #194172; color: #194172; text-decoration: none; }
.bep-pf-btn .bep-pf-i { width: 18px; height: 18px; }
.bep-pf-btn-sm { min-height: 36px; padding: 0 13px; font-size: 14px; }
.bep-pf-btn-ico { width: 42px; padding: 0; }
.bep-pf-vert, .bep-pf-vert:hover, .bep-pf-vert:focus { background: #28b62c; border-color: #28b62c; color: #fff; }
.bep-pf-vert:hover, .bep-pf-vert:focus { background: #1f9a23; border-color: #1f9a23; }
.bep-pf-kif-on, .bep-pf-kif-on:hover, .bep-pf-kif-on:focus { color: #8a5d00; border-color: #f0c97a; background: #fff8e6; }
.bep-pf-kif-on .bep-pf-i { fill: currentColor; }
.bep-pf-etat-ok { color: #1d7a2f; border-color: #9fd8aa; background: #effaf1; cursor: default; }
.bep-pf-etat { color: #5e6b80; background: #f4f6f9; cursor: default; }
.bep-pf-etat:hover, .bep-pf-etat-ok:hover { border-color: inherit; }
.bep-pf-discret { border-color: transparent; background: transparent; color: #5e6b80; }
.bep-pf-c { display: none; }
.bep-pf-btn:focus-visible, .bep-pf-onglets a:focus-visible, .bep-pf-ligne:focus-visible, .bep-es a:focus-visible, .bep-pf-x:focus-visible,
.bep-pf-bloc a:focus-visible, .bep-pf-lire:focus-visible, .bep-pf-signer summary:focus-visible { outline: 3px solid #5b9cf5; outline-offset: 2px; }

/* ---------- en-tête ---------- */
.bep-pf-tete { position: relative; margin: 0; background: #fff; border: 1px solid #e3e8ef; border-bottom: 0; border-radius: 16px 16px 0 0; overflow: hidden; color: #2a3342; }
.bep-pf-tete .bep-pf-couv, .bep-pf-tete #bigpicture { position: relative; height: 132px; min-height: 0; width: 100%; background-color: #c9d6e6; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.bep-pf-tete .bep-pf-couv-vide { background: linear-gradient(120deg, #dfe5ee, #f1f4f8); }
.bep-pf-couv-btn { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .62); color: #fff; font: 700 14px/1 "Roboto Condensed", Arial, sans-serif; cursor: pointer; }
.bep-pf-couv-btn .bep-pf-i { width: 17px; height: 17px; }
.bep-pf-id { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding: 0 16px 14px; }
.bep-pf-ava { grid-row: 1; position: relative; width: 96px; height: 96px; margin-top: -42px; z-index: 1; }
.bep-pf-ava-img { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #eef1f5; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
.bep-pf-ava-img img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; max-width: none; }
.bep-pf-ava-btn { position: absolute; right: -4px; bottom: 0; width: 36px; height: 36px; border-radius: 50%; background: #194172; color: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; }
.bep-pf-ava-btn:hover, .bep-pf-ava-btn:focus { color: #fff; background: #0f2c52; }
.bep-pf-ava-btn .bep-pf-i { width: 17px; height: 17px; }
.bep-pf-qui { grid-column: 2; align-self: end; min-width: 0; padding-top: 8px; }
.bep-pf-qui h1 { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 700 23px/1.15 "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; color: #1b2433; text-transform: none; letter-spacing: 0; }
.bep-pf-nom { overflow-wrap: anywhere; }
.bep-pf-age { font-weight: 400; color: #5e6b80; }
.bep-pf-certif { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border: 1px solid #b9c8dc; border-radius: 999px; color: #194172; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.bep-pf-certif .bep-pf-i { width: 15px; height: 15px; }
.bep-pf-ou { display: flex; align-items: center; gap: 4px; margin: 3px 0 0; color: #5e6b80; font-size: 15px; line-height: 1.3; }
.bep-pf-ou .bep-pf-i { width: 16px; height: 16px; }
.bep-pf-plus { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bep-pf-statut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: #5e6b80; font-size: 14.5px; line-height: 1.3; }
.bep-pf-statut:empty { display: none; }
.bep-pf-enligne { display: inline-flex; align-items: center; gap: 6px; color: #1d7a2f; font-weight: 700; }
.bep-pf-enligne i { width: 9px; height: 9px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 3px rgba(47, 179, 68, .18); }
.bep-pf-note { display: inline-flex; align-items: center; }
.bep-pf-note .ratingbox { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; }
.bep-pf-note .ratingbox > .selection { display: inline-flex; align-items: center; margin: 0; }
.bep-pf-note .ratingbox > .scores { display: block; margin: 0; color: #8a94a3; font-size: 13px; white-space: nowrap; }
.bep-pf-reperes { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bep-pf-reperes li { padding: 4px 10px; border-radius: 999px; background: #eef2f7; color: #194172; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.bep-pf-outils { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* actions : barre collée en bas au téléphone (au-dessus des onglets du site quand ils existent) */
.bep-pf-actions { position: fixed; left: 0; right: 0; bottom: var(--bep-bas, 0px); z-index: 1025; display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid #e3e8ef; box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); }
.bep-pf-actions .bep-pf-btn { flex: none; flex-direction: column; gap: 2px; width: 62px; min-height: 50px; padding: 0 4px; border-radius: 14px; font-size: 12px; }
.bep-pf-actions .bep-pf-btn .bep-pf-i { width: 20px; height: 20px; }
.bep-pf-actions .bep-pf-vert { flex: 1 1 auto; width: auto; flex-direction: row; gap: 8px; border-radius: 999px; font-size: 17px; }
.bep-pf-actions .bep-pf-connexion { flex: 1 1 auto; width: auto; border-radius: 999px; font-size: 15px; }
.bep-pf-actions .bep-pf-l { display: none; }
.bep-pf-actions .bep-pf-c { display: inline; }
html body.bep-pf-a-barre { padding-bottom: calc(76px + var(--bep-bas, 0px) + env(safe-area-inset-bottom, 0px)); }
/* bulle du tchat (ArrowChat) remontée au-dessus de la barre */
body.bep-pf-a-barre #arrowchat_mobiletab, body.bep-pf-a-barre #arrowchat_buddy_list_tab { bottom: calc(88px + var(--bep-bas, 0px) + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 991px) {
  body:has(#bn-tabs) { --bep-bas: calc(var(--bn-tab-h, 64px) + env(safe-area-inset-bottom, 0px)); }
  body:has(#bn-tabs) .bep-pf-actions { padding-bottom: 8px; }
}
/* fiche d'un autre membre au téléphone : page de détail, la barre d'actions remplace les onglets du bas du site
   (ils restent sur toutes les autres pages, dont ma page) ; en CSS pour qu'ils n'apparaissent pas avant le script */
@media (max-width: 767px) {
  body:has(.bep-pf-actions) #bn-tabs { display: none !important; }
  html body:has(.bep-pf-actions):has(#bn-tabs) { --bep-bas: 0px; }
  html body:has(.bep-pf-actions):has(#bn-tabs) .bep-pf-actions { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  html body:has(.bep-pf-actions) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

.bep-pf-apercu-bandeau { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border: 1px solid #f0d9a4; border-bottom: 0; background: #fff8e6; color: #6b4b00; font-size: 14.5px; font-weight: 700; }
.bep-pf-apercu-bandeau[hidden] { display: none; }
.bep-pf-apercu-bandeau button { margin-left: auto; padding: 4px 0; border: 0; background: none; color: #6b4b00; font: inherit; text-decoration: underline; cursor: pointer; }
body.bep-pf-apercu .bep-pf-moi-seul { display: none !important; }

/* ---------- onglets ---------- */
.bep-pf-onglets { display: flex; gap: 2px; margin: 0 0 14px; padding: 0 10px; overflow-x: auto; overflow-y: hidden; background: #fff; border: 1px solid #e3e8ef; border-radius: 0 0 16px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.bep-pf-onglets::-webkit-scrollbar { display: none; }
.bep-pf-onglets.bep-pf-bout { -webkit-mask-image: none; mask-image: none; }
.bep-pf-onglets a { flex: none; padding: 13px 10px 10px; border-bottom: 3px solid transparent; color: #5e6b80; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.bep-pf-onglets a:hover, .bep-pf-onglets a:focus { color: #194172; text-decoration: none; }
.bep-pf-onglets a.on { color: #194172; border-bottom-color: #194172; }
.bep-pf-onglets a.zero { color: #8a94a3; }
.bep-pf-onglets .n { margin-left: 4px; color: #8a94a3; font-weight: 400; }

/* ---------- colonnes et blocs ---------- */
.bep-pf-cols { display: flex; flex-direction: column; }
.bep-pf-princ, .bep-pf-cote, .bep-pf-cols #cache { display: contents; }
.bep-pf-bloc { margin: 0 0 12px; padding: 14px 16px 16px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; color: #2a3342; font-size: 15px; line-height: 1.45; }
.bep-pf-bloc > h2 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 12px; padding: 0; color: #1b2433; font: 700 18px/1.2 "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.bep-pf-bloc > h2 .n { color: #8a94a3; font-size: 15px; font-weight: 400; }
.bep-pf-lien { margin-left: auto; color: #194172; font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bep-pf-lien:hover, .bep-pf-lien:focus { color: #0f2c52; text-decoration: underline; }
.bep-o-complete { order: 1; } .bep-o-photos { order: 2; } .bep-o-pres { order: 3; } .bep-o-envies { order: 4; } .bep-o-videos { order: 5; }
.bep-o-bref { order: 6; } .bep-o-sexe { order: 7; } .bep-o-apero { order: 8; } .bep-o-annonce { order: 9; } .bep-o-visites { order: 10; }
.bep-o-potes { order: 11; } .bep-o-commu { order: 12; } .bep-o-forum { order: 13; } .bep-o-livre { order: 14; } .bep-o-meta { order: 15; }
.bep-pf-cols #reg_inner { order: 0; }

/* photos */
.bep-pf-ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 10px; overflow: hidden; }
.bep-pf-ph a { position: relative; display: block; aspect-ratio: 1 / 1; max-width: 100%; background: #e9eef5; overflow: hidden; }
@supports not (aspect-ratio: 1 / 1) { .bep-pf-ph a { height: 0; padding-top: 100%; } }
.bep-pf-ph img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 0; max-width: none; }
.bep-pf-ph a:nth-child(n+7) { display: none; }
.bep-pf-ajout { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #f3f6fa !important; border: 2px dashed #b9c6d8; color: #194172; font-size: 14px; font-weight: 700; text-decoration: none; }
.bep-pf-ajout:hover, .bep-pf-ajout:focus { color: #0f2c52; border-color: #194172; text-decoration: none; }
.bep-pf-ajout .bep-pf-i { width: 26px; height: 26px; }

/* présentation */
.bep-pf-pres-t { margin: 0; color: #2a3342; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.bep-pf-plie .bep-pf-pres-t { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bep-pf-lire { margin: 6px 0 0; padding: 4px 0; border: 0; background: none; color: #194172; font: 700 14.5px/1.2 "Roboto Condensed", Arial, sans-serif; cursor: pointer; }
.bep-pf-lire[hidden] { display: none; }

/* envies, en bref */
.bep-pf-puces { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bep-pf-puces li { padding: 5px 11px; border: 1px solid #cfd6e1; border-radius: 999px; background: #fff; color: #194172; font-size: 14px; font-weight: 700; line-height: 1.3; }
.bep-pf-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; }
.bep-pf-kv3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bep-pf-kv div { min-width: 0; }
.bep-pf-kv dt { margin: 0; color: #8a94a3; font-size: 13px; font-weight: 400; line-height: 1.3; }
.bep-pf-kv dd { margin: 1px 0 0; color: #1b2433; font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.bep-pf-kv dd.bep-pf-a-completer { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fff3d6; color: #8a5d00; font-size: 12.5px; }
.bep-pf-sep { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e8ef; }

/* vidéos */
.bep-pf-vid { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bep-pf-vid::-webkit-scrollbar { display: none; }
.bep-pf-vid a { position: relative; flex: none; display: block; width: 200px; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 10px; overflow: hidden; background: #2a3446; scroll-snap-align: start; }
@supports not (aspect-ratio: 1 / 1) { .bep-pf-vid a { height: 125px; } }
.bep-pf-vid img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 0; max-width: none; }
.bep-pf-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .35)); }
.bep-pf-play svg { width: 40px; height: 40px; fill: rgba(255, 255, 255, .95); stroke: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }

/* états vides (membre sur sa page) */
.bep-pf-vide-e { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed #c3cede; border-radius: 12px; background: #f8fafc; }
.bep-pf-vide-i { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #eef2f7; color: #194172; }
.bep-pf-vide-e p { flex: 1; min-width: 0; margin: 0; color: #5e6b80; font-size: 14.5px; line-height: 1.4; }
.bep-pf-vide-e p b { display: block; color: #1b2433; font-size: 15px; }
.bep-pf-rien { margin: 0; color: #5e6b80; font-size: 14.5px; }

/* apéro, annonce, forum, communautés */
.bep-pf-apero { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.bep-pf-apero:hover, .bep-pf-apero:focus { color: inherit; text-decoration: none; }
.bep-pf-apero-j { padding: 6px 0; border-radius: 12px; background: #eef2f7; color: #194172; text-align: center; line-height: 1.05; }
.bep-pf-apero-j b { display: block; font-size: 24px; }
.bep-pf-apero-j span { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.bep-pf-apero-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bep-pf-apero-t strong { color: #1b2433; font-size: 16px; }
.bep-pf-apero-t span { color: #5e6b80; font-size: 14px; }
.bep-pf-annonce, .bep-pf-forum a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; color: inherit; text-decoration: none; }
.bep-pf-annonce:hover, .bep-pf-annonce:focus, .bep-pf-forum a:hover, .bep-pf-forum a:focus { color: inherit; text-decoration: none; }
.bep-pf-annonce .bep-pf-i, .bep-pf-forum .bep-pf-i { color: #194172; margin-top: 1px; }
.bep-pf-annonce b, .bep-pf-forum b { display: block; color: #1b2433; font-size: 15.5px; overflow-wrap: anywhere; }
.bep-pf-annonce:hover b, .bep-pf-forum a:hover b { text-decoration: underline; }
.bep-pf-annonce small, .bep-pf-forum small { color: #8a94a3; font-size: 13px; }
.bep-pf-forum { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.bep-pf-commu { display: grid; gap: 10px; }
.bep-pf-commu a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.bep-pf-commu a:hover b, .bep-pf-commu a:focus b { text-decoration: underline; }
.bep-pf-commu img, .bep-pf-commu-vide { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #e9eef5; max-width: none; }
.bep-pf-commu-vide { display: flex; align-items: center; justify-content: center; color: #194172; }
.bep-pf-commu b { display: block; color: #1b2433; font-size: 15px; overflow-wrap: anywhere; }
.bep-pf-commu small { color: #8a94a3; font-size: 13px; }

/* avatars (potes, visiteurs) */
.bep-pf-avs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 8px; }
.bep-pf-av { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: #5e6b80; font-size: 12.5px; text-decoration: none; }
.bep-pf-av:hover, .bep-pf-av:focus { color: #194172; text-decoration: none; }
.bep-pf-av-i { position: relative; display: block; width: 56px; height: 56px; }
.bep-pf-av-i img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #e9eef5; max-width: none; }
.bep-pf-point { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #2fb344; border: 2px solid #fff; }
.bep-pf-av-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* livre d'or */
.bep-pf-livre { display: grid; gap: 14px; }
.bep-pf-mot { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.bep-pf-mot-av img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #e9eef5; max-width: none; }
.bep-pf-mot-n { color: #1b2433; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.bep-pf-mot-n:hover { color: #194172; }
.bep-pf-mot-d { margin-left: 8px; color: #8a94a3; font-size: 12.5px; }
.bep-pf-mot-t p { margin: 2px 0 0; padding: 0; color: #2a3342; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.bep-pf-signer { margin-top: 14px; }
.bep-pf-signer summary { list-style: none; display: inline-flex; }
.bep-pf-signer summary::-webkit-details-marker { display: none; }
.bep-pf-signer[open] summary { display: none; }
.bep-pf-signer form { display: grid; gap: 8px; }
.bep-pf-signer label { margin: 0; color: #1b2433; font-size: 14.5px; font-weight: 700; }
.bep-pf-signer textarea, .bep-pf-signer input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid #cfd6e1; border-radius: 10px; background: #fff; color: #1b2433; font: 400 16px/1.4 "Roboto Condensed", Arial, sans-serif; }
.bep-pf-signer textarea:focus, .bep-pf-signer input[type="text"]:focus { outline: 0; border-color: #194172; box-shadow: 0 0 0 3px rgba(25, 65, 114, .18); }
.bep-pf-captcha { display: flex; align-items: center; gap: 10px; }
.bep-pf-captcha input { max-width: 140px; }
.bep-pf-signer input[type="submit"] { justify-self: start; }

/* ligne du bas, profil privé */
.bep-pf-meta { margin: 2px 4px 16px; color: #8a94a3; font-size: 13.5px; line-height: 1.6; }
.bep-pf-meta a { color: #b0341a; font-weight: 700; }
.bep-pf-prive { padding: 28px 18px 24px; text-align: center; }
.bep-pf-prive-i { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: #eef2f7; color: #194172; }
.bep-pf-prive-i .bep-pf-i { width: 26px; height: 26px; }
.bep-pf-prive h2 { justify-content: center; }
.bep-pf-prive p { max-width: 420px; margin: 0 auto; color: #5e6b80; font-size: 15px; }

/* complète ton profil */
.bep-pf-barre-p { height: 8px; margin: 0 0 10px; overflow: hidden; border-radius: 6px; background: #eef2f7; }
.bep-pf-barre-p i { display: block; height: 100%; border-radius: 6px; background: #28b62c; }
.bep-pf-compl ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.bep-pf-compl li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 42px; font-size: 15px; }
.bep-pf-ok { color: #2fb344; }
.bep-pf-ko { display: block; width: 18px; height: 18px; margin-left: 1px; border: 2px solid #cfd6e1; border-radius: 50%; }
.bep-pf-fait .bep-pf-et { color: #8a94a3; text-decoration: line-through; }

/* ---------- feuilles (⋯ et Mon espace) ---------- */
.bep-pf-voile { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background: rgba(10, 18, 30, .45); }
.bep-pf-voile[hidden], .bep-pf-feuille[hidden] { display: none; }
html.bep-pf-fige, html.bep-pf-fige body { overflow: hidden; }
.bep-pf-feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; color: #1b2433; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(15, 23, 42, .2); transform: translateY(16px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.bep-pf-feuille.bep-pf-ouverte { transform: none; opacity: 1; }
.bep-pf-feuille-espace { top: 0; max-height: none; border-radius: 0; }
.bep-pf-feuille-h { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px 18px; border-bottom: 1px solid #e3e8ef; }
.bep-pf-feuille-h strong { font-size: 18px; overflow-wrap: anywhere; }
.bep-pf-x { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: #eef2f7; color: #1b2433; cursor: pointer; }
.bep-pf-x-espace { position: absolute; top: 12px; right: 12px; z-index: 1; }
.bep-pf-feuille-c { display: flex; flex-direction: column; padding: 6px 8px 10px; }
.bep-pf-ligne { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #1b2433; font: 400 16px/1.2 "Roboto Condensed", Arial, sans-serif; text-align: left; cursor: pointer; }
.bep-pf-ligne:hover { background: #f1f4f8; }
.bep-pf-ligne .bep-pf-i { color: #194172; }
.bep-pf-rouge, .bep-pf-rouge .bep-pf-i { color: #b0341a; }
.bep-pf-annuler { justify-content: center; margin-top: 4px; color: #5e6b80; font-size: 15px; }
.bep-pf-ligne[hidden], .bep-pf-signaler[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .bep-pf-feuille { transition: none; } }

/* ---------- Mon espace ---------- */
.bep-es { color: #1b2433; padding-bottom: 8px; }
.bep-es-tete { display: flex; align-items: center; gap: 12px; padding: 16px 64px 12px 16px; border-bottom: 1px solid #e3e8ef; }
.bep-es-ava { display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #3f7fd0, #1c4f8f); color: #fff; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.bep-es-qui { display: flex; flex-direction: column; min-width: 0; }
.bep-es-qui strong { font-size: 19px; line-height: 1.15; overflow-wrap: anywhere; }
.bep-es-qui a { color: #194172; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.bep-es-qui a:hover { text-decoration: underline; }
.bep-es-ajout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 4px; }
.bep-es-ajout a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 12px; border: 1px solid #cfd6e1; border-radius: 12px; background: #fff; color: #194172; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.bep-es-ajout a:hover, .bep-es-ajout a:focus { border-color: #194172; color: #194172; text-decoration: none; }
.bep-es-titre { margin: 14px 18px 4px; color: #8a94a3; font-size: 12.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.bep-es-l { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 18px; color: #1b2433; font-size: 16px; line-height: 1.2; text-decoration: none; }
.bep-es-l:hover, .bep-es-l:focus { background: #f1f4f8; color: #1b2433; text-decoration: none; }
.bep-es-l .bep-pf-i { color: #194172; }
.bep-es-l.on { background: #e7eef8; color: #194172; font-weight: 700; box-shadow: inset 3px 0 0 #194172; }
.bep-es-l .c { margin-left: auto; color: #8a94a3; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.bep-es-l .p { margin-left: auto; padding: 1px 8px; border-radius: 9px; background: #e0263a; color: #fff; font-size: 12px; font-weight: 700; }
.bep-es-l .p + .c { margin-left: 8px; }
.bep-es-pied { margin-top: 8px; padding-top: 6px; border-top: 1px solid #eef1f5; }
.bep-es-petit { min-height: 40px; color: #5e6b80; font-size: 14px; }
.bep-es-panneau { margin: 0 0 16px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; overflow: hidden; }
.bep-es-panneau .bep-es-tete { padding-right: 16px; }
.bep-es-panneau .bep-es-ajout { padding: 12px 12px 4px; }
.bep-es-panneau .bep-es-ajout a { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 9px 10px; font-size: 14px; }

/* ---------- Modifier mon profil (account/profile et formulaire chargé sur ma page) ---------- */
.bep-pe-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 16px; font-family: "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; }
.bep-pe-entete h1 { margin: 0 0 4px; color: #1b2433; font: 700 28px/1.15 "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.bep-pe-entete p { max-width: 560px; margin: 0; color: #5e6b80; font-size: 15px; line-height: 1.45; }
.bep-pe { font-family: "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; color: #2a3342; }
.bep-pe * { box-sizing: border-box; }
.bep-pe-form { margin: 0; }
.bep-pe-groupe { margin: 0 0 14px; padding: 16px 16px 18px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; }
.bep-pe-groupe > h2 { margin: 0 0 14px; padding: 0; color: #1b2433; font: 700 18px/1.2 "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.bep-pe-champs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bep-pe-champ { min-width: 0; margin: 0; }
.bep-pe-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: #1b2433; font-size: 15px; font-weight: 700; line-height: 1.3; }
.bep-pe-vide > .bep-pe-label::after { content: "À compléter"; padding: 1px 8px; border-radius: 999px; background: #fff3d6; color: #8a5d00; font-size: 12px; font-weight: 700; }
.bep-pe .form-control { display: block; width: 100%; height: 46px; padding: 8px 12px; border: 1px solid #cfd6e1; border-radius: 10px; background-color: #fff; color: #1b2433; font: 400 16px/1.3 "Roboto Condensed", "Source Sans Pro", Arial, sans-serif; box-shadow: none; }
.bep-pe select.form-control { padding-right: 34px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px 18px; }
.bep-pe textarea.form-control { height: auto; min-height: 150px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.bep-pe .form-control:focus { outline: 0; border-color: #194172; box-shadow: 0 0 0 3px rgba(25, 65, 114, .18); }
.bep-pe-vide .form-control { border-color: #f0c97a; }
.bep-pe-date { display: flex; flex-wrap: wrap; gap: 8px; }
.bep-pe-date .form-control { flex: 1 1 90px; width: auto; }
.bep-pe-puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bep-pe-puces li { margin: 0; }
.bep-pe-puces label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 6px 14px 6px 10px; border: 1px solid #cfd6e1; border-radius: 999px; background: #fff; color: #194172; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.bep-pe-puces input { width: 18px; height: 18px; margin: 0; accent-color: #194172; flex: none; }
.bep-pe-puces label:has(input:checked) { border-color: #194172; background: #e7eef8; }
.bep-pe-puces label:focus-within { outline: 3px solid #5b9cf5; outline-offset: 2px; }
.bep-pe-fichier { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14px; }
.bep-pe-barre { position: -webkit-sticky; position: sticky; bottom: var(--bep-bas, 0px); z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 0 0 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border: 1px solid #e3e8ef; border-radius: 14px; box-shadow: 0 -6px 18px rgba(15, 23, 42, .06); }
body:has(#bn-tabs) .bep-pe-barre { padding-bottom: 12px; }
.bep-pe-barre .bep-pf-btn { min-width: 180px; min-height: 48px; font-size: 16px; }
.bep-pe-annuler { color: #5e6b80; font-size: 15px; font-weight: 700; text-decoration: none; }
.bep-pe-annuler:hover, .bep-pe-annuler:focus { color: #194172; text-decoration: underline; }
.bep-pe-page .breadcrumb { display: none; }
@media (min-width: 768px) {
  .bep-pe-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .bep-pe-large { grid-column: 1 / -1; }
  .bep-pe-groupe { padding: 20px 22px 22px; }
}
body:has(.bep-pe-barre) #arrowchat_mobiletab, body:has(.bep-pe-barre) #arrowchat_buddy_list_tab { bottom: calc(86px + var(--bep-bas, 0px) + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 767px) {
  .bep-pe-entete h1 { font-size: 24px; }
  .bep-pe-entete .bep-pf-btn { min-height: 38px; padding: 0 12px; font-size: 14px; }
  .bep-pe-barre { margin: 0 -15px 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .bep-pe-barre .bep-pf-btn { flex: 1; min-width: 0; }
}

/* ---------- tablette et ordinateur ---------- */
@media (min-width: 768px) {
  .bep-pf-tete .bep-pf-couv, .bep-pf-tete #bigpicture { height: 196px; }
  .bep-pf-id { grid-template-columns: 140px minmax(0, 1fr) auto; column-gap: 20px; padding: 0 24px 16px; }
  .bep-pf-ava { width: 140px; height: 140px; margin-top: -64px; }
  .bep-pf-qui h1 { font-size: 30px; }
  .bep-pf-plus { grid-column: 2; margin-top: 8px; }
  .bep-pf-actions, .bep-pf-outils { position: static; grid-column: 3; grid-row: 1 / span 2; align-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 460px; margin: 0; padding: 0 0 2px; background: none; border: 0; box-shadow: none; }
  .bep-pf-actions .bep-pf-btn, .bep-pf-actions .bep-pf-vert, .bep-pf-actions .bep-pf-connexion { flex: none; flex-direction: row; gap: 7px; width: auto; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 15px; }
  .bep-pf-actions .bep-pf-btn-ico { width: 42px; padding: 0; }
  .bep-pf-actions .bep-pf-l { display: inline; }
  .bep-pf-actions .bep-pf-c { display: none; }
  .bep-pf-feuille { position: absolute; left: auto; right: auto; bottom: auto; width: 340px; max-height: 70vh; border-radius: 14px; box-shadow: 0 18px 44px rgba(15, 23, 42, .24); transform: translateY(-6px); }
  .bep-pf-feuille-espace { top: auto; width: 360px; max-height: 80vh; }
  .bep-pf-voile { background: transparent; }
  .bep-pf-avs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* tablette : les boutons de l'en-tête passent sous le nom, qui garde sa largeur */
@media (min-width: 768px) and (max-width: 991px) {
  .bep-pf-id { grid-template-columns: 140px minmax(0, 1fr); }
  .bep-pf-actions, .bep-pf-outils { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; max-width: none; margin-top: 14px; }
}
@media (min-width: 992px) {
  .bep-pf-onglets { padding: 0 16px; -webkit-mask-image: none; mask-image: none; }
  .bep-pf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
  .bep-pf-princ, .bep-pf-cote, .bep-pf-cols #cache { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .bep-pf-bloc { margin: 0; }
  .bep-pf-meta { margin: 0 4px 16px; }
  .bep-pf-ph { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .bep-pf-ph a:nth-child(n+7) { display: block; }
  .bep-pf-ph a:nth-child(n+9) { display: none; }
  .bep-pf-vid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .bep-pf-vid a { width: auto; }
  .bep-pf-vid a:nth-child(n+5) { display: none; }
  /* colonne de droite sans aucun bloc (fiche peu remplie) : une seule colonne, présentation et envies côte à côte */
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) { grid-template-columns: minmax(0, 1fr); }
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) #cache { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) #cache > * { grid-column: 1 / -1; }
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) #cache > .bep-o-pres:has(+ .bep-o-envies),
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) #cache > .bep-o-pres + .bep-o-envies { grid-column: auto; }
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) .bep-pf-cote { display: block; }
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) .bep-pf-ph { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bep-pf-cols:not(:has(.bep-pf-cote > .bep-pf-bloc)) .bep-pf-ph a:nth-child(n+7) { display: none; }
  /* formulaire chargé sur ma page : pleine largeur (la colonne de droite est masquée pendant la modification) */
  .bep-pf-cols.bep-pf-edition { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- téléphone : en-tête et onglets bord à bord ---------- */
@media (max-width: 767px) {
  .bep-pf-tete { margin: 0 -15px; border-radius: 0; border-left: 0; border-right: 0; }
  .bep-pf-onglets { margin: 0 -15px 12px; border-radius: 0; border-left: 0; border-right: 0; }
  .bep-pf-apercu-bandeau { margin: 0 -15px; border-left: 0; border-right: 0; }
  .bep-pf-outils .bep-pf-btn { flex: 1 1 auto; }
  .bep-pf-outils .bep-pf-discret { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .bep-pf-actions .bep-pf-btn { width: 56px; }
  .bep-pf-kv3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}