/*
 * Pavage autocentral — 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.
 */

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

	color: var(--pac-encre);
	font-family: var(--pac-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.
 */
.pac-app.pac-large {
	--pac-largeur: min(var(--wide-width, 1100px), calc(100vw - 2 * var(--spacing-sm, 1rem)));
	width: var(--pac-largeur);
	max-width: none;
	margin-left: calc(50% - var(--pac-largeur) / 2);
}

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

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

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

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

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

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

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

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

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

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

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

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

.pac-app .pac-bouton,
.pac-app .pac-bascule {
	appearance: none;
	margin: 0;
	padding: 9px 13px;
	border: 1px solid var(--pac-encre);
	border-radius: 0;
	background: transparent;
	color: var(--pac-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pac-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pac-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Choix de la base et schéma des côtés ---------- */

.pac-barre select {
	width: auto;
	min-width: 12em;
}

.pac-outils-cotes {
	gap: 6px 10px;
}

.pac-schema {
	display: block;
	overflow: visible;
}

.pac-schema-fond {
	fill: var(--pac-fond-image);
	stroke: none;
}

.pac-schema-cote {
	cursor: pointer;
	outline: none;
}

.pac-schema-zone {
	stroke: transparent;
	stroke-width: 14;
	stroke-linecap: round;
	pointer-events: stroke;
}

.pac-schema-trait {
	stroke: var(--pac-discret);
	stroke-width: 2;
	stroke-dasharray: 3 3;
	stroke-linecap: round;
	pointer-events: none;
}

.pac-actif .pac-schema-trait {
	stroke: var(--pac-accent);
	stroke-width: 4;
	stroke-dasharray: none;
}

.pac-schema-cote:hover .pac-schema-trait,
.pac-schema-cote:focus-visible .pac-schema-trait {
	stroke-width: 6;
}

.pac-cotes-liens {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pac-aide-base {
	display: block;
	margin-top: 2px;
}