/* DECO MOVE — l'atelier de gravure (fiche sur-mesure). */
.ksp-grav {
	--g-encre: #16181B;
	--g-texte: #3F3B36;
	--g-doux: #6E6558;
	--g-creme: #F6F1E9;
	--g-ligne: #E2D8C6;
	--g-laiton: #B87A30;
	--g-laiton-clair: #E0A15F;
	--g-vert: #3F7D5B;
	--g-orange: #9E6626;
	--g-rouge: #B4413C;
	margin: 6px 0 22px;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--g-texte);
	font-size: 15px;
	line-height: 1.5;
}
.ksp-grav *, .ksp-grav *::before, .ksp-grav *::after { box-sizing: border-box; }
.ksp-grav__noscript { padding: 12px 14px; border-radius: 10px; background: #FBEDEC; color: var(--g-rouge); }

.ksp-grav__etape { margin: 0 0 18px; }
.ksp-grav__titre {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px !important;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--g-encre);
}
.ksp-grav__titre span {
	display: inline-grid; place-items: center; flex: none;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--g-encre); color: var(--g-creme);
	font-size: 12px; letter-spacing: 0;
}
.ksp-grav__titre em, .ksp-grav__champ em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--g-doux); font-weight: 400; }
.ksp-grav__sous { margin: 14px 0 8px !important; font-size: 13px; font-weight: 600; color: var(--g-encre); }

/* Texte ou image */
.ksp-grav__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ksp-grav__onglet {
	height: auto !important; line-height: 1.2 !important; white-space: normal !important;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 52px; padding: 10px 12px !important;
	border: 1.5px solid var(--g-ligne) !important; border-radius: 12px !important;
	background: #fff !important; color: var(--g-encre) !important;
	font: 600 14px/1.2 Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
	cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.ksp-grav__onglet svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ksp-grav__onglet:hover { border-color: var(--g-laiton-clair) !important; }
.ksp-grav__onglet.est-actif { border-color: var(--g-laiton) !important; background: #FBF5EC !important; box-shadow: 0 0 0 3px rgba(184,122,48,.14); }

/* L'aperçu */
.ksp-grav__scene { position: relative; margin: 0 0 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--g-ligne); background: var(--g-creme); }
.ksp-grav__scene { width: 100%; }
.ksp-grav__toile { display: block; width: 100% !important; max-width: 100% !important; touch-action: pan-y; }
.ksp-grav__toile.est-deplacable { cursor: grab; touch-action: none; }
.ksp-grav__toile.est-deplacable:active { cursor: grabbing; }
.ksp-grav__astuce {
	position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
	margin: 0 !important; padding: 4px 10px; border-radius: 999px;
	background: rgba(22,24,27,.72); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none;
}
.ksp-grav__verdict {
	margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--g-ligne); background: #fff; font-size: 13.5px;
}
.ksp-grav__verdict strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ksp-grav__verdict strong i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ksp-grav__verdict ul { margin: 6px 0 0 !important; padding-left: 18px !important; }
.ksp-grav__verdict li { margin: 2px 0; color: var(--g-texte); }
.ksp-grav__verdict.est-parfait strong, .ksp-grav__verdict.est-bon strong { color: var(--g-vert); }
.ksp-grav__verdict.est-parfait i, .ksp-grav__verdict.est-bon i { background: var(--g-vert); }
.ksp-grav__verdict.est-verifier strong { color: var(--g-orange); }
.ksp-grav__verdict.est-verifier i { background: var(--g-orange); }
.ksp-grav__verdict.est-impossible { background: #FBEDEC; }
.ksp-grav__verdict.est-impossible strong { color: var(--g-rouge); }
.ksp-grav__verdict.est-impossible i { background: var(--g-rouge); }

/* Champs */
.ksp-grav__champ { display: block; margin: 0 0 10px; }
.ksp-grav__champ span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--g-encre); }
.ksp-grav input[type="text"], .ksp-grav textarea {
	width: 100%; padding: 11px 13px !important; border: 1.5px solid var(--g-ligne) !important; border-radius: 10px !important;
	background: #fff !important; color: var(--g-encre) !important; font: 15px/1.4 Inter, system-ui, sans-serif !important;
	box-shadow: none !important; transition: border-color .2s, box-shadow .2s;
}
.ksp-grav input[type="text"]:focus, .ksp-grav textarea:focus { outline: none; border-color: var(--g-laiton) !important; box-shadow: 0 0 0 3px rgba(184,122,48,.15) !important; }
.ksp-grav textarea { min-height: 64px; resize: vertical; }

.ksp-grav__polices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ksp-grav__police {
	height: auto !important; line-height: 1.2 !important;
	display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 70px; padding: 8px 4px !important;
	border: 1.5px solid var(--g-ligne) !important; border-radius: 10px !important; background: #fff !important; color: var(--g-encre) !important;
	cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
}
.ksp-grav__police span { font-size: 22px; line-height: 1.25; }
.ksp-grav__police small { font: 11.5px/1.2 Inter, system-ui, sans-serif; color: var(--g-doux); }
.ksp-grav__police.est-actif { border-color: var(--g-laiton) !important; background: #FBF5EC !important; box-shadow: 0 0 0 3px rgba(184,122,48,.14); }

.ksp-grav__curseur { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--g-encre); }
.ksp-grav__curseur input { width: 100%; accent-color: var(--g-laiton); }

/* Dépôt d'image */
.ksp-grav__depot {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px;
	border: 1.5px dashed #CDBFA8; border-radius: 14px; background: #FBF8F3; text-align: center; cursor: pointer;
	transition: border-color .2s, background .2s;
}
.ksp-grav__depot:hover, .ksp-grav__depot.est-survole { border-color: var(--g-laiton); background: #FBF5EC; }
.ksp-grav__depot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ksp-grav__depot svg { width: 30px; height: 30px; fill: none; stroke: var(--g-laiton); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ksp-grav__depot strong { color: var(--g-encre); font-size: 15px; }
.ksp-grav__depot small { color: var(--g-doux); font-size: 12.5px; word-break: break-all; }
.ksp-grav__depot.a-une-image { padding: 12px 14px; flex-direction: row; justify-content: center; gap: 10px; }
.ksp-grav__depot.a-une-image svg { width: 22px; height: 22px; }

.ksp-grav__rendus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ksp-grav__rendus button {
	height: auto !important; min-height: 58px; line-height: 1.25 !important; white-space: normal !important;
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px !important; text-align: left;
	border: 1.5px solid var(--g-ligne) !important; border-radius: 10px !important; background: #fff !important; color: var(--g-encre) !important;
	cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
}
.ksp-grav__rendus b { font: 600 14px/1.25 Inter, system-ui, sans-serif; }
.ksp-grav__rendus small { font: 12px/1.3 Inter, system-ui, sans-serif; color: var(--g-doux); }
.ksp-grav__rendus button.est-actif { border-color: var(--g-laiton) !important; background: #FBF5EC !important; box-shadow: 0 0 0 3px rgba(184,122,48,.14); }

.ksp-grav__cases { display: grid; gap: 6px; margin: 12px 0 4px; font-size: 13.5px; }
.ksp-grav__cases label, .ksp-grav__droits { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.ksp-grav__cases input, .ksp-grav__droits input { margin-top: 3px; accent-color: var(--g-laiton); flex: none; width: 16px; height: 16px; }
.ksp-grav__lien { margin-top: 6px; padding: 0 !important; border: 0 !important; background: none !important; color: #8A5A1F !important; text-decoration: underline; font: 13px Inter, system-ui, sans-serif !important; text-transform: none !important; cursor: pointer; }

.ksp-grav__droits { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: #FBF8F3; border: 1px solid var(--g-ligne); font-size: 13.5px; color: var(--g-texte); }
.ksp-grav__legal { margin: 8px 0 0 !important; font-size: 12px; color: var(--g-doux); }
.ksp-grav__erreur { margin: 0 0 12px !important; padding: 10px 12px; border-radius: 10px; background: #FBEDEC; color: var(--g-rouge); font-size: 14px; font-weight: 500; }

.ksp-grav.est-en-envoi .ksp-grav__scene::after {
	content: 'Préparation de votre gravure…'; position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(246,241,233,.78); color: var(--g-encre); font-weight: 600;
}

@media (max-width: 480px) {
	.ksp-grav__polices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ksp-grav__curseur { grid-template-columns: 78px 1fr; }
	.ksp-grav__onglet { font-size: 13.5px !important; }
	.ksp-grav__rendus { grid-template-columns: 1fr; }
}
.ksp-grav__rendus { margin-bottom: 8px; }

/* Titre de l'aperçu, image d'origine */
.ksp-grav__scene-titre { display: none; }
.ksp-grav__scene.est-a-gauche .ksp-grav__scene-titre {
	display: block; position: absolute; top: 12px; left: 14px; z-index: 2; margin: 0 !important;
	font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--g-doux);
}
.ksp-grav__original {
	position: absolute; right: 12px; top: 12px; z-index: 2; margin: 0; width: 20%; max-width: 110px;
	padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(22,24,27,.18);
}
.ksp-grav__original img { display: block; width: 100%; height: auto; border-radius: 6px; }
.ksp-grav__original figcaption { margin-top: 3px; font-size: 10.5px; text-align: center; color: var(--g-doux); }

/* Réglage automatique et retouches */
.ksp-grav__auto { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px !important; font-size: 13.5px; font-weight: 600; color: var(--g-vert); }
.ksp-grav__auto i { width: 18px; height: 18px; border-radius: 50%; background: var(--g-vert); position: relative; flex: none; }
.ksp-grav__auto i::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ksp-grav__auto.est-retouche { color: var(--g-orange); }
.ksp-grav__auto.est-retouche i { background: var(--g-orange); }
.ksp-grav__aide { margin: 6px 0 0 !important; font-size: 12.5px; color: var(--g-doux); }
.ksp-grav__ajuster { margin-top: 12px; border: 1px solid var(--g-ligne); border-radius: 10px; background: #fff; }
.ksp-grav__ajuster summary { padding: 10px 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--g-encre); list-style: none; }
.ksp-grav__ajuster summary::-webkit-details-marker { display: none; }
.ksp-grav__ajuster summary::before { content: '+'; display: inline-block; width: 16px; color: var(--g-laiton); font-weight: 700; }
.ksp-grav__ajuster[open] summary::before { content: '–'; }
.ksp-grav__ajuster summary em { font-style: normal; font-weight: 400; color: var(--g-doux); }
.ksp-grav__ajuster > :not(summary) { margin-left: 12px; margin-right: 12px; }
.ksp-grav__ajuster > :last-child { margin-bottom: 12px; }
.ksp-grav__liens { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Sur ordinateur : l'aperçu à la place des photos, et qui suit le défilement */
.ksp-grav__scene.est-a-gauche {
	/* La colonne d'Elementor est en flex : sans largeur imposée, l'aperçu
	   se réduisait à la largeur par défaut d'un canevas (300 px). */
	width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; align-self: flex-start;
	position: sticky; top: 110px; margin: 0; border-radius: 20px;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #3F3B36;
	--g-encre: #16181B; --g-texte: #3F3B36; --g-doux: #6E6558; --g-ligne: #E2D8C6; --g-vert: #3F7D5B; --g-orange: #9E6626; --g-rouge: #B4413C;
}
.ksp-grav__scene.est-a-gauche .ksp-grav__verdict { font-size: 14px; padding: 14px 18px 16px; }

/* Les lignes de texte : une carte par ligne, avec sa police et sa taille */
.ksp-grav__textes { display: grid; gap: 10px; margin-top: 10px; }
.ksp-grav__ligne { padding: 10px 12px 12px; border: 1.5px solid var(--g-ligne); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.ksp-grav__ligne.est-choisi { border-color: var(--g-laiton); box-shadow: 0 0 0 3px rgba(184,122,48,.12); }
.ksp-grav__ligne-haut { display: flex; align-items: center; gap: 8px; }
.ksp-grav__ligne-num { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--g-creme); color: var(--g-encre); font-size: 12px; font-weight: 700; }
.ksp-grav__ligne-haut input[type="text"] { flex: 1; min-width: 0; }
.ksp-grav__retirer { flex: none; width: 34px; height: 34px !important; padding: 0 !important; border: 1px solid var(--g-ligne) !important; border-radius: 50% !important; background: #fff !important; color: var(--g-doux) !important; font: 20px/1 Inter, system-ui, sans-serif !important; cursor: pointer; }
.ksp-grav__retirer:hover { color: var(--g-rouge) !important; border-color: var(--g-rouge) !important; }
.ksp-grav__ligne-polices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ksp-grav__ligne-polices button {
	height: auto !important; min-height: 50px; padding: 5px 2px !important; display: flex; flex-direction: column; align-items: center; gap: 1px;
	border: 1.5px solid var(--g-ligne) !important; border-radius: 9px !important; background: #fff !important; color: var(--g-encre) !important;
	cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important;
}
.ksp-grav__ligne-polices button span { font-size: 18px; line-height: 1.2; }
.ksp-grav__ligne-polices button small { font: 10.5px/1.1 Inter, system-ui, sans-serif; color: var(--g-doux); }
.ksp-grav__ligne-polices button.est-actif { border-color: var(--g-laiton) !important; background: #FBF5EC !important; }
.ksp-grav__ligne-bas { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.ksp-grav__ligne-bas .ksp-grav__curseur { flex: 1; margin-top: 6px; grid-template-columns: 52px 1fr; }
.ksp-grav__ligne-bas .ksp-grav__lien { margin-top: 6px; white-space: nowrap; }
.ksp-grav__ajout {
	width: 100%; margin-top: 10px; height: auto !important; padding: 11px !important; border: 1.5px dashed #CDBFA8 !important; border-radius: 12px !important;
	background: #FBF8F3 !important; color: var(--g-encre) !important; font: 600 14px Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
}
.ksp-grav__ajout:hover { border-color: var(--g-laiton) !important; }
.ksp-grav__bloc-image.est-choisi .ksp-grav__depot, .ksp-grav__bloc-image.est-choisi .ksp-grav__reglages { border-color: var(--g-laiton); }
.ksp-grav__lien--retirer { display: block; margin-top: 10px; color: var(--g-rouge) !important; }
.ksp-grav .ksp-grav__aide { margin: -4px 0 0 !important; }
@media (max-width: 480px) {
	.ksp-grav__ligne-polices button span { font-size: 16px; }
}
.ksp-grav .ksp-grav__astuce, .ksp-grav__scene .ksp-grav__astuce {
	width: max-content !important; max-width: 92%; white-space: normal; text-align: center;
	color: #fff !important; font: 500 12px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important;
	background: rgba(22,24,27,.78) !important;
}

/* La barre de l'élément choisi, en bas de l'aperçu */
.ksp-grav__barre {
	position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
	display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
	padding: 5px 5px 5px 12px; border-radius: 999px; background: rgba(22,24,27,.86); color: #fff;
	box-shadow: 0 6px 18px rgba(22,24,27,.25); font: 500 12.5px/1.2 Inter, system-ui, sans-serif;
}
.ksp-grav__barre[hidden] { display: none; }
.ksp-grav__barre span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.ksp-grav__barre button {
	display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px !important; padding: 0 12px !important;
	border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.14) !important; color: #fff !important;
	font: 600 12.5px Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
}
.ksp-grav__barre button:hover { background: rgba(255,255,255,.24) !important; }
.ksp-grav__barre button.est-danger { background: #B4413C !important; }
.ksp-grav__barre button.est-danger:hover { background: #9c3732 !important; }
.ksp-grav__barre svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Changer / supprimer l'image */
.ksp-grav__image-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ksp-grav__image-actions[hidden] { display: none; }
.ksp-grav__image-actions button {
	height: auto !important; padding: 10px 12px !important; border: 1.5px solid var(--g-ligne) !important; border-radius: 10px !important;
	background: #fff !important; color: var(--g-encre) !important; font: 600 13.5px Inter, system-ui, sans-serif !important;
	text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
}
.ksp-grav__image-actions button.est-danger { color: var(--g-rouge) !important; border-color: #E8C4C1 !important; }
.ksp-grav__image-actions button.est-danger:hover { background: #FBEDEC !important; }
.ksp-grav__toile:focus { outline: none; }
.ksp-grav__toile:focus-visible { outline: 2px solid var(--g-laiton); outline-offset: -2px; }

/* Téléphone et tablette : l'aperçu reste collé en haut pendant les réglages */
@media (max-width: 1024px) {
	.ksp-grav__scene { position: sticky; top: 0; z-index: 30; margin-left: -2px; margin-right: -2px; box-shadow: 0 10px 24px -14px rgba(22,24,27,.45); transition: top .2s; }
	.ksp-grav__verdict { padding: 8px 12px; cursor: pointer; }
	.ksp-grav__verdict ul { display: none; }
	.ksp-grav__verdict.est-ouvert ul { display: block; }
	.ksp-grav__verdict:has(li) strong::after {
		content: 'Détails'; margin-left: auto; padding: 2px 9px; border-radius: 999px;
		background: var(--g-creme); color: var(--g-doux); font-size: 11.5px; font-weight: 600;
	}
	.ksp-grav__verdict.est-ouvert strong::after { content: 'Masquer'; }
	.ksp-grav__original { width: 16%; }
	.ksp-grav__original figcaption { display: none; }
}

/* Le fond : garder ou retirer, et le détourage */
.ksp-grav__fond { margin-top: 4px; }
.ksp-grav__fond-info { margin: 0 !important; padding: 9px 12px; border-radius: 10px; background: #EAF4EE; color: var(--g-vert); font-size: 13.5px; font-weight: 600; }
.ksp-grav__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ksp-grav__deux button {
	height: auto !important; padding: 10px 12px !important; border: 1.5px solid var(--g-ligne) !important; border-radius: 10px !important;
	background: #fff !important; color: var(--g-encre) !important; font: 600 13.5px Inter, system-ui, sans-serif !important;
	text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
}
.ksp-grav__deux button.est-actif { border-color: var(--g-laiton) !important; background: #FBF5EC !important; box-shadow: 0 0 0 3px rgba(184,122,48,.14); }
.ksp-grav__tol[hidden] { display: none; }