/*!
 * 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 {
    /* flex centre plutot que grille : avec 3 vibes une grille 2x2
       laissait un emplacement beant (signale par Loic le 01/08) */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
}
.c-domains ul li {
    flex: 1 1 180px;
    max-width: 240px;
    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);
}


/* ============================================================
   v20260801f — BeeSwipe en carte, edition de profil, upload
   ============================================================ */

/* --- BeeSwipe : la photo en carte flottante, plus en aplat pleine largeur.
       Scope :has(.like_me-block) = uniquement la page BeeSwipe, pas les
       profils classiques qui partagent le meme gabarit magazine. --- */
@media (min-width: 992px) {
    body:has(.like_me-block) .magazine-profile__media {
        top: 96px;
        right: 32px;
        bottom: 32px;
        width: calc(50% - 64px);
        border-radius: var(--bee-rayon);
        overflow: hidden;
        box-shadow: 0 18px 48px rgba(36, 28, 33, .22);
    }
}

/* --- Edition de profil : les encadres pointilles faisaient brouillon.
       On les remplace par des cartes calmes qui s eclairent au survol. --- */
.magazine-profile__params .owner-actions .field-block {
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon-s);
    background: #fff;
    padding: 12px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.magazine-profile__params .owner-actions .field-block:hover {
    border-color: var(--bee-sourdine);
    box-shadow: var(--bee-ombre-basse);
}

/* cases a cocher et boutons radio aux couleurs de la marque */
.magazine-profile__params input[type="checkbox"],
.magazine-profile__params input[type="radio"] {
    accent-color: #ED5CA8;
}

/* --- Popup d ajout de photos : zone de depot moderne --- */
.drag-area,
.drag-area.hover {
    border: 2px dashed var(--bee-trait);
    border-radius: var(--bee-rayon-s);
    background: var(--bee-fond);
    color: var(--bee-sourdine);
}
.drag-area.hover {
    border-color: #ED5CA8;
}

/* --- Tuiles du panneau photo (ajouter / galerie) : coins arrondis
       et fond adouci au lieu des blocs carres durs --- */
.magazine-profile__recentmedia {
    right: 20px;
    bottom: 44px;
}
.magazine-profile__recentmedia .media-items .middle,
.magazine-profile__recentmedia a {
    border-radius: var(--bee-rayon-s);
    overflow: hidden;
}
.change-photo-button,
.view-photo-button,
.change-photo-button.owner-change-photo {
    border-radius: var(--bee-rayon-s);
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, .55);
    letter-spacing: .04em;
}


/* ============================================================
   v20260801g — BeeSwipe : la photo remplit la carte
   ============================================================ */
@media (min-width: 992px) {
    /* La photo etait posee au centre sur fond noir (bandes vides de
       chaque cote). Elle couvre desormais toute la carte. */
    body:has(.like_me-block) .magazine-profile__media img,
    body:has(.like_me-block) .magazine-profile__media .magazine-profile__ava {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Les boutons passer / aimer, centres sous la photo plutot que
       flottants entre les deux colonnes. */
    body:has(.like_me-block) .like_me-block__actions {
        left: auto;
        right: 25%;
        transform: translateX(50%);
    }
}


/* ============================================================
   v20260801i — BeeSwipe « cartes a jouer » (demande de Loic)
   La fiche texte et la photo deviennent deux cartes qui se
   chevauchent avec un leger angle, comme des cartes en main.
   ============================================================ */
@media (min-width: 992px) {
    /* fond uni : suppression du halo gris fonce (flou + voile noir 75 %) */
    body:has(.like_me-block) .magazine-profile__avabg {
        display: none;
    }
    body:has(.like_me-block) .magazine-profile__media {
        background: var(--bee-fond);
        transform: rotate(1.2deg);
    }
    /* la photo couvre toute la carte — la chaine ava > lien > image
       etait centree en boite, d ou les bandes vides */
    body:has(.like_me-block) .magazine-profile__ava,
    body:has(.like_me-block) .magazine-profile__ava a,
    body:has(.like_me-block) .magazine-profile__ava > div {
        width: 100%;
        height: 100%;
    }
    body:has(.like_me-block) .magazine-profile__ava img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }
    /* la fiche texte devient la seconde carte de la main, inclinee
       en sens inverse et glissee sur le coin de la photo */
    body:has(.like_me-block) .magazine-profile__text {
        position: relative;
        z-index: 2;
    }
    body:has(.like_me-block) .magazine-profile__text .magazine-profile__content {
        background: #fff;
        border: 1px solid var(--bee-trait);
        border-radius: var(--bee-rayon);
        box-shadow: var(--bee-ombre-haute);
        transform: rotate(-1deg);
        /* v20260801r : carte relevee (120 -> 56px, retour de Loic) */
        margin: 56px -40px 70px 48px;
        padding: 36px 40px;
    }
}


/* ============================================================
   v20260801j — correction : la carte blanche des panneaux
   connexion/inscription ne doit PAS s appliquer au bloc heros
   des landings — son texte est blanc, concu pour etre pose sur
   la photo. Fond blanc + texte blanc = contenu invisible
   (constate sur bee.nc mobile le 01/08).
   ============================================================ */
.th-set__index_promo_text_main .registration-block,
.th-set__index_promo_text_main .sign_in-block {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


/* ============================================================
   v20260801k — landing : la section BeEvent perd le mockup
   « DatingPro » du theme (telephones avec profils americains,
   hors sujet et date). Le texte prend toute la largeur, centre.
   ============================================================ */
.b-mobile .b-mobile__img,
.b-mobile .col-sm-4 {
    display: none;
}
.b-mobile .col-sm-8 {
    width: 100%;
    float: none;
}
.b-mobile__text {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 34px 16px;
}


/* ============================================================
   v20260801m — chat : ancrage en bas RETIRE (v...l) apres retour
   de Loic (« les conversations commencent en bas, bizarre »).
   La vraie cause du « on atterrit en bas et on ne voit rien »
   etait le focus() de la zone de saisie qui faisait defiler la
   page — corrige dans chatbox.js (custom_R focus sans
   defilement). Les messages reprennent le sens de lecture
   normal, de haut en bas.
   ============================================================ */


/* ============================================================
   v20260801n — filtres de recherche : « Avec photo » et
   « En ligne » (signale par Loic : rendu brouillon)
   ============================================================ */
/* la case a cocher nue devient cliquable et a la couleur de marque */
.fline__item input[type="checkbox"]:not(.hide),
.f-block input[type="checkbox"]:not(.hide) {
    width: 20px;
    height: 20px;
    accent-color: #ED5CA8;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 8px;
}
/* l interrupteur bootstrap-switch en pilule, sans la poignee « ≡ » */
.bootstrap-switch {
    border-radius: 999px !important;
    border-color: var(--bee-trait);
    overflow: hidden;
}
.bootstrap-switch .bootstrap-switch-label {
    background: var(--bee-fond);
    color: var(--bee-fond);        /* masque le glyphe de poignee */
    min-width: 26px;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .03em;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: #fff;
    color: var(--bee-sourdine);
}


/* ============================================================
   v20260801o — landing vendeuse (GO de Loic) + footer redessine
   ============================================================ */
/* --- bande de chiffres vivants (dans le bandeau rose du theme) --- */
.bee-chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 56px;
    justify-content: center;
    text-align: center;
}
.bee-chiffres__item {
    font-size: 14px;
    letter-spacing: .02em;
}
.bee-chiffres__item strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}
.bee-reassurance {
    text-align: center;
    opacity: .85;
    margin-top: 16px;
    letter-spacing: .03em;
    font-size: 13.5px;
}

/* --- sections landing --- */
.bee-section-titre {
    text-align: center;
    font-weight: 800;
    font-size: 26px;
    margin: 0 0 28px;
    color: var(--bee-encre);
}
.bee-confiance {
    background: #fff;
    padding: 54px 0 30px;
}
.bee-confiance__item {
    background: var(--bee-fond);
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon);
    padding: 22px 20px;
    margin-bottom: 14px;
    min-height: 148px;
}
.bee-confiance__item h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--bee-encre);
}
.bee-confiance__item p {
    color: var(--bee-sourdine);
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}
.bee-vibes-landing {
    background: #fff;
    padding: 14px 0 50px;
}
.bee-vibe-carte {
    display: block;
    background: #fff;
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon);
    box-shadow: var(--bee-ombre);
    padding: 26px 20px 22px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--bee-encre);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bee-vibe-carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--bee-ombre-haute);
    text-decoration: none;
    color: var(--bee-encre);
}
.bee-vibe-carte__pastille {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 0 auto 12px;
}
.bee-vibe-carte__nom {
    display: block;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 4px;
}
.bee-vibe-carte__base {
    display: block;
    color: var(--bee-sourdine);
    font-size: 13.5px;
}
.bee-cta-final {
    background: var(--bee-fond);
    border-top: 1px solid var(--bee-trait);
    text-align: center;
    padding: 46px 16px 54px;
}
.bee-cta-final h2 {
    font-weight: 800;
    margin: 0 0 6px;
}
.bee-cta-final p {
    color: var(--bee-sourdine);
    margin: 0 0 22px;
}
.bee-cta-final__btn {
    padding: 12px 36px;
    font-size: 16px;
}

/* --- footer du site connecte : blanc, aere, liens vivants --- */
.footer-menu {
    background: #fff;
    border-top: 1px solid var(--bee-trait);
    border-bottom: 0;
    padding: 36px 0 16px;
}
.footer-menu-title-block {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--bee-sourdine);
}
.footer-menu a {
    color: var(--bee-encre);
    line-height: 2.1;
    transition: color .15s ease;
}
.footer-menu a:hover {
    color: #ED5CA8;
    text-decoration: none;
}
footer {
    background: #fff;
}
.footer-info {
    background: var(--bee-fond);
    border-top: 1px solid var(--bee-trait);
    margin-bottom: 0;
    padding: 16px 0;
}
.footer-info, .copyright, .copyright a {
    color: var(--bee-sourdine);
}
.copyright a:hover {
    color: #ED5CA8;
}


/* ============================================================
   v20260801p — footer : plus de vide au centre/droite
   Les menus n occupaient que la gauche et la colonne « applis
   mobiles » (vide, aucune app configuree) reservait un tiers.
   ============================================================ */
#footer_menu .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 90px;
}
#footer_menu .row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 220px;
    flex: 0 1 auto;
}
#footer_menu .mobile_app_links {
    display: none;   /* aucune app configuree : le bloc etait vide */
}


/* ============================================================
   v20260801q — landing : respiration et finitions
   (retour de Loic : « encore vieillot, manque du padding,
   verifier les boutons, changer les images »)
   ============================================================ */
/* cartes features : icone SVG centree dans un souffle genereux */
.b-features {
    padding: 56px 0 30px;
    background: #fff;
}
.b-features__item {
    padding: 34px 26px 30px;
    margin-bottom: 18px;
    min-height: 300px;
}
.b-features__image {
    margin-bottom: 18px;
}
.b-features__image img {
    width: 84px;
    height: 84px;
    border-radius: 0;
    box-shadow: none;
}
.b-features__title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 10px;
}
.b-features__item p {
    color: var(--bee-sourdine);
    font-size: 14px;
    line-height: 1.6;
}

/* bande sous le hero : plus d air autour des compteurs */
.b-afterheader {
    padding: 34px 0 30px;
}

/* formulaire du hero : champs et bouton a la meme hauteur, bien espaces */
.th-set__index_promo_text_main .form-control,
.th-set__index_promo_text_main .btn,
.sign_in-block .btn,
.registration-block .btn {
    min-height: 48px;
    font-size: 15px;
}
.th-set__index_promo_text_main .btn {
    padding-left: 30px;
    padding-right: 30px;
}

/* titres de sections landing : marges coherentes */
.b-mobile {
    padding: 30px 0 40px;
}
.b-mobile__text h2 {
    font-weight: 800;
}

/* le pied de landing (bandeau sombre) respire */
.b-footer {
    padding: 18px 0;
}


/* ============================================================
   v20260801t — FAQ des landings (accordeon details/summary)
   ============================================================ */
.bee-faq {
    background: var(--bee-fond);
    border-top: 1px solid var(--bee-trait);
    padding: 50px 0 54px;
}
.bee-faq__liste {
    max-width: 760px;
    margin: 0 auto;
}
.bee-faq__item {
    background: #fff;
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon-s);
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
}
.bee-faq__item summary {
    cursor: pointer;
    font-weight: 700;
    padding: 16px 20px;
    list-style: none;
    position: relative;
    color: var(--bee-encre);
}
.bee-faq__item summary::-webkit-details-marker { display: none; }
.bee-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--bee-sourdine);
    transition: transform .15s ease;
}
.bee-faq__item[open] summary::after {
    content: "–";
}
.bee-faq__item p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--bee-sourdine);
    line-height: 1.6;
}


/* ============================================================
   v20260801u — selecteurs « bootstrap-select » du hero
   Le conteneur .bootstrap-select porte la classe form-control :
   il heritait donc du rayon 10px ET d'une ombre, alors que le
   bouton qu'il contient est en pilule (999px). Le rectangle
   depassait aux quatre coins — d'ou le contour gris signale par
   Loic sur « Je recherche... ». C'est le bouton qui porte la
   forme ; le conteneur doit s'effacer.
   ============================================================ */
.bootstrap-select.form-control,
.bootstrap-select {
    border-radius: 999px;
    box-shadow: none;
    background: transparent;
    border: 0;
}
.bootstrap-select > .dropdown-toggle {
    border-radius: 999px;
}
/* le texte d'invite etait a #999 : trop pale sur blanc */
.bootstrap-select .bs-placeholder,
.bootstrap-select .filter-option-inner-inner {
    color: var(--bee-sourdine);
}
/* la liste deroulante suit la meme charte */
.bootstrap-select .dropdown-menu {
    border-radius: var(--bee-rayon-s);
    border: 1px solid var(--bee-trait);
    box-shadow: var(--bee-ombre-haute);
    overflow: hidden;
}


/* v20260801v — texte d'invite du selecteur : le theme le fixe a #999
   avec une specificite superieure ; on la depasse sans !important. */
.registration-block .bootstrap-select > .btn.bs-placeholder,
.sign_in-block .bootstrap-select > .btn.bs-placeholder,
.bootstrap-select > .btn.dropdown-toggle.bs-placeholder {
    color: var(--bee-sourdine);
}
/* bordure alignee sur celle du champ voisin */
.bootstrap-select > .btn.dropdown-toggle {
    border-color: var(--bee-trait);
}


/* v20260801w — « Se connecter » du hero : le rose de marque sur une photo
   claire tombe sous le seuil de lisibilite. Blanc souligne, comme le lien
   « SE CONNECTER » de la barre haute, avec une ombre portee legere pour
   tenir sur les zones les plus claires de l'image. */
.th-set__index_promo_text_main a[href*="login_form"],
.registration-block a[href*="login_form"] {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.th-set__index_promo_text_main a[href*="login_form"]:hover,
.registration-block a[href*="login_form"]:hover {
    color: #fff;
    opacity: .85;
}


/* ============================================================
   v20260801x — bannieres annonceurs : tenue sur mobile
   Les emplacements datent de 2011 (980 px de large) et le theme
   ne borne pas la largeur des images. A l'epoque le mobile etait
   marginal ; il represente aujourd'hui 65 % de l'audience. Sans
   cette regle, une banniere vendue depasse l'ecran chez deux
   visiteurs sur trois.
   ============================================================ */
.footer-banners img,
#footer_banner img,
[class*="banner"] img {
    max-width: 100%;
    height: auto;
}
.footer-banners,
#footer_banner {
    overflow-x: hidden;
    text-align: center;
}
.footer-banners li {
    list-style: none;
    margin: 0 auto;
}


/* ============================================================
   v20260801y — bloc « Bien demarrer » (onboarding 3 etapes)
   46 % des inscrits ne revenaient jamais apres J0 : rien ne
   guidait un nouveau membre. Bandeau doux sous le header pour
   les comptes < 14 jours, retire de lui-meme a 3/3.
   ============================================================ */
.bee-onboarding {
    max-width: 1080px;
    margin: 14px auto 4px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FDF0F6, #FFF6E8);
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon-s);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.bee-onboarding__titre {
    font-weight: 700;
    color: var(--bee-encre);
    white-space: nowrap;
}
.bee-onboarding__compte {
    font-weight: 600;
    color: var(--bee-fuchsia);
    margin-left: 6px;
}
.bee-onboarding__etapes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.bee-onboarding__etape {
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bee-trait);
    color: var(--bee-encre);
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.bee-onboarding__etape:hover {
    transform: translateY(-1px);
    box-shadow: var(--bee-ombre-douce);
    color: var(--bee-fuchsia);
    text-decoration: none;
}
.bee-onboarding__etape.est-faite {
    background: transparent;
    border-color: transparent;
    color: var(--bee-sourdine);
    font-weight: 500;
}
@media (max-width: 640px) {
    .bee-onboarding { margin: 8px 10px 0; padding: 12px 14px; }
    .bee-onboarding__etape { padding: 6px 12px; font-size: 14px; }
}

/* ============================================================
   v20260807b — habillage des vibes en cases a cocher + toast
   (accompagne bee-moderne.js v20260807a)
   ============================================================ */
.bee-select-cache {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}
.bee-vibes-choix {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.bee-vibes-choix__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon-s);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
    margin: 0;
}
.bee-vibes-choix__item:hover { border-color: var(--bee-rose); }
.bee-vibes-choix__item.est-choisi {
    border-color: var(--bee-rose);
    background: #FDF0F6;
}
.bee-vibes-choix__item input[type="checkbox"] {
    accent-color: var(--bee-fuchsia);
    width: 18px;
    height: 18px;
    margin: 0;
}
.bee-vibes-choix__aide {
    font-size: 13px;
    color: var(--bee-sourdine);
}
.bee-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(92vw, 480px);
    background: var(--bee-encre);
    color: #fff;
    padding: 14px 18px;
    border-radius: var(--bee-rayon-s);
    box-shadow: var(--bee-ombre-haute);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 9999;
    line-height: 1.5;
}
.bee-toast.est-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.bee-toast a { color: #FFD3E4; text-decoration: underline; }

/* v20260807c — les cases vibes heritent parfois d'une couleur claire */
.bee-vibes-choix__item { color: var(--bee-encre, #241C21); }

/* v20260807d — le bandeau onboarding passait sous la carte BeeSwipe
   (marge negative de la carte « a jouer »). Le bandeau doit rester
   lisible et cliquable partout : premier plan, fond deja opaque. */
.bee-onboarding {
    position: relative;
    z-index: 60;
}

/* v20260807e — bandeau onboarding : z-index 60 passait AU-DESSUS des
   panneaux fixes (galerie photo du profil). 5 suffit : au-dessus de la
   carte BeeSwipe (z auto), sous tout panneau explicitement z-indexe. */
.bee-onboarding { z-index: 5; }

/* ============================================================
   v20260807f — compteurs v2 : de l'impact
   Retires bruts plus tot dans la soiree ; Loic a precise que le
   probleme etait le manque d'impact visuel, pas les chiffres.
   Trois grands chiffres en grille, animes au scroll (JS).
   ============================================================ */
.bee-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 0 4px;
    text-align: center;
}
.bee-chiffres__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
.bee-chiffres__item + .bee-chiffres__item {
    border-left: 1px solid rgba(255, 255, 255, .28);
}
.bee-chiffres__item strong {
    display: block;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .bee-chiffres { grid-template-columns: 1fr; gap: 18px; }
    .bee-chiffres__item + .bee-chiffres__item { border-left: 0; }
}

/* ============================================================
   v20260808a — galerie BeEvents (section 5 de l'audit landing,
   enfin livrable : Loic a fourni les photos le 08/08)
   ============================================================ */
.bee-beevents {
    padding: 56px 0;
    background: #fff;
}
.bee-beevents__intro {
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
    color: var(--bee-sourdine);
    font-size: 17px;
}
.bee-beevents__galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.bee-beevents__galerie figure {
    margin: 0;
    border-radius: var(--bee-rayon-s);
    overflow: hidden;
    box-shadow: var(--bee-ombre-douce);
    aspect-ratio: 4 / 3;
}
.bee-beevents__galerie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.bee-beevents__galerie figure:hover img { transform: scale(1.04); }
@media (max-width: 640px) {
    .bee-beevents__galerie { grid-template-columns: 1fr; }
    .bee-beevents__galerie figure { aspect-ratio: 16 / 10; }
}

/* v20260808b — la galerie BeEvents s'adapte au nombre de photos par
   vibe : 3 sur bee.nc, 2 sur love/hot, 1 panorama sur friend. */
.bee-beevents__galerie {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bee-beevents__galerie figure:only-child {
    aspect-ratio: 21 / 9;
    max-width: 920px;
    margin: 0 auto;
}

/* v20260808c — le panorama 21/9 de la rando (photo carree) ne cadrait
   que le ciel, le groupe etait coupe (capture Loic). 16/9 centre sur
   le groupe : les visages restent dans le cadre. */
.bee-beevents__galerie figure:only-child {
    aspect-ratio: 16 / 9;
    max-width: 820px;
}
.bee-beevents__galerie figure:only-child img {
    object-position: center 42%;
}

/* v20260808d — retour vers bee.nc depuis les vibes (lien barre haute
   + ligne sous la section esprit) */
.bee-retour-hub {
    margin-right: 18px;
    opacity: .85;
}
.bee-retour-hub:hover { opacity: 1; }
.bee-retour-ligne {
    text-align: center;
    color: var(--bee-sourdine);
    margin: -18px auto 34px;
    font-size: 15px;
}
.bee-retour-ligne a { color: var(--bee-fuchsia); text-decoration: underline; }

/* v20260808e — recadrages galerie BeEvents (retour Loic : les fenetres
   4/3 coupaient les sujets). Chaque photo est ciblee par son nom de
   fichier : independant de l'ordre des galeries par vibe.
   - rando (carree) : le groupe est en bas -> on descend le cadre ;
   - duo (16/9) : les visages sont a gauche -> cadre a gauche ;
   - danse (16/9) : le baiser est a droite du centre -> cadre a droite. */
.bee-beevents__galerie img[src*="beevent-rando"] { object-position: center 72%; }
.bee-beevents__galerie img[src*="beevent-soiree-duo"] { object-position: 28% center; }
.bee-beevents__galerie img[src*="beevent-soiree-danse"] { object-position: 58% center; }

/* logo Bee.nc en guise de retour hub (remplace le lien texte) */
.bee-retour-hub img {
    height: 26px;
    width: auto;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* v20260808f — retour hub dans la barre connectee : aligne avec le
   logo de la vibe, discret */
.bee-retour-hub--nav {
    display: inline-flex;
    align-items: center;
    margin: 0 10px 0 0;
    opacity: .75;
    transition: opacity .15s ease;
}
.bee-retour-hub--nav:hover { opacity: 1; }
.bee-retour-hub--nav img { height: 20px; filter: none; }

/* v20260808g — recadrages définitifs, calés sur les fichiers réels :
   - rando (carrée) : le groupe occupe le quart bas -> cadre en bas ;
   - danse (16/9) : le couple est à gauche du centre (~x40%) ;
   - duo : 28% confirmé bon sur capture. Remplace les valeurs v20260808e. */
.bee-beevents__galerie img[src*="beevent-rando"] { object-position: center bottom; }
.bee-beevents__galerie img[src*="beevent-soiree-danse"] { object-position: 40% center; }

/* v20260808h — photo unique (friend) : FIN des recadrages. La photo de
   rando est carree et le groupe s'etale de 27% a 96% de la hauteur :
   aucune fenetre panoramique ne peut tout contenir (3 tentatives, 3
   echecs). On l'affiche ENTIERE, carre centre, taille contenue. */
.bee-beevents__galerie figure:only-child {
    aspect-ratio: 1 / 1;
    max-width: 520px;
}
.bee-beevents__galerie figure:only-child img {
    object-position: center;
}

/* ============================================================
   v20260808i — photos 700x500 affichees TELLES QUELLES
   (directive Loic). Les fichiers sont retailles physiquement au
   bon cadre : plus aucun recadrage CSS. Ces regles annulent les
   aspect-ratio et object-position des versions e a h.
   ============================================================ */
.bee-beevents__galerie figure,
.bee-beevents__galerie figure:only-child {
    aspect-ratio: auto;
}
.bee-beevents__galerie figure:only-child { max-width: 700px; }
.bee-beevents__galerie img,
.bee-beevents__galerie figure:only-child img {
    height: auto;
    object-fit: initial;
    object-position: initial;
}

/* ============================================================
   v20260810a — teaser « Qui m'aime » (items A+E)
   La page est ouverte a tous ; pour un membre gratuit, les
   identites sont retirees COTE SERVEUR et remplacees par des
   silhouettes. Ici on leur donne l'allure d'un voile : on doit
   sentir qu'il y a quelqu'un derriere, sans rien reconnaitre.
   ============================================================ */
.bee-teaser-item .thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: var(--bee-rayon-s);
    background: linear-gradient(135deg, #FDF0F6 0%, #FFF6E8 100%);
}
.bee-teaser-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
}
/* silhouette floue : un buste stylise, volontairement illisible */
.bee-teaser-photo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22%;
    width: 38%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(201, 50, 122, .22);
    filter: blur(6px);
}
.bee-teaser-photo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12%;
    width: 74%;
    aspect-ratio: 1.35;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0;
    background: rgba(201, 50, 122, .18);
    filter: blur(8px);
}
.bee-teaser-cta {
    margin: 26px auto 8px;
    padding: 22px 24px;
    max-width: 680px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--bee-trait);
    border-radius: var(--bee-rayon-s);
    box-shadow: var(--bee-ombre-douce);
}
.bee-teaser-cta p { margin: 0 0 14px; color: var(--bee-encre); font-size: 16px; }
.bee-teaser-cta .btn { border-radius: 999px; padding: 10px 26px; }

/* ============================================================
   v20260810c — messages systeme : visibles ET presentables
   <custom_R messages systeme - 2026-08-11>
   Rappel du constat : le serveur ecrit ses messages dans
   #error_block / #info_block / #success_block, que le theme masque
   en display:none, puis les confie au composant `pginfo` — lequel
   vise un conteneur .pginfo QUI N EXISTE PAS ici. Aucun message
   systeme n a donc jamais ete visible par un membre.
   Reprise du 11/08 apres retour de Loic (« ces popup ne sont pas
   beaux »), sur trois defauts de ma premiere version :
     1. ancre en haut a 84px — sur les gabarits courts (page de
        consentement apres inscription sociale) ca tombait en plein
        sur le titre et masquait le texte. On ancre desormais EN BAS
        sur mobile, ou rien ne peut entrer en collision, et en haut
        seulement a partir du bureau ;
     2. le theme reprenait la main sur le fond et la couleur selon
        les pages (d ou la boite verte de la capture). Les proprietes
        qui portent l identite visuelle sont donc en !important ;
     3. bordure pleine coloree, trop criarde. Remplacee par un seul
        filet lateral, qui suffit a coder le type du message.
   ============================================================ */
#error_block:not(:empty),
#info_block:not(:empty),
#success_block:not(:empty) {
    display: block !important;
    position: fixed !important;
    left: 12px;
    right: 12px;
    /* le bandeau cookies natif occupe en permanence le bas de l'ecran :
       on se pose au-dessus, sinon les deux se recouvrent */
    bottom: 58px;
    top: auto !important;
    transform: none !important;
    margin: 0 auto;
    max-width: 540px;
    box-sizing: border-box;
    z-index: 9000;
    padding: 15px 46px 15px 18px;
    background: #fff !important;
    color: #241c21 !important;
    border: 0 !important;
    border-left: 5px solid var(--bee-rose, #C9327A) !important;
    border-radius: 12px !important;
    font-size: 14.5px;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
    animation: beeMsgEntre .32s cubic-bezier(.16, 1, .3, 1) both;
}
#error_block:not(:empty)   { border-left-color: #d63031 !important; }
#success_block:not(:empty) { border-left-color: #17a673 !important; }

/* le serveur termine ses messages par un <br> : sans ca, une ligne vide */
#error_block:not(:empty)   > br:last-child,
#info_block:not(:empty)    > br:last-child,
#success_block:not(:empty) > br:last-child { display: none; }

/* les liens que le serveur glisse parfois dans le message */
#error_block:not(:empty) a,
#info_block:not(:empty) a,
#success_block:not(:empty) a { color: var(--bee-rose, #C9327A); font-weight: 600; }

@keyframes beeMsgEntre {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.bee-msg-fermer {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #9a8f95;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.bee-msg-fermer:hover { background: rgba(0, 0, 0, .07); color: #241c21; }

/* a partir du bureau, l espace en haut est libre et l oeil y va */
@media (min-width: 768px) {
    #error_block:not(:empty),
    #info_block:not(:empty),
    #success_block:not(:empty) {
        top: 84px !important;
        bottom: auto;
        max-width: 620px;
        font-size: 15px;
        animation-name: beeMsgEntreHaut;
    }
    @keyframes beeMsgEntreHaut {
        from { opacity: 0; transform: translateY(-14px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ============================================================
   v20260810c — le bandeau cookies natif, habille
   <custom_R bandeau cookie natif - 2026-08-11>
   Celui-ci n est PAS le bandeau de consentement Bee (#bee-consent,
   soigne, qui ne s affiche qu une fois). C est le bandeau natif de
   DatingPro, qu on laisse revenir APRES le choix pour servir de
   point d entree permanent « modifier mes choix » — la revocabilite
   etant exigee. Sauf qu il n avait jamais ete habille : gros pave
   creme, texte gris peu lisible, croix a gauche collee au bord.
   Comme il est permanent, il doit se faire oublier : un filet fin en
   bas de page, lisible mais discret.
   ============================================================ */
#cookie_policy_block.mod-cookie-policy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8000;
    margin: 0;
    padding: 9px 44px 9px 14px;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .07);
    color: #5b5157;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
}
/* c'est le .container INTERIEUR que le theme peint en creme, avec sa propre
   bordure et son arrondi — neutraliser le bloc exterieur ne suffit pas */
#cookie_policy_block.mod-cookie-policy .container,
#cookie_policy_block.mod-cookie-policy .row {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#cookie_policy_block.mod-cookie-policy p { margin: 0; }
#cookie_policy_block.mod-cookie-policy a {
    color: var(--bee-rose, #C9327A);
    font-weight: 600;
    text-decoration: underline;
}
/* le theme cale la croix a GAUCHE (`left:10px`) : poser `right` ne l'annule
   pas, il faut explicitement rendre `left` a `auto` */
#cookie_policy_block a.close-btn-cookie {
    position: absolute;
    top: 50%;
    left: auto !important;
    right: 10px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a8f95;
    text-decoration: none;
    border-radius: 50%;
}
#cookie_policy_block .close-btn-cookie:hover { background: rgba(0, 0, 0, .07); color: #241c21; }

@media (max-width: 767px) {
    #cookie_policy_block.mod-cookie-policy { font-size: 12px; padding: 8px 40px 8px 12px; }
}