/*
 * Club des Esprits Libres — feuille de style front (pass design v0.3.3).
 *
 * Tokens alignés sur la palette FND officielle de forge-des-indes.
 * Layout "app pur" : pas de header/footer thème WP, on prend tout l'écran.
 *
 *  - Container scope    : `.ces-app` + body class `.ces-body`
 *  - Reset défensif     : scoped à `.ces-app` (anti-thèmes WP costauds)
 *  - Tokens préfixés    : `--ces-*`
 *  - Layout             : 3 colonnes desktop (Bootcamp | Normal | Sidebar)
 */

/* --- Tokens FND ------------------------------------------------------- */

:root {
	/* Surfaces & ink (warm cream "atelier") */
	--ces-bg-app:        #f5f3ee;
	--ces-bg-app-tint:   #ece8df;
	--ces-surface:       #ffffff;
	--ces-surface-2:     #fffdf7;

	--ces-ink-1:         #1a2530;
	--ces-ink-2:         #5a6b78;
	--ces-ink-3:         #8b97a1;

	--ces-border:        #e1e8ec;
	--ces-border-warm:   #d9d2c4;

	/* Brand palette FND */
	--ces-blue-deep:     #2c77a6;
	--ces-bondi:         #0095a5;
	--ces-blue-light:    #afd2d0;
	--ces-blue-light:  #7498f3;
	--ces-blue-fnd:  #0095A5;
	--ces-blue-night:   #2c77a6;
	--ces-yellow-spark:  #ffde00;

	/* Shadows */
	--ces-shadow-sm:     0 1px 2px rgba(26, 37, 48, 0.06);
	--ces-shadow-md:     0 4px 12px rgba(26, 37, 48, 0.08), 0 1px 2px rgba(26, 37, 48, 0.04);
	--ces-shadow-lg:     0 12px 32px rgba(26, 37, 48, 0.12), 0 2px 6px rgba(26, 37, 48, 0.06);
	--ces-shadow-ember:  0 8px 24px rgba(219, 67, 0, 0.18), 0 2px 6px rgba(243, 151, 116, 0.2);

	/* Radius */
	--ces-r-sm:          6px;
	--ces-r-md:          10px;
	--ces-r-lg:          16px;
	--ces-r-xl:          24px;

	/* Spacing */
	--ces-space-1:       4px;
	--ces-space-2:       8px;
	--ces-space-3:       12px;
	--ces-space-4:       16px;
	--ces-space-5:       24px;
	--ces-space-6:       32px;
	--ces-space-7:       48px;
}

/* --- Body "app pur" (sans chrome thème) ------------------------------ */

body.ces-body {
	margin: 0;
	padding: 0;
	color: var(--ces-ink-1);
	font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/* Image de fond du Club — répétée verticalement, pleine largeur.
	 * Voile blanc cassé semi-transparent par-dessus pour garder le
	 * contenu lisible et l'ambiance "chaleureuse FND" sans virer
	 * surchargé. Si tu veux plus visible : baisser l'opacité du voile.
	 * Plus discret : monter à 0.92 / 0.95. */
	background-color: var(--ces-bg-app);
	background-image:
		linear-gradient(rgba(248, 240, 230, 0.82), rgba(248, 240, 230, 0.82)),
		url('../club-des-esprits-libres.jpg');
	background-repeat: no-repeat, repeat-y;
	background-size: cover, 100% auto;
	background-position: top center, top center;
	background-attachment: fixed, scroll;
}

body.ces-body--locked .ces-lightbox,
body.ces-body--locked .ces-search-modal,
body.ces-body--locked .ces-kdo-modal,
body.ces-body--locked .ces-report-modal,
body.ces-body--locked .ces-pq-modal {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* --- Reset défensif scoped (anti-thèmes WP costauds) ----------------- */

.ces-app,
.ces-app * {
	box-sizing: border-box;
	text-transform: none !important;
	letter-spacing: normal;
}

.ces-app a {
	text-decoration: none;
	color: inherit;
}

:where(.ces-app) h1,
:where(.ces-app) h2,
:where(.ces-app) h3,
:where(.ces-app) h4,
:where(.ces-app) h5,
:where(.ces-app) h6 {
	font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ces-ink-1);
	margin: 0;
}

.ces-app h1, .ces-app h2, .ces-app h3,
.ces-app h4, .ces-app h5, .ces-app h6 {
	text-transform: none !important;
	letter-spacing: normal !important;
}

:where(.ces-app) p {
	margin: 0;
	color: inherit;
}

:where(.ces-app) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ces-app .font-serif {
	font-family: 'Alice', 'Cormorant Garamond', Georgia, serif !important;
	font-weight: 400 !important;
}

/* --- App container --------------------------------------------------- */

.ces-app__container {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--ces-space-6) var(--ces-space-4);
}

/* v0.27.34 — Anti scroll horizontal mobile. Le composer sticky avec
 * marges négatives + les iframes embed vidéo peuvent ponctuellement
 * déborder du viewport et provoquer un scroll latéral disgracieux.
 *
 * `overflow-x: clip` est préféré à `overflow-x: hidden` car il ne crée
 * pas de nouveau scrolling context, donc ne casse PAS `position: sticky`
 * sur les descendants (le composer). Supporté Safari 16+, Chrome 90+,
 * Firefox 81+ — couverture large en 2026.
 *
 * Scopé aux pages Club uniquement (ce CSS n'est chargé qu'à cet endroit
 * via enqueue_front_assets). */
html, body {
	overflow-x: clip;
	/* v0.27.36 — Désactive le scroll anchoring du navigateur sur les
	 * pages Club. Le scroll anchoring tente de "garder ta vue stable"
	 * en ré-ajustant la position quand un média (image, iframe, embed)
	 * change de taille en chargeant au-dessus de la viewport visible.
	 * Mais ces compensations donnent des micro-jumps visibles ("ça
	 * tremble pendant 1 seconde"). Pour un feed défilant, c'est
	 * préférable de laisser le scroll user au pixel près. */
	overflow-anchor: none;
}

/* v0.27.40 — Pull-to-refresh PWA : indicateur visuel pendant le pull.
 * Le JS injecte un <div id="ces-ptr"> dans le body et translate3d
 * verticalement proportionnellement au pull. */
#ces-ptr {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate3d(-50%, -60px, 0);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}
#ces-ptr .ces-ptr__circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}
#ces-ptr .ces-ptr__spinner {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	/* v0.27.42 — Contraste garanti pour voir la rotation : 3 borders
	 * claires + top foncé. La classe is-ready/is-refreshing NE doit PAS
	 * forcer toutes les borders à la même couleur (sinon monochrome
	 * → invisible que ça tourne). */
	border: 3px solid rgba(219, 67, 0, 0.20);
	border-top-color: var(--ces-orange-flame, #db4300);
}
#ces-ptr.is-ready .ces-ptr__spinner {
	/* Quand prêt à déclencher : on accentue la border claire (= barre
	 * plus marquée) mais on garde le contraste avec la top. */
	border-color: rgba(219, 67, 0, 0.35);
	border-top-color: var(--ces-orange-flame, #db4300);
}
#ces-ptr.is-refreshing .ces-ptr__spinner {
	animation: cesPtrSpin 0.8s linear infinite;
}
@keyframes cesPtrSpin {
	to { transform: rotate(360deg); }
}

/* Ceinture + bretelles : tout media/embed du Club est plafonné à
 * 100% de son parent. Évite qu'une img ou iframe à largeur fixe ne
 * déborde du viewport mobile. */
.ces-card img,
.ces-card iframe,
.ces-card video,
.ces-card embed,
.ces-card object {
	max-width: 100%;
}

/* --- Feed header ----------------------------------------------------- */

.ces-feed__header {
	margin-bottom: var(--ces-space-6);
	text-align: center;
}

.ces-feed__title {
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-1);
}

.ces-feed__subtitle {
	color: var(--ces-ink-2);
	margin: 0;
	font-size: 0.9375rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ces-feed__subtitle-icon {
	display: inline-flex;
	align-items: center;
	color: var(--ces-blue-fnd);
	line-height: 0;
}
.ces-feed__subtitle-icon svg {
	width: 26px;
	height: auto;
	display: block;
}

/* --- 3-column grid --------------------------------------------------- */

.ces-feed {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--ces-space-5);
}

.ces-feed__column,
.ces-feed__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-4);
	min-width: 0;
}

/* Tablette : 2 colonnes principales, sidebar en haut */
@media (max-width: 1100px) {
	.ces-feed {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"sidebar sidebar"
			"bootcamp normal";
	}
	.ces-feed__column--bootcamp { grid-area: bootcamp; }
	.ces-feed__column--normal { grid-area: normal; }
	.ces-feed__sidebar { grid-area: sidebar; flex-direction: row; flex-wrap: wrap; }
	.ces-feed__sidebar > .ces-sidebar__card { flex: 1 1 240px; }
}

/* Mobile : tout en stack — sidebar en haut, Bootcamp, Normal */
@media (max-width: 700px) {
	.ces-feed {
		grid-template-columns: 1fr;
		grid-template-areas:
			"sidebar"
			"bootcamp"
			"normal";
	}
	.ces-feed__sidebar { flex-direction: column; }
	.ces-feed__sidebar > .ces-sidebar__card { flex: 1; }
	.ces-app__container { padding: var(--ces-space-4) var(--ces-space-3); }
}

.ces-feed__column-header {
	display: flex;
	align-items: center;
	gap: var(--ces-space-2);
	font-size: 1.0625rem;
	font-weight: 600;
	padding-bottom: var(--ces-space-2);
	border-bottom: 2px solid;
	margin: 0 0 var(--ces-space-2);
}

.ces-feed__column--bootcamp .ces-feed__column-header {
	border-color: var(--ces-blue-fnd);
	color: var(--ces-blue-fnd);
}

.ces-feed__column--normal .ces-feed__column-header {
	border-color: var(--ces-border-warm);
	color: var(--ces-ink-2);
}

.ces-feed__crown {
	display: inline-flex;
	align-items: center;
	color: var(--ces-blue-fnd);
	line-height: 0;
}
.ces-feed__crown svg {
	width: 38px;
	height: auto;
	display: block;
}

.ces-feed__empty {
	padding: var(--ces-space-5);
	text-align: center;
	color: var(--ces-ink-3);
	background: var(--ces-surface);
	border: 1px dashed var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	font-size: 0.9375rem;
}

/* --- Cards ----------------------------------------------------------- */

.ces-card {
	position: relative;
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-5);
	box-shadow: var(--ces-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ces-card:hover {
	box-shadow: var(--ces-shadow-md);
	transform: translateY(-1px);
}

.ces-card--bootcamp {
	background: var(--ces-surface-2);
	border-color: var(--ces-border-warm);
}

.ces-card--bootcamp:hover {
	box-shadow: var(--ces-shadow-ember);
}

/* Highlight bref quand on arrive depuis une notification */
.ces-card--highlight {
	animation: ces-card-highlight 2.2s ease-out;
}
@keyframes ces-card-highlight {
	0%   { box-shadow: 0 0 0 4px rgba(219, 67, 0, 0.55), var(--ces-shadow-md); }
	60%  { box-shadow: 0 0 0 4px rgba(219, 67, 0, 0.25), var(--ces-shadow-md); }
	100% { box-shadow: 0 0 0 0   rgba(219, 67, 0, 0),    var(--ces-shadow-sm); }
}

.ces-comment--highlight .ces-comment__bubble {
	animation: ces-comment-highlight 2.2s ease-out;
}
@keyframes ces-comment-highlight {
	0%   { background: rgba(219, 67, 0, 0.22); }
	100% { background: var(--ces-bg-app); }
}

/* Médaillon couronne — SVG inline blanc sur fond orange-flame. */
.ces-card__crown {
	position: absolute;
	top: -16px;
	right: var(--ces-space-4);
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ces-shadow-md);
	border: 3px solid var(--ces-bg-app);
	z-index: 1;
}
.ces-card__crown svg {
	width: 26px;
	height: auto;
	display: block;
}

/* === Épinglage (admin + éditeur) =====================================
 * Posts en haut des colonnes (max 3 par colonne, FIFO). Card épinglée :
 * border-top orange marquée + badge "📌 Épinglé" en haut-gauche. */

.ces-card--pinned {
	border-top: 3px solid var(--ces-blue-fnd);
	box-shadow: 0 -2px 12px rgba(219, 67, 0, 0.08), var(--ces-shadow-sm);
}

.ces-card__pin-badge {
	position: absolute;
	top: -12px;
	left: var(--ces-space-4);
	background: var(--ces-blue-fnd);
	color: #ffffff;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: var(--ces-shadow-sm);
	z-index: 2;
	white-space: nowrap;
}

/* Bouton "📌 Épingler / Désépingler" dans le footer card (admin+éditeur).
 * Suit la convention visuelle des autres actions card. Hover et état "on"
 * (post déjà épinglé) en orange forge. */
.ces-card__pin-toggle {
	color: var(--ces-ink-3);
	transition: color 0.15s ease, transform 0.15s ease;
}
.ces-card__pin-toggle:hover:not(:disabled) {
	color: var(--ces-blue-fnd);
	transform: scale(1.1);
}
.ces-card__pin-toggle--on {
	color: var(--ces-blue-fnd);
}

.ces-card__header {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	margin-bottom: var(--ces-space-3);
}

.ces-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--ces-surface);
	box-shadow: var(--ces-shadow-sm);
	background: var(--ces-bg-app-tint);
}

.ces-card__avatar-link {
	display: block;
	border-radius: 50%;
	transition: transform 0.15s ease;
}
.ces-card__avatar-link:hover { transform: scale(1.05); }

.ces-card__author-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ces-card__author {
	display: inline-block;
	font-weight: 600;
	color: var(--ces-ink-1) !important;
	font-size: 0.9375rem;
	transition: color 0.15s ease;
}
.ces-card__author:hover { color: var(--ces-blue-fnd) !important; }

/* Badges admin + top contributeur à côté du nom */
.ces-card__author-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	line-height: 1.4;
}
.ces-card__author-badge--admin {
	background: var(--ces-blue-deep);
	color: #ffffff;
}
.ces-card__author-badge--top {
	background: linear-gradient(135deg, var(--ces-blue-fnd) 0%, var(--ces-yellow-spark) 100%);
	color: #ffffff;
}

/* --- Boutons admin sur card (œil promo, suppression) ----------------- */

.ces-card__promo-toggle,
.ces-card__admin-delete {
	margin-left: auto;
	color: var(--ces-ink-3);
}
.ces-card__admin-delete { margin-left: 0; }
.ces-card__promo-toggle--on {
	color: var(--ces-blue-fnd) !important;
	background: rgba(219, 67, 0, 0.10);
}
.ces-card__promo-toggle--readonly {
	cursor: default;
	pointer-events: none;
}
.ces-card__admin-delete:hover:not(:disabled) {
	background: rgba(219, 67, 0, 0.12);
	color: var(--ces-blue-fnd);
}

/* --- Actions admin sur page profil (bannir / débannir) -------------- */

/* Wrapper aligné à droite qui regroupe Bannir / Ami / Message sur la
 * même ligne. Position absolute pour ne pas pousser l'identity, mais
 * flex interne pour aligner verticalement les boutons. */
.ces-profile__header-actions {
	position: absolute;
	top: var(--ces-space-4);
	right: var(--ces-space-4);
	display: flex;
	gap: var(--ces-space-2);
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 60%;
}
.ces-profile__edit + .ces-profile__header-actions {
	right: 160px;
}

.ces-profile__admin-actions {
	display: flex;
	gap: var(--ces-space-2);
}

.ces-profile__ban,
.ces-profile__unban {
	/* Aligné sur la taille de .ces-profile__friend pour cohérence
	 * visuelle dans le bloc header-actions (Bannir + Ami + Message). */
	padding: var(--ces-space-2) var(--ces-space-4);
	border-radius: var(--ces-r-sm);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	border: 1px solid;
	transition: background 0.15s ease;
}
.ces-profile__ban {
	background: #fff;
	color: #b32d2e;
	border-color: #b32d2e;
}
.ces-profile__ban:hover { background: #b32d2e; color: #fff; }
.ces-profile__unban {
	background: var(--ces-bondi);
	color: #fff;
	border-color: var(--ces-bondi);
}

/* --- Bouton ami (Phase 4) ---------------------------------------- */
.ces-profile__friend-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ces-space-2);
	align-items: center;
}
.ces-profile__message-action { display: inline-flex; }
.ces-profile__friend-wrap {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ces-space-2);
	align-items: center;
}
.ces-profile__friend {
	padding: var(--ces-space-2) var(--ces-space-4);
	border-radius: var(--ces-r-sm);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	border: 1px solid var(--ces-border-warm);
	background: #fff;
	color: var(--ces-ink-1);
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ces-profile__friend:hover:not(:disabled) {
	transform: translateY(-1px);
}
.ces-profile__friend:disabled { opacity: 0.6; cursor: not-allowed; }

.ces-profile__friend--add {
	background: var(--ces-blue-fnd);
	color: #fff;
	border-color: var(--ces-blue-fnd);
}
.ces-profile__friend--add:hover:not(:disabled) {
	background: var(--ces-blue-night);
}

.ces-profile__friend--accept {
	background: #2c8a4a;
	color: #fff;
	border-color: #2c8a4a;
}
.ces-profile__friend--decline,
.ces-profile__friend--cancel,
.ces-profile__friend--remove {
	background: transparent;
	color: var(--ces-ink-2);
}
.ces-profile__friend--decline:hover:not(:disabled),
.ces-profile__friend--cancel:hover:not(:disabled),
.ces-profile__friend--remove:hover:not(:disabled) {
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-1);
}

.ces-profile__friend-status {
	font-size: 0.875rem;
	color: var(--ces-ink-2);
	font-weight: 500;
}
.ces-profile__friend-status--ok {
	color: #2c8a4a;
	font-weight: 600;
}

.ces-profile__friend-error {
	flex-basis: 100%;
	margin: 0;
	color: #b32d2e;
	font-size: 0.8125rem;
}

/* =========================================================================
 * Annuaire des membres /membres/
 * ========================================================================= */

.ces-members__header {
	text-align: center;
	margin-bottom: var(--ces-space-6);
}
.ces-members__title {
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-1);
}
.ces-members__subtitle {
	color: var(--ces-ink-2);
	font-size: 1rem;
	margin: 0;
}

.ces-members__search-bar {
	position: relative;
	max-width: 480px;
	margin: 0 auto var(--ces-space-4);
}
.ces-members__search-input {
	width: 100%;
	padding: var(--ces-space-3) var(--ces-space-5) var(--ces-space-3) calc(var(--ces-space-3) + 28px);
	border: 1px solid var(--ces-border-warm);
	border-radius: 999px;
	font-size: 1rem;
	background: #fff;
	color: var(--ces-ink-1);
}
.ces-members__search-input:focus {
	outline: 0;
	border-color: var(--ces-blue-fnd);
}
.ces-members__search-icon {
	position: absolute;
	left: var(--ces-space-3);
	top: 50%;
	transform: translateY(-50%);
	color: var(--ces-ink-3);
	font-size: 1rem;
	pointer-events: none;
}

.ces-members__count {
	text-align: center;
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	margin-bottom: var(--ces-space-4);
}

.ces-members__empty,
.ces-members__loading {
	text-align: center;
	color: var(--ces-ink-2);
	padding: var(--ces-space-6) var(--ces-space-4);
	font-style: italic;
}

.ces-members__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ces-space-4);
	margin: 0 0 var(--ces-space-5);
}

.ces-members__more {
	display: block;
	margin: var(--ces-space-5) auto 0;
	padding: var(--ces-space-3) var(--ces-space-6);
	background: transparent;
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	color: var(--ces-ink-1);
	transition: background 0.15s ease;
}
.ces-members__more:hover {
	background: var(--ces-bg-app-tint);
}

.ces-member-card {
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-4);
	display: flex;
	gap: var(--ces-space-3);
	box-shadow: var(--ces-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ces-member-card:hover {
	box-shadow: var(--ces-shadow-md);
	transform: translateY(-1px);
}

.ces-member-card__avatar-link {
	flex-shrink: 0;
	display: block;
}
.ces-member-card__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ces-member-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ces-member-card__name {
	font-weight: 600;
	color: var(--ces-ink-1) !important;
	text-decoration: none;
	font-size: 0.9375rem;
}
.ces-member-card__name:hover { color: var(--ces-blue-fnd) !important; }

.ces-member-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.ces-member-card__badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.ces-member-card__badge--admin    { background: var(--ces-blue-deep); }
.ces-member-card__badge--bootcamp { background: var(--ces-blue-fnd); }
.ces-member-card__level {
	font-size: 0.75rem;
	color: var(--ces-blue-fnd);
	font-weight: 500;
}

.ces-member-card__bio {
	margin: 4px 0 0;
	color: var(--ces-ink-2);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.ces-member-card__actions {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ces-space-2);
	padding-top: var(--ces-space-2);
}
.ces-member-card__view {
	font-size: 0.8125rem;
	color: var(--ces-blue-deep) !important;
	text-decoration: none;
}
.ces-member-card__view:hover { text-decoration: underline; }

.ces-member-card__friend {
	margin-left: auto;
	display: inline-flex;
	gap: 4px;
}
.ces-member-card__friend-btn {
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--ces-border-warm);
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	transition: background 0.15s ease;
}
.ces-member-card__friend-btn:hover:not(:disabled) { background: var(--ces-bg-app-tint); }
.ces-member-card__friend-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ces-member-card__friend-btn--add {
	background: var(--ces-blue-fnd);
	color: #fff;
	border-color: var(--ces-blue-fnd);
}
.ces-member-card__friend-btn--add:hover:not(:disabled) {
	background: var(--ces-blue-night);
}
.ces-member-card__friend-btn--accept {
	background: #2c8a4a;
	color: #fff;
	border-color: #2c8a4a;
}
.ces-member-card__friend-btn--ok {
	color: #2c8a4a;
	background: transparent;
	border-color: #2c8a4a;
	cursor: default;
}
.ces-member-card__friend-actions {
	display: inline-flex;
	gap: 4px;
}

/* Bouton Message (page profil) */
.ces-profile__friend--message {
	background: var(--ces-bondi, #0a86a8);
	color: #fff !important;
	border-color: var(--ces-bondi, #0a86a8);
	text-decoration: none !important;
	display: inline-block;
}
.ces-profile__friend--message:hover {
	filter: brightness(0.92);
}

/* =========================================================================
 * Page /messages/ — inbox + thread 2 colonnes
 * ========================================================================= */

.ces-messages__header {
	text-align: center;
	margin-bottom: var(--ces-space-5);
}
.ces-messages__title {
	font-size: 2rem;
	font-weight: 400;
	margin: 0;
	color: var(--ces-ink-1);
}

.ces-messages {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 0;
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	overflow: hidden;
	/* Hauteur dynamique : tout l'écran moins le header + le back link.
	 * Le composer (input + bouton Envoyer) reste toujours visible au
	 * bas grâce au layout flex interne. Min 480px pour ne pas être
	 * écrasé sur les très petits écrans. */
	height: calc(100vh - 220px);
	min-height: 480px;
	max-height: 820px;
	box-shadow: var(--ces-shadow-sm);
}

@media (max-width: 820px) {
	.ces-messages {
		grid-template-columns: 1fr;
		height: calc(100vh - 180px);
	}
}

/* --- Inbox (colonne gauche) -------------------------------------- */

.ces-messages__inbox {
	border-right: 1px solid var(--ces-border-warm);
	display: flex;
	flex-direction: column;
	background: var(--ces-bg-app-tint);
}
.ces-messages__inbox-header {
	padding: var(--ces-space-4);
	border-bottom: 1px solid var(--ces-border-warm);
}
.ces-messages__inbox-title {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
	color: var(--ces-ink-1);
}

.ces-messages__inbox-loading,
.ces-messages__inbox-empty {
	padding: var(--ces-space-5);
	color: var(--ces-ink-3);
	font-size: 0.875rem;
	font-style: italic;
	text-align: center;
}

.ces-messages__inbox-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
}
.ces-messages__inbox-item {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	padding: var(--ces-space-3) var(--ces-space-4);
	cursor: pointer;
	border-bottom: 1px solid var(--ces-border-warm);
	transition: background 0.15s ease;
}
.ces-messages__inbox-item:hover {
	background: #fff;
}
.ces-messages__inbox-item.is-active {
	background: #fff;
	border-left: 3px solid var(--ces-blue-fnd);
	padding-left: calc(var(--ces-space-4) - 3px);
}
.ces-messages__inbox-item.is-unread .ces-messages__inbox-name {
	font-weight: 700;
}
.ces-messages__inbox-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.ces-messages__inbox-body {
	flex: 1;
	min-width: 0;
}
.ces-messages__inbox-name {
	font-size: 0.875rem;
	color: var(--ces-ink-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ces-messages__inbox-preview {
	font-size: 0.75rem;
	color: var(--ces-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ces-messages__inbox-badge {
	background: var(--ces-blue-fnd);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	min-width: 22px;
	text-align: center;
}

/* --- Thread (colonne droite) ------------------------------------ */

.ces-messages__thread {
	display: flex;
	flex-direction: column;
	min-height: 0;   /* permet à flex-children avec overflow de marcher */
	height: 100%;
}
.ces-messages__thread-empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ces-space-6);
	color: var(--ces-ink-3);
	font-style: italic;
	text-align: center;
}
.ces-messages__thread-active {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ces-messages__thread-head {
	padding: var(--ces-space-3) var(--ces-space-4);
	border-bottom: 1px solid var(--ces-border-warm);
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
}
.ces-messages__thread-head-link {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	color: var(--ces-ink-1);
	text-decoration: none;
}
.ces-messages__thread-head-link:hover .ces-messages__thread-head-name {
	color: var(--ces-blue-fnd);
}
.ces-messages__thread-head-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.ces-messages__thread-head-name {
	font-weight: 600;
	font-size: 0.9375rem;
}

.ces-messages__thread-loading {
	padding: var(--ces-space-5);
	color: var(--ces-ink-3);
	text-align: center;
	font-style: italic;
}
.ces-messages__thread-list {
	flex: 1;
	min-height: 0;   /* indispensable pour que overflow scroll fonctionne */
	overflow-y: auto;
	padding: var(--ces-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-3);
}

.ces-messages__thread-active {
	min-height: 0;   /* idem pour ce wrapper flex */
}
.ces-messages__thread-empty-inner {
	color: var(--ces-ink-3);
	text-align: center;
	padding: var(--ces-space-4);
}
.ces-messages__load-more {
	text-align: center;
	margin-bottom: var(--ces-space-2);
}
.ces-messages__load-more button {
	background: transparent;
	border: 1px solid var(--ces-border-warm);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	cursor: pointer;
	color: var(--ces-ink-2);
}
.ces-messages__load-more button:hover { background: var(--ces-bg-app-tint); }

.ces-message {
	display: flex;
	gap: var(--ces-space-2);
	align-items: flex-end;
	max-width: 80%;
}
.ces-message--mine {
	align-self: flex-end;
	flex-direction: row-reverse;
}
.ces-message__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.ces-message__bubble {
	background: var(--ces-bg-app-tint);
	border-radius: 14px 14px 14px 4px;
	padding: var(--ces-space-2) var(--ces-space-3);
	max-width: 100%;
}
.ces-message--mine .ces-message__bubble {
	background: var(--ces-blue-fnd);
	color: #fff;
	border-radius: 14px 14px 4px 14px;
}
.ces-message__content {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.ces-message__time {
	display: block;
	font-size: 0.6875rem;
	color: var(--ces-ink-3);
	margin-top: 2px;
}
.ces-message--mine .ces-message__time {
	color: rgba(255, 255, 255, 0.85);
}

/* --- Composer en bas du thread ---------------------------------- */

.ces-messages__composer {
	display: flex;
	gap: var(--ces-space-2);
	padding: var(--ces-space-3) var(--ces-space-4);
	border-top: 1px solid var(--ces-border-warm);
	background: var(--ces-surface);
}
.ces-messages__composer-input {
	flex: 1;
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	padding: var(--ces-space-2) var(--ces-space-3);
	font-family: inherit;
	font-size: 0.9375rem;
	resize: none;
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-1);
}
.ces-messages__composer-input:focus {
	outline: 0;
	border-color: var(--ces-blue-fnd);
	background: #fff;
}
.ces-messages__composer-send {
	background: var(--ces-blue-fnd);
	color: #fff;
	border: 0;
	padding: 0 var(--ces-space-5);
	border-radius: var(--ces-r-md);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ces-messages__composer-send:hover:not(:disabled) {
	background: var(--ces-blue-night);
}
.ces-messages__composer-send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ces-messages__error {
	margin: 0;
	padding: var(--ces-space-2) var(--ces-space-4);
	background: #fde8e6;
	color: #b32d2e;
	font-size: 0.8125rem;
}

/* =========================================================================
 * Bulle flottante de chat (Phase 4 v0.20.0)
 * ========================================================================= */

.ces-chat-bubble {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9000;
	font-family: 'Open Sans', system-ui, sans-serif;
}

/* Bouton rond (état fermé) */
.ces-chat-bubble__btn {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ces-blue-fnd);
	color: #fff;
	border: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: transform 0.15s ease, background 0.15s ease;
}
.ces-chat-bubble__btn:hover {
	background: var(--ces-blue-night);
	transform: scale(1.05);
}
.ces-chat-bubble__icon { line-height: 1; }
.ces-chat-bubble__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #c41a30;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
	min-width: 20px;
	text-align: center;
	border: 2px solid #fff;
}

/* Panneau (état ouvert) */
.ces-chat-bubble__panel {
	width: 360px;
	max-width: calc(100vw - 40px);
	height: 520px;
	max-height: calc(100vh - 100px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	border: 1px solid var(--ces-border-warm);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ces-chat-bubble__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--ces-blue-fnd);
	color: #fff;
}
.ces-chat-bubble__back,
.ces-chat-bubble__close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}
.ces-chat-bubble__close { margin-left: auto; font-size: 24px; }
.ces-chat-bubble__close:hover,
.ces-chat-bubble__back:hover { opacity: 0.8; }

.ces-chat-bubble__title {
	font-weight: 600;
	font-size: 14px;
	flex: 1;
}
.ces-chat-bubble__title--conv {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ces-chat-bubble__title-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

/* Body — liste */
.ces-chat-bubble__body {
	flex: 1;
	overflow-y: auto;
	background: var(--ces-bg-app-tint);
}
.ces-chat-bubble__loading,
.ces-chat-bubble__empty {
	padding: 24px 16px;
	color: var(--ces-ink-3);
	text-align: center;
	font-size: 13px;
	font-style: italic;
}
.ces-chat-bubble__empty p { margin: 0 0 8px; }
.ces-chat-bubble__discover {
	display: inline-block;
	margin-top: 4px;
	color: var(--ces-blue-fnd) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
}
.ces-chat-bubble__discover:hover { text-decoration: underline; }

.ces-chat-bubble__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ces-chat-bubble__item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--ces-border-warm);
	background: #fff;
	transition: background 0.15s ease;
}
.ces-chat-bubble__item:hover { background: var(--ces-bg-app-tint); }
.ces-chat-bubble__item.is-unread .ces-chat-bubble__item-name { font-weight: 700; }
.ces-chat-bubble__item-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.ces-chat-bubble__item-body { flex: 1; min-width: 0; }
.ces-chat-bubble__item-name {
	font-size: 13px;
	color: var(--ces-ink-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ces-chat-bubble__item-preview {
	font-size: 12px;
	color: var(--ces-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ces-chat-bubble__item-badge {
	background: var(--ces-blue-fnd);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	min-width: 18px;
	text-align: center;
}

/* Body — conversation */
.ces-chat-bubble__conv {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--ces-bg-app-tint);
}
.ces-chat-bubble__thread {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}
.ces-chat-bubble__thread-loading,
.ces-chat-bubble__thread-empty {
	color: var(--ces-ink-3);
	text-align: center;
	padding: 16px;
	font-size: 13px;
	font-style: italic;
}
.ces-chat-bubble__msg {
	max-width: 85%;
	background: #fff;
	border-radius: 12px 12px 12px 4px;
	padding: 8px 12px;
	align-self: flex-start;
}
.ces-chat-bubble__msg--mine {
	background: var(--ces-blue-fnd);
	color: #fff;
	border-radius: 12px 12px 4px 12px;
	align-self: flex-end;
}
.ces-chat-bubble__msg-content {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.ces-chat-bubble__msg-time {
	display: block;
	font-size: 10px;
	color: var(--ces-ink-3);
	margin-top: 2px;
}
.ces-chat-bubble__msg--mine .ces-chat-bubble__msg-time { color: rgba(255, 255, 255, 0.85); }

.ces-chat-bubble__composer {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid var(--ces-border-warm);
}
.ces-chat-bubble__input {
	flex: 1;
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	resize: none;
	background: var(--ces-bg-app-tint);
}
.ces-chat-bubble__input:focus {
	outline: 0;
	border-color: var(--ces-blue-fnd);
	background: #fff;
}
.ces-chat-bubble__send {
	background: var(--ces-blue-fnd);
	color: #fff;
	border: 0;
	border-radius: var(--ces-r-sm);
	padding: 0 14px;
	cursor: pointer;
	font-size: 16px;
}
.ces-chat-bubble__send:disabled { opacity: 0.5; cursor: not-allowed; }
.ces-chat-bubble__send:hover:not(:disabled) { background: var(--ces-blue-night); }

.ces-chat-bubble__expand {
	display: block;
	text-align: center;
	padding: 8px;
	background: #fff;
	border-top: 1px solid var(--ces-border-warm);
	color: var(--ces-ink-3) !important;
	text-decoration: none;
	font-size: 12px;
}
.ces-chat-bubble__expand:hover { color: var(--ces-blue-fnd) !important; }

/* Mobile : panneau presque plein écran */
@media (max-width: 480px) {
	.ces-chat-bubble { bottom: 12px; right: 12px; }
	.ces-chat-bubble__panel {
		width: calc(100vw - 24px);
		height: calc(100vh - 100px);
	}
}

/* Lien sidebar "Mes messages" avec badge non-lus.
 * v0.27.51 — Même layout réutilisé pour les liens questions Tech /
 * Stratégique via la classe générique `.ces-sidebar__link-with-badge`. */
.ces-sidebar__msg-link,
.ces-sidebar__link-with-badge {
	display: flex !important;
	align-items: center;
	gap: 8px;
}
.ces-sidebar__msg-link a,
.ces-sidebar__link-with-badge a { flex: 1; }
.ces-sidebar__msg-badge {
	background: var(--ces-blue-fnd);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	min-width: 22px;
	text-align: center;
	line-height: 1.4;
}

.ces-profile__banned-notice {
	margin-bottom: var(--ces-space-4);
	padding: var(--ces-space-3) var(--ces-space-4);
	background: rgba(179, 45, 46, 0.08);
	border: 1px solid rgba(179, 45, 46, 0.3);
	border-radius: var(--ces-r-md);
	color: #b32d2e;
	font-weight: 600;
}

/* --- Niveau de l'auteur (sous le nom dans card) --------------------- */

.ces-card__author-level {
	display: inline-block;
	color: var(--ces-blue-fnd);
	font-weight: 600;
	font-size: 0.75rem;
}

/* --- Lightbox image (clic image card → modal plein écran) ------------ */

.ces-card__media-img { cursor: zoom-in; }

.ces-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ces-space-5);
	cursor: zoom-out;
	animation: ces-lightbox-fade 0.15s ease-out;
}

@keyframes ces-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ces-lightbox__img {
	max-width: 100%;
	max-height: 95vh;
	object-fit: contain;
	border-radius: var(--ces-r-md);
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
	cursor: default;
}

.ces-lightbox__close {
	position: absolute;
	top: var(--ces-space-4);
	right: var(--ces-space-4);
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	font-family: inherit;
}
.ces-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.05);
}

/* --- Niveau dans la sidebar (carte profil) -------------------------- */

.ces-sidebar__level {
	font-size: 0.75rem;
	color: var(--ces-blue-fnd);
	font-weight: 600;
	margin-bottom: 4px;
}

/* --- Carte niveau sur la page profil -------------------------------- */

.ces-profile__level-card {
	/* Fond opaque crème + voile dégradé orange/jaune par-dessus pour
	 * garder la nuance chaude sans laisser passer l'image de fond du
	 * Club (sinon ça paraît fouillis sous la card). */
	background:
		linear-gradient(135deg, rgba(219, 67, 0, 0.05), rgba(255, 222, 0, 0.08)),
		var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-4) var(--ces-space-5);
	margin-bottom: var(--ces-space-5);
}

.ces-profile__level-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ces-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--ces-space-3);
}

.ces-profile__level-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	font-family: 'Alice', Georgia, serif;
	letter-spacing: 0.01em;
}
.ces-profile__level-badge--apprenti  { background: #8b97a1; }
.ces-profile__level-badge--compagnon { background: var(--ces-bondi); }
.ces-profile__level-badge--forgeron  { background: var(--ces-blue-fnd); }
.ces-profile__level-badge--maitre    { background: linear-gradient(135deg, var(--ces-blue-fnd), #b53700); }
.ces-profile__level-badge--legende   { background: linear-gradient(135deg, var(--ces-yellow-spark), var(--ces-blue-fnd)); color: var(--ces-ink-1); }

.ces-profile__level-stats {
	color: var(--ces-ink-2);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.ces-profile__level-progress {
	height: 10px;
	background: var(--ces-bg-app-tint);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: var(--ces-space-2);
}

.ces-profile__level-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ces-blue-light), var(--ces-blue-fnd));
	border-radius: 999px;
	transition: width 0.4s ease;
}

.ces-profile__level-next {
	margin: 0;
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	text-align: center;
}
.ces-profile__level-next--max {
	color: var(--ces-blue-fnd);
	font-weight: 600;
}

/* --- Infinite scroll : sentinelle, loading, end state ---------------- */

.ces-feed__sentinel {
	height: 1px;
	width: 100%;
	margin: 0;
	/* v0.27.11 — Évite que le navigateur "ancre" la vue sur le sentinel.
	 * Quand `hasMore` passe à false, le sentinel se cache (`x-show`) et le
	 * navigateur recalcule l'ancre de scroll, ce qui pouvait remonter
	 * brutalement la vue au début des posts. */
	overflow-anchor: none;
}

.ces-feed__loading,
.ces-feed__end {
	text-align: center;
	padding: var(--ces-space-4);
	color: var(--ces-ink-3);
	font-size: 0.875rem;
	font-style: italic;
	/* Idem — ces deux éléments apparaissent/disparaissent au gré de loadMore
	 * et ne doivent pas servir d'ancre de scroll. */
	overflow-anchor: none;
}

.ces-feed__loading {
	color: var(--ces-blue-fnd);
}
.ces-feed__loading::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--ces-border-warm);
	border-top-color: var(--ces-blue-fnd);
	margin-right: 8px;
	vertical-align: -2px;
	animation: ces-spin 0.8s linear infinite;
}
@keyframes ces-spin {
	to { transform: rotate(360deg); }
}

.ces-card__meta {
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	margin-top: 2px;
}

.ces-card__title {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: var(--ces-space-2) 0 var(--ces-space-3);
	line-height: 1.35;
	color: var(--ces-ink-1);
}

.ces-card__content {
	color: var(--ces-ink-1);
	font-size: 0.9375rem;
}

.ces-card__content p { margin: 0 0 var(--ces-space-3); }
.ces-card__content p:last-child { margin-bottom: 0; }

/* Images du contenu : taille raisonnable façon Facebook (pas full-width géant) */
.ces-card__content img,
.ces-card__content figure img {
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
	border-radius: var(--ces-r-md);
	display: block;
	margin: var(--ces-space-2) auto;
	object-fit: contain;
}

.ces-card__content figure {
	margin: var(--ces-space-3) 0;
	max-width: 100%;
}

/* Embeds vidéo (responsive 16:9) */
.ces-card__content iframe,
.ces-card__content video {
	max-width: 100%;
	max-height: 320px;
	border-radius: var(--ces-r-md);
	display: block;
	margin: var(--ces-space-2) auto;
}

.ces-card__footer {
	display: flex;
	gap: var(--ces-space-2);
	margin-top: var(--ces-space-4);
	padding-top: var(--ces-space-3);
	border-top: 1px solid var(--ces-border-warm);
	color: var(--ces-ink-2);
	font-size: 0.875rem;
}

.ces-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 0;
	border-radius: var(--ces-r-sm);
	color: var(--ces-ink-2);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ces-card__action:hover { background: var(--ces-bg-app-tint); }
.ces-card__action:disabled { opacity: 0.6; cursor: not-allowed; }

.ces-card__react-icon {
	font-size: 1.125rem;
	color: var(--ces-ink-3);
	transition: color 0.15s ease, transform 0.15s ease;
}
.ces-card__react--active .ces-card__react-icon {
	color: var(--ces-blue-fnd);
	transform: scale(1.15);
}
.ces-card__react--active { color: var(--ces-blue-fnd); }

/* v0.27.27 — Picker de réactions multi-emoji
 * Apparaît au hover (desktop) ou long-press (mobile) sur le bouton react.
 * Position absolue au-dessus du bouton, 5 emojis horizontaux.
 */
.ces-card__react-wrap {
	position: relative;
	display: inline-flex;
}

.ces-card__react-picker {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	display: flex;
	gap: 4px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid var(--ces-border-warm, rgba(0, 0, 0, 0.08));
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 50;
	animation: cesReactPickerIn 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cesReactPickerIn {
	from { opacity: 0; transform: translateY(4px) scale(0.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ces-card__react-picker-btn {
	background: transparent;
	border: 0;
	padding: 4px 6px;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: transform 0.12s ease, background 0.12s ease;
	min-width: 38px;
	min-height: 38px; /* tap target accessible mobile ≥ 38px */
}

.ces-card__react-picker-btn:hover,
.ces-card__react-picker-btn:focus-visible {
	transform: scale(1.25);
	background: var(--ces-bg-app-tint, rgba(43, 111, 163, 0.08));
	outline: none;
}

.ces-card__react-picker-btn.is-active {
	background: var(--ces-bg-app-tint, rgba(43, 111, 163, 0.12));
	transform: scale(1.15);
}

/* Résumé visuel des réactions (au-dessus du footer).
 * Apparaît dès qu'il y a au moins une réaction. Format :
 *   [❤️ 3] [💪 1]  4
 * Hover sur un emoji → tooltip avec le label complet (native title attr).
 */
.ces-card__reactions-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px var(--ces-space-4, 16px) 0;
	font-size: 0.875rem;
	color: var(--ces-ink-2, #4b5563);
}

.ces-card__reactions-emoji {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	background: var(--ces-bg-app-tint, rgba(0, 0, 0, 0.03));
	border-radius: 999px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ces-card__reactions-emoji:hover,
.ces-card__reactions-emoji.is-open {
	background: rgba(43, 111, 163, 0.12);
}

/* v0.27.45 — Popover "Qui a réagi" affichée au hover/tap sur une pill. */
.ces-card__reactions-popover {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	min-width: 180px;
	max-width: 260px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--ces-r-md, 10px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
	font-size: 0.8rem;
	color: var(--ces-ink-1, #1f2937);
	cursor: default;
	white-space: normal;
	text-align: left;
	animation: cesReactPopIn 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ces-card__reactions-popover::after {
	/* Petite flèche pointant vers la pill */
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #fff;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
}
@keyframes cesReactPopIn {
	from { opacity: 0; transform: translate(-50%, 4px) scale(0.96); }
	to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.ces-card__reactions-popover-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ces-ink-1, #1f2937);
}
.ces-card__reactions-popover-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
}
.ces-card__reactions-popover-list li {
	padding: 3px 0;
	color: var(--ces-ink-2, #4b5563);
	line-height: 1.4;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}
.ces-card__reactions-popover-list li:last-child {
	border-bottom: 0;
}
.ces-card__reactions-popover-more {
	display: block;
	margin-top: 6px;
	font-size: 0.72rem;
	font-style: italic;
	color: var(--ces-ink-3, #6b7280);
}

.ces-card__reactions-emoji-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ces-ink-2, #4b5563);
	font-variant-numeric: tabular-nums;
}

.ces-card__reactions-total {
	margin-left: 4px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ces-card__action-count { font-variant-numeric: tabular-nums; }

.ces-card__action-label { font-size: 0.8125rem; }

/* "👏 Ça m'a aidé" sur un post */
.ces-card__helpful { margin-left: auto; }
.ces-card__helpful:not(:disabled):hover {
	background: rgba(219, 67, 0, 0.10);
	color: var(--ces-blue-fnd);
}
.ces-card__helpful--marked {
	background: rgba(219, 67, 0, 0.10) !important;
	color: var(--ces-blue-fnd) !important;
	cursor: default;
	opacity: 1 !important;
}
.ces-card__helpful--owner {
	background: transparent !important;
	color: var(--ces-ink-3) !important;
	cursor: default;
	opacity: 1 !important;
}
.ces-card__helpful--owner .ces-card__action-label { display: none; }

/* v0.27.44 — Mobile : footer card chargé (❤ 💬 👏 Ça m'a aidé 📌 🚩 🗑)
 * → on cache le label texte "Ça m'a aidé" pour libérer l'espace, l'emoji
 * 👏 + le count suffisent. Le tooltip natif reste pour clarifier au tap. */
@media (max-width: 700px) {
	.ces-card__helpful .ces-card__action-label { display: none; }
}

/* --- Section commentaires (déployée au clic) ------------------------ */

.ces-card__comments {
	margin-top: var(--ces-space-3);
	padding-top: var(--ces-space-3);
	border-top: 1px solid var(--ces-border-warm);
}

.ces-card__comments-list {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-3);
	margin-bottom: var(--ces-space-3);
}

/* v0.27.23 — Bouton "Voir tous les N commentaires" qui apparaît
 * au-dessus de la liste quand on n'affiche que les 5 derniers en SSR. */
.ces-card__comments-more {
	margin-bottom: var(--ces-space-2);
	text-align: center;
}
.ces-card__comments-load-all {
	background: none;
	border: 0;
	padding: 6px 12px;
	color: var(--ces-blue-deep, #2b6fa3);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
}
.ces-card__comments-load-all:hover {
	color: var(--ces-blue-fnd, #0095A5);
}

.ces-card__comments-empty,
.ces-card__comments-loading {
	color: var(--ces-ink-3);
	font-size: 0.875rem;
	text-align: center;
	padding: var(--ces-space-3);
	font-style: italic;
}

.ces-comment {
	display: flex;
	gap: var(--ces-space-2);
	align-items: flex-start;
}

.ces-comment__avatar-link {
	flex-shrink: 0;
	border-radius: 50%;
	display: block;
}
.ces-comment__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ces-bg-app-tint);
	display: block;
}

.ces-comment__body { flex: 1; min-width: 0; }

.ces-comment__bubble {
	background: var(--ces-bg-app);
	border-radius: var(--ces-r-md);
	padding: var(--ces-space-2) var(--ces-space-3);
}

.ces-comment__author {
	display: inline-block;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--ces-ink-1) !important;
	margin-bottom: 2px;
}
.ces-comment__author:hover { color: var(--ces-blue-fnd) !important; }

.ces-comment__content {
	margin: 0;
	color: var(--ces-ink-1);
	font-size: 0.875rem;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.ces-comment__meta {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	margin-top: 2px;
	padding: 0 var(--ces-space-3);
	font-size: 0.75rem;
	color: var(--ces-ink-3);
}

.ces-comment__delete {
	border: 0;
	background: transparent;
	color: var(--ces-ink-3);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 4px;
}
.ces-comment__delete:hover { color: var(--ces-blue-fnd); }

.ces-comment-form {
	display: flex;
	gap: var(--ces-space-2);
	margin-top: var(--ces-space-2);
}

.ces-comment-form__input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--ces-border-warm);
	border-radius: 999px;
	background: var(--ces-bg-app);
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--ces-ink-1);
}
.ces-comment-form__input:focus {
	outline: none;
	border-color: var(--ces-blue-fnd);
	background: var(--ces-surface);
}

.ces-comment-form__submit {
	padding: 0 var(--ces-space-4);
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}
.ces-comment-form__submit:hover:not(:disabled) { background: var(--ces-blue-night); }
.ces-comment-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }

.ces-comment__helpful-btn {
	background: transparent;
	border: 1px solid var(--ces-border-warm);
	border-radius: 999px;
	padding: 2px 10px;
	color: var(--ces-ink-2);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* v0.27.28 — Réactions sur commentaires (picker compact + summary).
 * Le picker apparaît sous le bouton "+ Réagir" dans la meta du comment.
 * Le summary cumulatif (emojis utilisés) est placé en bas à droite du
 * bubble, comme un sticker. */
.ces-comment__react-wrap {
	position: relative;
	display: inline-flex;
}

.ces-comment__react-btn {
	background: transparent;
	border: 1px solid var(--ces-border-warm);
	border-radius: 999px;
	padding: 2px 10px;
	color: var(--ces-ink-2);
	font-family: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	min-height: 24px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.ces-comment__react-btn:hover:not(:disabled) {
	background: var(--ces-bg-app-tint, rgba(0,0,0,0.04));
}
.ces-comment__react-btn--active {
	background: var(--ces-bg-app-tint, rgba(43,111,163,0.10));
	border-color: var(--ces-blue-fnd, #2b6fa3);
	transform: scale(1.05);
}
.ces-comment__react-btn:disabled {
	opacity: 0.55;
	cursor: wait;
}
/* v0.27.29 — Icône emoji (❤ par défaut) dans le bouton react comment.
 * Le label texte "+ Réagir" a été retiré pour homogénéiser avec le
 * bouton react des posts (icône seule). */
.ces-comment__react-btn-icon {
	display: inline-block;
	color: var(--ces-ink-3);
	transition: color 0.15s ease, transform 0.15s ease;
}
.ces-comment__react-btn--active .ces-comment__react-btn-icon {
	color: var(--ces-blue-fnd, #2b6fa3);
	transform: scale(1.15);
}

.ces-comment__react-picker {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	display: flex;
	gap: 2px;
	padding: 4px 6px;
	background: #fff;
	border: 1px solid var(--ces-border-warm, rgba(0, 0, 0, 0.08));
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	z-index: 40;
	animation: cesReactPickerIn 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ces-comment__react-picker-btn {
	background: transparent;
	border: 0;
	padding: 2px 4px;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: transform 0.12s ease, background 0.12s ease;
	min-width: 30px;
	min-height: 30px; /* tap target ≥ 30px pour mobile */
}
.ces-comment__react-picker-btn:hover,
.ces-comment__react-picker-btn:focus-visible {
	transform: scale(1.3);
	background: var(--ces-bg-app-tint, rgba(43,111,163,0.10));
	outline: none;
}
.ces-comment__react-picker-btn.is-active {
	background: var(--ces-bg-app-tint, rgba(43,111,163,0.14));
	transform: scale(1.15);
}

/* Summary cumulatif des réactions du commentaire (positionné dans le
 * bubble, en bas à droite). Petites pills. */
.ces-comment__bubble { position: relative; padding-bottom: 22px; }

.ces-comment__reactions-summary {
	position: absolute;
	bottom: 4px;
	right: 8px;
	display: inline-flex;
	gap: 3px;
	padding: 1px 4px;
	background: #fff;
	border: 1px solid var(--ces-border-warm, rgba(0,0,0,0.08));
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	font-size: 0.75rem;
}

.ces-comment__reactions-emoji {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	cursor: help;
}
.ces-comment__reactions-emoji-count {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--ces-ink-2, #4b5563);
	font-variant-numeric: tabular-nums;
}
.ces-comment__helpful-btn:hover {
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border-color: var(--ces-blue-fnd);
}

.ces-comment__helpful-badge {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 10px;
	background: rgba(219, 67, 0, 0.10);
	color: var(--ces-blue-fnd);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

/* --- Cloche notifications flottante --------------------------------- */

.ces-bell {
	position: fixed;
	/* v0.27.10 — La cloche se positionne TOUJOURS juste sous le composer
	 * sticky (option b validée). Comme l'admin bar est maintenant mesurée
	 * dynamiquement (--ces-admin-offset), on calcule en une seule règle :
	 *   top = admin-offset + composer-height + petite marge
	 * Hauteur compacte du composer ~72px desktop, ~64px mobile (mode trigger
	 * collapsed). On garde une marge de 8px pour aérer.
	 */
	top: calc(var(--ces-admin-offset, 0px) + 80px);
	right: 24px;
	z-index: 9000;
}

@media (max-width: 782px) {
	.ces-bell {
		right: 16px;
		/* Sur mobile, la card du composer trigger est un poil plus haute
		 * (padding plus généreux) → on descend la cloche d'un cran. */
		top: calc(var(--ces-admin-offset, 0px) + 100px);
	}
}

.ces-bell__btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	box-shadow: var(--ces-shadow-md);
	cursor: pointer;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
}
.ces-bell__btn:hover { transform: scale(1.05); box-shadow: var(--ces-shadow-lg); }
.ces-bell__btn--active { background: var(--ces-bg-app-tint); }

.ces-bell__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ces-bg-app);
}

.ces-bell__panel {
	position: absolute;
	top: 56px;
	right: 0;
	width: 360px;
	max-height: 480px;
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	box-shadow: var(--ces-shadow-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

@media (max-width: 700px) {
	.ces-bell__panel {
		width: calc(100vw - 32px);
		right: -8px;
	}
}

.ces-bell__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ces-space-3) var(--ces-space-4);
	border-bottom: 1px solid var(--ces-border-warm);
	flex-shrink: 0;
}
.ces-bell__panel-header h3 {
	margin: 0;
	font-size: 1rem;
	color: var(--ces-ink-1);
}
.ces-bell__panel-header button {
	background: transparent;
	border: 0;
	color: var(--ces-blue-deep);
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--ces-r-sm);
	font-family: inherit;
}
.ces-bell__panel-header button:hover:not(:disabled) { background: var(--ces-bg-app-tint); }
.ces-bell__panel-header button:disabled { color: var(--ces-ink-3); cursor: not-allowed; }

.ces-bell__list { overflow-y: auto; flex: 1; }

.ces-bell__loading,
.ces-bell__empty {
	padding: var(--ces-space-5);
	text-align: center;
	color: var(--ces-ink-3);
	font-size: 0.875rem;
	font-style: italic;
}

.ces-notif {
	display: flex;
	gap: var(--ces-space-3);
	padding: var(--ces-space-3) var(--ces-space-4);
	border-bottom: 1px solid var(--ces-border-warm);
	text-decoration: none;
	color: var(--ces-ink-1) !important;
	transition: background 0.15s ease;
}
.ces-notif:last-child { border-bottom: 0; }
.ces-notif:hover { background: var(--ces-bg-app-tint); }
.ces-notif--unread {
	background: rgba(219, 67, 0, 0.04);
	border-left: 3px solid var(--ces-blue-fnd);
	padding-left: calc(var(--ces-space-4) - 3px);
}

.ces-notif__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--ces-bg-app-tint);
}

/* Avatar fallback quand pas d'actor : emoji centré dans le disque */
.ces-notif__avatar--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	background: linear-gradient(135deg, rgba(219, 67, 0, 0.10), rgba(243, 151, 116, 0.15));
	color: var(--ces-blue-fnd);
	border: 1px solid rgba(219, 67, 0, 0.15);
	line-height: 1;
}

.ces-notif__body { min-width: 0; flex: 1; }

.ces-notif__text {
	margin: 0 0 2px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ces-ink-1);
}
.ces-notif__text strong { color: var(--ces-ink-1); }

.ces-notif__date {
	color: var(--ces-ink-3);
	font-size: 0.75rem;
}

.ces-comment-error {
	margin-top: var(--ces-space-2);
	padding: var(--ces-space-2);
	background: rgba(219, 67, 0, 0.08);
	border-radius: var(--ces-r-sm);
	color: var(--ces-blue-fnd);
	font-size: 0.8125rem;
}

/* --- Composer "Quoi de neuf ?" -------------------------------------- */

/* Sentinel invisible posé juste avant le composer : un IntersectionObserver
 * surveille sa sortie du viewport pour basculer le composer en état stuck.
 * Hauteur 1px pour ne pas être totalement ignoré par certains observers. */
.ces-composer-sentinel {
	height: 1px;
	width: 100%;
	margin: 0 0 -1px;  /* overlap d'1px : ne pousse pas le composer vers le bas */
	padding: 0;
	pointer-events: none;
}

.ces-composer {
	max-width: 1400px;
	margin: 0 auto var(--ces-space-5);
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	box-shadow: var(--ces-shadow-sm);
	overflow: hidden;
	position: sticky;
	/* v0.27.10 — On utilise la var --ces-admin-offset posée par JS (mesure
	 * réelle de #wpadminbar). Évite le trou visible quand la classe
	 * `body.admin-bar` est posée mais que la barre est masquée par un
	 * autre plugin (ex. WooCommerce désactive la barre pour les clients
	 * non-staff). Fallback à 0 si JS n'a pas tourné. */
	top: var(--ces-admin-offset, 0px);
	z-index: 30;
	/* Bascule trigger ↔ body via `max-height` transition (au lieu d'un grid
	 * `1fr 0fr ↔ 0fr 1fr` qui ne collapse pas correctement sur WebKit mobile
	 * iOS quand le container est en height: auto). max-height marche partout. */
	display: block;
	transition:
		max-width 240ms cubic-bezier(0.22, 1, 0.36, 1),
		border-radius 240ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
		margin 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* État "stuck" (= scrollé, sentinel hors viewport) : barre app pleine largeur
 * pour ne pas laisser les cards Albatros (fond bleu foncé) déborder derrière
 * les bordures arrondies du composer. Pas appliqué quand le composer est
 * ouvert : on a alors scroll-back vers le top, donc déjà non-stuck. */
.ces-composer--stuck:not(.ces-composer--open) {
	max-width: none;
	margin-left: calc(-1 * var(--ces-space-4));
	margin-right: calc(-1 * var(--ces-space-4));
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

@media (max-width: 700px) {
	.ces-composer--stuck:not(.ces-composer--open) {
		margin-left: calc(-1 * var(--ces-space-3));
		margin-right: calc(-1 * var(--ces-space-3));
	}
}

/* --- Crossfade trigger / body via opacity ---------------------------
 * La taille est gérée par le grid (template-rows 0fr ↔ 1fr) sur le wrap.
 * L'opacity ajoute un fondu pour adoucir le passage visuel. Pointer-events
 * suit l'opacity pour empêcher de cliquer sur l'élément collapsed. */

.ces-composer__trigger {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	padding: var(--ces-space-4) var(--ces-space-5);
	cursor: pointer;
	opacity: 1;
	overflow: hidden;
	/* max-height un peu plus large que le trigger réel (~72px) → animation
	 * fluide sans saccade. */
	max-height: 200px;
	transition:
		background 0.15s ease,
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
		padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ces-composer--open > .ces-composer__trigger {
	opacity: 0;
	pointer-events: none;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.ces-composer__trigger:hover { background: var(--ces-bg-app-tint); }

.ces-composer__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--ces-surface);
	box-shadow: var(--ces-shadow-sm);
}

.ces-composer__placeholder {
	flex: 1;
	color: var(--ces-ink-3);
	font-size: 0.9375rem;
	background: var(--ces-bg-app-tint);
	padding: var(--ces-space-2) var(--ces-space-4);
	border-radius: 999px;
}

/* `.ces-composer__body` : pas de padding (le padding visuel est sur le
 * wrapper interne `__body-inner`). max-height: 0 par défaut → fermé. À
 * l'ouverture, max-height: 1200px (assez large pour couvrir le contenu
 * max : header + textarea + media preview + footer).
 * overflow: hidden : clipe le contenu pendant la transition.
 * NB : on n'utilise PAS `height: auto` car non-animable. max-height parcourt
 * une valeur fixe, mais comme le contenu réel est ~450px, l'animation
 * visible se fait essentiellement entre 0 et 450ms / 0 et 1200px. */
.ces-composer__body {
	padding: 0;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	max-height: 0;
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ces-composer--open > .ces-composer__body {
	opacity: 1;
	pointer-events: auto;
	max-height: 1200px;
}

.ces-composer__body-inner {
	padding: var(--ces-space-4) var(--ces-space-5);
}

@media (prefers-reduced-motion: reduce) {
	.ces-composer,
	.ces-composer__trigger,
	.ces-composer__body { transition: none; }
}

.ces-composer__head {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	margin-bottom: var(--ces-space-3);
}

.ces-composer__head-info { flex: 1; min-width: 0; }

.ces-composer__author {
	font-weight: 600;
	color: var(--ces-ink-1);
	font-size: 0.9375rem;
}

/* ----------------------------------------------------------------------
 * Bootcamp switch (iOS-style) — encart visible dans le composer.
 *
 * BEM : `.ces-bcswitch` + __input / __track / __thumb / __icon / __text.
 * Dimensions verrouillées en pixels avec !important sur le SVG pour
 * neutraliser toute pollution CSS d'un thème WP.
 * -------------------------------------------------------------------- */

.ces-bcswitch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--ces-space-2);
	padding: 8px 12px;
	max-width: 100%;
	background: var(--ces-surface-2);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
}
.ces-bcswitch:hover {
	background: var(--ces-bg-app-tint);
	border-color: var(--ces-blue-light);
}
.ces-bcswitch--on {
	background: rgba(219, 67, 0, 0.06);
	border-color: rgba(219, 67, 0, 0.3);
}

.ces-bcswitch__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ces-bcswitch__track {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 22px;
	background: var(--ces-border-warm);
	border-radius: 22px;
	flex-shrink: 0;
	transition: background 0.2s ease;
}
.ces-bcswitch__thumb {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #ffffff;
	border-radius: 50%;
	top: 3px;
	left: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}
.ces-bcswitch--on .ces-bcswitch__track { background: var(--ces-blue-fnd); }
.ces-bcswitch--on .ces-bcswitch__thumb { transform: translateX(16px); }
.ces-bcswitch__input:focus-visible ~ .ces-bcswitch__track {
	box-shadow: 0 0 0 3px rgba(219, 67, 0, 0.3);
}

.ces-bcswitch__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--ces-blue-fnd);
	line-height: 0;
}
.ces-bcswitch__icon svg {
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	display: block;
}

.ces-bcswitch__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.2;
	min-width: 0;
}
.ces-bcswitch__text strong {
	font-size: 0.8125rem;
	color: var(--ces-ink-1);
	font-weight: 600;
}
.ces-bcswitch__text small {
	font-size: 0.6875rem;
	color: var(--ces-ink-3);
}

.ces-composer__textarea {
	width: 100%;
	min-height: 80px;
	padding: var(--ces-space-3);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
	background: var(--ces-bg-app);
	resize: vertical;
}

.ces-composer__textarea:focus {
	outline: none;
	border-color: var(--ces-blue-fnd);
	background: var(--ces-surface);
}

.ces-composer__media {
	margin-top: var(--ces-space-3);
}

.ces-composer__upload-btn {
	padding: var(--ces-space-2) var(--ces-space-4);
	background: var(--ces-bg-app-tint);
	border: 1px dashed var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	color: var(--ces-ink-2);
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ces-composer__upload-btn:hover { background: var(--ces-border-warm); }

.ces-composer__preview {
	position: relative;
	display: inline-block;
	margin-top: var(--ces-space-2);
	border-radius: var(--ces-r-md);
	overflow: hidden;
}
.ces-composer__preview--pdf {
	display: flex;
	align-items: center;
	gap: var(--ces-space-2);
	padding: var(--ces-space-3) var(--ces-space-4);
	background: var(--ces-bg-app-tint);
	border-radius: var(--ces-r-md);
}

.ces-composer__preview-img {
	max-width: 100%;
	max-height: 240px;
	display: block;
	border-radius: var(--ces-r-md);
}

/* v0.27.37 — Preview de la vidéo uploadée + sous-onglets du mode vidéo. */
.ces-composer__preview--video {
	display: block;
	max-width: 100%;
	background: #000;
	border-radius: var(--ces-r-md);
}
.ces-composer__preview-video {
	display: block;
	width: 100%;
	max-height: 320px;
	border-radius: var(--ces-r-md);
	background: #000;
}

.ces-composer__video-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: var(--ces-space-3, 12px);
	padding: 4px;
	background: var(--ces-bg-app-tint, rgba(0, 0, 0, 0.04));
	border-radius: var(--ces-r-md, 10px);
	width: fit-content;
}
.ces-composer__video-tab {
	background: transparent;
	border: 0;
	padding: 6px 14px;
	border-radius: var(--ces-r-sm, 6px);
	font-family: inherit;
	font-size: 0.85rem;
	color: var(--ces-ink-2, #4b5563);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ces-composer__video-tab:hover {
	color: var(--ces-ink-1, #1f2937);
}
.ces-composer__video-tab.is-active {
	background: #fff;
	color: var(--ces-orange-flame, #db4300);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* v0.27.38 — Drop zone vidéo : clic OU drag&drop */
.ces-composer__video-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 20px;
	background: rgba(0, 0, 0, 0.03);
	border: 2px dashed var(--ces-border-warm, rgba(0, 0, 0, 0.15));
	border-radius: var(--ces-r-md, 10px);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	text-align: center;
}
.ces-composer__video-drop:hover,
.ces-composer__video-drop:focus-visible {
	background: var(--ces-bg-app-tint, rgba(43, 111, 163, 0.05));
	border-color: var(--ces-bondi, #0095a5);
	outline: none;
}
.ces-composer__video-drop.is-dragover {
	background: rgba(219, 67, 0, 0.07);
	border-color: var(--ces-orange-flame, #db4300);
	border-style: solid;
	transform: scale(1.005);
}
.ces-composer__video-drop-icon {
	font-size: 2.2rem;
	line-height: 1;
}
.ces-composer__video-drop-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--ces-ink-1, #1f2937);
	font-size: 0.95rem;
}
.ces-composer__video-drop-label strong { font-weight: 600; }
.ces-composer__video-drop-label span { color: var(--ces-ink-3, #6b7280); font-size: 0.85rem; }
.ces-composer__video-drop-hint {
	font-size: 0.75rem;
	color: var(--ces-ink-3, #6b7280);
	font-style: italic;
}

/* Barre de progression upload vidéo */
.ces-composer__upload-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	background: var(--ces-bg-app-tint, rgba(43, 111, 163, 0.04));
	border: 1px solid var(--ces-border-warm, rgba(0, 0, 0, 0.1));
	border-radius: var(--ces-r-md, 10px);
}
.ces-composer__upload-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--ces-ink-2, #4b5563);
	font-variant-numeric: tabular-nums;
}
.ces-composer__upload-progress-bar {
	height: 8px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.ces-composer__upload-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ces-orange-flame, #db4300), var(--ces-bondi, #0095a5));
	border-radius: 999px;
	transition: width 0.2s ease-out;
}
.ces-composer__upload-cancel {
	align-self: flex-end;
	background: transparent;
	border: 0;
	color: var(--ces-ink-3, #6b7280);
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 8px;
}
.ces-composer__upload-cancel:hover { color: #b32d2e; }

.ces-composer__preview-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.ces-composer__preview--pdf .ces-composer__preview-remove {
	position: static;
	background: rgba(0, 0, 0, 0.4);
	margin-left: auto;
}

.ces-composer__url {
	width: 100%;
	padding: var(--ces-space-3);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	font-family: inherit;
	font-size: 0.9375rem;
	background: var(--ces-bg-app);
}
.ces-composer__url:focus {
	outline: none;
	border-color: var(--ces-blue-fnd);
	background: var(--ces-surface);
}

.ces-composer__hint {
	margin-top: var(--ces-space-2);
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	font-style: italic;
}

.ces-composer__link-preview {
	margin-top: var(--ces-space-3);
	padding: var(--ces-space-3);
	display: flex;
	gap: var(--ces-space-3);
	background: var(--ces-bg-app-tint);
	border-radius: var(--ces-r-md);
	border: 1px solid var(--ces-border-warm);
}

.ces-composer__link-image {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: var(--ces-r-sm);
}

.ces-composer__link-title { font-weight: 600; color: var(--ces-ink-1); margin-bottom: 4px; font-size: 0.9375rem; }
.ces-composer__link-desc { color: var(--ces-ink-2); font-size: 0.8125rem; line-height: 1.4; margin-bottom: 4px; }
.ces-composer__link-site { color: var(--ces-ink-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em !important; }

.ces-composer__error {
	margin-top: var(--ces-space-2);
	padding: var(--ces-space-2) var(--ces-space-3);
	background: rgba(219, 67, 0, 0.08);
	border: 1px solid rgba(219, 67, 0, 0.2);
	border-radius: var(--ces-r-sm);
	color: var(--ces-blue-fnd);
	font-size: 0.875rem;
}

.ces-composer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--ces-space-3);
	padding-top: var(--ces-space-3);
	border-top: 1px solid var(--ces-border-warm);
	gap: var(--ces-space-3);
	flex-wrap: wrap;
}

.ces-composer__actions {
	display: flex;
	gap: var(--ces-space-1);
}

.ces-composer__tool {
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	border-radius: var(--ces-r-sm);
	cursor: pointer;
	font-size: 1.125rem;
	transition: background 0.15s ease;
}
.ces-composer__tool:hover { background: var(--ces-bg-app-tint); }
.ces-composer__tool.active { background: var(--ces-blue-fnd); }

.ces-composer__cta {
	display: flex;
	gap: var(--ces-space-2);
}

.ces-composer__cancel {
	padding: var(--ces-space-2) var(--ces-space-4);
	background: transparent;
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	color: var(--ces-ink-2);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}
.ces-composer__cancel:hover { background: var(--ces-bg-app-tint); }

.ces-composer__publish {
	padding: var(--ces-space-2) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	border: 0;
	border-radius: var(--ces-r-sm);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ces-composer__publish:hover:not(:disabled) { background: var(--ces-blue-night); }
.ces-composer__publish:disabled { opacity: 0.5; cursor: not-allowed; }

/* x-cloak — Alpine.js : cache les éléments avant init pour éviter le flash. */
[x-cloak] { display: none !important; }

/* --- Médias dans les cards ----------------------------------------- */

.ces-card__media {
	margin: var(--ces-space-3) 0 0;
}

.ces-card__media-img {
	display: block;
	width: 100%;
	max-height: 360px;
	object-fit: cover;
	border-radius: var(--ces-r-md);
}

.ces-card__pdf {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	margin: var(--ces-space-3) 0 0;
	padding: var(--ces-space-3) var(--ces-space-4);
	background: var(--ces-bg-app-tint);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	color: var(--ces-ink-1) !important;
	transition: background 0.15s ease;
}
.ces-card__pdf:hover { background: var(--ces-border-warm); }
.ces-card__pdf-icon { font-size: 1.25rem; }
.ces-card__pdf-name { font-weight: 500; flex: 1; }
.ces-card__pdf-hint { color: var(--ces-ink-3); font-size: 0.8125rem; }

/* Wrapper iframe responsive 16:9. Technique "padding-bottom 56.25%" qui
 * marche partout (ignore les attributs intrinsèques width/height de
 * l'iframe YouTube, et n'est pas écrasable par Divi qui force parfois
 * height:auto sur les iframes globalement). aspect-ratio CSS seul ne
 * suffit pas quand l'iframe a width="560" height="315" en attributs HTML. */
.ces-card__video {
	margin: var(--ces-space-3) 0 0;
	border-radius: var(--ces-r-md);
	overflow: hidden;
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 9/16 = 0.5625 → ratio 16:9 */
	height: 0;
}
.ces-card__video iframe,
.ces-card__video video,
.ces-card__video embed,
.ces-card__video object {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--ces-r-md);
}

.ces-card__link {
	display: flex;
	gap: var(--ces-space-3);
	margin: var(--ces-space-3) 0 0;
	background: var(--ces-bg-app-tint);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	overflow: hidden;
	color: var(--ces-ink-1) !important;
	transition: background 0.15s ease;
}
.ces-card__link:hover { background: var(--ces-border-warm); }
.ces-card__link-image {
	width: 120px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--ces-bg-app-tint);
}
.ces-card__link-body { padding: var(--ces-space-3); min-width: 0; }
.ces-card__link-site { color: var(--ces-ink-3); font-size: 0.75rem; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 4px; }
.ces-card__link-title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; margin-bottom: 4px; }
.ces-card__link-desc { color: var(--ces-ink-2); font-size: 0.8125rem; line-height: 1.4; }

/* --- Bootcamp info card (colonne Bootcamp pour non-Bootcamp) -------- */

.ces-bootcamp-info {
	/* Fond opaque crème + dégradé orange par-dessus pour conserver la
	 * nuance chaude sans laisser passer l'image de fond du Club. */
	background:
		linear-gradient(135deg, rgba(219, 67, 0, 0.04) 0%, rgba(243, 151, 116, 0.10) 100%),
		var(--ces-surface);
	border: 1px solid rgba(219, 67, 0, 0.2);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-5);
	text-align: center;
	box-shadow: var(--ces-shadow-sm);
}

.ces-bootcamp-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--ces-space-2);
	color: var(--ces-blue-fnd);
	line-height: 0;
}
.ces-bootcamp-info__icon svg {
	width: 56px;
	height: auto;
	display: block;
}

.ces-bootcamp-info__title {
	font-size: 1.375rem;
	color: var(--ces-ink-1);
	margin: 0 0 var(--ces-space-3);
}

.ces-bootcamp-info__lead {
	color: var(--ces-ink-2);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0 0 var(--ces-space-4);
}

.ces-bootcamp-info__perks {
	text-align: left;
	margin: 0 0 var(--ces-space-4);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-2);
}

.ces-bootcamp-info__perks li {
	color: var(--ces-ink-1);
	font-size: 0.875rem;
	padding: var(--ces-space-1) 0;
}

.ces-bootcamp-info__cta {
	display: inline-block;
	padding: var(--ces-space-3) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	color: #ffffff !important;
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ces-bootcamp-info__cta:hover {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
	box-shadow: var(--ces-shadow-md);
}

/* --- CTA Bootcamp inline (sur posts Promo) --------------------------- */

.ces-cta-bootcamp {
	margin-top: var(--ces-space-4);
	padding: var(--ces-space-4);
	background: linear-gradient(135deg, rgba(219, 67, 0, 0.06) 0%, rgba(243, 151, 116, 0.10) 100%);
	border: 1px solid rgba(219, 67, 0, 0.18);
	border-radius: var(--ces-r-md);
	text-align: center;
}

.ces-cta-bootcamp__text {
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-ink-1);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ces-cta-bootcamp__btn {
	display: inline-block;
	padding: var(--ces-space-3) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	color: #ffffff !important;
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ces-cta-bootcamp__btn:hover {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
	box-shadow: var(--ces-shadow-md);
}

/* --- Sidebar profil + widgets --------------------------------------- */

.ces-sidebar__card {
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-4);
	box-shadow: var(--ces-shadow-sm);
}

.ces-sidebar__card--soft {
	background: var(--ces-surface-2);
}

.ces-sidebar__profile {
	display: flex;
	align-items: center;
	gap: var(--ces-space-3);
	margin-bottom: var(--ces-space-3);
	min-width: 0; /* permet aux enfants flex de rétrécir correctement */
}

.ces-sidebar__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--ces-surface);
	box-shadow: var(--ces-shadow-sm);
	background: var(--ces-bg-app-tint);
}

.ces-sidebar__profile-info {
	flex: 1 1 0;
	min-width: 0;     /* indispensable pour que les enfants tronquent */
	overflow: hidden; /* empêche tout enfant inline-flex de déborder de la card */
}

.ces-sidebar__name {
	font-weight: 600;
	color: var(--ces-ink-1);
	font-size: 0.9375rem;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ces-sidebar__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-2);
	border-radius: var(--ces-r-sm);
	font-size: 0.75rem;
	font-weight: 600;
	max-width: 100%;            /* fix v0.22.6 : ne déborde plus du parent */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ces-sidebar__badge--bootcamp {
	background: var(--ces-blue-fnd);
	color: #ffffff;
}

.ces-sidebar__badge svg {
	width: 14px;
	height: auto;
	display: block;
}

.ces-sidebar__link {
	display: block;
	padding: var(--ces-space-2) var(--ces-space-3);
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-1) !important;
	border-radius: var(--ces-r-sm);
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	transition: background 0.15s ease;
}

.ces-sidebar__link:hover {
	background: var(--ces-border-warm);
}

.ces-sidebar__heading {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-ink-1);
}

.ces-sidebar__points {
	display: flex;
	align-items: baseline;
	gap: var(--ces-space-2);
	margin-bottom: var(--ces-space-2);
	flex-wrap: wrap;
}

.ces-sidebar__points-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ces-blue-fnd);
	line-height: 1;
	font-family: 'Alice', Georgia, serif;
}

.ces-sidebar__points-target {
	font-size: 0.8125rem;
	color: var(--ces-ink-3);
}

.ces-sidebar__note {
	margin: 0;
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	line-height: 1.5;
}
.ces-sidebar__note--success { color: var(--ces-bondi); font-weight: 500; }

/* Barre de progression vers la prochaine journée gagnée */
.ces-sidebar__progress {
	height: 8px;
	background: var(--ces-bg-app-tint);
	border-radius: 999px;
	overflow: hidden;
	margin: var(--ces-space-2) 0 var(--ces-space-3);
}
.ces-sidebar__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ces-blue-light) 0%, var(--ces-blue-fnd) 100%);
	border-radius: 999px;
	transition: width 0.3s ease;
}

.ces-sidebar__rules {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-2);
}
.ces-sidebar__rules li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	color: var(--ces-ink-1);
}
.ces-sidebar__rules strong {
	color: var(--ces-blue-fnd);
	font-family: 'Alice', Georgia, serif;
	font-weight: 400;
	font-size: 0.9375rem;
}
.ces-sidebar__rules small {
	color: var(--ces-ink-3);
	font-size: 0.6875rem;
}

/* --- Card "Opération en cours" (campagnes temporelles, bootcampeur·ses) */

.ces-campaign-card {
	/* Fond opaque + dégradé orange par-dessus : on garde l'ambiance
	 * chaude de la card sans laisser passer l'image de fond du Club. */
	background:
		linear-gradient(135deg, rgba(255, 222, 0, 0.10) 0%, rgba(243, 151, 116, 0.18) 50%, rgba(219, 67, 0, 0.10) 100%),
		var(--ces-surface);
	border: 1px solid var(--ces-blue-light);
	box-shadow: var(--ces-shadow-ember);
	position: relative;
	overflow: hidden;
}
.ces-campaign-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 200px at 100% 0%, rgba(255, 222, 0, 0.15), transparent 60%),
		radial-gradient(400px 200px at 0% 100%, rgba(219, 67, 0, 0.12), transparent 60%);
	pointer-events: none;
}

.ces-campaign-card__header {
	display: flex;
	align-items: center;
	gap: var(--ces-space-2);
	margin-bottom: var(--ces-space-2);
	position: relative;
}
.ces-campaign-card__icon {
	font-size: 1.25rem;
	line-height: 1;
}
.ces-campaign-card__title {
	margin: 0;
	font-size: 1rem;
	color: var(--ces-blue-night);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ces-campaign-card__deadline {
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-blue-fnd);
	font-size: 0.8125rem;
	font-weight: 600;
	position: relative;
}

.ces-campaign-card__rules {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-3, 12px);
	position: relative;
}

/* v0.27.33 — Layout en grid : valeur en pill à gauche, contenu à droite.
 * Plus de relief visuel, légère ombre, hover doux. */
.ces-campaign-card__rule {
	background: #fff;
	border: 1px solid var(--ces-border-warm, rgba(0, 0, 0, 0.08));
	border-radius: var(--ces-r-md, 10px);
	padding: 10px 12px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 12px;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--ces-ink-1, #1f2937);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ces-campaign-card__rule:hover {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Valeur "+200" : pill colorée pour la mettre en avant */
.ces-campaign-card__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	padding: 4px 10px;
	background: linear-gradient(135deg, rgba(219, 67, 0, 0.10), rgba(219, 67, 0, 0.05));
	border: 1px solid rgba(219, 67, 0, 0.20);
	border-radius: 999px;
	color: var(--ces-orange-flame, #db4300);
	font-family: 'Alice', Georgia, serif;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ces-campaign-card__label {
	color: var(--ces-ink-1, #1f2937);
	grid-column: 2;
	font-weight: 500;
}

.ces-campaign-card__bonus {
	grid-column: 2;
	justify-self: start;
	color: var(--ces-bondi, #0095a5);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 2px 8px;
	background: rgba(0, 149, 165, 0.10);
	border: 1px solid rgba(0, 149, 165, 0.20);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.ces-campaign-card__was {
	grid-column: 2;
	color: var(--ces-ink-3, #99a3ad);
	font-size: 0.6875rem;
	font-style: italic;
}

/* Règle boostée : valeur en bleu + box plus marquée */
.ces-campaign-card__rule--boosted {
	background: linear-gradient(135deg, rgba(219, 67, 0, 0.06), rgba(219, 67, 0, 0.02));
	border-color: rgba(219, 67, 0, 0.35);
	box-shadow: 0 2px 6px rgba(219, 67, 0, 0.12);
}
.ces-campaign-card__rule--boosted:hover {
	box-shadow: 0 4px 12px rgba(219, 67, 0, 0.16);
	transform: translateY(-1px);
}
.ces-campaign-card__rule--boosted .ces-campaign-card__value {
	background: linear-gradient(135deg, var(--ces-orange-flame, #db4300), var(--ces-orange-deep, #b53700));
	border-color: var(--ces-orange-deep, #b53700);
	color: #fff;
	font-size: 1rem;
	box-shadow: 0 2px 6px rgba(219, 67, 0, 0.30);
}

.ces-sidebar__links {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-2);
}

.ces-sidebar__links a {
	display: block;
	padding: var(--ces-space-2) var(--ces-space-3);
	color: var(--ces-blue-deep) !important;
	font-size: 0.875rem;
	border-radius: var(--ces-r-sm);
	transition: background 0.15s ease;
}

.ces-sidebar__links a:hover {
	background: var(--ces-bg-app-tint);
}

/* --- Top membres actifs (sidebar) ----------------------------------- */

.ces-active-members {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--ces-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-2);
}

.ces-active-member {
	display: flex;
	align-items: center;
	gap: var(--ces-space-2);
	min-width: 0;
}

.ces-active-member__rank {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-3);
	font-size: 0.6875rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid var(--ces-border-warm);
}
.ces-active-member:nth-child(1) .ces-active-member__rank {
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border-color: var(--ces-blue-fnd);
}
.ces-active-member:nth-child(2) .ces-active-member__rank {
	background: var(--ces-blue-light);
	color: #ffffff;
	border-color: var(--ces-blue-light);
}
.ces-active-member:nth-child(3) .ces-active-member__rank {
	background: var(--ces-yellow-spark);
	color: var(--ces-ink-1);
	border-color: var(--ces-yellow-spark);
}

.ces-active-member__avatar {
	display: block;
	flex-shrink: 0;
	border-radius: 50%;
	transition: transform 0.15s ease;
}
.ces-active-member__avatar:hover { transform: scale(1.08); }
.ces-active-member__avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ces-bg-app-tint);
	display: block;
}

.ces-active-member__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.2;
}

.ces-active-member__name {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ces-ink-1) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.ces-active-member__name:hover { color: var(--ces-blue-fnd) !important; }

.ces-active-member__badge {
	display: inline-flex;
	align-items: center;
	color: var(--ces-blue-fnd);
	line-height: 0;
}
.ces-active-member__badge svg {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	display: block;
}

.ces-active-member__level {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--ces-blue-fnd);
	margin-left: 4px;
	white-space: nowrap;
}

.ces-active-member__score {
	font-size: 0.6875rem;
	color: var(--ces-ink-3);
	font-variant-numeric: tabular-nums;
}

/* --- Profile layout 2 colonnes (main + sidebar) --------------------- */

.ces-profile-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 0.85fr);
	gap: var(--ces-space-5);
}

.ces-profile-layout__main { display: flex; flex-direction: column; min-width: 0; }

.ces-profile-layout__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-4);
	min-width: 0;
}

@media (max-width: 1100px) {
	.ces-profile-layout {
		grid-template-columns: 1fr;
		grid-template-areas: "sidebar" "main";
	}
	.ces-profile-layout__main { grid-area: main; }
	.ces-profile-layout__sidebar {
		grid-area: sidebar;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.ces-profile-layout__sidebar > .ces-sidebar__card { flex: 1 1 240px; }
}

@media (max-width: 700px) {
	.ces-profile-layout__sidebar { flex-direction: column; }
	.ces-profile-layout__sidebar > .ces-sidebar__card { flex: 1; }
}

/* --- Page profil membre `/membre/{slug}` ----------------------------- */

.ces-profile__back {
	display: inline-block;
	margin-bottom: var(--ces-space-4);
	color: var(--ces-blue-deep) !important;
	font-size: 0.875rem;
	font-weight: 500;
}
.ces-profile__back:hover { text-decoration: underline; }

.ces-profile__header {
	display: flex;
	gap: var(--ces-space-5);
	align-items: center;
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-5);
	box-shadow: var(--ces-shadow-sm);
	margin-bottom: var(--ces-space-5);
	position: relative;
}

.ces-profile__avatar {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	border: 4px solid var(--ces-surface);
	box-shadow: var(--ces-shadow-md);
	flex-shrink: 0;
	background: var(--ces-bg-app-tint);
}

.ces-profile__identity { flex: 1; min-width: 0; }

.ces-profile__name {
	font-size: 2.25rem;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-1);
	line-height: 1.1;
}

.ces-profile__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-2);
	border-radius: var(--ces-r-sm);
	font-size: 0.8125rem;
	font-weight: 600;
}

.ces-profile__badge--bootcamp {
	background: var(--ces-blue-fnd);
	color: #ffffff;
}

.ces-profile__badge--bot {
	background: linear-gradient(135deg, #1a2530, #2c77a6);
	color: #ffffff;
}

.ces-profile__badge svg {
	width: 16px;
	height: auto;
	display: block;
}

.ces-profile__meta {
	margin: var(--ces-space-2) 0 0;
	color: var(--ces-ink-3);
	font-size: 0.875rem;
}

.ces-profile__edit {
	position: absolute;
	top: var(--ces-space-4);
	right: var(--ces-space-4);
	padding: var(--ces-space-2) var(--ces-space-4);
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-1);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
}
.ces-profile__edit:hover { background: var(--ces-border-warm); }

/* --- Profile editor (inline form, replace header) ------------------- */

.ces-profile__editor {
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-5);
	box-shadow: var(--ces-shadow-sm);
	margin-bottom: var(--ces-space-5);
}

.ces-profile__editor-title {
	font-size: 1.5rem;
	margin: 0 0 var(--ces-space-4);
	color: var(--ces-ink-1);
}

.ces-profile__editor-row {
	display: flex;
	gap: var(--ces-space-5);
	align-items: center;
	margin-bottom: var(--ces-space-4);
}

.ces-profile__editor-row--stack {
	flex-direction: column;
	align-items: stretch;
	gap: var(--ces-space-2);
}

.ces-profile__editor-avatar {
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.ces-profile__editor-avatar-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-2);
}

.ces-profile__editor-hint {
	margin: 0;
	color: var(--ces-ink-3);
	font-size: 0.75rem;
}

.ces-profile__editor-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ces-ink-2);
}

.ces-profile__editor-counter {
	color: var(--ces-ink-3);
	font-weight: 400;
	font-size: 0.75rem;
}

.ces-profile__editor-error {
	margin-bottom: var(--ces-space-3);
	padding: var(--ces-space-2) var(--ces-space-3);
	background: rgba(219, 67, 0, 0.08);
	border: 1px solid rgba(219, 67, 0, 0.2);
	border-radius: var(--ces-r-sm);
	color: var(--ces-blue-fnd);
	font-size: 0.875rem;
}

.ces-profile__editor-actions {
	display: flex;
	gap: var(--ces-space-2);
	justify-content: flex-end;
	margin-top: var(--ces-space-3);
	padding-top: var(--ces-space-3);
	border-top: 1px solid var(--ces-border-warm);
}

.ces-profile__bio {
	background: var(--ces-surface-2);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-5);
	margin-bottom: var(--ces-space-5);
	color: var(--ces-ink-1);
	font-size: 0.9375rem;
	line-height: 1.6;
}
.ces-profile__bio--empty { color: var(--ces-ink-3); }

.ces-profile__stats {
	display: flex;
	gap: var(--ces-space-6);
	margin-bottom: var(--ces-space-5);
	padding: var(--ces-space-4) var(--ces-space-5);
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	flex-wrap: wrap;
}
.ces-profile__stat { display: flex; flex-direction: column; gap: 4px; }
.ces-profile__stat-value {
	font-size: 1.75rem;
	color: var(--ces-blue-fnd);
	font-family: 'Alice', 'Cormorant Garamond', Georgia, serif;
	font-weight: 400;
	line-height: 1;
}
.ces-profile__stat-label { color: var(--ces-ink-3); font-size: 0.8125rem; }

/* v0.25.3 — Variante slim : bandeau fin avec posts + commentaires inline. */
.ces-profile__stats--slim {
	display: flex;
	gap: var(--ces-space-3);
	align-items: baseline;
	justify-content: flex-start;
	padding: var(--ces-space-2) var(--ces-space-4);
	margin-bottom: var(--ces-space-4);
	font-size: 0.9375rem;
	color: var(--ces-ink-2);
}

.ces-profile__stat-inline {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.ces-profile__stat-inline strong {
	font-family: 'Alice', 'Cormorant Garamond', Georgia, serif;
	color: var(--ces-blue-fnd);
	font-size: 1.125rem;
	font-weight: 400;
}

.ces-profile__stat-sep {
	color: var(--ces-ink-3);
}

.ces-profile__section-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-ink-1);
}

/* Section "Mes notifs push" sur la page profil ---------------------- */

.ces-profile__push-prefs {
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	padding: var(--ces-space-5);
	margin-bottom: var(--ces-space-5);
}
.ces-profile__push-intro {
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-ink-2);
	font-size: 0.9375rem;
	line-height: 1.45;
}
.ces-profile__push-list {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-2);
}
.ces-profile__push-row {
	display: flex;
	align-items: center;
	gap: var(--ces-space-2);
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
	padding: 6px 0;
}
.ces-profile__push-row input[type=checkbox] {
	width: 18px;
	height: 18px;
	accent-color: var(--ces-blue-fnd);
	cursor: pointer;
}
.ces-profile__push-save {
	margin: var(--ces-space-3) 0 0;
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
}
.ces-profile__push-save--ok { color: #2c8a5a; }

.ces-profile__posts {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-4);
}

@media (max-width: 700px) {
	.ces-profile__header {
		flex-direction: column;
		text-align: center;
	}
	.ces-profile__edit {
		position: static;
		margin-top: var(--ces-space-3);
		align-self: center;
	}
	.ces-profile__name { font-size: 1.75rem; }
}

/* --- Locked page (réservé aux membres) ------------------------------- */

.ces-locked {
	max-width: 560px;
	margin: 64px auto;
	padding: var(--ces-space-7) var(--ces-space-5);
	text-align: center;
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	box-shadow: var(--ces-shadow-md);
}

.ces-locked__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-ink-1);
	line-height: 1.3;
}

.ces-locked__body {
	color: var(--ces-ink-2);
	margin: 0 0 var(--ces-space-5);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ces-locked__error {
	margin: 0 0 var(--ces-space-4);
	padding: var(--ces-space-3) var(--ces-space-4);
	background: #fff3ed;
	border: 1px solid rgba(219, 67, 0, 0.25);
	border-radius: var(--ces-r-sm);
	color: #9f2d00;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: left;
}

.ces-locked__login-form {
	max-width: 360px;
	margin: 0 auto;
	text-align: left;
}

.ces-locked__login-form form,
.ces-locked__login-form p {
	margin: 0;
}

.ces-locked__login-form form {
	display: flex;
	flex-direction: column;
	gap: var(--ces-space-4);
}

.ces-locked__login-form label {
	display: block;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-2);
	font-size: 0.875rem;
	font-weight: 600;
}

.ces-locked__login-form .input,
.ces-locked__login-form .input-text,
.ces-locked__login-form .woocommerce-Input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	background: var(--ces-bg-app-tint);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	color: var(--ces-ink-1);
	font: inherit;
	box-shadow: none;
}

.ces-locked__login-form .input:focus,
.ces-locked__login-form .input-text:focus,
.ces-locked__login-form .woocommerce-Input:focus {
	outline: 2px solid rgba(219, 67, 0, 0.18);
	border-color: var(--ces-blue-fnd);
	background: #ffffff;
}

.ces-locked__login-form .login-remember label,
.ces-locked__login-form .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--ces-space-2);
	margin: 0;
	font-weight: 500;
	/* min 44px de hauteur = recommandation Apple/Google pour les zones tap
	 * mobile. Cursor: pointer + padding sur tout le label → la moindre
	 * touche sur le texte ou la case déclenche le toggle. */
	min-height: 44px;
	padding: 6px 0;
	cursor: pointer;
}

.ces-locked__login-form .login-remember input[type="checkbox"],
.ces-locked__login-form .woocommerce-form-login__rememberme input[type="checkbox"] {
	/* Divi cache le checkbox natif (`display:none` ou `appearance:none`) et
	 * affiche un span custom à la place, mais le span n'est pas toujours
	 * cliquable sur mobile. On force l'apparence native + taille tap-friendly. */
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	cursor: pointer;
	accent-color: var(--ces-blue-fnd);
}

.ces-locked__login-form .login-submit,
.ces-locked__login-form .form-row:has(.woocommerce-form-login__submit) {
	text-align: center;
}

.ces-locked__login-form .login-submit .button,
.ces-locked__login-form .woocommerce-form-login__submit {
	width: 100%;
	min-height: 44px;
	padding: var(--ces-space-3) var(--ces-space-6);
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border: none;
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	font: inherit;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ces-locked__login-form .login-submit .button:hover,
.ces-locked__login-form .woocommerce-form-login__submit:hover {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
	box-shadow: var(--ces-shadow-md);
}

.ces-locked__login-form .lost_password {
	margin-top: calc(-1 * var(--ces-space-2));
	text-align: center;
	font-size: 0.875rem;
}

.ces-locked__login-form .lost_password a {
	color: var(--ces-ink-2);
	text-decoration: underline;
}

.ces-locked__login-form .woocommerce-error,
.ces-locked__login-form .woocommerce-message,
.ces-locked__login-form .woocommerce-info {
	margin: 0 0 var(--ces-space-4);
	padding: var(--ces-space-3) var(--ces-space-4);
	border-radius: var(--ces-r-sm);
	font-size: 0.875rem;
	line-height: 1.45;
	list-style: none;
}

.ces-locked__login-form .woocommerce-error {
	background: #fff3ed;
	border: 1px solid rgba(219, 67, 0, 0.25);
	color: #9f2d00;
}

.ces-locked__quote {
	margin: var(--ces-space-4) 0;
	padding: var(--ces-space-4) var(--ces-space-5);
	background: var(--ces-bg-app-tint);
	border-left: 3px solid var(--ces-blue-fnd);
	font-style: italic;
	color: var(--ces-ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
	border-radius: var(--ces-r-sm);
}

.ces-locked__cta {
	display: inline-block;
	padding: var(--ces-space-3) var(--ces-space-6);
	background: var(--ces-blue-fnd);
	color: #ffffff !important;
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ces-locked__cta:hover {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
	box-shadow: var(--ces-shadow-md);
}

/* =========================================================================
 * Cartes de célébration (level-up, nouveaux memberships)
 * ---------------------------------------------------------------------
 * Posts auto publiés par "Albatros" (le messager du Club). Gradient sombre
 * → bleu, texte clair. Le ❤️/💬 reste fonctionnel pour que la communauté
 * puisse féliciter.
 * ========================================================================= */

.ces-card--celebration {
	background: linear-gradient(135deg, #2c77a6, #175691 60%, #0095A5 110%);
	color: #f5f7fa;
	border-color: rgba(255, 255, 255, 0.08);
	position: relative;
	/* Pas d'overflow: hidden — laisser le .ces-card__crown dépasser en haut
	 * comme sur les autres Bootcamp cards. Le gradient interne est clippé
	 * par `border-radius: inherit` sur le ::before. */
}

.ces-card--celebration::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08), transparent 45%),
		radial-gradient(circle at 15% 85%, rgba(44, 119, 166, 0.18), transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.ces-card--celebration .ces-card__author {
	color: #ffffff !important;
}

.ces-card--celebration .ces-card__author:hover {
	color: #ffe9b8 !important;
}

.ces-card--celebration .ces-card__meta,
.ces-card--celebration .ces-card__content,
.ces-card--celebration .ces-card__content p {
	color: #e6edf3;
}

.ces-card--celebration .ces-card__content a {
	color: #ffe9b8;
	text-decoration: underline;
}

.ces-card--celebration .ces-card__content strong {
	color: #ffffff;
}

/* Encart Live Zoom posé DANS une carte Albatros : on désature pour ne pas
 * faire compétition au fond bleu foncé de la carte. Le bouton "Rejoindre"
 * reste blanc → CTA bien visible. La variante `--now` (rouge sang pulsant)
 * conserve sa couleur d'origine : c'est un signal sémantique d'urgence. */
.ces-card--celebration .ces-zoom-live {
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================================================================
 * Card Live Zoom (Phase 6 v0.21.0)
 * ========================================================================= */

.ces-zoom-live {
	background: linear-gradient(135deg, #2D8CFF 0%, #1976d2 100%);
	color: #ffffff;
	padding: var(--ces-space-4) var(--ces-space-5);
	border-radius: var(--ces-r-md);
	margin: var(--ces-space-3) 0;
	box-shadow: 0 4px 18px rgba(45, 140, 255, 0.25);
	position: relative;
}

.ces-zoom-live--now {
	background: linear-gradient(135deg, #c41a30 0%, #8a0e1f 100%);
	box-shadow: 0 4px 24px rgba(196, 26, 48, 0.4);
	animation: ces-zoom-live-pulse 2s ease-in-out infinite;
}

@keyframes ces-zoom-live-pulse {
	0%, 100% { box-shadow: 0 4px 24px rgba(196, 26, 48, 0.4); }
	50%      { box-shadow: 0 4px 32px rgba(196, 26, 48, 0.7); }
}

.ces-zoom-live__head {
	display: flex;
	align-items: center;
	gap: var(--ces-space-2);
	margin-bottom: var(--ces-space-2);
}
.ces-zoom-live__icon {
	font-size: 1.5rem;
	line-height: 1;
}
.ces-zoom-live__head-text {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ces-zoom-live__brand {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}
.ces-zoom-live__now-badge {
	background: rgba(255, 255, 255, 0.18);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.ces-zoom-live__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 var(--ces-space-2);
	line-height: 1.3;
}

.ces-zoom-live__when {
	font-size: 0.9375rem;
	margin-bottom: var(--ces-space-3);
	opacity: 0.95;
}

.ces-zoom-live__join {
	display: inline-block;
	padding: var(--ces-space-3) var(--ces-space-5);
	background: #ffffff;
	color: #2D8CFF !important;
	border-radius: var(--ces-r-sm);
	font-weight: 700;
	text-decoration: none !important;
	font-size: 0.9375rem;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ces-zoom-live__join:hover {
	background: #f0f8ff;
	transform: translateY(-1px);
}
.ces-zoom-live--now .ces-zoom-live__join {
	color: #c41a30 !important;
}

.ces-zoom-live__intro {
	font-size: 0.9375rem;
	margin: 0 0 var(--ces-space-3);
}

.ces-zoom-live__pitch {
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 0 var(--ces-space-3);
	color: var(--ces-ink-1);
}

/* =========================================================================
 * Formulaire Question Tech (Phase 6 v0.22.0)
 * ========================================================================= */

.ces-tech-q__header {
	margin-bottom: var(--ces-space-5);
}
.ces-tech-q__title {
	font-size: 2rem;
	font-weight: 400;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-1);
}
.ces-tech-q__subtitle {
	color: var(--ces-ink-2);
	margin: 0;
}

.ces-tech-q__panel {
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-5);
	margin-bottom: var(--ces-space-4);
	max-width: 720px;
	box-shadow: var(--ces-shadow-sm);
}

.ces-tech-q__when {
	font-size: 1rem;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-1);
}
.ces-tech-q__deadline {
	font-size: 0.9375rem;
	margin: 0 0 var(--ces-space-4);
	color: var(--ces-ink-2);
	padding: var(--ces-space-2) var(--ces-space-3);
	background: var(--ces-bg-app-tint);
	border-left: 3px solid var(--ces-blue-fnd);
	border-radius: var(--ces-r-sm);
}
.ces-tech-q__deadline--passed {
	border-left-color: #b32d2e;
	background: #fde8e6;
	color: #b32d2e;
}

.ces-tech-q__form { margin: 0; }
.ces-tech-q__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin: var(--ces-space-3) 0 6px;
	color: var(--ces-ink-1);
}
.ces-tech-q__label small {
	font-weight: 400;
	color: var(--ces-ink-3);
	margin-left: 6px;
}
.ces-tech-q__textarea,
.ces-tech-q__input,
.ces-tech-q__select {
	width: 100%;
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	padding: var(--ces-space-2) var(--ces-space-3);
	font-family: inherit;
	font-size: 0.9375rem;
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-1);
	box-sizing: border-box;
}
.ces-tech-q__textarea { min-height: 140px; resize: vertical; }
.ces-tech-q__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ces-ink-3) 50%),
		linear-gradient(135deg, var(--ces-ink-3) 50%, transparent 50%);
	background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 30px;
	cursor: pointer;
}
.ces-tech-q__textarea:focus,
.ces-tech-q__input:focus,
.ces-tech-q__select:focus {
	outline: 0;
	border-color: var(--ces-blue-fnd);
	background-color: #fff;
}

.ces-tech-q__rules {
	background: var(--ces-bg-app-tint);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	padding: var(--ces-space-4) var(--ces-space-5);
	margin-bottom: var(--ces-space-5);
	max-width: 720px;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.ces-tech-q__rules p { margin: 0 0 var(--ces-space-2); }
.ces-tech-q__rules ul { margin: 0 0 var(--ces-space-3) 1.5em; }
.ces-tech-q__rules li { margin-bottom: 4px; }
.ces-tech-q__warning {
	background: #fff8d6;
	border-left: 3px solid #d4a017;
	padding: var(--ces-space-2) var(--ces-space-3);
	border-radius: var(--ces-r-sm);
	margin: var(--ces-space-3) 0 0 !important;
}

.ces-tech-q__item-head {
	margin-bottom: 6px;
}
.ces-tech-q__item-tool {
	display: inline-block;
	background: #2271b1;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 3px;
}
.ces-tech-q__item-links {
	display: flex;
	gap: var(--ces-space-3);
	margin-top: 6px;
}

/* =========================================================================
 * Calendrier "Prochains lives" (v0.22.3)
 * ========================================================================= */

.ces-upcoming-events {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ces-upcoming-event {
	display: flex;
	gap: var(--ces-space-3);
	align-items: center;
	padding: var(--ces-space-2) 0;
	border-bottom: 1px dashed var(--ces-border-warm);
	font-size: 0.8125rem;
}

/* v0.27.42 — Lien icône "Rejoindre Zoom" à droite de chaque event.
 * Visible uniquement pour les events que l'user peut rejoindre (cf. PHP). */
.ces-upcoming-event__join {
	margin-left: auto;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none !important;
	border-radius: 50%;
	background: var(--ces-bg-app-tint, rgba(43, 111, 163, 0.08));
	transition: background 0.15s ease, transform 0.12s ease;
}
.ces-upcoming-event__join:hover {
	background: rgba(219, 67, 0, 0.15);
	transform: scale(1.1);
}
.ces-upcoming-event__title {
	flex: 1;
	min-width: 0;
}
.ces-upcoming-event:last-child {
	border-bottom: 0;
}
.ces-upcoming-event__date {
	flex-shrink: 0;
	width: 70px;
	font-weight: 600;
	color: var(--ces-blue-fnd);
	text-transform: capitalize;
}
.ces-upcoming-event__date small {
	display: block;
	font-weight: 500;
	color: var(--ces-ink-3);
}
.ces-upcoming-event__title {
	flex: 1;
	color: var(--ces-ink-1);
	line-height: 1.35;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* v0.23.1 — Badge Bootcamp sur events réservés du planning */
.ces-upcoming-event__badge {
	display: inline-flex;
	align-items: center;
	background: var(--ces-blue-fnd);
	color: #fff;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(244, 119, 33, 0.4);
}

.ces-upcoming-event__badge svg {
	width: 12px;
	height: auto;
	display: block;
	margin: auto;
}

.ces-upcoming-event--bootcamp .ces-upcoming-event__title {
	color: var(--ces-ink-1);
}

/* =========================================================================
 * Encart admin info client (page profil)
 * ========================================================================= */

.ces-profile__admin-info {
	background: #fef9ed;
	border: 1px solid #d4a017;
	border-radius: var(--ces-r-lg);
	padding: var(--ces-space-4) var(--ces-space-5);
	margin: var(--ces-space-4) 0;
}
.ces-profile__admin-info-title {
	margin: 0 0 var(--ces-space-3);
	font-size: 1rem;
	color: #8a6d10;
	font-weight: 700;
}
.ces-profile__admin-info-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ces-space-4);
}
.ces-profile__admin-info-col h3 {
	margin: 0 0 var(--ces-space-2);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ces-ink-2);
}
.ces-profile__admin-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ces-profile__admin-info-list li {
	margin-bottom: 8px;
	font-size: 0.8125rem;
	line-height: 1.45;
}
.ces-profile__admin-info-list code {
	font-size: 0.75rem;
	background: rgba(0,0,0,0.06);
	padding: 1px 5px;
	border-radius: 3px;
}
.ces-profile__admin-info-list small {
	display: block;
	color: var(--ces-ink-3);
	font-size: 0.6875rem;
}
.ces-profile__admin-info-status {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-left: 4px;
}

/* =========================================================================
 * PWA install banner mobile (v0.22.4)
 * ========================================================================= */

.ces-install-banner {
	display: none;
}

@media (max-width: 768px) {
	.ces-install-banner {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9500;
		padding: 12px;
		background: var(--ces-surface);
		border-top: 1px solid var(--ces-border-warm);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
		animation: ces-install-banner-up 0.3s ease-out;
	}
	@keyframes ces-install-banner-up {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}
	.ces-install-banner__inner {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.ces-install-banner__icon {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}
	.ces-install-banner__body {
		flex: 1;
		min-width: 0;
	}
	.ces-install-banner__title {
		font-size: 0.875rem;
		color: var(--ces-ink-1);
		display: block;
		font-weight: 600;
	}
	.ces-install-banner__text {
		font-size: 0.75rem;
		color: var(--ces-ink-3);
		margin: 2px 0 0;
		line-height: 1.35;
	}
	.ces-install-banner__actions {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}
	.ces-install-banner__cta {
		background: var(--ces-blue-fnd);
		color: #fff;
		border: 0;
		padding: 8px 14px;
		border-radius: var(--ces-r-sm);
		font-weight: 600;
		font-size: 0.875rem;
		cursor: pointer;
	}
	.ces-install-banner__dismiss {
		background: transparent;
		border: 0;
		color: var(--ces-ink-3);
		font-size: 1.5rem;
		cursor: pointer;
		padding: 0 8px;
		line-height: 1;
	}
}

.ces-tech-q__actions {
	margin-top: var(--ces-space-4);
}
.ces-tech-q__submit {
	background: var(--ces-blue-fnd);
	color: #fff;
	border: 0;
	padding: var(--ces-space-3) var(--ces-space-6);
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ces-tech-q__submit:hover:not(:disabled) {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
}
.ces-tech-q__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.ces-tech-q__success {
	background: #e8f5ec;
	color: #2c8a4a;
	border-left: 3px solid #2c8a4a;
	padding: var(--ces-space-2) var(--ces-space-3);
	border-radius: var(--ces-r-sm);
	margin-top: var(--ces-space-3);
}
.ces-tech-q__error {
	background: #fde8e6;
	color: #b32d2e;
	border-left: 3px solid #b32d2e;
	padding: var(--ces-space-2) var(--ces-space-3);
	border-radius: var(--ces-r-sm);
	margin-top: var(--ces-space-3);
}

.ces-tech-q__list {
	max-width: 720px;
	margin-bottom: var(--ces-space-5);
}
.ces-tech-q__list-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 var(--ces-space-2);
	color: var(--ces-ink-1);
}
.ces-tech-q__list ul { list-style: none; padding: 0; margin: 0; }
.ces-tech-q__item {
	background: var(--ces-surface);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-md);
	padding: var(--ces-space-3) var(--ces-space-4);
	margin-bottom: var(--ces-space-2);
}
.ces-tech-q__item p { margin: 0 0 6px; line-height: 1.5; }
.ces-tech-q__loom-link {
	font-size: 0.875rem;
	color: var(--ces-blue-fnd) !important;
	text-decoration: none;
}
.ces-tech-q__loom-link:hover { text-decoration: underline; }

.ces-tech-q__hint {
	color: var(--ces-ink-3);
	font-size: 0.875rem;
	max-width: 720px;
}

/* Bouton CTA inline dans le post de rappel vendredi */
.ces-tech-q__cta-line {
	margin: var(--ces-space-3) 0;
}
.ces-tech-q__btn {
	display: inline-block;
	padding: var(--ces-space-3) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	color: #fff !important;
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	text-decoration: none !important;
}
.ces-tech-q__btn:hover {
	background: var(--ces-blue-night);
}
.ces-tech-q__cta-info {
	color: var(--ces-ink-3);
	font-size: 0.875rem;
	margin: 0;
}

.ces-celeb__line {
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0 0 var(--ces-space-3);
}

.ces-celeb__sub {
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 var(--ces-space-2);
}
.ces-celeb__sub:last-child { margin-bottom: 0; }

.ces-celeb__hero {
	margin: 0 0 var(--ces-space-4);
	text-align: center;
}
.ces-celeb__hero img {
	max-width: 100%;
	height: auto;
	max-height: 280px;
	border-radius: var(--ces-r-md);
	display: inline-block;
}

.ces-celeb__cta {
	margin: var(--ces-space-3) 0 0;
}

.ces-celeb__cta-btn {
	display: inline-block;
	padding: var(--ces-space-2) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	color: #ffffff !important;
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ces-celeb__cta-btn:hover {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
}

.ces-card--celebration .ces-card__footer {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.ces-card--celebration .ces-card__action {
	color: #e6edf3;
}

.ces-card--celebration .ces-card__action:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
 * Recherche : bouton loupe (composer), chip filtre, modale
 * ========================================================================= */

.ces-composer__search-btn {
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--ces-border-warm);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	cursor: pointer;
	color: var(--ces-ink-2);
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ces-composer__search-btn:hover {
	background: var(--ces-bg-app-tint);
	border-color: var(--ces-blue-fnd);
	transform: scale(1.05);
}

.ces-search-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ces-space-2);
	margin: 0 0 var(--ces-space-4);
	padding: 6px 12px 6px 14px;
	background: var(--ces-bg-app-tint);
	border: 1px solid var(--ces-blue-fnd);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--ces-ink-1);
}
.ces-search-chip__icon { font-size: 0.95rem; }
.ces-search-chip__label strong { font-weight: 600; }
.ces-search-chip__clear {
	background: var(--ces-blue-fnd);
	color: #ffffff;
	border: 0;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	transition: background 0.15s ease;
}
.ces-search-chip__clear:hover { background: var(--ces-blue-night); }

.ces-search-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ces-space-4);
}
.ces-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 30, 40, 0.55);
	backdrop-filter: blur(2px);
}
.ces-search-modal__panel {
	position: relative;
	background: #ffffff;
	border-radius: var(--ces-r-lg);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 480px;
	padding: var(--ces-space-6);
}
.ces-search-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ces-ink-3);
	cursor: pointer;
}
.ces-search-modal__close:hover { color: var(--ces-ink-1); }
.ces-search-modal__title {
	margin: 0 0 var(--ces-space-2);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ces-ink-1);
}
.ces-search-modal__hint {
	margin: 0 0 var(--ces-space-4);
	font-size: 0.875rem;
	color: var(--ces-ink-3);
}
.ces-search-modal__input {
	width: 100%;
	padding: var(--ces-space-3) var(--ces-space-4);
	border: 1px solid var(--ces-border-warm);
	border-radius: var(--ces-r-sm);
	font-size: 1rem;
	background: var(--ces-bg-app-tint);
	color: var(--ces-ink-1);
}
.ces-search-modal__input:focus {
	outline: 0;
	border-color: var(--ces-blue-fnd);
	background: #ffffff;
}
.ces-search-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--ces-space-3);
	margin-top: var(--ces-space-5);
}
.ces-search-modal__cancel,
.ces-search-modal__submit {
	padding: var(--ces-space-2) var(--ces-space-5);
	border-radius: var(--ces-r-sm);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	border: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ces-search-modal__cancel {
	background: transparent;
	color: var(--ces-ink-2);
	border: 1px solid var(--ces-border-warm);
}
.ces-search-modal__cancel:hover {
	background: var(--ces-bg-app-tint);
}
.ces-search-modal__submit {
	background: var(--ces-blue-fnd);
	color: #ffffff;
}
.ces-search-modal__submit:hover:not(:disabled) {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
}
.ces-search-modal__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* =========================================================================
 * Cards programmes en sidebar (Forge, 15 Minutes Suffisent)
 * ========================================================================= */

.ces-sidebar__card--program {
	text-align: center;
	background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
	border: 1px solid var(--ces-border-warm);
}

.ces-sidebar__card--program-15min {
	background: linear-gradient(180deg, #f0f6ff 0%, #fff 100%);
}

.ces-sidebar__card--program-amazone {
	background: linear-gradient(180deg, #fdf2f6 0%, #fff 100%);
}

.ces-sidebar__program-logo--amazone {
	max-width: 120px;
	border-radius: 50%;
}

/* Card opt-in Web Push --------------------------------------------- */

.ces-sidebar__card--push {
	background: linear-gradient(180deg, #fff5d6 0%, #fff 100%);
	border: 1px solid var(--ces-border-warm);
}

.ces-sidebar__push-desc {
	margin: var(--ces-space-2) 0;
	font-size: 0.8125rem;
	color: var(--ces-ink-2);
	line-height: 1.4;
}
.ces-sidebar__push-desc--on { color: var(--ces-ink-1); }

.ces-sidebar__push-warn {
	margin: var(--ces-space-2) 0;
	font-size: 0.8125rem;
	color: #b14a3a;
	line-height: 1.4;
}

.ces-sidebar__push-cta {
	display: inline-block;
	padding: var(--ces-space-2) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	color: #ffffff !important;
	border: 0;
	border-radius: var(--ces-r-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ces-sidebar__push-cta:hover:not(:disabled) {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
}
.ces-sidebar__push-cta:disabled { opacity: 0.6; cursor: not-allowed; }
.ces-sidebar__push-cta--off {
	background: transparent;
	color: var(--ces-ink-2) !important;
	border: 1px solid var(--ces-border-warm);
}
.ces-sidebar__push-cta--off:hover:not(:disabled) {
	background: var(--ces-bg-app-tint);
	transform: none;
}

/* Push manager — état opt-in : titre dépliable + panneau */

.ces-sidebar__push-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ces-ink-1);
	margin: 0;
}
.ces-sidebar__push-toggle:hover { color: var(--ces-blue-fnd); }
.ces-sidebar__push-chevron {
	color: var(--ces-ink-3);
	font-size: 0.75rem;
	transition: color 0.15s ease;
}
.ces-sidebar__push-toggle:hover .ces-sidebar__push-chevron { color: var(--ces-blue-fnd); }

.ces-sidebar__push-panel {
	margin-top: var(--ces-space-3);
	padding-top: var(--ces-space-3);
	border-top: 1px dashed var(--ces-border-warm);
}

.ces-sidebar__push-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--ces-space-3);
}
.ces-sidebar__push-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--ces-ink-1);
	cursor: pointer;
	line-height: 1.3;
}
.ces-sidebar__push-row input[type=checkbox] {
	width: 16px;
	height: 16px;
	accent-color: var(--ces-blue-fnd);
	cursor: pointer;
	flex-shrink: 0;
}

.ces-sidebar__push-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--ces-space-2);
}
.ces-sidebar__push-test {
	background: transparent;
	border: 1px dashed var(--ces-border-warm);
	color: var(--ces-ink-2);
	padding: 6px 12px;
	border-radius: var(--ces-r-sm);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ces-sidebar__push-test:hover:not(:disabled) {
	background: var(--ces-bg-app-tint);
}
.ces-sidebar__push-test:disabled { opacity: 0.6; cursor: not-allowed; }

.ces-sidebar__push-feedback {
	margin: var(--ces-space-2) 0 0;
	font-size: 0.8125rem;
	color: var(--ces-ink-2);
	line-height: 1.4;
}

.ces-sidebar__program-logo {
	display: block;
	max-width: 140px;
	height: auto;
	margin: 0 auto var(--ces-space-3);
}

.ces-sidebar__program-emoji {
	font-size: 2.25rem;
	line-height: 1;
	text-align: center;
	margin: 0 0 var(--ces-space-2);
}

.ces-sidebar__card--program .ces-sidebar__heading {
	margin-top: 0;
	margin-bottom: var(--ces-space-2);
	font-size: 0.9375rem;
}

.ces-sidebar__program-desc {
	font-size: 0.8125rem;
	color: var(--ces-ink-2);
	line-height: 1.4;
	margin: 0 0 var(--ces-space-3);
}

.ces-sidebar__program-cta {
	display: inline-block;
	padding: var(--ces-space-2) var(--ces-space-5);
	background: var(--ces-blue-fnd);
	color: #ffffff !important;
	border-radius: var(--ces-r-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ces-sidebar__program-cta:hover {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
}

/* v0.27.18 — Variante secondaire : utilisée quand on a 2 CTA dans la
 * même card (ex. Amazone Virtuelle avec feuille de route ET accès
 * formation). La feuille de route reste primary (flame), l'accès formation
 * devient secondaire (outline) pour ne pas se concurrencer visuellement. */
.ces-sidebar__program-cta--secondary {
	margin-top: var(--ces-space-2);
	background: transparent;
	color: var(--ces-blue-fnd) !important;
	border: 1px solid var(--ces-blue-fnd);
}

.ces-sidebar__program-cta--secondary:hover {
	background: rgba(219, 67, 0, 0.08);
	color: var(--ces-blue-night) !important;
	border-color: var(--ces-blue-night);
}

/* -------------------------------------------------------------------- */
/* v0.22.6 — Bouton ⓘ info + modale Points Kdo                          */
/* -------------------------------------------------------------------- */

.ces-sidebar__heading--with-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ces-space-2);
}

.ces-sidebar__info-btn {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--ces-ink-3, #8b97a1);
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

.ces-sidebar__info-btn:hover,
.ces-sidebar__info-btn:focus-visible {
	opacity: 1;
	color: var(--ces-blue-fnd);
	transform: scale(1.15);
	outline: none;
}

.ces-sidebar__info-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--ces-blue-fnd);
}

/* Body lock quand modale ouverte */
body.ces-body-no-scroll {
	overflow: hidden;
}

/* Modale Kdo : overlay plein écran + dialog centré */
.ces-kdo-modal[x-cloak] {
	display: none;
}

.ces-kdo-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 30, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9998;
}

.ces-kdo-modal__dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
	z-index: 9999;
	padding: 2rem 1.75rem 1.5rem;
	font-family: inherit;
}

.ces-kdo-modal__dialog--enter {
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ces-kdo-modal__dialog--enter-start {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.92);
}

.ces-kdo-modal__dialog--enter-end {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.ces-kdo-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: transparent;
	border: none;
	font-size: 1.75rem;
	line-height: 1;
	color: #8b97a1;
	cursor: pointer;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.ces-kdo-modal__close:hover,
.ces-kdo-modal__close:focus-visible {
	background: #f0f3f5;
	color: var(--ces-ink-1);
	outline: none;
}

/* Hero — illustration animée */
.ces-kdo-modal__hero {
	text-align: center;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	margin-bottom: 1.25rem;
}

.ces-kdo-modal__hero-emoji {
	font-size: 3.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
	display: inline-block;
	animation: ces-kdo-bounce 2.5s ease-in-out infinite;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 6px 12px rgba(244, 119, 33, 0.25));
}

@keyframes ces-kdo-bounce {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-8px) rotate(3deg); }
}

.ces-kdo-modal__title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
	color: var(--ces-ink-1);
	line-height: 1.25;
}

.ces-kdo-modal__subtitle {
	font-size: 0.9375rem;
	color: var(--ces-ink-2);
	margin: 0;
	line-height: 1.5;
}

.ces-kdo-modal__section {
	margin-bottom: 1.25rem;
}

.ces-kdo-modal__section-title {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--ces-ink-2);
	margin: 0 0 0.75rem;
}

.ces-kdo-modal__rules {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.ces-kdo-modal__rule {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #f7f9fa;
	border-radius: 12px;
	padding: 0.75rem 0.875rem;
	transition: background 0.2s ease;
}

.ces-kdo-modal__rule--boosted {
	background: linear-gradient(135deg, #fff7ec 0%, #ffe9cf 100%);
	box-shadow: inset 0 0 0 1px rgba(244, 119, 33, 0.25);
}

.ces-kdo-modal__rule-icon {
	font-size: 1.125rem;
	line-height: 1.25;
	flex-shrink: 0;
}

.ces-kdo-modal__rule-body {
	flex: 1;
	min-width: 0;
}

.ces-kdo-modal__rule-label {
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
	margin-bottom: 0.25rem;
	line-height: 1.35;
}

.ces-kdo-modal__rule-value {
	font-size: 0.875rem;
	color: var(--ces-ink-2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
}

.ces-kdo-modal__rule-value strong {
	color: var(--ces-blue-fnd);
	font-size: 1rem;
}

.ces-kdo-modal__rule-bonus {
	background: rgba(244, 119, 33, 0.1);
	color: var(--ces-blue-night);
	padding: 0.0625rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.ces-kdo-modal__rule-was {
	color: var(--ces-ink-3, #8b97a1);
	font-size: 0.8125rem;
	font-style: italic;
}

/* Bandeau boost actif — coloré, animé */
.ces-kdo-modal__boost {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	background: linear-gradient(135deg, var(--ces-blue-fnd) 0%, var(--ces-blue-night) 100%);
	color: #fff;
	border-radius: 14px;
	padding: 1rem 1.125rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 8px 24px rgba(244, 119, 33, 0.3);
	position: relative;
	overflow: hidden;
	animation: ces-kdo-boost-pulse 3s ease-in-out infinite;
}

@keyframes ces-kdo-boost-pulse {
	0%, 100% { box-shadow: 0 8px 24px rgba(244, 119, 33, 0.3); }
	50%      { box-shadow: 0 8px 32px rgba(244, 119, 33, 0.5); }
}

.ces-kdo-modal__boost-icon {
	font-size: 1.875rem;
	line-height: 1;
	flex-shrink: 0;
	animation: ces-kdo-bounce 2.5s ease-in-out infinite;
}

.ces-kdo-modal__boost-body {
	flex: 1;
}

.ces-kdo-modal__boost-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.125rem;
}

.ces-kdo-modal__boost-deadline {
	font-size: 0.8125rem;
	opacity: 0.95;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.ces-kdo-modal__boost-note {
	font-size: 0.875rem;
	margin: 0;
	opacity: 0.95;
	line-height: 1.4;
}

.ces-kdo-modal__bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.ces-kdo-modal__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.9375rem;
	color: var(--ces-ink-2);
	line-height: 1.4;
}

.ces-kdo-modal__bullet-icon {
	font-size: 1.125rem;
	flex-shrink: 0;
	line-height: 1.25;
}

.ces-kdo-modal__footer {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.ces-kdo-modal__btn-primary {
	background: var(--ces-blue-fnd);
	color: #fff;
	border: none;
	padding: 0.75rem 2rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 4px 12px rgba(244, 119, 33, 0.25);
}

.ces-kdo-modal__btn-primary:hover,
.ces-kdo-modal__btn-primary:focus-visible {
	background: var(--ces-blue-night);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(244, 119, 33, 0.4);
	outline: none;
}

@media (max-width: 480px) {
	.ces-kdo-modal__dialog {
		padding: 1.5rem 1.125rem 1.25rem;
		border-radius: 16px;
	}
	.ces-kdo-modal__title { font-size: 1.25rem; }
	.ces-kdo-modal__hero-emoji { font-size: 3rem; }
}

/* -------------------------------------------------------------------- */
/* v0.22.6 — Tooltips custom [data-ces-tip]                             */
/* -------------------------------------------------------------------- */

/* v0.23.2 : `:where()` ramène la spécificité à 0 pour que les éléments
 * tooltipés qui ont déjà leur propre `position` (ex. .ces-card__crown en
 * absolute) ne soient pas écrasés. Le pseudo-element ::before/::after se
 * positionne relativement au containing block existant (relative, absolute
 * ou fixed — tous OK). */
:where([data-ces-tip]) {
	position: relative;
}

[data-ces-tip]::before,
[data-ces-tip]::after {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease 0.4s, transform 0.18s ease 0.4s;
	position: absolute;
	z-index: 9000;
}

[data-ces-tip]::before {
	content: attr(data-ces-tip);
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: rgba(15, 23, 30, 0.95);
	color: #fff;
	padding: 0.4375rem 0.6875rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
	max-width: 220px;
	width: max-content;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	font-family: inherit;
}

[data-ces-tip]::after {
	content: '';
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 5px solid transparent;
	border-top-color: rgba(15, 23, 30, 0.95);
	width: 0;
	height: 0;
}

[data-ces-tip]:hover::before,
[data-ces-tip]:hover::after,
[data-ces-tip]:focus-visible::before,
[data-ces-tip]:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Désactivé sur mobile (pas de hover natif, fallback sur title=) */
@media (hover: none) {
	[data-ces-tip]::before,
	[data-ces-tip]::after {
		display: none;
	}
}

/* Variante position bottom (pour les éléments en haut de page) */
[data-ces-tip-pos="bottom"]::before {
	bottom: auto;
	top: calc(100% + 0.5rem);
}

[data-ces-tip-pos="bottom"]::after {
	bottom: auto;
	top: 100%;
	border-top-color: transparent;
	border-bottom-color: rgba(15, 23, 30, 0.95);
}

/* -------------------------------------------------------------------- */
/* v0.23.0 — Bouton signaler + modale de signalement                    */
/* -------------------------------------------------------------------- */

.ces-card__report {
	color: #8b97a1;
	margin-left: auto; /* pousse à droite si flex */
	opacity: 0.6;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.ces-card__report:hover,
.ces-card__report:focus-visible {
	opacity: 1;
	color: #b32d2e;
	outline: none;
}

.ces-card__report-done {
	color: #b32d2e;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-left: auto;
	padding: 0.25rem 0.5rem;
}

.ces-report-modal {
	position: fixed;
	inset: 0;
	z-index: 10010; /* au-dessus de la cloche notifs (9999) et chat bubble */
}

.ces-report-modal[x-cloak] { display: none; }

.ces-report-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 30, 0.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.ces-report-modal__dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 16px;
	padding: 1.75rem 1.5rem 1.25rem;
	width: min(480px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ces-report-modal__dialog--enter {
	transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ces-report-modal__dialog--enter-start {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.94);
}

.ces-report-modal__dialog--enter-end {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.ces-report-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: #8b97a1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ces-report-modal__close:hover {
	background: #f0f3f5;
	color: var(--ces-ink-1);
}

.ces-report-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: var(--ces-ink-1);
}

.ces-report-modal__lead {
	font-size: 0.875rem;
	color: var(--ces-ink-2);
	margin: 0 0 1.25rem;
}

.ces-report-modal__reasons {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 0.75rem 0.875rem;
	margin: 0 0 1rem;
}

.ces-report-modal__reasons legend {
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0 0.375rem;
	color: var(--ces-ink-2);
}

.ces-report-modal__reasons label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0;
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
}

.ces-report-modal__label {
	display: block;
	margin-bottom: 1rem;
}

.ces-report-modal__label span {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ces-ink-2);
	margin-bottom: 0.375rem;
}

.ces-report-modal__label textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	font-family: inherit;
	font-size: 0.875rem;
	resize: vertical;
}

.ces-report-modal__error {
	color: #b32d2e;
	font-size: 0.875rem;
	margin: 0 0 0.75rem;
}

.ces-report-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.ces-report-modal__btn-primary,
.ces-report-modal__btn-secondary {
	border: none;
	padding: 0.5rem 1.125rem;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.ces-report-modal__btn-primary {
	background: #b32d2e;
	color: #fff;
}

.ces-report-modal__btn-primary:hover { background: #8c2121; }
.ces-report-modal__btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.ces-report-modal__btn-secondary {
	background: transparent;
	color: var(--ces-ink-2);
}

.ces-report-modal__btn-secondary:hover {
	background: #f0f3f5;
	color: var(--ces-ink-1);
}

/* -------------------------------------------------------------------- */
/* v0.23.0 — Page /reactiver-acces/                                     */
/* -------------------------------------------------------------------- */

.ces-reactivate {
	min-height: 70vh;
	padding: 3rem 1rem;
}

.ces-reactivate__container {
	max-width: 720px;
	margin: 0 auto;
}

.ces-reactivate__back {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: var(--ces-ink-2);
	text-decoration: none;
	font-size: 0.875rem;
}

.ces-reactivate__back:hover { color: var(--ces-blue-fnd); }

.ces-reactivate__card {
	background: #fff;
	border-radius: 20px;
	padding: 2.5rem 2rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.ces-reactivate__title {
	font-size: 1.875rem;
	margin: 0 0 1rem;
	color: var(--ces-ink-1);
}

.ces-reactivate__lead {
	font-size: 1.0625rem;
	color: var(--ces-ink-2);
	line-height: 1.55;
	margin: 0 0 2rem;
}

.ces-reactivate__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 0 0 1.5rem;
}

@media (max-width: 640px) {
	.ces-reactivate__options { grid-template-columns: 1fr; }
}

.ces-reactivate__option {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 1.25rem;
}

.ces-reactivate__option h3 {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	color: var(--ces-ink-1);
}

.ces-reactivate__option p {
	font-size: 0.9375rem;
	color: var(--ces-ink-2);
	line-height: 1.45;
	margin: 0 0 1rem;
}

.ces-reactivate__form textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.625rem 0.75rem;
	font-family: inherit;
	font-size: 0.9375rem;
	resize: vertical;
	margin-bottom: 0.75rem;
}

.ces-reactivate__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ces-ink-2);
	margin-bottom: 0.375rem;
}

.ces-reactivate__cta,
.ces-reactivate__cta-secondary {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
}

.ces-reactivate__cta {
	background: var(--ces-blue-fnd);
	color: #fff !important;
}

.ces-reactivate__cta:hover { background: var(--ces-blue-night); }

.ces-reactivate__cta-secondary {
	background: #f0f3f5;
	color: var(--ces-ink-1) !important;
}

.ces-reactivate__cta-secondary:hover { background: #e2e7ea; }

.ces-reactivate__note,
.ces-reactivate__detail,
.ces-reactivate__already-sent {
	font-size: 0.875rem;
	color: var(--ces-ink-2);
	line-height: 1.5;
	margin: 1rem 0 0;
}

.ces-reactivate__already-sent {
	background: #fff7ec;
	border: 1px solid rgba(244, 119, 33, 0.25);
	padding: 0.625rem 0.875rem;
	border-radius: 8px;
}

/* -------------------------------------------------------------------- */
/* v0.23.6 — Icône agrandissement dans la bulle chat                    */
/* -------------------------------------------------------------------- */

.ces-chat-bubble__expand-btn {
	background: transparent;
	border: 0;
	color: #fff !important;
	cursor: pointer;
	padding: 4px;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	margin-left: auto; /* pousse close à droite, expand juste avant */
	opacity: 0.85;
	transition: opacity 0.15s ease, background 0.15s ease;
	text-decoration: none !important;
}

.ces-chat-bubble__expand-btn:hover,
.ces-chat-bubble__expand-btn:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

/* Reset le margin-left auto sur close vu qu'expand-btn le prend désormais */
.ces-chat-bubble__close { margin-left: 0; }

/* -------------------------------------------------------------------- */
/* v0.23.6 — Skeleton loaders (chargement silencieux)                   */
/* -------------------------------------------------------------------- */

.ces-skeleton {
	display: block;
	background: linear-gradient(90deg,
		rgba(0, 0, 0, 0.06) 0%,
		rgba(0, 0, 0, 0.10) 50%,
		rgba(0, 0, 0, 0.06) 100%);
	background-size: 200% 100%;
	animation: ces-skeleton-shimmer 1.4s linear infinite;
	border-radius: 6px;
}

@keyframes ces-skeleton-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.ces-skeleton--avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ces-skeleton--avatar-sm {
	width: 32px;
	height: 32px;
}

.ces-skeleton--line {
	height: 12px;
	margin-bottom: 6px;
}

.ces-skeleton--line-name {
	width: 55%;
}

.ces-skeleton--line-preview {
	width: 80%;
	height: 10px;
	opacity: 0.6;
}

.ces-skeleton--bubble {
	height: 36px;
	width: 60%;
	border-radius: 14px;
	max-width: 240px;
}

.ces-skeleton--bubble-sm {
	width: 35%;
	height: 28px;
}

.ces-skeleton--bubble-mine {
	margin-left: auto;
	width: 45%;
}

/* Skeleton items partagent le layout des vrais items pour éviter le saut.
 * Les classes `--skeleton` désactivent juste l'interactivité (hover, etc.). */
.ces-messages__inbox-item--skeleton,
.ces-chat-bubble__item--skeleton {
	cursor: default;
	pointer-events: none;
}

.ces-messages__thread-list--skeleton,
.ces-chat-bubble__thread-skeleton {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}

.ces-message--skeleton {
	pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* v0.24.0 — Pièces jointes chat (image, PDF, audio)                    */
/* -------------------------------------------------------------------- */

/* Bouton 📎 dans le composer */
.ces-messages__attach-btn,
.ces-chat-bubble__attach-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-size: 1.25rem;
	padding: 0 12px;
	height: 100%;
	transition: background 0.15s ease;
	user-select: none;
}

.ces-messages__attach-btn:hover,
.ces-chat-bubble__attach-btn:hover {
	background: rgba(0, 0, 0, 0.04);
}

.ces-messages__attach-btn.is-busy,
.ces-chat-bubble__attach-btn.is-busy {
	cursor: wait;
	opacity: 0.6;
}

/* Preview pièce jointe avant envoi */
.ces-messages__attach-preview {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f7f9fa;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
}

.ces-messages__attach-preview-img {
	max-width: 80px;
	max-height: 80px;
	border-radius: 6px;
	object-fit: cover;
}

.ces-messages__attach-preview-pdf {
	color: var(--ces-ink-2);
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ces-messages__attach-clear,
.ces-chat-bubble__attach-clear {
	position: absolute;
	top: 4px;
	right: 8px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ces-messages__attach-clear:hover,
.ces-chat-bubble__attach-clear:hover {
	background: #b32d2e;
}

/* Bulle compacte */
.ces-chat-bubble__attach-preview {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: #f7f9fa;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
	font-size: 0.8125rem;
}

.ces-chat-bubble__attach-preview-img {
	max-width: 60px;
	max-height: 60px;
	border-radius: 4px;
}

.ces-chat-bubble__upload-error {
	color: #b32d2e;
	font-size: 0.8125rem;
	padding: 4px 12px;
	margin: 0;
}

/* Rendu pièce jointe dans le thread */
.ces-message__attach {
	display: block;
	margin-bottom: 6px;
	text-decoration: none;
}

.ces-message__attach--image img {
	max-width: 320px;
	max-height: 280px;
	border-radius: 10px;
	display: block;
}

.ces-message__attach--pdf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.6);
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--ces-ink-1) !important;
	font-size: 0.875rem;
}

.ces-message--mine .ces-message__attach--pdf {
	background: rgba(255, 255, 255, 0.25);
	color: #fff !important;
}

.ces-message__attach-icon {
	font-size: 1.125rem;
}

.ces-message__attach--audio {
	width: 100%;
	max-width: 280px;
	display: block;
	margin-bottom: 4px;
}

/* Idem dans la bulle (plus compact) */
.ces-chat-bubble__msg-attach {
	display: block;
	margin-bottom: 4px;
	text-decoration: none;
}

.ces-chat-bubble__msg-attach--image img {
	max-width: 200px;
	max-height: 180px;
	border-radius: 8px;
	display: block;
}

.ces-chat-bubble__msg-attach--pdf {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	color: inherit !important;
}

.ces-chat-bubble__msg-attach--audio {
	width: 100%;
	max-width: 200px;
	display: block;
}

/* -------------------------------------------------------------------- */
/* v0.24.0 — Bouton "Mieux te connaître" + modale Profile Questions     */
/* -------------------------------------------------------------------- */

.ces-profile__self-actions {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.ces-profile__questions-btn {
	background: transparent;
	color: var(--ces-blue-night);
	border: 1px solid var(--ces-blue-fnd);
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.ces-profile__questions-btn:hover,
.ces-profile__questions-btn:focus-visible {
	background: var(--ces-blue-fnd);
	color: #fff;
	outline: none;
}

.ces-pq-modal[x-cloak] { display: none; }

.ces-pq-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 30, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9998;
}

.ces-pq-modal__dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(620px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
	z-index: 9999;
	padding: 2rem 1.75rem 1.5rem;
}

.ces-pq-modal__dialog--enter {
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ces-pq-modal__dialog--enter-start {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.92);
}
.ces-pq-modal__dialog--enter-end {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.ces-pq-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: transparent;
	border: none;
	font-size: 1.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: #8b97a1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ces-pq-modal__close:hover { background: #f0f3f5; color: var(--ces-ink-1); }

.ces-pq-modal__hero {
	text-align: center;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	margin-bottom: 1.25rem;
}

.ces-pq-modal__hero-emoji {
	font-size: 2.75rem;
	line-height: 1;
	margin-bottom: 0.5rem;
	animation: ces-kdo-bounce 2.5s ease-in-out infinite;
	display: inline-block;
}

.ces-pq-modal__title {
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
	color: var(--ces-ink-1);
}

.ces-pq-modal__subtitle {
	font-size: 0.875rem;
	color: var(--ces-ink-2);
	margin: 0;
	line-height: 1.5;
}

.ces-pq-field {
	margin-bottom: 1.25rem;
}

.ces-pq-field__label {
	display: block;
	font-weight: 600;
	color: var(--ces-ink-1);
	font-size: 0.9375rem;
	margin-bottom: 0.25rem;
}

.ces-pq-field__help {
	display: block;
	color: var(--ces-ink-2);
	font-size: 0.8125rem;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.ces-pq-field__input {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	font-family: inherit;
	font-size: 0.9375rem;
}

.ces-pq-field__input:focus-visible {
	outline: 2px solid var(--ces-blue-fnd);
	outline-offset: 1px;
}

.ces-pq-modal__error {
	color: #b32d2e;
	font-size: 0.875rem;
	margin: 0 0 0.75rem;
}

.ces-pq-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.ces-pq-modal__btn-primary,
.ces-pq-modal__btn-secondary {
	border: none;
	padding: 0.625rem 1.25rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.ces-pq-modal__btn-primary {
	background: var(--ces-blue-fnd);
	color: #fff;
}

.ces-pq-modal__btn-primary:hover { background: var(--ces-blue-night); }
.ces-pq-modal__btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.ces-pq-modal__btn-secondary {
	background: transparent;
	color: var(--ces-ink-2);
}

.ces-pq-modal__btn-secondary:hover { background: #f0f3f5; color: var(--ces-ink-1); }

/* Liste Questions FND dans l'encart admin */
.ces-profile__admin-info-list--pq li {
	margin-bottom: 0.625rem;
	line-height: 1.35;
}

.ces-profile__admin-info-list--pq li strong {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--ces-ink-2);
}

.ces-profile__admin-info-list--pq li span {
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
}

/* -------------------------------------------------------------------- */
/* v0.25.0 — Page Coaching 1-to-1 Christine                             */
/* -------------------------------------------------------------------- */

.ces-coaching {
	max-width: 760px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.ces-coaching__header {
	text-align: center;
	margin-bottom: 2rem;
}

.ces-coaching__title {
	font-size: 2rem;
	margin: 0 0 0.5rem;
}

.ces-coaching__subtitle {
	color: var(--ces-ink-2);
	font-size: 1rem;
	margin: 0;
}

.ces-coaching__intro {
	background: #fff;
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	margin-bottom: 1.5rem;
}

.ces-coaching__intro h2 {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	color: var(--ces-ink-1);
}

.ces-coaching__intro p {
	color: var(--ces-ink-2);
	line-height: 1.55;
	margin: 0 0 1rem;
}

.ces-coaching__not-this {
	background: #f7f9fa;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
	list-style: none;
}

.ces-coaching__not-this li {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
}

.ces-coaching__paused {
	background: #fff7ec;
	border: 1px solid rgba(244, 119, 33, 0.3);
	border-radius: 12px;
	padding: 1.25rem;
	text-align: center;
	color: var(--ces-blue-night);
	font-size: 1rem;
}

/* RDV confirmé */
.ces-coaching__upcoming-card {
	background: linear-gradient(135deg, #e9f5ec 0%, #d8eedd 100%);
	border-radius: 16px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 6px 20px rgba(46, 138, 74, 0.15);
}

.ces-coaching__upcoming-when {
	text-align: center;
	margin-bottom: 1.25rem;
}

.ces-coaching__upcoming-date {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ces-ink-1);
	text-transform: capitalize;
}

.ces-coaching__upcoming-time {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ces-blue-fnd);
	font-family: 'Alice', Georgia, serif;
	margin-top: 0.25rem;
}

.ces-coaching__upcoming-tz {
	display: inline-block;
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	font-weight: normal;
	margin-left: 0.5rem;
}

.ces-coaching__zoom-link {
	display: block;
	background: var(--ces-blue-fnd);
	color: #fff !important;
	text-align: center;
	padding: 0.875rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
	font-size: 1rem;
	margin-bottom: 1rem;
	transition: background 0.15s ease;
}

.ces-coaching__zoom-link:hover { background: var(--ces-blue-night); }

.ces-coaching__upcoming-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.ces-coaching__btn-secondary,
.ces-coaching__btn-cancel,
.ces-coaching__btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.875rem;
	cursor: pointer;
	color: var(--ces-ink-1);
	text-decoration: none !important;
	font-weight: 500;
	transition: all 0.15s ease;
}

.ces-coaching__btn-secondary:hover { background: #f0f3f5; }

.ces-coaching__btn-cancel {
	color: #b32d2e;
	border-color: rgba(179, 45, 46, 0.3);
}

.ces-coaching__btn-cancel:hover {
	background: #fdedee;
}

.ces-coaching__upcoming-warning {
	text-align: center;
	color: var(--ces-ink-3);
	font-size: 0.8125rem;
	margin: 0;
}

/* Attente quota */
.ces-coaching__waiting {
	background: #fff7ec;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	margin-bottom: 1.5rem;
}

.ces-coaching__waiting-body {
	font-size: 1rem;
	color: var(--ces-ink-1);
	margin: 0 0 0.5rem;
}

/* Sélection créneau */
.ces-coaching__booking h2 {
	font-size: 1.5rem;
	color: var(--ces-ink-1);
	margin: 0 0 1rem;
}

.ces-coaching__slots-loading,
.ces-coaching__slots-empty {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	color: var(--ces-ink-2);
}

.ces-coaching__day {
	background: #fff;
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ces-coaching__day-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ces-ink-2);
	margin: 0 0 0.625rem;
	text-transform: capitalize;
}

.ces-coaching__day-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ces-coaching__slot-btn {
	background: #f0f3f5;
	border: 1px solid transparent;
	padding: 0.5rem 0.875rem;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
	transition: all 0.15s ease;
}

.ces-coaching__slot-btn:hover {
	background: #e2e7ea;
}

.ces-coaching__slot-btn.is-selected {
	background: var(--ces-blue-fnd);
	color: #fff;
	border-color: var(--ces-blue-night);
}

.ces-coaching__confirm {
	background: #fff;
	border: 2px solid var(--ces-blue-fnd);
	border-radius: 16px;
	padding: 1.5rem;
	margin-top: 1rem;
}

.ces-coaching__confirm h3 {
	margin: 0 0 0.5rem;
	color: var(--ces-blue-night);
}

.ces-coaching__confirm-when {
	font-size: 1.125rem;
	color: var(--ces-ink-1);
	margin: 0 0 1rem;
}

.ces-coaching__prep-label {
	display: block;
	margin: 0 0 1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
}

.ces-coaching__prep-label small {
	display: block;
	font-weight: normal;
	color: var(--ces-ink-2);
	font-size: 0.8125rem;
	margin: 0.25rem 0 0.375rem;
}

.ces-coaching__prep-label textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	font-family: inherit;
	font-size: 0.9375rem;
}

.ces-coaching__error {
	color: #b32d2e;
	font-size: 0.875rem;
	margin: 0 0 0.75rem;
}

.ces-coaching__confirm-actions {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}

.ces-coaching__btn-primary {
	background: var(--ces-blue-fnd);
	color: #fff;
	border-color: var(--ces-blue-fnd);
	font-weight: 600;
}

.ces-coaching__btn-primary:hover { background: var(--ces-blue-night); }
.ces-coaching__btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Page sondage post-RDV */
.ces-coaching-feedback {
	min-height: 70vh;
	padding: 3rem 1rem;
}

.ces-coaching-feedback__container {
	max-width: 560px;
	margin: 0 auto;
}

.ces-coaching-feedback__card {
	background: #fff;
	border-radius: 20px;
	padding: 2.5rem 2rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.ces-coaching-feedback__card h1 {
	margin: 0 0 1rem;
	font-size: 1.75rem;
}

.ces-coaching-feedback__form {
	margin-top: 1.5rem;
}

.ces-coaching-feedback__rating {
	border: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.25rem;
}

.ces-coaching-feedback__rating legend {
	display: block;
	width: 100%;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.ces-coaching-feedback__rating input { display: none; }

.ces-coaching-feedback__rating label {
	cursor: pointer;
	font-size: 2rem;
	filter: grayscale(1);
	opacity: 0.4;
	transition: all 0.15s ease;
}

.ces-coaching-feedback__rating label:hover,
.ces-coaching-feedback__rating label:hover ~ label,
.ces-coaching-feedback__rating input:checked ~ label {
	filter: grayscale(0);
	opacity: 1;
}

.ces-coaching-feedback__feedback-label {
	display: block;
	font-weight: 600;
	margin-bottom: 1rem;
}

.ces-coaching-feedback__feedback-label textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	font-family: inherit;
	font-size: 0.9375rem;
	margin-top: 0.375rem;
	resize: vertical;
}

.ces-coaching-feedback__cta {
	background: var(--ces-blue-fnd);
	color: #fff;
	border: 0;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	display: inline-block;
}

.ces-coaching-feedback__cta:hover {
	background: var(--ces-blue-night);
	color: #fff !important;
}

/* -------------------------------------------------------------------- */
/* v0.25.2 — Card sidebar "Mon coaching 1-to-1 à venir"                 */
/* -------------------------------------------------------------------- */

.ces-sidebar__card--coaching {
	background: linear-gradient(135deg, #e9f5ec 0%, #d8eedd 100%);
	border: 1px solid rgba(46, 138, 74, 0.2);
}

.ces-sidebar__card--coaching .ces-sidebar__heading {
	color: #1e6034;
	margin-bottom: 8px;
}

.ces-sidebar__coaching-when {
	text-align: center;
	padding: 8px 0 12px;
}

.ces-sidebar__coaching-date {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ces-ink-1);
	text-transform: capitalize;
	margin-bottom: 2px;
}

.ces-sidebar__coaching-time {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ces-blue-fnd);
	font-family: 'Alice', Georgia, serif;
}

.ces-sidebar__coaching-time small {
	font-size: 0.6875rem;
	color: var(--ces-ink-3);
	font-weight: normal;
	font-family: inherit;
	margin-left: 4px;
}

.ces-sidebar__coaching-cta {
	display: block;
	background: var(--ces-blue-fnd);
	color: #fff !important;
	text-align: center;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
	font-size: 0.875rem;
	margin-bottom: 6px;
	transition: background 0.15s ease;
}

.ces-sidebar__coaching-cta:hover { background: var(--ces-blue-night); }

.ces-sidebar__coaching-manage {
	display: block;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--ces-ink-2) !important;
	text-decoration: none !important;
}

.ces-sidebar__coaching-manage:hover {
	text-decoration: underline !important;
	color: var(--ces-blue-fnd) !important;
}

/* -------------------------------------------------------------------- */
/* v0.25.2 — Notes admin sur profil membre (inline edit)                */
/* -------------------------------------------------------------------- */

.ces-profile__admin-notes {
	background: #fffdf6;
	border-left: 3px solid #d4a017;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 1em;
}

.ces-profile__admin-notes h3 {
	margin: 0 0 4px;
	font-size: 1rem;
	color: var(--ces-ink-1);
}

.ces-profile__admin-notes p {
	margin: 0 0 8px;
}

.ces-profile__admin-notes-textarea {
	width: 100%;
	min-height: 110px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 0.9375rem;
	resize: vertical;
	background: #fff;
}

.ces-profile__admin-notes-textarea:focus-visible {
	outline: 2px solid #d4a017;
	outline-offset: 1px;
	border-color: #d4a017;
}

.ces-profile__admin-notes-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.ces-profile__admin-notes-meta {
	font-size: 0.75rem;
	color: var(--ces-ink-3, #8b97a1);
	font-style: italic;
}

.ces-profile__admin-notes-error {
	color: #b32d2e;
	font-size: 0.875rem;
	margin: 4px 0 0;
}

/* v0.27.21 — Quitter le Club (self-only). Section danger zone repliée
 * par défaut (details/summary natif).
 *
 * v0.27.25 — Vit maintenant dans la sidebar du profil. Hérite du chrome
 * `.ces-sidebar__card` (fond surface, ombre, padding). On retire la
 * transparence rouge faible qui rendait l'encart "fade" : la signalétique
 * danger zone passe par la couleur du texte du summary + l'icône ⚠️. */
.ces-profile__quit.ces-sidebar__card {
	padding: 0;
	overflow: hidden;
}

.ces-profile__quit-details {
	border: 0;
	background: transparent;
}

.ces-profile__quit-summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	color: #b32d2e;
	list-style: none;
	user-select: none;
}
.ces-profile__quit-summary:hover {
	background: rgba(179, 45, 46, 0.06);
}
.ces-profile__quit-summary::-webkit-details-marker { display: none; }
.ces-profile__quit-summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 8px;
	transition: transform 0.15s ease;
}
.ces-profile__quit-details[open] .ces-profile__quit-summary::before {
	transform: rotate(90deg);
}

.ces-profile__quit-body {
	padding: 14px 18px 18px;
	border-top: 1px solid rgba(179, 45, 46, 0.18);
}

.ces-profile__quit-body p {
	margin: 12px 0;
	font-size: 0.9rem;
	color: var(--ces-ink-1, #1f2937);
}

.ces-profile__quit-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 0.9rem;
}
.ces-profile__quit-option input[type="checkbox"] {
	margin-top: 3px;
}

.ces-profile__quit-confirm-label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
}
.ces-profile__quit-confirm-label code {
	background: rgba(179, 45, 46, 0.1);
	color: #b32d2e;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 700;
}

.ces-profile__quit-confirm-input {
	width: 100%;
	max-width: 280px;
	padding: 8px 12px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: var(--ces-r-sm, 6px);
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 0.04em;
}
.ces-profile__quit-confirm-input:focus {
	outline: 2px solid #b32d2e;
	outline-offset: 1px;
}

.ces-profile__quit-actions {
	margin-top: 16px !important;
}

.ces-profile__quit-btn {
	background: #b32d2e;
	color: #fff;
	border: 0;
	padding: 10px 20px;
	border-radius: var(--ces-r-sm, 6px);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ces-profile__quit-btn:hover:not(:disabled) {
	background: #8b1f20;
}
.ces-profile__quit-btn:disabled {
	background: #cccccc;
	color: #777;
	cursor: not-allowed;
}

.ces-profile__quit-error {
	color: #b32d2e;
	font-size: 0.875rem;
	margin-top: 8px !important;
}

/* v0.27.15 — Aperçu cliquable des notes admin (rendu HTML avec linkify
 * URLs + emails). Affiché sous la textarea uniquement quand la note
 * contient au moins une URL ou un email. */
.ces-profile__admin-notes-preview {
	margin-top: 12px;
	padding: 10px 12px;
	background: rgba(43, 111, 163, 0.05);
	border: 1px dashed rgba(43, 111, 163, 0.3);
	border-radius: var(--ces-r-sm, 6px);
	font-size: 0.9rem;
	line-height: 1.5;
}

.ces-profile__admin-notes-preview-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ces-blue-deep, #2b6fa3);
	margin-bottom: 6px;
}

.ces-profile__admin-notes-preview-body {
	color: var(--ces-ink-1, #1f2937);
	word-break: break-word;
}

.ces-profile__admin-notes-preview-body a {
	color: var(--ces-blue-deep, #2b6fa3);
	text-decoration: underline;
}

.ces-profile__admin-notes-preview-body a:hover {
	text-decoration: none;
}

/* -------------------------------------------------------------------- */
/* v0.25.5 — Onboarding coaching (formulaire 1er RDV)                   */
/* -------------------------------------------------------------------- */

.ces-coaching__onboarding {
	background: #f7f9fa;
	border-left: 4px solid #2e8a4a;
	border-radius: 8px;
	padding: 1.25rem;
	margin: 1.25rem 0;
}

.ces-coaching__onboarding-intro {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ces-coaching__onboarding-intro h4 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--ces-ink-1);
}

.ces-coaching__onboarding-intro p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--ces-ink-2);
	line-height: 1.55;
}

.ces-coaching__ob-field {
	margin-bottom: 1.125rem;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background 0.25s ease;
}

.ces-coaching__ob-field.is-missing {
	background: #fdedee;
}

.ces-coaching__ob-label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.ces-coaching__ob-required {
	color: #b32d2e;
}

.ces-coaching__ob-textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
	font-family: inherit;
	font-size: 0.9375rem;
	resize: vertical;
	background: #fff;
}

.ces-coaching__ob-textarea:focus-visible {
	outline: 2px solid var(--ces-blue-fnd);
	outline-offset: 1px;
}

.ces-coaching__ob-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.ces-coaching__ob-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	padding: 0.375rem 0.875rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--ces-ink-1);
	transition: all 0.15s ease;
}

.ces-coaching__ob-radio:hover {
	border-color: var(--ces-blue-fnd);
}

.ces-coaching__ob-radio input[type="radio"] {
	margin: 0;
}

.ces-coaching__ob-radio input[type="radio"]:checked + span {
	color: var(--ces-blue-night);
	font-weight: 600;
}

.ces-coaching__ob-slider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ces-coaching__ob-slider input[type="range"] {
	flex: 1;
	accent-color: var(--ces-blue-fnd);
	cursor: pointer;
}

.ces-coaching__ob-slider-value {
	font-family: 'Alice', Georgia, serif;
	font-size: 1.25rem;
	color: var(--ces-blue-fnd);
	font-weight: 600;
	min-width: 4rem;
	text-align: center;
	background: #fff;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Section admin — affichage des réponses */
.ces-profile__admin-info-col--coaching-ob {
	background: #f0f7f2;
	border-left: 3px solid #2e8a4a;
	border-radius: 6px;
	padding: 12px 16px;
}

.ces-profile__admin-ob-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
}

.ces-profile__admin-ob-list dt {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--ces-ink-2);
	margin-bottom: 4px;
	line-height: 1.35;
}

.ces-profile__admin-ob-list dd {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--ces-ink-1);
	line-height: 1.5;
}

.ces-profile__admin-ob-text {
	white-space: pre-wrap;
	background: #fff;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	max-height: 200px;
	overflow-y: auto;
}