/*
 * Pavage de plan — charte graphique de Design Luminy.
 * Couleurs lues dans les variables du thème (--color-*), avec ses valeurs
 * par défaut en secours ; General Sans ; rôles typographiques du thème
 * (widget 14 px, méta 12 px capitales, boutons 12 px 600 capitales) ;
 * angles vifs.
 */

.pdp-app {
	--pdp-encre: var(--color-text, #1a1a1a);
	--pdp-discret: var(--color-muted, #767676);
	--pdp-accent: var(--color-accent, #B89A45);
	--pdp-papier: var(--color-bg, #ffffff);
	--pdp-fond-image: #f0f0f0;
	--pdp-filet: color-mix(in srgb, var(--pdp-discret) 30%, transparent);
	--pdp-alerte: #a4271f;
	--pdp-police: 'General Sans', system-ui, -apple-system, Arial, sans-serif;

	color: var(--pdp-encre);
	font-family: var(--pdp-police);
	font-size: 14px;
	line-height: 1.45;
	margin: var(--spacing-md, 2rem) 0;
	-webkit-font-smoothing: antialiased;
}

/*
 * Largeur : l'outil sort de la colonne de texte (720 px par défaut) et prend
 * la largeur « large » du thème (réglable dans le Customizer), centrée.
 */
.pdp-app.pdp-large {
	--pdp-largeur: min(var(--wide-width, 1100px), calc(100vw - 2 * var(--spacing-sm, 1rem)));
	width: var(--pdp-largeur);
	max-width: none;
	margin-left: calc(50% - var(--pdp-largeur) / 2);
}

.pdp-app.pdp-pleine {
	--pdp-largeur: calc(100vw - 2 * var(--spacing-sm, 1rem));
	width: var(--pdp-largeur);
	max-width: none;
	margin-left: calc(50% - var(--pdp-largeur) / 2);
}

.wp-admin .pdp-app {
	width: auto;
	margin-left: 0;
}

.pdp-app *,
.pdp-app *::before,
.pdp-app *::after {
	box-sizing: border-box;
}

.pdp-app [hidden] {
	display: none !important;
}

.pdp-app input,
.pdp-app select,
.pdp-app button,
.pdp-app output {
	font-family: var(--pdp-police);
}

.pdp-conteneur {
	display: grid;
	gap: 18px;
}

/* ---------- Barre d'outils ---------- */

.pdp-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	padding: 12px 0;
	border-top: 1px solid var(--pdp-encre);
	border-bottom: 1px solid var(--pdp-filet);
}

.pdp-outils {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.pdp-titre-outil,
.pdp-groupe legend,
.pdp-sous-titre {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pdp-discret);
}

.pdp-sous-titre {
	margin: 12px 0 4px;
}

/* ---------- Boutons ---------- */

.pdp-app .pdp-bouton,
.pdp-app .pdp-bascule {
	appearance: none;
	margin: 0;
	padding: 9px 13px;
	border: 1px solid var(--pdp-encre);
	border-radius: 0;
	background: transparent;
	color: var(--pdp-encre);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.pdp-app .pdp-bascule + .pdp-bascule {
	margin-left: -13px;
}

.pdp-app .pdp-bascule[aria-pressed="true"] {
	background: var(--pdp-encre);
	color: var(--pdp-papier);
}

.pdp-app .pdp-bouton:hover:not(:disabled),
.pdp-app .pdp-bascule:hover:not(:disabled) {
	border-color: var(--pdp-accent);
	color: var(--pdp-accent);
}

.pdp-app .pdp-bascule[aria-pressed="true"]:hover:not(:disabled) {
	color: var(--pdp-papier);
	background: var(--pdp-accent);
}

.pdp-app .pdp-principal {
	background: var(--pdp-encre);
	color: var(--pdp-papier);
}

.pdp-app .pdp-principal:hover:not(:disabled) {
	background: var(--pdp-accent);
	color: var(--pdp-papier);
}

.pdp-app .pdp-petit {
	padding: 7px 10px;
}

.pdp-app .pdp-lien {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pdp-accent);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	cursor: pointer;
}

.pdp-app .pdp-lien:hover:not(:disabled) {
	text-decoration: underline;
}

.pdp-app button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pdp-app button:focus-visible,
.pdp-app input:focus-visible,
.pdp-app select:focus-visible,
.pdp-app canvas:focus-visible {
	outline: 2px solid var(--pdp-accent);
	outline-offset: 2px;
}

/* ---------- Scènes ---------- */

.pdp-scene {
	margin: 0;
	min-width: 0;
}

.pdp-cadre {
	position: relative;
	overflow: hidden;
	background: var(--pdp-fond-image);
}

.pdp-scene-editeur .pdp-cadre {
	height: clamp(420px, 72vh, 960px);
}

.pdp-scene-apercu .pdp-cadre {
	height: clamp(420px, 80vh, 1100px);
}

.pdp-fond {
	background-image:
		linear-gradient(rgba(26, 26, 26, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 26, 26, 0.07) 1px, transparent 1px);
	background-size: 40px 40px;
}

.pdp-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
}

.pdp-scene-apercu .pdp-canvas {
	cursor: grab;
}

.pdp-app .pdp-plein-ecran {
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 5px 8px;
	background: var(--pdp-papier);
}

.pdp-scene:fullscreen {
	background: var(--pdp-papier);
	padding: 16px;
	display: flex;
	flex-direction: column;
}

.pdp-scene:fullscreen .pdp-cadre {
	flex: 1;
	height: auto;
}

.pdp-legende {
	margin-top: 6px;
	font-size: 12px;
	font-style: italic;
	color: var(--pdp-discret);
}

.pdp-etat-tuile {
	margin: 4px 0 0;
	font-style: normal;
	color: var(--pdp-encre);
}

.pdp-etat-tuile.pdp-alerte {
	color: var(--pdp-alerte);
	font-weight: 600;
}

.pdp-barre-zoom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.pdp-barre-zoom > span {
	margin-right: auto;
}

.pdp-barre-zoom input[type="range"] {
	width: 180px;
}

.pdp-infos {
	margin-top: 10px;
	padding: 10px 12px;
	border-left: 3px solid var(--pdp-accent);
	background: var(--pdp-fond-image);
	font-size: 12px;
}

.pdp-infos p {
	margin: 0 0 6px;
}

.pdp-coordonnees {
	margin: 0;
	padding-left: 1.4em;
	columns: 2;
	font-variant-numeric: tabular-nums;
}

/* ---------- Réglages ---------- */

.pdp-section {
	border-top: 1px solid var(--pdp-encre);
	padding-top: 14px;
}

/* Couleurs 1, 2, 3 et trait, côte à côte sous le dessin */
.pdp-rangee {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0 28px;
	align-items: start;
}

.pdp-rangee > .pdp-bloc {
	margin: 0;
	padding: 0 0 12px;
	border-bottom: 0;
}

.pdp-rangee > .pdp-bloc + .pdp-bloc {
	border-left: 1px solid var(--pdp-filet);
	padding-left: 28px;
	margin-left: -28px;
}

.pdp-rangee > [hidden] + .pdp-bloc {
	border-left: 1px solid var(--pdp-filet);
}

/* Format d'export et boutons d'export, côte à côte sous l'aperçu */
.pdp-rangee-export {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 0 40px;
	align-items: start;
}

.pdp-rangee-export > .pdp-groupe {
	padding-top: 0;
}

.pdp-groupe {
	border: 0;
	margin: 0;
	padding: 14px 0;
	min-width: 0;
}

.pdp-groupe legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
}

.pdp-groupe legend + * {
	clear: both;
}

.pdp-bloc {
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-bottom: 1px dotted var(--pdp-filet);
}

.pdp-type {
	margin: 0 0 6px;
	font-weight: 600;
}

.pdp-ligne {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.pdp-ligne label {
	flex: 0 0 auto;
}

.pdp-double {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.pdp-double .pdp-ligne {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.pdp-app input[type="number"],
.pdp-app select {
	appearance: none;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid var(--pdp-discret);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--pdp-encre);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.pdp-app select {
	padding-right: 22px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
	background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.pdp-app input[type="number"]:focus,
.pdp-app select:focus {
	border-bottom-color: var(--pdp-accent);
	outline: none;
}

.pdp-ligne > input[type="number"] {
	width: 7em;
}

.pdp-app input[type="color"] {
	flex: 0 0 auto;
	width: 34px;
	height: 26px;
	padding: 0 2px;
	margin-left: auto;
	border: 1px solid var(--pdp-filet);
	border-radius: 0;
	background: var(--pdp-papier);
}

.pdp-app input[type="range"],
.pdp-app input[type="checkbox"],
.pdp-app progress {
	accent-color: var(--pdp-accent);
}

.pdp-app input[type="checkbox"] {
	margin: 0;
}

.pdp-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pdp-groupe > .pdp-bouton {
	display: block;
	width: 100%;
	margin-bottom: 8px;
}

.pdp-app progress {
	width: 100%;
	height: 4px;
}

.pdp-note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--pdp-discret);
}

.pdp-chiffres {
	font-variant-numeric: tabular-nums;
}

.pdp-invisible {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.pdp-rangee-export {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdp-rangee > .pdp-bloc + .pdp-bloc {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
		border-top: 1px dotted var(--pdp-filet);
		padding-top: 12px;
	}

	.pdp-scene-editeur .pdp-cadre,
	.pdp-scene-apercu .pdp-cadre {
		height: 70vh;
	}
}

/* Cadrage de l'image dans la tuile */
.pdp-cadrage {
	margin-top: 8px;
	padding: 8px 0 0;
	border-top: 1px dotted var(--pdp-filet);
}

.pdp-curseur label {
	min-width: 6.5em;
}

.pdp-curseur input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
}

.pdp-curseur output {
	flex: 0 0 3.5em;
	text-align: right;
	color: var(--pdp-discret);
}

/* ---------- Atelier : outils + dessin, et son plein écran ---------- */

.pdp-atelier {
	display: grid;
	gap: 18px;
}

.pdp-atelier:fullscreen {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 16px 16px;
	background: var(--pdp-papier);
	overflow: hidden;
}

/* Les outils (Forme, Point…) restent en haut de l'écran */
.pdp-atelier:fullscreen .pdp-barre {
	flex: 0 0 auto;
	padding-top: 0;
	border-top: 0;
}

.pdp-atelier:fullscreen .pdp-scene-editeur {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.pdp-atelier:fullscreen .pdp-scene-editeur .pdp-cadre {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* En plein écran : ni informations (aire, coordonnées…), ni aides d'utilisation */
.pdp-atelier:fullscreen .pdp-infos,
.pdp-atelier:fullscreen .pdp-legende > span,
.pdp-atelier:fullscreen .pdp-hors-plein-ecran {
	display: none !important;
}

/* Seule l'alerte « le contour se recoupe » reste affichée */
.pdp-atelier:fullscreen .pdp-etat-tuile:not(.pdp-alerte) {
	display: none;
}

.pdp-atelier:fullscreen .pdp-legende {
	margin-top: 4px;
}