/* bep-harmonie : aligne l'ancien thème de vld (pink_theme + style.css) sur les pages refaites le 07/10
   (barre du site, profil, recherche, apéros, messagerie). Chargée après style.css et style_login.css. */

:root {
  --h-bleu: #194172;
  --h-bleu-fonce: #12325a;
  --h-bleu-doux: #eef3fa;
  --h-encre: #1b2433;
  --h-encre-2: #3d4757;
  --h-gris: #5e6b80;
  --h-trait: #e3e8ef;
  --h-trait-2: #cfd6e1;
  --h-fond: #f4f6f9;
  --h-surface: #fff;
  --h-vert: #1b7a29;
  --h-vert-fonce: #146321;
  --h-rouge: #b42318;
  --h-rouge-doux: #fdeeec;
  --h-ambre: #8a4b00;
  --h-ambre-doux: #fff4e2;
  --h-titre: "Roboto Condensed", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --h-rayon: 14px;
  --h-rayon-2: 10px;
}

/* ---------- texte ---------- */
body.login_1 { color: var(--h-encre-2); }
body.login_1 h4, body.login_1 h5, .panel h4, .panel h5 { color: var(--h-encre); }
.panel-body label, .form-group label, .modal label { color: var(--h-encre-2); }
h4.pagetitle, .panel-default h4.pagetitle { color: inherit !important; text-transform: none; font-size: inherit; font-weight: inherit; margin: 0; }
.text-danger { color: var(--h-rouge); }

/* ---------- blocs (panel) : carte blanche, titre en minuscules ---------- */
.panel { border: 1px solid var(--h-trait); border-radius: var(--h-rayon); box-shadow: none; background: var(--h-surface); }
.panel-default > .panel-heading,
.panel-primary:not(.bep-migration-notice) > .panel-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  height: auto; min-height: 0; padding: 14px 16px 12px;
  background: var(--h-surface); color: var(--h-bleu);
  border: 0; border-bottom: 1px solid var(--h-trait); border-radius: var(--h-rayon) var(--h-rayon) 0 0;
  font: 700 19px/1.25 var(--h-titre); text-transform: none; letter-spacing: 0;
}
.panel-heading > .pull-right, .panel-heading > .btn-group, .panel-heading .btn-group.pull-right {
  float: none !important; position: static; margin: 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.panel-heading .progress { float: none; width: 120px; margin: 0; height: 8px; border-radius: 99px; background: var(--h-trait); box-shadow: none; }
.panel-heading .progress-bar { background: var(--h-vert); box-shadow: none; }
.panel-heading .glyphicon { color: inherit; }
.panel-body { padding: 16px; }
.panel-footer { background: var(--h-surface); border-top: 1px solid var(--h-trait); border-radius: 0 0 var(--h-rayon) var(--h-rayon); }
.panel > .list-group .list-group-item { border-color: var(--h-trait); }
.panel > .list-group:last-child .list-group-item:last-child { border-radius: 0 0 var(--h-rayon) var(--h-rayon); }

/* ---------- boutons ---------- */
.btn {
  border-radius: 999px; border: 1px solid transparent; box-shadow: none; text-shadow: none;
  font: 700 15px/1.25 var(--h-titre); text-transform: none; letter-spacing: 0;
  padding: 9px 18px;
}
.btn:focus-visible { outline: 3px solid rgba(25, 65, 114, .35); outline-offset: 2px; }
.btn.btn-primary, .btn.btn-success, a.btn.btn-primary, a.btn.btn-success,
.btn.btn-primary:focus, .btn.btn-success:focus { background: var(--h-vert); border-color: var(--h-vert); color: #fff; }
.btn.btn-primary:hover, .btn.btn-success:hover, .btn.btn-primary:active, .btn.btn-success:active,
a.btn.btn-primary:hover, a.btn.btn-success:hover,
.btn.btn-primary.active, .btn.btn-success.active { background: var(--h-vert-fonce); border-color: var(--h-vert-fonce); color: #fff; }
.btn.btn-default, a.btn.btn-default, .btn.btn-default:focus { background: var(--h-surface); border-color: var(--h-trait-2); color: var(--h-bleu); }
.btn.btn-default:hover, a.btn.btn-default:hover, .btn.btn-default:active { background: var(--h-bleu-doux); border-color: var(--h-trait-2); color: var(--h-bleu); }
.btn.btn-info, a.btn.btn-info, .btn.btn-info:focus { background: var(--h-bleu-doux); border-color: #d3deee; color: var(--h-bleu); }
.btn.btn-info:hover, a.btn.btn-info:hover, .btn.btn-info:active { background: #dfe8f5; border-color: #c6d4ea; color: var(--h-bleu-fonce); }
.btn.btn-danger, a.btn.btn-danger, .btn.btn-danger:focus { background: var(--h-surface); border-color: #efc2bd; color: var(--h-rouge); }
.btn.btn-danger:hover, a.btn.btn-danger:hover, .btn.btn-danger:active { background: var(--h-rouge-doux); border-color: #e8a59d; color: var(--h-rouge); }
.btn.btn-warning, a.btn.btn-warning, .btn.btn-warning:focus { background: var(--h-ambre-doux); border-color: #f0d3a4; color: var(--h-ambre); }
.btn-link { color: var(--h-bleu); border-radius: 8px; }
.btn.active, a.btn.active, .btn-group > .btn.active,
.btn.btn-default.active, .btn.btn-info.active { background: var(--h-bleu); border-color: var(--h-bleu); color: #fff; }
.btn-xs, .btn-group-xs > .btn { padding: 5px 12px; font-size: 13.5px; line-height: 1.2; }
.btn-sm, .btn-group-sm > .btn { padding: 7px 14px; font-size: 14px; }
.btn-lg { padding: 12px 22px; font-size: 17px; }
.btn-block { border-radius: 12px; }
/* groupes de boutons séparés plutôt que soudés (sauf les rangées d'icônes des cartes) */
.btn-group:not(.btn-group-justified) { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.btn-group:not(.btn-group-justified) > .btn { float: none; margin: 0 !important; border-radius: 999px !important; }
.btn-group-justified > .btn { border-radius: 0; }

/* ---------- formulaires ---------- */
.form-control {
  height: 44px; padding: 9px 12px; border: 1px solid var(--h-trait-2); border-radius: var(--h-rayon-2);
  box-shadow: none; background-color: var(--h-surface); color: var(--h-encre); font-size: 15px;
}
textarea.form-control { height: auto; min-height: 104px; line-height: 1.45; }
select.form-control { padding-right: 28px; }
.form-control:focus { border-color: var(--h-bleu); box-shadow: 0 0 0 3px rgba(25, 65, 114, .14); outline: 0; }
.form-control[disabled], .form-control[readonly] { background: var(--h-fond); color: var(--h-gris); }
.control-label, .form-group > label { color: var(--h-encre-2); font-weight: 700; font-size: 14.5px; }
.help-block { color: var(--h-gris); font-size: 13.5px; }
.panel-body input[type=checkbox], .panel-body input[type=radio] { accent-color: var(--h-bleu); width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.checkbox label, .radio label { color: var(--h-encre-2); font-weight: 400; }
@media (max-width: 767px) {
  .form-control { font-size: 16px; } /* évite le zoom d'iOS à la saisie */
  .form-horizontal .control-label { padding-top: 0; margin-bottom: 6px; text-align: left; }
}

/* ---------- messages (message.tpl) ---------- */
.alert { border: 1px solid; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.45; box-shadow: none; }
.alert h4 { color: inherit; font: 700 16px/1.3 var(--h-titre); margin: 0 0 4px; }
.alert .close { opacity: .55; text-shadow: none; color: inherit; }
.alert-success { background: var(--h-bleu-doux); border-color: #d3deee; color: var(--h-encre); }
.alert-info { background: var(--h-bleu-doux); border-color: #d3deee; color: var(--h-encre); }
.alert-warning { background: var(--h-ambre-doux); border-color: #f0d3a4; color: #5f3700; }
.alert-danger { background: var(--h-rouge-doux); border-color: #f2c4be; color: #7a1d14; }

/* ---------- cartes de membres (webffo_profile.tpl) ---------- */
.vt_prof { padding: 0; border: 1px solid var(--h-trait); border-radius: 12px; overflow: hidden; background: var(--h-surface); }
.vt_prof .vt_image { border-radius: 0; }
.vt_prof .vt_image img { aspect-ratio: 1 / 1; object-fit: cover; }
.vt_username { padding: 8px 6px 6px; color: var(--h-encre); font: 700 15px/1.2 var(--h-titre); }
.vt_prof_actions { padding-top: 0; border-top: 1px solid var(--h-trait); }
.vt_prof_actions .btn { min-height: 40px; padding: 8px 0; color: var(--h-gris); }
.vt_prof_actions a:hover { color: var(--h-bleu); }

/* ---------- pagination, étiquettes, tableaux, fenêtres ---------- */
.pagination > li > a, .pagination > li > span { margin: 0 2px; border: 1px solid var(--h-trait); border-radius: 8px !important; color: var(--h-bleu); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--h-bleu); border-color: var(--h-bleu); color: #fff; }
.label { border-radius: 6px; font-weight: 700; }
.label-default { background: rgba(27, 36, 51, .72); }
.badge { border-radius: 999px; }
.table > thead > tr > th { border-bottom: 1px solid var(--h-trait-2); color: var(--h-encre); }
.table > tbody > tr > td { border-top-color: var(--h-trait); }
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.modal-header { border-bottom: 1px solid var(--h-trait); }
.modal-title { color: var(--h-encre); font: 700 19px/1.25 var(--h-titre); }
.modal-footer { border-top: 1px solid var(--h-trait); }

/* ---------- doublons ---------- */
/* bandeau de couverture des pages du compte : la couverture se change sur « Ma page » */
#prof_topimg2, .col-sm-12:has(> #prof_topimg2) { display: none; }
/* ancien panneau d'actions d'un membre (sous-pages du profil) : l'en-tête porte déjà Écrire, Pote, Kif et ⋯ */
body[class*="member_"] .col-sm-3b > .panel-primary:has(> .list-group) { display: none; }
/* barre de sous-menus des réglages (Compte, Notifications, Confidentialité, Abonnement) */
.actionbuttons .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.actionbuttons .btn-group > .btn, .actionbuttons .btn-group > .btn.btn-primary { background: var(--h-surface); border-color: var(--h-trait-2); color: var(--h-bleu); }
.actionbuttons .btn-group > .btn.active { background: var(--h-bleu); border-color: var(--h-bleu); color: #fff; }

/* ---------- notes en étoiles (thème rose) ---------- */
.ratingbox .glyphicon-star, .ratingbox .glyphicon-star-empty, .rating .glyphicon-star, .rating .glyphicon-star-empty { color: #e0a100; }

/* ---------- listes au téléphone ---------- */
@media (max-width: 767px) {
  /* photos : deux par rangée, carrées */
  body.pictures .loop_picture { width: 50%; float: left; padding: 0 4px; margin-bottom: 8px !important; }
  body.pictures .loop_picture:nth-of-type(2n+1) { clear: left; }
  body.pictures .loop_picture .image img, body.pictures .loop_picture img.img-full { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
  /* communautés : vignette à gauche, nom et bouton à droite */
  body.groups .loop_album { float: left; width: 72px !important; padding: 0 !important; }
  body.groups .loop_album img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; padding: 0 !important; }
  body.groups .loop_album + .col-sm-9 { margin-left: 84px; padding: 0; }
  body.groups .loop_album + .col-sm-9 h4 { margin: 2px 0 4px; font: 700 16px/1.25 var(--h-titre); }
  body.groups .col-md-6 > .panel-body { padding: 10px 12px; }
  body.groups .col-md-6 + br, body.groups .col-md-6 > br { display: none; }
}
@media (max-width: 991px) {
  /* vidéos : deux par rangée ; la bannière de 728 px ne fait plus déborder la page */
  body.videos .col-sm-9b { overflow-x: hidden; }
  body.videos .col-sm-9b iframe, body.videos .col-sm-9b ins, body.videos .col-sm-9b [id^="ts_"] { max-width: 100% !important; }
  body.videos .col-sm-9b .col-md-3 { width: 50%; float: left; padding: 0 4px; }
  body.videos .col-sm-9b .col-md-3:nth-of-type(2n+1) { clear: left; }
  body.videos .col-sm-9b .col-md-3 img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
}

/* ---------- Hot or not : le vote d'abord au téléphone, les filtres ensuite ---------- */
@media (max-width: 767px) {
  body.hotornot .container > .row { display: flex; flex-direction: column; }
  body.hotornot .container > .row > .col-sm-6b { order: 1; }
  body.hotornot .container > .row > .col-sm-3:not(.col-sm-3b) { order: 2; }
  body.hotornot .container > .row > .col-sm-3b { order: 3; }
}

/* ---------- v2 ---------- */
/* boutons dans un titre de bloc : onglets à contour, l'onglet courant en bleu */
.panel-heading .btn, .panel-heading .btn-primary, .panel-heading .btn-success, .panel-heading .btn-info {
  background: var(--h-surface); border-color: var(--h-trait-2); color: var(--h-bleu);
}
.panel-heading .btn:hover { background: var(--h-bleu-doux); color: var(--h-bleu); }
.panel-heading .btn.active { background: var(--h-bleu); border-color: var(--h-bleu); color: #fff; }

/* étoiles des notes : contour gris, pleine en ambre (même logique que rating.png : classe « over ») */
div.ratingbox div.selection a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z' fill='none' stroke='%23aab4c3' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}
div.ratingbox div.selection a.over {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z' fill='%23e0a100' stroke='%23c98f00' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* réglages : le choix du « modèle du site » défait l'habillage refait */
.form-group:has(#field_template) { display: none; }

/* vidéos : textes sous les vignettes */
body.videos .col-sm-9b .col-md-3 .author, body.videos .col-sm-9b .col-md-3 .views, body.videos .col-sm-9b .col-md-3 .comments { font-size: 13.5px; color: var(--h-gris); }

@media (max-width: 767px) {
  /* annonces : vignette à gauche, texte à droite */
  body.blogs .container-fluid > .row > .col-sm-3.col-xs-12 { float: left; width: 92px; padding: 0; margin: 0 12px 4px 0; }
  body.blogs .container-fluid > .row > .col-sm-3.col-xs-12 img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
  body.blogs .container-fluid > .row > .col-lg-9 { overflow: hidden; padding: 0; }
  body.blogs .container-fluid > .row > .col-lg-9 > small { float: none !important; display: block; padding: 0 !important; margin-bottom: 2px; color: var(--h-gris); }
  body.blogs .container-fluid > .row > .col-lg-9 h4 { margin: 0 0 4px; font: 700 16px/1.25 var(--h-titre); }
  body.blogs .container-fluid > .row > .col-lg-9 .text-justify { text-align: left; font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  body.blogs .panel-body .container-fluid > hr { margin: 12px 0; border-color: var(--h-trait); }
  /* communautés : nom, nombre de membres, puis le bouton */
  body.groups .loop_album + .col-sm-9 { display: flex; flex-direction: column; align-items: flex-start; }
  body.groups .loop_album + .col-sm-9 > h4 { order: 0; }
  body.groups .loop_album + .col-sm-9 > p { order: 1; margin: 0 0 6px; color: var(--h-gris); font-size: 14px; }
  body.groups .loop_album + .col-sm-9 > div[style] { order: 2; position: static !important; width: auto !important; top: auto !important; right: auto !important; margin: 0; }
  body.groups .loop_album + .col-sm-9 .btn { width: auto !important; padding: 6px 16px; font-size: 14px; }
  body.groups .col-sm-9b > .panel:first-child form [class*="col-xs-"] { width: 50%; }
}

/* ---------- v3 ---------- */
/* pink_theme force ces pastilles (!important) : même sélecteur, même force */
.panel-default > .panel-heading > .btn-group > .btn-primary,
.panel-default > .panel-heading > .btn-group > .btn {
  padding: 5px 12px !important; margin: 0 !important; border: 1px solid var(--h-trait-2) !important; border-radius: 999px !important;
  background: var(--h-surface) !important; color: var(--h-bleu) !important; font-size: 13.5px !important; opacity: 1 !important;
}
.panel-default > .panel-heading > .btn-group > .btn:hover { background: var(--h-bleu-doux) !important; }
.panel-default > .panel-heading > .btn-group > .btn.active,
.panel-default > .panel-heading > .btn-group > .btn-primary.active { background: var(--h-bleu) !important; border-color: var(--h-bleu) !important; color: #fff !important; }

/* ---------- v5 ---------- */
/* liens dans les messages : lisibles sur fond clair */
.alert a, .alert a:hover, .alert a:focus { color: var(--h-bleu); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
/* formulaires d'ajout : pas d'image « NO PREVIEW » tant qu'il n'y a rien à montrer */
body[class*="account_"] .panel-body img[src$="content_picture_none.gif"],
body[class*="account_"] .panel-body img[src$="video_picture_none.gif"] { display: none; }
/* sous-menus des réglages au téléphone : une rangée qui défile */
@media (max-width: 767px) {
  .actionbuttons .btn-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .actionbuttons .btn-group::-webkit-scrollbar { display: none; }
  .actionbuttons .btn-group > .btn { flex: none; display: inline-block; width: auto !important; white-space: nowrap; }
}
/* boutons verts des pages refaites (profil) : même vert que « Publier » */
.bep-pf-btn.bep-pf-vert, .bep-pf-btn.bep-pf-vert:focus { background: var(--h-vert); border-color: var(--h-vert); color: #fff; }
.bep-pf-btn.bep-pf-vert:hover { background: var(--h-vert-fonce); border-color: var(--h-vert-fonce); color: #fff; }