/* ============================================================
   Illustrations décoratives positionnables par page.
   Purement additif : si aucune déco n'est placée, rien ne s'affiche.
   La couche est non-cliquable (pointer-events:none) hors mode édition.
   ============================================================ */

/* Contexte de positionnement pour la couche déco (sans casser le flux) */
body {
	position: relative;
}

.page-deco-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 998; /* au-dessus du contenu et des blocs sticky/absolute, sous la navbar (1000) */
}

.page-deco {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	max-width: 60%;
	height: auto;
}

/* Mode édition : décos manipulables */
body.deco-editing .page-deco-layer {
	pointer-events: none; /* la couche laisse passer, seules les images captent */
	overflow: visible;
}
body.deco-editing .page-deco {
	pointer-events: auto;
	cursor: grab;
	outline: 2px dashed rgba(12, 49, 26, 0.45);
	outline-offset: 2px;
}
body.deco-editing .page-deco.dragging {
	cursor: grabbing;
	opacity: 0.85;
}

/* ---- Éditeur déco (mode édition uniquement) ---- */
body.deco-editing .page-deco.deco-selected {
	outline: 2px solid #0C311A;
	box-shadow: 0 0 0 4px rgba(12,49,26,.18);
}
.deco-toolbar {
	position: absolute;
	z-index: 100000;
	display: flex;
	gap: 4px;
	background: #0C311A;
	padding: 4px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.deco-toolbar button {
	width: 30px; height: 30px;
	border: none; border-radius: 6px;
	background: #fff; color: #0C311A;
	font-size: 15px; cursor: pointer; line-height: 1;
}
.deco-toolbar button:hover { background: #d8e6dc; }
.deco-add-btn {
	position: fixed; bottom: 24px; right: 24px;
	z-index: 99999;
	background: #0C311A; color: #fff;
	border: none; border-radius: 50px;
	padding: 12px 20px; font-size: 14px; font-weight: 600;
	cursor: pointer; box-shadow: 0 4px 20px rgba(12,49,26,.35);
	font-family: 'Montserrat', sans-serif;
}
.deco-add-btn:hover { background: #345B3D; }
.deco-panel {
	position: fixed; bottom: 78px; right: 24px;
	z-index: 99999; width: 340px; max-height: 60vh; overflow: auto;
	background: #fff; border-radius: 12px; padding: 16px;
	box-shadow: 0 10px 40px rgba(0,0,0,.25);
	font-family: 'Montserrat', sans-serif; font-size: 13px;
}
.deco-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.deco-panel-close { border: none; background: none; font-size: 22px; cursor: pointer; color: #555; }
.deco-upload {
	display: block; text-align: center; padding: 12px;
	border: 2px dashed #345B3D; border-radius: 8px; color: #0C311A;
	cursor: pointer; margin-bottom: 12px; font-weight: 600;
}
.deco-upload:hover { background: #f0f5f1; }
.deco-panel-sub { color: #777; margin-bottom: 8px; }
.deco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.deco-grid img {
	width: 100%; aspect-ratio: 1; object-fit: contain;
	background: #f3f1ea; border-radius: 6px; padding: 4px;
	cursor: pointer; transition: transform .15s;
}
.deco-grid img:hover { transform: scale(1.08); outline: 2px solid #0C311A; }
.deco-toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
	z-index: 100001; background: #0C311A; color: #fff;
	padding: 10px 18px; border-radius: 50px; font-size: 13px;
	font-family: 'Montserrat', sans-serif; opacity: 0; pointer-events: none;
	transition: opacity .25s, transform .25s;
}
.deco-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Fix : en mode édition, l'éditeur enveloppe les images du carrousel "se compose de"
   dans un .cms-image-wrapper sans taille, ce qui fait disparaître l'image (carré
   en padding-bottom + img absolute). On force le wrapper à remplir le carré.
   Inerte hors édition (le wrapper n'existe qu'en mode édition). */
.room-card-image .cms-image-wrapper {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* En mode édition, l'éditeur CMS ajoute padding-top:56px au body (barre du haut).
   On réaligne la couche déco sur le contenu réel pour que les positions
   correspondent exactement au rendu public (sans la barre). */
body.cms-edit-mode .page-deco-layer {
	top: 56px;
	height: calc(100% - 56px);
}