/* Assistant Glassora — la bulle d'aide.
 *
 * Reprend les jetons du thème (base.css) plutôt que de recopier des couleurs :
 * un changement de charte s'applique ici sans qu'on y touche. Les `var(--x, y)`
 * portent un repli au cas où la feuille du thème ne serait pas chargée — la
 * bulle doit rester lisible, jamais transparente sur transparente.
 *
 * Repères posés :
 *  - z-index 130 : au-dessus de l'en-tête (60) et du tiroir de filtres (120),
 *    sous le lien d'évitement (200) qui doit rester atteignable au clavier ;
 *  - bascule à 720px, le même point que le reste du site ;
 *  - la bulle s'efface quand le tiroir de filtres boutique est ouvert : deux
 *    couches flottantes en même temps, c'est une de trop.
 */

.glcb {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 130;
	font-family: var(--body, 'Inter', sans-serif);
	line-height: 1.6;
}

body.gl-filters-open .glcb {
	opacity: 0;
	pointer-events: none;
}

/* ── La bulle ────────────────────────────────────────────────────────────── */

.glcb-bulle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	padding: 14px 20px 14px 17px;
	border: 0;
	border-radius: 999px;
	background: var(--navy, #111827);
	color: #fff;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(17, 24, 39, .26);
	transition: transform .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
		box-shadow .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
		background .35s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.glcb-bulle:hover,
.glcb-bulle:focus-visible {
	transform: translateY(-3px);
	background: var(--lux, #0B1220);
	box-shadow: 0 18px 42px rgba(17, 24, 39, .32);
}

.glcb-bulle svg {
	flex: none;
	color: var(--gold, #C8A96A);
}

/* Ouvert, la bulle devient une croix : un seul point de bascule à l'écran. */
.glcb.is-open .glcb-bulle-txt {
	display: none;
}

.glcb.is-open .glcb-bulle {
	padding: 15px;
}

/* ── Le panneau ──────────────────────────────────────────────────────────── */

.glcb-panneau {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	width: min(384px, calc(100vw - 32px));
	max-height: min(640px, calc(100vh - 120px));
	display: none;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--r-card, 20px);
	background: #fff;
	box-shadow: 0 26px 70px rgba(17, 24, 39, .22), 0 2px 8px rgba(17, 24, 39, .06);
}

.glcb.is-open .glcb-panneau {
	display: flex;
	animation: glcb-monte .38s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
}

@keyframes glcb-monte {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.glcb.is-open .glcb-panneau { animation: none; }
	.glcb-bulle { transition: none; }
	.glcb-bulle:hover, .glcb-bulle:focus-visible { transform: none; }
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

/* L'en-tête a été REDIMENSIONNÉ après mesure : il occupait 162 px d'un panneau
   de 591 (27 %), et il fallait descendre de 235 px avant la première question —
   plus d'un tiers de la surface avant le premier contenu utile, 5 lignes
   visibles sur 13. Le panneau fait 384 px de large : c'est un plan de travail,
   pas une page d'accueil. L'en-tête n'y a droit qu'à ce qu'il lui faut pour
   dire qui répond et sous quel délai. */
.glcb-entete {
	position: relative;
	flex: none;
	padding: 16px 18px 18px;
	background: var(--navy, #111827);
	color: #fff;
}

/* Le filet or : la signature de la maison, reprise du reste du site. */
.glcb-entete::after {
	content: '';
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
	height: 1px;
	background: var(--gold, #C8A96A);
	opacity: .5;
}

/* Il n'y a plus d'écran d'accueil « spécial ». La carte de recherche a
   longtemps mordu de 18 px sur le bord sombre — 41 % de sa hauteur posée sur
   l'en-tête. C'était voulu, c'était une erreur : signalé deux fois comme un
   chevauchement, et un effet qu'il faut expliquer n'en est pas un. La carte
   vit désormais entièrement dans le corps clair, sous le bandeau. */

.glcb-entete-haut {
	display: flex;
	align-items: center;
	gap: 12px;
}

.glcb-marque {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(200, 169, 106, .45);
	color: var(--gold, #C8A96A);
}

/* Le bloc nom + disponibilité. `min-width: 0` lève le plancher implicite des
   éléments flex (`min-width: auto`, égal à la largeur du contenu) : sans lui,
   sur un écran étroit, ce bloc refuse de rétrécir et pousse la croix de
   fermeture hors du panneau. Avec lui, le texte passe proprement à la ligne. */
.glcb-identite {
	flex: 1 1 auto;
	min-width: 0;
}

.glcb-titre {
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
}

.glcb-soustitre {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .68);
}

.glcb-soustitre::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #4ADE80;
	flex: none;
}

/* Boutons de l'en-tête : retour et fermeture. */
.glcb-icone-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	transition: background .3s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.glcb-icone-btn:hover,
.glcb-icone-btn:focus-visible {
	background: rgba(255, 255, 255, .18);
}

.glcb-fermer {
	margin-left: auto;
}

.glcb-entete-titre {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	/* La question sert de titre : elle peut être longue, on la laisse tenir sur
	   deux lignes plutôt que de la couper au milieu d'un mot. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Corps ───────────────────────────────────────────────────────────────── */

.glcb-corps {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	background: var(--off, #FAFAF8);
	color: var(--navy, #111827);
	font-size: 14px;
}

/* La carte de recherche : entierement dans le corps clair, jamais a cheval
   sur le bandeau sombre. */
.glcb-recherche {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 0 14px;
	border: 1px solid var(--lgray, #ECEBE7);
	border-radius: var(--r-field, 12px);
	background: #fff;
	box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, .06));
	color: var(--tgray, #5F6470);
}

.glcb-recherche:focus-within {
	border-color: var(--gold, #C8A96A);
}

.glcb-recherche input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--navy, #111827);
}

.glcb-recherche input:focus {
	outline: none;
}

/* Le champ est un `type="search"` pour le clavier des téléphones. Safari et
   Chrome y ajoutent leur propre croix d'effacement, qui doublerait la nôtre —
   deux croix côte à côte, dont une seule porte une étiquette accessible. */
.glcb-recherche input::-webkit-search-cancel-button,
.glcb-recherche input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.glcb-recherche input::placeholder {
	color: var(--tgray, #5F6470);
	opacity: .8;
}

.glcb-effacer {
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--lgray, #ECEBE7);
	color: var(--tgray, #5F6470);
	cursor: pointer;
}

.glcb-recherche.a-du-texte .glcb-effacer {
	display: inline-flex;
}

.glcb-etiquette {
	margin: 0 0 10px;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold-ink, #7A6224);
}

.glcb-etiquette + .glcb-etiquette,
.glcb-groupe + .glcb-groupe {
	margin-top: 22px;
}

/* ── Lignes cliquables ───────────────────────────────────────────────────── */

.glcb-ligne {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-bottom: 8px;
	padding: 13px 14px;
	border: 1px solid var(--lgray, #ECEBE7);
	border-radius: var(--r-field, 12px);
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	color: var(--navy, #111827);
	cursor: pointer;
	transition: border-color .3s var(--ease, cubic-bezier(.16, 1, .3, 1)),
		transform .3s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.glcb-ligne:hover,
.glcb-ligne:focus-visible {
	border-color: var(--gold, #C8A96A);
	transform: translateX(2px);
}

.glcb-ligne-txt {
	flex: 1 1 auto;
	min-width: 0;
}

.glcb-ligne-sous {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--tgray, #5F6470);
}

.glcb-chevron,
.glcb-ligne-icone {
	flex: none;
	color: var(--gold-ink, #7A6224);
}

.glcb-chevron {
	opacity: .55;
}

/* ── Verres ──────────────────────────────────────────────────────────────── */

.glcb-verre-img {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 8px;
	object-fit: contain;
	background: #fff;
}

.glcb-verre-prix {
	font-family: var(--head, 'Manrope', sans-serif);
	font-weight: 600;
	color: var(--navy, #111827);
}

/* ── Réponse ─────────────────────────────────────────────────────────────── */

.glcb-reponse {
	padding: 16px 16px 4px;
	border: 1px solid var(--lgray, #ECEBE7);
	border-radius: var(--r-field, 12px);
	background: #fff;
}

.glcb-reponse p {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--navy, #111827);
}

.glcb-reponse a {
	color: var(--gold-ink, #7A6224);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Retour d'utilité ────────────────────────────────────────────────────── */

.glcb-utile {
	margin-top: 18px;
	padding: 14px;
	border-radius: var(--r-field, 12px);
	background: rgba(200, 169, 106, .1);
	text-align: center;
}

.glcb-utile p {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--tgray, #5F6470);
}

.glcb-utile-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.glcb-utile-btn {
	min-width: 74px;
	padding: 8px 16px;
	border: 1px solid var(--lgray, #ECEBE7);
	border-radius: 999px;
	background: #fff;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--navy, #111827);
	cursor: pointer;
	transition: border-color .3s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.glcb-utile-btn:hover,
.glcb-utile-btn:focus-visible {
	border-color: var(--gold, #C8A96A);
}

/* ── Écran « parler à un humain » ────────────────────────────────────────── */

.glcb-humain-txt {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.66;
	color: var(--tgray, #5F6470);
}

.glcb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 20px;
	border: 1px solid transparent;
	border-radius: var(--r-btn, 14px);
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: transform .3s var(--ease, cubic-bezier(.16, 1, .3, 1)),
		box-shadow .3s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.glcb-btn:hover,
.glcb-btn:focus-visible {
	transform: translateY(-2px);
}

.glcb-btn--wa {
	background: #25D366;
	color: #05391A;
	box-shadow: 0 10px 26px rgba(37, 211, 102, .3);
}

.glcb-btn--fantome {
	margin-top: 10px;
	border-color: var(--lgray, #ECEBE7);
	background: #fff;
	color: var(--navy, #111827);
}

/* ── Pied ────────────────────────────────────────────────────────────────── */

.glcb-pied {
	flex: none;
	padding: 12px 18px 14px;
	border-top: 1px solid var(--lgray, #ECEBE7);
	background: #fff;
}

.glcb-pied button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 12px;
	border: 1px solid var(--navy, #111827);
	border-radius: var(--r-btn, 14px);
	background: var(--navy, #111827);
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background .3s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.glcb-pied button:hover,
.glcb-pied button:focus-visible {
	background: var(--lux, #0B1220);
}

.glcb-pied button svg {
	color: var(--gold, #C8A96A);
}

/* ── États vides et notes ────────────────────────────────────────────────── */

.glcb-vide {
	padding: 30px 16px;
	text-align: center;
	color: var(--tgray, #5F6470);
}

.glcb-vide svg {
	margin: 0 auto 12px;
	color: var(--lgray, #ECEBE7);
}

.glcb-vide strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 14px;
	color: var(--navy, #111827);
}

.glcb-vide p {
	font-size: 13px;
}

.glcb-note {
	padding: 24px 0;
	text-align: center;
	font-size: 13px;
	color: var(--tgray, #5F6470);
}

/* Le focus doit rester visible : le panneau est entièrement navigable au
   clavier, c'est souvent la seule façon d'y entrer depuis la page. */
.glcb :focus-visible {
	outline: 2px solid var(--gold, #C8A96A);
	outline-offset: 2px;
}

/* ── Mobile : plein écran ────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.glcb {
		right: 14px;
		bottom: 14px;
	}

	.glcb-bulle-txt {
		display: none;
	}

	.glcb-bulle {
		padding: 15px;
	}

	.glcb-panneau {
		position: fixed;
		inset: 0;
		width: 100%;
		max-height: none;
		border-radius: 0;
	}

	.glcb-entete {
		/* Encoche et barre d'état des téléphones. Le 16px reprend le
		   remplissage du bureau : la valeur était codée à part et n'avait pas
		   suivi la réduction de l'en-tête. */
		padding-top: calc(16px + env(safe-area-inset-top, 0px));
	}

	.glcb-pied {
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}

	/* Ouvert en plein écran, la bulle n'a plus de rôle : elle disparaît au
	   profit de la croix de l'en-tête, qui est là où l'œil la cherche. */
	.glcb.is-open .glcb-bulle {
		display: none;
	}
}