/*!
 * bee-moderne.css — couche de modernisation visuelle.
 * <custom_R pilote UI moderne - 2026-08-01>
 *
 * POURQUOI CE FICHIER
 * Le theme flatty date de l'ere Bootstrap 3 : bordures dures, typographie
 * dense, formulaires bruts. Objectif : ramener le site au niveau visuel du
 * theme Gwangi (WordPress) que Loic preferait — cartes, blancs, angles
 * doux, avatars soignes — sans toucher a la plateforme.
 *
 * REGLES DU JEU
 *  - une COUCHE, pas une refonte : ce fichier se charge apres les feuilles
 *    des jeux (sets) et ne modifie que la forme. Les COULEURS d'accent de
 *    chaque verticale (love/hot/friend/bee) restent celles des sets ;
 *  - loge dans uploads/ : les mises a jour DatingPro n'y touchent pas
 *    (meme survie que uploads/themes-fixed/pleasure) ;
 *  - reversible en retirant une balise <link> dans header.twig.
 *
 * FONDATIONS reprises de Gwangi (lu sur lib.bee.nc, theme gwangi/gwangi-child) :
 * pile Lato/system, rayons 0.25-1rem et pilules (500px), ombres discretes.
 *
 * Perimetre du pilote : recherche + en-tete + composants globaux
 * (boutons, formulaires, badges). Versionner via ?v= dans header.twig.
 */

:root {
    --bee-encre: #241c21;
    --bee-sourdine: #877a81;
    --bee-trait: #ece4e8;
    --bee-fond: #faf7f9;
    --bee-rayon: 16px;
    --bee-rayon-s: 10px;
    --bee-ombre: 0 1px 2px rgba(30, 20, 26, .05), 0 10px 28px -14px rgba(30, 20, 26, .22);
    --bee-ombre-haute: 0 2px 4px rgba(30, 20, 26, .06), 0 18px 40px -16px rgba(30, 20, 26, .28);
}

/* ---------------------------------------------------------- typographie */
body {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--bee-encre);
}

/* ------------------------------------------------------------- en-tete */
.navbar-flatty {
    box-shadow: 0 1px 0 var(--bee-trait), 0 6px 22px -18px rgba(30, 20, 26, .35);
    border: 0;
}
.navbar-flatty .menu-item > a {
    border-radius: 999px;
    transition: background-color .15s ease;
}
.navbar-flatty .menu-item > a:hover {
    background-color: var(--bee-fond);
}

/* --------------------------------------- cartes de profil (recherche) */
.g-users-gallery__item {
    padding: 9px;
}
.g-users-gallery__content {
    background: #fff;
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.g-users-gallery__content:hover {
    transform: translateY(-3px);
    box-shadow: var(--bee-ombre-haute);
}
/* portraits uniformes : le damier de hauteurs inegales fait 2015 */
.g-users-gallery__photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.g-pic-border {
    border: 0;
    padding: 0;
}
.g-users-gallery__info {
    padding: 10px 14px 13px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--bee-sourdine);
}
.g-users-gallery__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--bee-encre);
}
.g-users-gallery__name:hover {
    text-decoration: none;
}

/* badge d'activite : pastille lisible posee sur la photo */
.bee-actif {
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------- boutons */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:hover {
    filter: brightness(1.06);
}
.btn:active {
    transform: scale(.97);
}
.btn-default {
    border-color: var(--bee-trait);
    background-color: #fff;
}
.btn-default:hover {
    border-color: var(--bee-sourdine);
    background-color: #fff;
}

/* --------------------------------------------------------- formulaires */
.form-control,
select.form-control,
input.form-control {
    border-radius: var(--bee-rayon-s);
    border-color: var(--bee-trait);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--bee-sourdine);
    box-shadow: 0 0 0 3px rgba(30, 20, 26, .07);
}

/* ------------------------------------------- filtres de recherche */
.f-block {
    background: #fff;
    border: 0;
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.f-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--bee-encre);
}

/* ---------------------------------------------------------- pagination */
.search-top-pager .pages a,
.pages a {
    border-radius: 999px;
    transition: background-color .15s ease;
}
.search-top-pager .pages a:hover,
.pages a:hover {
    background-color: var(--bee-fond);
    text-decoration: none;
}

/* --------------------------------- respect des preferences systeme */
@media (prefers-reduced-motion: reduce) {
    .g-users-gallery__content,
    .btn {
        transition: none;
    }
    .g-users-gallery__content:hover {
        transform: none;
    }
}

/* ====================================================================
 * Extension du 01/08 (v20260801b) — PROFIL + MESSAGERIE
 * Pilote recherche valide par Loic. Meme regle : la forme, pas les
 * couleurs d'accent (les fonds de bulles restent ceux des verticales).
 * ==================================================================== */

/* ------------------------------------------------------------- profil */
.section-header {
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--bee-encre);
    border: 0;
}
.field-block {
    padding: 9px 0;
    border-bottom: 1px solid var(--bee-trait);
}
.field-block:last-child {
    border-bottom: 0;
}
.field-name {
    color: var(--bee-sourdine);
    font-size: 13px;
}
.field-info {
    color: var(--bee-encre);
    font-size: 14px;
}
.example-fields {
    color: var(--bee-sourdine);
    font-style: italic;
    font-size: 13px;
}
/* vignettes de services (Acces gratuit, Membre vedette...) */
.mag-services__item {
    border-radius: var(--bee-rayon-s);
    transition: background-color .15s ease, transform .15s ease;
}
.mag-services__item:hover {
    background-color: var(--bee-fond);
    transform: translateY(-2px);
}
/* onglets du profil (MUR / PROFIL) */
.magazine-profile__tabs li a {
    border-radius: 999px;
    padding: 4px 12px;
    transition: background-color .15s ease;
}
.magazine-profile__tabs li a:hover {
    background-color: var(--bee-fond);
    text-decoration: none;
}

/* --------------------------------------------------------- messagerie */
.chatbox {
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
}
.chatbox-users__filter {
    border-bottom: 1px solid var(--bee-trait);
}
/* lignes de contacts : survol doux au lieu du gris dur #DDD */
.chatbox-users__user,
.chatbox-users__user:hover,
.chatbox-users__user.active {
    border-top: 1px solid var(--bee-trait);
}
.chatbox-users__user:hover {
    background: var(--bee-fond);
}
.chatbox-users__user.active {
    background: #f5eef3;
}
/* avatars ronds — la signature Gwangi */
.chatbox-users__photo img,
.chatbox-messages__userlogo img {
    border-radius: 999px;
    border: 0;
}
/* bulles : angles genereux, pointe discrete ; le FOND reste celui du set */
.chatbox-messages__bubble {
    box-shadow: 0 1px 2px rgba(30, 20, 26, .07);
    line-height: 1.45;
}
.chatbox-messages__bubble-left {
    border: 0;
    background: #f4eff2;
    border-radius: 18px 18px 18px 5px;
}
.chatbox-messages__bubble-right {
    border-radius: 18px 18px 5px 18px;
}
.chatbox-messages__timing {
    color: var(--bee-sourdine);
}
/* zone de saisie */
.chatbox textarea.form-control,
.chatbox input.form-control {
    border-radius: var(--bee-rayon-s);
}

/* ------------------------------------------------ composants globaux */
.badge {
    border-radius: 999px;
    font-weight: 600;
}
.img-rounded {
    border-radius: 12px;
}
/* fenetres modales : memes angles que les cartes */
.load_content_inner {
    border-radius: var(--bee-rayon);
}

/* ====================================================================
 * Extension du 01/08 (v20260801c) — SITE ENTIER
 * BeeSwipe, groupes, reglages, pied de page, messages systeme.
 * Chargee aussi sur les pages invitees via header_lite.twig.
 * ==================================================================== */

/* ----------------------------------------------------------- BeeSwipe */
.b-likeme__image {
    border: 0;
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre-haute);
    overflow: hidden;
}
.b-likeme__name {
    font-weight: 700;
    background: rgba(255, 255, 255, .94);
}
.b-likeme__actions a,
.b-likeme__actions button {
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(30, 20, 26, .18);
    transition: transform .12s ease;
}
.b-likeme__actions a:active,
.b-likeme__actions button:active {
    transform: scale(.94);
}

/* bloc « N nouveaux matchs » (messagerie) */
.like_me_count_matches {
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    transition: transform .15s ease, box-shadow .15s ease;
}
.like_me_count_matches:hover {
    transform: translateY(-2px);
    box-shadow: var(--bee-ombre-haute);
}

/* ------------------------------------------------------------ groupes */
.groups-list-item {
    background: #fff;
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.groups-list-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--bee-ombre-haute);
}
.groups-list__title {
    font-weight: 700;
    color: var(--bee-encre);
}
.descr-1,
.descr-2 {
    color: var(--bee-sourdine);
}

/* ----------------------------------------------------------- reglages */
.settings-block__menu__item {
    border-radius: var(--bee-rayon-s);
    border-color: var(--bee-trait);
    transition: background-color .15s ease;
}
.settings-block__menu__item:hover {
    background-color: var(--bee-fond);
}

/* ------------------------------------------------------ pied de page */
.footer-menu-list-group-item {
    color: var(--bee-sourdine);
    transition: color .15s ease;
}
.footer-menu-list-group-item:hover {
    color: var(--bee-encre);
}

/* ------------------------------------------------- messages systeme */
#error_block:not(:empty),
#info_block:not(:empty),
#success_block:not(:empty) {
    border-radius: var(--bee-rayon-s);
    padding: 12px 18px;
    margin: 10px auto;
    max-width: 720px;
    box-shadow: var(--bee-ombre);
    font-weight: 600;
}

/* ====================================================================
 * Extension du 01/08 (v20260801d) — selecteur BeeVibes en cartes
 * Loic : « pas fan de la pleine largeur en aplat, des cartes avec
 * ombres pourraient etre pas mal ». Chaque vibe devient une carte
 * blanche ombree, avec sa pastille de couleur de marque.
 * ==================================================================== */
.c-domains h1 {
    font-size: 1.35em;
    font-weight: 700;
    margin-bottom: 18px;
}
.c-domains ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
}
.c-domains ul li {
    margin: 0;
    font-size: 1.05em;
    text-transform: none;
    position: relative;
    background: #fff;
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    transition: transform .16s ease, box-shadow .16s ease;
}
.c-domains ul li:hover {
    transform: translateY(-3px);
    box-shadow: var(--bee-ombre-haute);
}
.c-domains ul li a {
    display: block;
    padding: 22px 18px 20px 18px;
    font-weight: 700;
    color: var(--bee-encre);
    text-decoration: none;
    text-align: center;
}
/* pastille de la couleur de marque de chaque vibe */
.c-domains ul li a::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 0 auto 10px;
    background: var(--bee-sourdine);
}
.c-domains ul li[data-gid="love"] a::before   { background: #c9327a; }
.c-domains ul li[data-gid="hot"] a::before    { background: #D7221E; }
.c-domains ul li[data-gid="friend"] a::before { background: #F69C00; }
/* coche « vibe actuelle » posee sur la carte */
.c-domains ul li .fa-check {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #2e8f57;
}

/* icone du lien BeeVibes dans le menu */
.bee-vibes-icone {
    vertical-align: -6px;
    margin-right: 6px;
}

/* ====================================================================
 * Extension du 01/08 (v20260801e) — PAGES D'ACCUEIL (theme pleasure)
 * Meme logique : cartes, ombres, angles — la structure marketing et
 * les visuels du theme restent intacts.
 * ==================================================================== */

/* les trois blocs « features » deviennent des cartes */
.b-features__item {
    background: #fff;
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    padding: 26px 22px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.b-features__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--bee-ombre-haute);
}
.b-features__title {
    font-weight: 700;
}
.b-features__image img {
    max-width: 100%;
    border-radius: var(--bee-rayon-s);
}

/* panneaux connexion / inscription de la landing */
.sign_in-block,
.registration-block {
    background: #fff;
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre-haute);
    padding: 26px 24px;
}

/* navigation haute de la landing */
.b-header__topnav a {
    border-radius: 999px;
    padding: 6px 14px;
    transition: background-color .15s ease;
}
.b-header__topnav a:hover {
    background-color: rgba(255, 255, 255, .14);
    text-decoration: none;
}

/* choix du type de profil a l'inscription */
.user_types-block {
    border-radius: var(--bee-rayon-s);
}