/* Univy — ajustements « mobile d'abord » (téléphone ≤ 640 px). Chargé après toutes les autres feuilles. */

@media (max-width: 640px) {
	/* Jamais de défilement horizontal (menus déroulants cachés de BuddyBoss qui dépassent). */
	html, body { overflow-x: clip; }

	/* Agenda : les trois filtres tiennent sur une ligne. */
	.conv-agenda-filtres { flex-wrap: nowrap; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.conv-agenda-filtre { flex: 0 0 auto; min-width: 0; padding: .5rem .85rem; font-size: .9rem; white-space: nowrap; }

	/* Membres : titre à gauche, « Filtres » et grille / liste à droite, sur une seule ligne. */
	.bb-rl-members-directory-wrapper .bb-rl-secondary-header { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: .5rem; }
	.bb-rl-members-directory-wrapper .bb-rl-secondary-header .bb-rl-entry-heading { flex: 1; min-width: 0; }
	.bb-rl-members-directory-wrapper .bb-rl-sub-ctrls { margin-left: 0 !important; }
	.bb-rl-members-directory-wrapper #bp-profile-search-form-outer { position: fixed !important; left: 8px !important; right: 8px !important; top: 64px !important; width: auto !important; max-width: none; max-height: calc(100vh - 80px); }
	.conv-recherches { padding: 0 16px; }

	/* Profil : tous les onglets visibles, en bandeau qui défile au doigt (au lieu du menu « Plus »). */
	#object-nav .bb-rl-main-nav-list { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	#object-nav .bb-rl-main-nav-list::-webkit-scrollbar { display: none; }
	#object-nav .bb-rl-main-nav-list > li { flex: 0 0 auto; }
	#object-nav .bb-rl-hideshow.conv-vide { display: none !important; }

	/* Soirées de clubs (The Events Calendar) : marges plus serrées. */
	.tribe-events-single { padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------------------------ */
/* 23/09/2026 — retours sur l'affichage téléphone           */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {

	/* Cadres imbriqués : sur les pages de profil et de réglages, on perdait
	   79 px de chaque côté (15 + 16 + 32 + 16) sur un écran de 375 px : il ne
	   restait que 217 px pour le texte. Chaque cadre est resserré. */
	body.settings .site.bb-readylaunch,
	body.profile .site.bb-readylaunch,
	body.change-avatar .site.bb-readylaunch { padding-left: 8px; padding-right: 8px; }
	body.settings .bb-rl-content-wrapper,
	body.profile .bb-rl-content-wrapper,
	body.change-avatar .bb-rl-content-wrapper { padding-left: 6px; padding-right: 6px; }
	.bb-rl-account-settings-section,
	.bb-rl-profile-edit-wrapper { padding-left: 12px !important; padding-right: 12px !important; }
	.bb-rl-account-settings-section .bp-feedback,
	.bb-rl-profile-edit-wrapper .bp-feedback,
	.conv-avatar-encart { padding-left: 12px !important; padding-right: 12px !important; }

	/* Bouton « Enregistrer les changements » : pleine largeur et centré,
	   au lieu d'être collé à droite du cadre. */
	.bb-rl-account-settings-section .submit,
	.bb-rl-profile-edit-wrapper .submit,
	form.standard-form .submit,
	#settings-form .submit,
	#settings-form[class*="bb-notification-column"] .submit,
	#account-data-export-form .submit {
		display: flex !important;
		justify-content: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.bb-rl-account-settings-section .submit input[type="submit"],
	.bb-rl-profile-edit-wrapper .submit input[type="submit"],
	form.standard-form .submit input[type="submit"],
	#settings-form .submit input[type="submit"],
	#account-data-export-form #submit {
		width: 100% !important;
		min-height: 46px;
		justify-content: center;
		text-align: center;
	}

	/* Préférences de notification et Confidentialité : le libellé prend toute
	   la largeur, le petit menu « E-mail / Sur le site » reste lisible à droite. */
	.main-notification-settings tbody td:first-child,
	.main-notification-settings thead th.title {
		gap: 10px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: 1.35 !important;
	}
	.main-notification-settings .bb-mobile-setting { flex: 0 0 auto; }
	.main-notification-settings .bb-mobile-setting-anchor { white-space: nowrap; }
	.main-notification-settings .bb-mobile-setting ul { width: 190px; }
}

@media (max-width: 640px) {
	/* Les encarts d'explication vont jusqu'aux bords du grand cadre, au lieu de
	   former un petit cadre dans le grand qui mange encore de la place. */
	.bb-rl-account-settings-section > .bp-feedback,
	.bb-rl-profile-edit-wrapper .conv-photo-profil,
	.conv-photo-profil {
		margin-left: -12px !important;
		margin-right: -12px !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
		padding: 14px 12px !important;
	}
	.conv-photo-profil { gap: .7rem; margin-bottom: 1.2rem !important; }
	.conv-photo-profil-img { width: 84px !important; height: 84px !important; flex-basis: 84px !important; }
}

@media (max-width: 640px) {
}

@media (max-width: 640px) {
	/* 64 px de vide entre l'en-tête et le contenu : deux cadres emboîtés ont chacun 32 px
	   de marge haute. On ramène l'ensemble à 10 px (24/09, remarque). */
	.bb-rl-content-wrapper { padding-top: 10px !important; }
	.bb-rl-content-wrapper > * { padding-top: 0 !important; }
}

@media (max-width: 640px) {
	/* Bas du fil : 152 px de vide avant « Complétez votre profil » (colonne de droite
	   qui passe sous le fil sur téléphone). On resserre (24/09). */
	.bb-rl-secondary-container { padding-top: 12px !important; margin-top: 0 !important; }
	.bb-rl-activity-wrap { row-gap: 12px !important; gap: 12px !important; }
	.bb-rl-primary-container { margin-bottom: 0 !important; padding-bottom: 0 !important; }
}

@media (max-width: 640px) {
	/* Le vide restant sous le fil venait de la marge basse du cadre de contenu. */
	.bb-rl-screen-content { padding-bottom: 0 !important; }

	/* Filtres du fil : le bouton grille / liste passait à la ligne sous les deux menus.
	   Tout tient maintenant sur une seule ligne (24/09, demande). */
	.bb-rl-activity-filters-container { flex-wrap: nowrap !important; align-items: center; gap: 8px; }
	.bb-rl-activity-filters-container .activity-head-bar { flex: 1 1 auto; min-width: 0; }
	.bb-rl-activity-filters-container .activity-head-bar > * { min-width: 0; }
	.conv-fil-vue { flex: 0 0 auto; margin-left: 0 !important; }
}

@media (max-width: 640px) {
	/* Même chose en bas qu'en haut : deux cadres emboîtés avec 32 px chacun. */
	.bb-rl-content-wrapper { padding-bottom: 10px !important; }
	.bb-rl-content-wrapper > * { padding-bottom: 0 !important; }

	/* Les filtres du fil s'empilaient en colonne sur téléphone : on les remet en ligne. */
	.bb-rl-activity-filters-container { flex-direction: row !important; }
}

@media (max-width: 640px) {
	/* Agenda : le bandeau d'onglets obligeait à défiler de droite à gauche.
	   Sur téléphone il devient un menu déroulant (24/09, demande). */
	.conv-agenda-vues { display: none !important; }
	.conv-agenda-vues-choix { display: block !important; margin: 0 0 1rem; }
	.conv-agenda-vues-choix select {
		width: 100%; min-height: 46px; padding: .6rem .8rem; box-sizing: border-box;
		border: 1px solid var(--conv-trait, rgba(255,255,255,.2)); border-radius: 12px;
		background: var(--conv-nuit-2, #1c2250); color: inherit; font: inherit;
	}

	/* « Soirées du … au … » : deux lignes qui n'apportent rien sur téléphone. */
	.conv-agenda-suite .conv-small { display: none; }
}

@media (max-width: 640px) {
	/* Les deux menus du fil ne doivent jamais se chevaucher, quel que soit le libellé choisi. */
	.bb-rl-activity-filters-container .activity-head-bar > * { min-width: 0; max-width: 100%; }
	.bb-rl-activity-filters-container .subnav-filters-opener,
	.bb-rl-activity-filters-container .bb-subnav-filters-label {
		font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
}

/* ------------------------------------------------------------------ */
/* corrections du 24/09/2026 — retours sur téléphone           */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {

	/* 1. Agenda et autres pages du plugin : le theme reservait 60 px entre
	   l'en-tete Convies et le titre de la page (30 px de marge sur <main>
	   plus 30 px de padding sur le premier groupe). On remonte le titre. */
	.wp-site-blocks > main { margin-top: 10px !important; }
	.wp-site-blocks > main > .wp-block-group:first-child { padding-top: 6px !important; }
	.wp-site-blocks > main .wp-block-post-title { margin-bottom: .5rem !important; }

	/* 2. Vignettes de l'agenda : sur deux colonnes, chaque carte fait 171 px
	   alors que le bloc de texte imposait une largeur minimale de 180 px.
	   Le debordement etait coupe par overflow:hidden, d'ou le texte tronque. */
	.conv-agenda-tuiles .conv-event-main { min-width: 0 !important; }
	.conv-agenda-tuiles .conv-event-title,
	.conv-agenda-tuiles .conv-event-time,
	.conv-agenda-tuiles .conv-part-badge,
	.conv-agenda-tuiles .conv-small { overflow-wrap: anywhere; }
	.conv-agenda-tuiles .conv-event-title { font-size: 1.05rem !important; line-height: 1.25 !important; }
	.conv-agenda-tuiles .conv-agenda-etiquette { max-width: 100%; }

	/* 3. Notifications : « Non lu / Lire » occupait toute la largeur, puis les
	   deux menus se posaient chacun sur sa ligne. On fixe deux lignes nettes :
	   les onglets au-dessus, « Tout voir » a gauche et le tri a droite. */
	.notifications-header-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
	.notifications-header-actions > .bp-navs { flex: 1 0 100% !important; width: auto !important; margin-bottom: 0 !important; }
	.notifications-header-actions > .subnav-filters { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
	.notifications-header-actions > .bb-sort-by-date { flex: 0 0 auto !important; margin: 0 0 0 auto !important; }
	.notifications-header-actions .select2-container { width: auto !important; max-width: 100%; }
	.notifications-header-actions .select2-selection__rendered { padding-right: 18px; }
}

@media (max-width: 640px) {
	/* Bonnes adresses : les huit pastilles de categorie (Tout, Restaurants, Hotels...)
	   prenaient trois lignes. Meme traitement que l'agenda : un menu deroulant. */
	.adr-filtres { display: none !important; }
	.adr-filtres-choix { display: block !important; margin: 0 0 1rem; }
	.adr-filtres-choix select {
		width: 100%; min-height: 46px; padding: .6rem .8rem; box-sizing: border-box;
		border: 1px solid var(--conv-trait, rgba(255,255,255,.2)); border-radius: 12px;
		background: var(--conv-nuit-2, #1c2250); color: inherit; font: inherit;
	}
}

@media (max-width: 640px) {
	/* Bonnes adresses, suite (24/09/2026) : sur telephone il fallait traverser 990 px
	   avant la premiere adresse. L'encart « Proposer une adresse » passe sous la liste :
	   c'est un appel a contribuer, il a sa place apres le contenu, pas avant. */
	.adr { display: flex !important; flex-direction: column !important; }
	.adr > .adr-proposer--haut { order: 9 !important; margin: 2rem 0 0 !important; }

	/* Les trois champs s'empilaient parce que chacun reclamait 200 px de large.
	   Region garde toute la largeur, Trier et Rechercher se partagent la ligne suivante. */
	.adr-barre { gap: .6rem !important; padding: .8rem !important; margin-bottom: 1.25rem !important; }
	.adr-barre .adr-sel select,
	.adr-barre .adr-sel input { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
	.adr-barre .adr-sel { flex: 1 1 42% !important; min-width: 0 !important; }
	.adr-barre label.adr-sel:first-of-type { flex: 1 1 100% !important; }
	.adr-barre .adr-sel--q { flex: 1 1 54% !important; }
}

/* ------------------------------------------------------------------ */
/* 25/09/2026 — retours sur son téléphone                   */
/* ------------------------------------------------------------------ */

/* Commentaires du fil : plus de photo dans les commentaires (les photos passent par
   les publications et les albums, qui ont leurs niveaux de visibilité). */
.bb-rl-ac-reply-toolbar .bb-rl-post-media,
.ac-form .bb-rl-ac-reply-media-button,
.ac-form .bb-rl-ac-reply-attachments .media-dropzone { display: none !important; }

@media (max-width: 640px) {
	/* Commentaires : « Annuler » et « Publier » côte à côte, jamais l'un sur l'autre. */
	.ac-form .bb-rl-ac-reply-footer {
		display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
		justify-content: flex-end !important; gap: 8px !important; padding: 10px 12px !important;
	}
	.ac-form .bb-rl-ac-reply-toolbar { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
	.ac-form .ac-reply-cancel,
	.ac-form .bb-rl-ac-submit-wrap { flex: 0 0 auto !important; position: static !important; margin: 0 !important; }
	.ac-form .ac-reply-cancel,
	.ac-form .bb-rl-ac-submit-wrap input { white-space: nowrap !important; padding: 8px 14px !important; font-size: .9rem !important; line-height: 1.2 !important; width: auto !important; }

	/* Nouveau message : le champ « À » avait un cadre collé au texte. */
	.bp-messages-recipient { padding: 12px 14px !important; }
	.bp-messages-recipient .select2-container { width: 100% !important; }
	.bp-messages-recipient .select2-selection--multiple { min-height: 42px !important; }
	.bp-messages-recipient .select2-selection__rendered { padding: 0 !important; }
	.bp-messages-recipient .select2-search--inline,
	.bp-messages-recipient .select2-search__field { width: 100% !important; }
	.bp-messages-recipient .select2-search__field {
		box-sizing: border-box !important; min-height: 40px !important; margin: 0 !important;
		padding: 0 12px !important; font-size: 16px !important; line-height: 40px !important;
	}

	/* Préférences de notification : de l'air autour des textes et un vrai bouton de choix. */
	table.main-notification-settings { width: 100% !important; }
	table.main-notification-settings td.title { padding: 14px 14px 4px !important; }
	table.main-notification-settings tr td:first-child:not(.title) {
		padding: 12px 14px !important; gap: 12px !important; align-items: center !important;
		justify-content: space-between !important; line-height: 1.4 !important;
	}
	table.main-notification-settings .bb-mobile-setting { flex: 0 0 auto !important; }
	table.main-notification-settings .bb-mobile-setting-anchor {
		display: inline-block !important; padding: 6px 12px !important; white-space: nowrap !important;
		border: 1px solid var(--conv-trait-2, rgba(255,255,255,.25)) !important; border-radius: 999px !important;
		font-size: .85rem !important;
	}
}

/* ------------------------------------------------------------------
 * 30/09/2026 — Marges sur téléphone (Fabrice : « les cadres doivent prendre toute la largeur »).
 * Une seule règle pour tout le site : 8 px entre le bord de l'écran et les cadres, moins de marge
 * intérieure dans les cadres. Avant : 24 à 55 px perdus de chaque côté selon les pages.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	/* Pages du thème (Notre zone, Vérification, Agenda, Lieux, Aide…) */
	body { --wp--style--root--padding-left: 8px !important; --wp--style--root--padding-right: 8px !important; }
	main.has-global-padding, .has-global-padding { padding-left: 8px !important; padding-right: 8px !important; }
	.has-global-padding > .alignfull, .has-global-padding .alignfull { margin-left: -8px !important; margin-right: -8px !important; }
	.conv-zone { padding-left: 0 !important; padding-right: 0 !important; }
	.conv-zone-carte { padding: 14px 12px !important; }
	.conv-card, .conv-verif-palier { padding-left: 14px !important; padding-right: 14px !important; }
	/* Pages BuddyBoss (fil, profil, photos, réglages, messages…) */
	.site.bb-readylaunch { padding-left: 0 !important; padding-right: 0 !important; }
	.bb-rl-content-wrapper { padding-left: 8px !important; padding-right: 8px !important; }
	.bb-rl-media-stream, .bb-rl-profile-panel, .bb-rl-account-settings-section, .bb-rl-members-directory-container { padding-left: 12px !important; padding-right: 12px !important; }
	.bb-rl-account-settings-section { padding-left: 0 !important; padding-right: 0 !important; }
	#item-header.users-header { margin-left: 0 !important; margin-right: 0 !important; }
}