/*!
 * MelyPrompt AI — feuille de style
 *
 * Principe : l'extension N'INVENTE PAS d'identité graphique. Elle consomme
 * les variables du thème MelyWeb (--mw-*) et ne déclare que des valeurs de
 * repli, au cas où le thème changerait ou serait absent. Une modification de
 * la charte MelyWeb se propage donc ici toute seule.
 *
 * Écrit en mobile d'abord : les règles de base sont celles du téléphone, les
 * points de rupture n'ajoutent que ce que la largeur permet.
 */

/* ---------------------------- Jetons de repli --------------------------- */
.melyprompt {
	--mp-violet: var(--mw-violet, #6c4bff);
	--mp-violet-soft: var(--mw-violet-soft, #a78bfa);
	--mp-cyan: var(--mw-cyan, #22d3ee);
	--mp-cyan-soft: var(--mw-cyan-soft, #67e8f9);
	--mp-ink: var(--mw-ink, #f4f5fb);
	--mp-ink-2: var(--mw-ink-2, #c3c6d6);
	--mp-muted: var(--mw-muted, #9296ac);
	--mp-faint: var(--mw-faint, #8186a0);
	--mp-bg: var(--mw-bg, #07070c);
	--mp-bg-2: var(--mw-bg-2, #0b0b12);
	--mp-surface: var(--mw-surface, #101019);
	--mp-line: var(--mw-line, rgba(255, 255, 255, 0.09));
	--mp-line-soft: var(--mw-line-soft, rgba(255, 255, 255, 0.055));
	--mp-ok: var(--mw-ok, #34d399);
	--mp-warn: var(--mw-warn, #fbbf24);
	--mp-err: var(--mw-err, #fb7185);
	--mp-display: var(--mw-font-display, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
	--mp-text: var(--mw-font-text, Inter, ui-sans-serif, system-ui, sans-serif);
	--mp-mono: var(--mw-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	--mp-r: var(--mw-r, 16px);
	--mp-r-lg: var(--mw-r-lg, 22px);
	--mp-r-sm: var(--mw-r-sm, 10px);
	--mp-pill: var(--mw-r-pill, 999px);
	--mp-grad: var(--mw-grad, linear-gradient(120deg, #6c4bff 0%, #3b6bff 48%, #22d3ee 100%));
	--mp-ease: var(--mw-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	--mp-fast: var(--mw-fast, 160ms);
	--mp-mid: var(--mw-mid, 260ms);
	--mp-gutter: var(--mw-gutter, clamp(1.15rem, 4vw, 2.5rem));
	--mp-wrap: var(--mw-wrap, 1240px);
	--mp-header: var(--mw-header-h, 74px);
}

/* La barre d'action mobile du thème (« Demander un devis ») n'a rien à faire
   par-dessus l'espace personnel : elle masquerait le bouton Copier. */
.melyprompt .mw-dock {
	display: none !important;
}

.melyprompt [hidden] {
	display: none !important;
}

.mp-i {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -0.17em;
}

/* ============================= APPLICATION ============================== */

.mp-app {
	position: relative;
	padding-top: calc(var(--mp-header) + 1.25rem);
	padding-bottom: 4rem;
	min-height: 70vh;
	overflow-x: clip;
}

.mp-aura-1,
.mp-aura-2 {
	position: absolute;
	pointer-events: none;
}
.mp-aura-1 {
	width: 520px;
	height: 520px;
	top: -180px;
	left: -160px;
	opacity: 0.35;
}
.mp-aura-2 {
	width: 420px;
	height: 420px;
	top: 40vh;
	right: -200px;
	opacity: 0.22;
}

.mp-shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--mp-wrap);
	margin-inline: auto;
	padding-inline: var(--mp-gutter);
	display: grid;
	/* minmax(0, 1fr) et non « auto » : sans cela, les rangées défilantes
	   (navigation, puces de catégories) imposent leur largeur de contenu à
	   toute la colonne, et l'application déborde de l'écran. Le débordement
	   serait invisible — le thème masque overflow-x sur le corps de page —
	   mais le texte serait coupé à droite sur téléphone. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.mp-side,
.mp-main {
	min-width: 0;
}

/* ------------------------------ Navigation ------------------------------ */

.mp-side__head {
	display: none;
}

.mp-side__pied {
	order: 2;
}

.mp-nav {
	display: flex;
	gap: 0.45rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 0.35rem;
	margin-inline: calc(var(--mp-gutter) * -1);
	padding-inline: var(--mp-gutter);
	scroll-snap-type: x proximity;
}
.mp-nav::-webkit-scrollbar {
	display: none;
}

.mp-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: none;
	scroll-snap-align: start;
	padding: 0.7rem 1rem;
	min-height: 44px;
	border-radius: var(--mp-pill);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.03);
	color: var(--mp-ink-2);
	font-family: var(--mp-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease),
		background-color var(--mp-fast) var(--mp-ease);
}
.mp-nav__item:hover {
	color: var(--mp-ink);
	border-color: rgba(255, 255, 255, 0.16);
}
.mp-nav__item.is-on {
	color: #fff;
	border-color: rgba(108, 75, 255, 0.55);
	background: rgba(108, 75, 255, 0.18);
}
.mp-nav__item .mp-i {
	color: var(--mp-violet-soft);
}

.mp-etat {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.85rem;
	color: var(--mp-muted);
}

.mp-pastille {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mp-faint);
	flex: none;
}
.mp-pastille--ok {
	background: var(--mp-ok);
	box-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}
.mp-pastille--essai {
	background: var(--mp-warn);
	box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

/* -------------------------------- Vues ---------------------------------- */

.mp-vue {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}
.mp-vue[hidden] {
	display: none !important;
}

.mp-vue__head h1 {
	font-family: var(--mp-display);
	font-size: clamp(1.7rem, 6vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0 0 0.4rem;
	color: var(--mp-ink);
}

.mp-lead {
	margin: 0;
	color: var(--mp-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.mp-eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--mp-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mp-violet-soft);
}

.mp-h2 {
	font-family: var(--mp-display);
	font-size: 1.45rem;
	letter-spacing: -0.025em;
	margin: 0 0 0.6rem;
	color: var(--mp-ink);
}

.mp-h3 {
	font-family: var(--mp-display);
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	margin: 0 0 0.6rem;
	color: var(--mp-ink);
}

.mp-fine {
	font-size: 0.85rem;
	color: var(--mp-faint);
	line-height: 1.55;
}
.mp-fine--centre {
	text-align: center;
	max-width: 620px;
	margin-inline: auto;
}

.mp-note {
	font-size: 0.9rem;
	color: var(--mp-muted);
}

/* ------------------------------ Composition ----------------------------- */

.mp-compo {
	display: grid;
	gap: 1rem;
}

.mp-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	overflow-x: auto;
	scrollbar-width: none;
	margin-inline: calc(var(--mp-gutter) * -1);
	padding: 0.15rem var(--mp-gutter);
}
.mp-chips::-webkit-scrollbar {
	display: none;
}

.mp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	min-height: 40px;
	padding: 0.5rem 0.85rem;
	border-radius: var(--mp-pill);
	border: 1px solid var(--mp-line-soft);
	background: transparent;
	color: var(--mp-muted);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease),
		background-color var(--mp-fast) var(--mp-ease);
}
.mp-chip:hover {
	color: var(--mp-ink);
	border-color: rgba(255, 255, 255, 0.18);
}
.mp-chip.is-on {
	color: #fff;
	background: rgba(108, 75, 255, 0.2);
	border-color: rgba(108, 75, 255, 0.5);
}
.mp-chip .mp-i {
	width: 1em;
	height: 1em;
	opacity: 0.8;
}

.mp-champ {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	position: relative;
}

.mp-champ label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mp-ink-2);
}

.mp-champ textarea,
.mp-champ input[type="text"],
.mp-champ input[type="search"],
.mp-champ select {
	width: 100%;
	font-family: var(--mp-text);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mp-ink);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r);
	padding: 0.95rem 1.05rem;
	transition: border-color var(--mp-fast) var(--mp-ease), box-shadow var(--mp-fast) var(--mp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.mp-champ textarea {
	min-height: 150px;
	resize: vertical;
	/* 16 px au minimum : en dessous, Safari sur iPhone zoome à la saisie. */
	font-size: 1.0625rem;
}

.mp-champ textarea:focus,
.mp-champ input:focus,
.mp-champ select:focus,
.mp-recherche input:focus,
.mp-filtres select:focus {
	outline: none;
	border-color: rgba(108, 75, 255, 0.6);
	box-shadow: 0 0 0 3px rgba(108, 75, 255, 0.18);
}

.mp-champ textarea::placeholder,
.mp-champ input::placeholder {
	color: var(--mp-faint);
}

.mp-champ textarea:disabled,
.mp-champ input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.mp-champ__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mp-lien {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	padding: 0.4rem 0;
	min-height: 40px;
	color: var(--mp-violet-soft);
	font-family: var(--mp-display);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.mp-lien:hover {
	color: var(--mp-cyan-soft);
}

.mp-compteur {
	font-family: var(--mp-mono);
	font-size: 0.78rem;
	color: var(--mp-faint);
}
.mp-compteur.is-limite {
	color: var(--mp-err);
}

.mp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.mp-go {
	width: 100%;
}

/* -------------------------------- Expert -------------------------------- */

.mp-expert {
	display: grid;
	gap: 0.9rem;
	padding: 1.1rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.022);
}

.mp-expert__intro {
	margin: 0;
	font-size: 0.88rem;
	color: var(--mp-muted);
	line-height: 1.55;
}

.mp-grille2 {
	display: grid;
	gap: 0.9rem;
}

.mp-champ--petit input,
.mp-champ--petit select,
.mp-champ--petit textarea {
	padding: 0.75rem 0.9rem;
	font-size: 0.95rem;
}

.mp-champ select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239296ac' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.4rem;
}

/* ----------------------------- Mur d'abonnement -------------------------- */

.mp-mur {
	display: grid;
	gap: 0.9rem;
	padding: 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid rgba(108, 75, 255, 0.35);
	background: linear-gradient(135deg, rgba(108, 75, 255, 0.16), rgba(34, 211, 238, 0.07));
}

.mp-mur__ico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: rgba(108, 75, 255, 0.25);
	border: 1px solid rgba(167, 139, 250, 0.35);
	color: var(--mp-violet-soft);
}

.mp-mur__texte h2 {
	margin-bottom: 0.35rem;
}
.mp-mur__texte p {
	margin: 0;
	color: var(--mp-ink-2);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ---------------------------- Animation de travail ----------------------- */

.mp-travail {
	display: grid;
	gap: 1.25rem;
	justify-items: center;
	padding: 2.25rem 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: radial-gradient(120% 100% at 50% 0%, rgba(108, 75, 255, 0.12), transparent 60%),
		rgba(255, 255, 255, 0.022);
	text-align: center;
}

.mp-noyau {
	position: relative;
	width: 120px;
	height: 120px;
	display: grid;
	place-items: center;
}

.mp-noyau__coeur {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mp-grad);
	filter: blur(0.5px);
	box-shadow: 0 0 30px rgba(108, 75, 255, 0.75);
	animation: mp-pulse 2.4s var(--mp-ease) infinite;
}

.mp-noyau__anneau {
	position: absolute;
	inset: 18px;
	border-radius: 50%;
	border: 1px solid rgba(167, 139, 250, 0.45);
	border-top-color: rgba(34, 211, 238, 0.9);
	animation: mp-tourne 2.8s linear infinite;
}
.mp-noyau__anneau--2 {
	inset: 4px;
	border-color: rgba(108, 75, 255, 0.22);
	border-bottom-color: rgba(167, 139, 250, 0.8);
	animation-duration: 4.4s;
	animation-direction: reverse;
}

.mp-noyau__grain {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mp-cyan-soft);
	box-shadow: 0 0 10px var(--mp-cyan);
	animation: mp-orbite 3.6s linear infinite;
}
.mp-noyau__grain--2 {
	background: var(--mp-violet-soft);
	box-shadow: 0 0 10px var(--mp-violet);
	animation-duration: 5.2s;
	animation-delay: -1.4s;
}
.mp-noyau__grain--3 {
	animation-duration: 4.4s;
	animation-delay: -2.6s;
	opacity: 0.7;
}

@keyframes mp-pulse {
	0%, 100% { transform: scale(1); opacity: 0.95; }
	50% { transform: scale(1.18); opacity: 1; }
}
@keyframes mp-tourne {
	to { transform: rotate(360deg); }
}
@keyframes mp-orbite {
	from { transform: rotate(0deg) translateX(50px); }
	to { transform: rotate(360deg) translateX(50px); }
}

.mp-etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	text-align: left;
	width: 100%;
	max-width: 340px;
}

.mp-etape {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-size: 0.92rem;
	color: var(--mp-faint);
	transition: color var(--mp-mid) var(--mp-ease);
}

.mp-etape__puce {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid var(--mp-line);
	flex: none;
	transition: background-color var(--mp-mid) var(--mp-ease), border-color var(--mp-mid) var(--mp-ease),
		box-shadow var(--mp-mid) var(--mp-ease);
}

.mp-etape.is-on {
	color: var(--mp-ink);
}
.mp-etape.is-on .mp-etape__puce {
	background: var(--mp-cyan);
	border-color: var(--mp-cyan);
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}
.mp-etape.is-faite {
	color: var(--mp-muted);
}
.mp-etape.is-faite .mp-etape__puce {
	background: var(--mp-violet);
	border-color: var(--mp-violet);
}

.mp-travail__note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--mp-faint);
}

/* -------------------------------- Résultat ------------------------------- */

.mp-resultat {
	display: grid;
	gap: 1rem;
}

.mp-carte {
	padding: 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
}

.mp-sortie {
	position: relative;
	border-radius: var(--mp-r-lg);
	border: 1px solid rgba(108, 75, 255, 0.3);
	background: linear-gradient(180deg, rgba(108, 75, 255, 0.08), rgba(255, 255, 255, 0.02));
	overflow: hidden;
}

.mp-sortie__haut {
	display: grid;
	gap: 0.75rem;
	padding: 1.1rem 1.1rem 0.9rem;
	border-bottom: 1px solid var(--mp-line-soft);
}

.mp-sortie__titre {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--mp-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--mp-cyan-soft);
	margin: 0;
}

.mp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--mp-pill);
	border: 1px solid var(--mp-line);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--mp-ink-2);
}
.mp-badge--ok {
	border-color: rgba(52, 211, 153, 0.4);
	color: #a7f3d0;
	background: rgba(52, 211, 153, 0.1);
}
.mp-badge--info {
	border-color: rgba(251, 191, 36, 0.4);
	color: #fde68a;
	background: rgba(251, 191, 36, 0.1);
}

.mp-prompt {
	margin: 0;
	padding: 1.1rem;
	max-height: 60vh;
	overflow: auto;
	font-family: var(--mp-mono);
	font-size: 0.86rem;
	line-height: 1.65;
	color: var(--mp-ink-2);
	white-space: pre-wrap;
	word-break: break-word;
	-webkit-overflow-scrolling: touch;
}
.mp-prompt:focus-visible {
	outline: 2px solid var(--mp-violet);
	outline-offset: -2px;
}

.mp-edition {
	width: 100%;
	min-height: 320px;
	margin: 0;
	padding: 1.1rem;
	border: 0;
	background: rgba(0, 0, 0, 0.25);
	color: var(--mp-ink);
	font-family: var(--mp-mono);
	font-size: 0.86rem;
	line-height: 1.65;
	resize: vertical;
}
.mp-edition:focus {
	outline: 2px solid rgba(108, 75, 255, 0.6);
	outline-offset: -2px;
}

.mp-sortie__barre {
	display: grid;
	gap: 0.5rem;
	padding: 0.9rem 1.1rem 1.1rem;
	border-top: 1px solid var(--mp-line-soft);
	background: rgba(0, 0, 0, 0.18);
}

.mp-barre__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mp-btn2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.6rem 0.95rem;
	border-radius: var(--mp-pill);
	border: 1px solid var(--mp-line);
	background: rgba(255, 255, 255, 0.04);
	color: var(--mp-ink-2);
	font-family: var(--mp-display);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease),
		background-color var(--mp-fast) var(--mp-ease), transform var(--mp-fast) var(--mp-ease);
}
.mp-btn2:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
}
.mp-btn2:active {
	transform: translateY(1px);
}
.mp-btn2[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.mp-btn2--fort {
	color: #fff;
	border-color: rgba(108, 75, 255, 0.55);
	background: rgba(108, 75, 255, 0.22);
}
.mp-btn2--fort:hover {
	background: rgba(108, 75, 255, 0.32);
}
.mp-btn2--copie {
	flex: 1 1 100%;
}
.mp-btn2.is-fait {
	color: #a7f3d0;
	border-color: rgba(52, 211, 153, 0.5);
	background: rgba(52, 211, 153, 0.14);
}

.mp-danger:hover {
	color: #fecdd3;
	border-color: rgba(251, 113, 133, 0.5);
	background: rgba(251, 113, 133, 0.12);
}

/* Amélioration par conversation */
.mp-conv {
	display: grid;
	gap: 0.6rem;
	padding: 1.1rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.022);
}

.mp-conv__titre {
	margin: 0;
	font-family: var(--mp-display);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--mp-ink);
}

.mp-conv__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mp-sugg {
	padding: 0.45rem 0.8rem;
	min-height: 38px;
	border-radius: var(--mp-pill);
	border: 1px dashed var(--mp-line);
	background: transparent;
	color: var(--mp-muted);
	font-size: 0.82rem;
	cursor: pointer;
}
.mp-sugg:hover {
	color: var(--mp-ink);
	border-style: solid;
	border-color: rgba(167, 139, 250, 0.5);
}

.mp-conv__envoi {
	display: grid;
	gap: 0.5rem;
}

.mp-conv__envoi input {
	width: 100%;
	min-height: 48px;
	padding: 0.8rem 1rem;
	border-radius: var(--mp-r);
	border: 1px solid var(--mp-line);
	background: rgba(255, 255, 255, 0.04);
	color: var(--mp-ink);
	font-family: var(--mp-text);
	font-size: 1rem;
}
.mp-conv__envoi input:focus {
	outline: none;
	border-color: rgba(108, 75, 255, 0.6);
	box-shadow: 0 0 0 3px rgba(108, 75, 255, 0.18);
}

.mp-qualite {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mp-qualite li {
	position: relative;
	padding-left: 1.35rem;
	margin: 0;
	font-size: 0.85rem;
	color: var(--mp-muted);
	line-height: 1.5;
}
.mp-qualite li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mp-violet-soft);
	opacity: 0.8;
}

/* ------------------------------- Exemples -------------------------------- */

.mp-exemples {
	display: grid;
	gap: 0.85rem;
}

.mp-exemples__grille {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr;
}

.mp-exemple {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 52px;
	padding: 0.85rem 1rem;
	border-radius: var(--mp-r);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.025);
	color: var(--mp-ink-2);
	font-family: var(--mp-text);
	font-size: 0.93rem;
	text-align: left;
	cursor: pointer;
	transition: color var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease),
		transform var(--mp-fast) var(--mp-ease);
}
.mp-exemple:hover {
	color: #fff;
	border-color: rgba(108, 75, 255, 0.45);
	transform: translateY(-2px);
}
.mp-exemple__fleche {
	color: var(--mp-violet-soft);
	flex: none;
}

/* ------------------------------ Bibliothèque ----------------------------- */

.mp-filtres {
	display: grid;
	gap: 0.6rem;
}

.mp-recherche {
	position: relative;
	display: flex;
	align-items: center;
}
.mp-recherche .mp-i {
	position: absolute;
	left: 0.95rem;
	color: var(--mp-faint);
	pointer-events: none;
}
.mp-recherche input {
	width: 100%;
	min-height: 48px;
	padding: 0.8rem 1rem 0.8rem 2.7rem;
	border-radius: var(--mp-pill);
	border: 1px solid var(--mp-line);
	background: rgba(255, 255, 255, 0.04);
	color: var(--mp-ink);
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

.mp-filtres select {
	min-height: 48px;
	padding: 0.7rem 2.4rem 0.7rem 1rem;
	border-radius: var(--mp-pill);
	border: 1px solid var(--mp-line);
	background-color: rgba(255, 255, 255, 0.04);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239296ac' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	color: var(--mp-ink);
	font-family: var(--mp-text);
	font-size: 0.95rem;
	-webkit-appearance: none;
	appearance: none;
}

.mp-liste {
	display: grid;
	gap: 0.75rem;
}

.mp-item {
	display: grid;
	gap: 0.7rem;
	padding: 1rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.025);
	transition: border-color var(--mp-fast) var(--mp-ease), transform var(--mp-fast) var(--mp-ease);
}
.mp-item:hover {
	border-color: rgba(255, 255, 255, 0.15);
}

.mp-item__haut {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.mp-item__titre {
	margin: 0;
	font-family: var(--mp-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--mp-ink);
	line-height: 1.35;
}

.mp-fav {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--mp-line-soft);
	background: transparent;
	color: var(--mp-faint);
	cursor: pointer;
	transition: color var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease);
}
.mp-fav:hover {
	color: var(--mp-warn);
	border-color: rgba(251, 191, 36, 0.45);
}
.mp-fav.is-on {
	color: var(--mp-warn);
	border-color: rgba(251, 191, 36, 0.55);
	background: rgba(251, 191, 36, 0.12);
}
.mp-fav.is-on .mp-i {
	fill: currentColor;
}

.mp-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-size: 0.8rem;
	color: var(--mp-faint);
}

.mp-item__extrait {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mp-muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mp-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mp-vide {
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	text-align: center;
	padding: 3rem 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px dashed var(--mp-line);
	background: rgba(255, 255, 255, 0.015);
}
.mp-vide h3 {
	margin: 0;
	font-family: var(--mp-display);
	font-size: 1.1rem;
	color: var(--mp-ink);
}
.mp-vide p {
	margin: 0;
	max-width: 420px;
	color: var(--mp-muted);
	font-size: 0.93rem;
}

.mp-pagination {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/* ------------------------------ Catégories ------------------------------- */

.mp-cats {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.mp-cat {
	display: grid;
	gap: 0.3rem;
	padding: 1rem;
	border-radius: var(--mp-r);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.025);
	color: var(--mp-ink-2);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--mp-fast) var(--mp-ease), transform var(--mp-fast) var(--mp-ease);
}
.mp-cat:hover {
	border-color: rgba(108, 75, 255, 0.45);
	transform: translateY(-2px);
}
.mp-cat__nom {
	font-family: var(--mp-display);
	font-weight: 600;
	color: var(--mp-ink);
}
.mp-cat__n {
	font-size: 0.82rem;
	color: var(--mp-faint);
}

/* ------------------------------ Abonnement ------------------------------- */

.mp-faits {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}
.mp-faits li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--mp-line-soft);
	font-size: 0.93rem;
}
.mp-faits li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.mp-faits span {
	color: var(--mp-muted);
}
.mp-faits strong {
	color: var(--mp-ink);
	text-align: right;
}

.mp-carte--danger {
	border-color: rgba(251, 113, 133, 0.25);
}

.mp-offres {
	display: grid;
	gap: 1.25rem;
}

.mp-plans {
	display: grid;
	gap: 1rem;
}

.mp-plan {
	position: relative;
	display: grid;
	gap: 0.7rem;
	align-content: start;
	padding: 1.5rem 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
}
.mp-plan--phare {
	border-color: rgba(108, 75, 255, 0.5);
	background: linear-gradient(180deg, rgba(108, 75, 255, 0.14), rgba(34, 211, 238, 0.05));
}

/* Le ruban est posé À L'INTÉRIEUR du cadre : les cartes du thème MelyWeb
   sont en overflow:hidden, un ruban débordant vers le haut serait coupé. */
.mp-plan__ruban {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.35rem 0.85rem;
	border-radius: 0 0 0 var(--mp-r);
	background: var(--mp-grad);
	color: #fff;
	font-family: var(--mp-display);
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.mp-plan__nom {
	margin: 0;
	font-family: var(--mp-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mp-violet-soft);
}

.mp-plan__prix {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
}
.mp-plan__prix strong {
	font-family: var(--mp-display);
	font-size: clamp(2rem, 8vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--mp-ink);
}
.mp-plan__prix span {
	font-size: 0.92rem;
	color: var(--mp-muted);
}

.mp-plan__sous {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mp-muted);
	line-height: 1.55;
}

.mp-plan__liste {
	margin: 0.4rem 0 0.6rem;
}

.mp-carte--attente {
	text-align: center;
	display: grid;
	gap: 0.6rem;
	justify-items: center;
}

/* --------------------------------- Aide ---------------------------------- */

.mp-aide {
	display: grid;
	gap: 0.9rem;
}

/* -------------------------------- Flash ---------------------------------- */

.mp-flash {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.1rem;
	border-radius: var(--mp-r);
	border: 1px solid rgba(52, 211, 153, 0.35);
	background: rgba(52, 211, 153, 0.1);
	color: var(--mp-ink);
	font-size: 0.93rem;
}
.mp-flash .mp-i {
	color: var(--mp-ok);
	margin-top: 0.15em;
}
.mp-flash div {
	display: grid;
	gap: 0.15rem;
}
.mp-flash span {
	color: var(--mp-ink-2);
}

.mp-erreur {
	padding: 1rem 1.1rem;
	border-radius: var(--mp-r);
	border: 1px solid rgba(251, 113, 133, 0.4);
	background: rgba(251, 113, 133, 0.1);
	color: #fecdd3;
	font-size: 0.93rem;
	line-height: 1.55;
}

/* -------------------------------- Toast ---------------------------------- */

.mp-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1.25rem + env(safe-area-inset-bottom));
	transform: translate(-50%, 1.5rem);
	z-index: 990;
	max-width: min(92vw, 420px);
	padding: 0.85rem 1.2rem;
	border-radius: var(--mp-pill);
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(16, 16, 25, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
	color: var(--mp-ink);
	font-size: 0.9rem;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mp-mid) var(--mp-ease), transform var(--mp-mid) var(--mp-ease);
}
.mp-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
.mp-toast--err {
	border-color: rgba(251, 113, 133, 0.5);
}

/* =============================== VITRINE ================================= */

.mp-hero {
	padding-top: calc(var(--mp-header) + clamp(2.5rem, 9vw, 5rem));
	padding-bottom: clamp(3rem, 9vw, 6rem);
	text-align: center;
	position: relative;
}
.mp-hero__aura1 {
	position: absolute;
	width: 560px;
	height: 560px;
	top: -140px;
	left: 50%;
	margin-left: -280px;
	opacity: 0.45;
}
.mp-hero__aura2 {
	position: absolute;
	width: 420px;
	height: 420px;
	bottom: -160px;
	right: -140px;
	opacity: 0.3;
}
.mp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
	margin-inline: auto;
	display: grid;
	gap: 1.1rem;
	justify-items: center;
}
.mp-hero h1 {
	margin: 0;
}
.mp-hero__lead {
	margin: 0;
	max-width: 620px;
	font-size: clamp(1rem, 2.6vw, 1.2rem);
	color: var(--mp-muted);
	line-height: 1.6;
}
.mp-hero__note {
	margin: 0.5rem 0 0;
	font-family: var(--mp-display);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--mp-faint);
}

.mp-ba {
	display: grid;
	gap: 1rem;
	align-items: start;
}

.mp-ba__etiquette {
	margin: 0 0 0.5rem;
	font-family: var(--mp-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mp-faint);
}
.mp-ba__etiquette--apres {
	color: var(--mp-cyan-soft);
}

.mp-ba__boite {
	padding: 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.025);
}
.mp-ba__boite--code {
	position: relative;
	padding: 0;
	border-color: rgba(108, 75, 255, 0.35);
	background: linear-gradient(180deg, rgba(108, 75, 255, 0.1), rgba(255, 255, 255, 0.02));
	max-height: 420px;
	overflow: hidden;
}
.mp-ba__voile {
	position: absolute;
	inset: auto 0 0 0;
	height: 120px;
	background: linear-gradient(to top, var(--mp-bg-2), transparent);
	pointer-events: none;
}
.mp-ba__prompt {
	margin: 0;
	padding: 1.1rem;
	font-family: var(--mp-mono);
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--mp-ink-2);
	white-space: pre-wrap;
	word-break: break-word;
}
.mp-ba__demande {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	color: var(--mp-ink);
	line-height: 1.5;
}
.mp-ba__mesure {
	margin: 0.6rem 0 0;
	font-size: 0.83rem;
	color: var(--mp-faint);
}
.mp-ba__fleche {
	display: grid;
	place-items: center;
	color: var(--mp-violet-soft);
	transform: rotate(90deg);
}

.mp-pourquoi {
	display: grid;
	gap: 1rem;
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--mp-ink-2);
}
.mp-pourquoi p {
	margin: 0;
}

.mp-faq {
	display: grid;
	gap: 0.6rem;
}
.mp-faq__item {
	border-radius: var(--mp-r);
	border: 1px solid var(--mp-line-soft);
	background: rgba(255, 255, 255, 0.025);
	overflow: hidden;
}
.mp-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.1rem;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--mp-display);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--mp-ink);
}
.mp-faq__item summary::-webkit-details-marker {
	display: none;
}
.mp-faq__item summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--mp-violet-soft);
	border-bottom: 2px solid var(--mp-violet-soft);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--mp-fast) var(--mp-ease);
}
.mp-faq__item[open] summary::after {
	transform: rotate(-135deg) translateY(-2px);
}
.mp-faq__reponse {
	padding: 0 1.1rem 1.1rem;
	color: var(--mp-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}
.mp-faq__reponse p {
	margin: 0;
}

.mp-final {
	position: relative;
	text-align: center;
}
.mp-final__aura {
	position: absolute;
	width: 480px;
	height: 480px;
	top: -30%;
	left: 50%;
	margin-left: -240px;
	opacity: 0.35;
}
.mp-final__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1rem;
	justify-items: center;
	padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
	border-radius: var(--mp-r-lg);
	border: 1px solid rgba(108, 75, 255, 0.3);
	background: linear-gradient(160deg, rgba(108, 75, 255, 0.14), rgba(34, 211, 238, 0.06));
}
.mp-final__inner h2 {
	margin: 0;
}
.mp-final__inner p {
	margin: 0;
	color: var(--mp-ink-2);
}

.mp-etapes3 .mw-card {
	position: relative;
}

/* ============================ Points de rupture ========================== */

@media (min-width: 640px) {
	.mp-exemples__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mp-grille2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mp-go {
		width: auto;
	}

	.mp-btn2--copie {
		flex: none;
	}

	.mp-filtres {
		grid-template-columns: 1fr auto auto;
		align-items: center;
	}

	.mp-mur {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 1.1rem;
	}

	.mp-carte,
	.mp-item,
	.mp-expert,
	.mp-conv {
		padding: 1.4rem;
	}

	.mp-conv__envoi {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

@media (min-width: 900px) {
	.mp-shell {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
	}

	.mp-side {
		position: sticky;
		top: calc(var(--mp-header) + 1.5rem);
		display: grid;
		gap: 1.5rem;
		align-content: start;
		padding: 1.25rem;
		border-radius: var(--mp-r-lg);
		border: 1px solid var(--mp-line-soft);
		background: rgba(255, 255, 255, 0.022);
	}

	.mp-side__head {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.mp-mark {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 10px;
		background: var(--mp-grad);
		color: #fff;
		flex: none;
	}

	.mp-side__nom {
		font-family: var(--mp-display);
		font-size: 0.98rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		color: var(--mp-ink);
	}

	.mp-nav {
		display: grid;
		gap: 0.25rem;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.mp-nav__item {
		width: 100%;
		justify-content: flex-start;
		border-radius: var(--mp-r-sm);
		border-color: transparent;
		background: transparent;
	}
	.mp-nav__item:hover {
		background: rgba(255, 255, 255, 0.05);
	}
	.mp-nav__item.is-on {
		background: rgba(108, 75, 255, 0.16);
		border-color: rgba(108, 75, 255, 0.4);
	}

	.mp-chips {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.mp-exemples__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mp-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.mp-ba {
		grid-template-columns: 1fr auto 1fr;
		gap: 1.5rem;
	}
	.mp-ba__fleche {
		transform: none;
		align-self: center;
	}

	.mp-item {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1200px) {
	.mp-vue__head h1 {
		font-size: 2.6rem;
	}
}

/* --------------------------- Confort et sobriété ------------------------- */

@media (prefers-reduced-motion: reduce) {
	.melyprompt *,
	.melyprompt *::before,
	.melyprompt *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

.melyprompt :focus-visible {
	outline: 2px solid var(--mp-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

@media print {
	.mp-side,
	.mp-sortie__barre,
	.mp-conv,
	.mp-exemples,
	.mp-toast {
		display: none !important;
	}

	.mp-prompt {
		max-height: none;
		color: #000;
	}
}