/**
 * Panneau « Personnaliser » de la fiche de démonstration. Habillage propre,
 * indépendant du style de la page (il ne doit pas changer quand on en essaie un).
 */

.aapd-fab,
.aapd-panel {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	letter-spacing: normal;
	text-transform: none;
}

.aapd-dock {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.aapd-dock,
.aapd-dock__link {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
	letter-spacing: normal;
	text-transform: none;
}

.aapd-dock__link {
	display: inline-flex;
	align-items: center;
	padding: .8rem 1.1rem;
	border-radius: 999px;
	background: #fff;
	color: #111214;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .08);
}

.aapd-dock__link:hover { background: #f1f1f3; }
.aapd-dock__link--primary { background: #f5ac00; color: #171714; }
.aapd-dock__link--primary:hover { background: #ffbd1f; }
.aapd-dock__link:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }

.aapd-fab {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: #111214;
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12);
	cursor: pointer;
}

.aapd-fab::before {
	content: "";
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--aap-accent, #e4573d);
}

.aapd-fab:hover { background: #24262b; }
.aapd-fab:focus-visible, .aapd-panel :focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }

.aapd-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	width: min(24rem, 100vw);
	overflow-y: auto;
	padding: 1.25rem 1.25rem 2rem;
	background: #111214;
	color: #e9e9ec;
	font-size: .9rem;
	line-height: 1.5;
	box-shadow: -20px 0 60px rgba(0, 0, 0, .45);
}

.aapd-panel[hidden] { display: none; }

.aapd-head { display: flex; align-items: center; justify-content: space-between; }
.aapd-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }

.aapd-close {
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid #2c2e34;
	border-radius: 8px;
	background: none;
	color: #e9e9ec;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.aapd-intro { margin: .75rem 0 1.25rem; color: #b5b6bd; }

.aapd-label {
	margin: 1.25rem 0 .6rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8b8d96;
}

.aapd-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; }

.aapd-style {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .35rem;
	border: 1px solid #2c2e34;
	border-radius: 10px;
	background: none;
	color: #b5b6bd;
	font: inherit;
	font-size: .78rem;
	text-align: left;
	cursor: pointer;
}

.aapd-style[aria-checked="true"] { border-color: #8ab4ff; color: #fff; box-shadow: 0 0 0 1px #8ab4ff; }

.aapd-swatch {
	display: flex;
	align-items: flex-end;
	height: 3rem;
	padding: .3rem .45rem;
	border-radius: 7px;
	font-weight: 800;
	font-size: 1.1rem;
}

.aapd-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.aapd-row input[type="color"] { width: 3rem; height: 2rem; padding: 0; border: 1px solid #2c2e34; border-radius: 6px; background: none; cursor: pointer; }

.aapd-blocks, .aapd-extras { margin: 0; padding-left: 1.2rem; color: #d6d7dc; }
.aapd-blocks li, .aapd-extras li { margin: .15rem 0; }
.aapd-extras li::marker { color: var(--aap-accent, #e4573d); }
.aapd-note { margin: .5rem 0 0; color: #8b8d96; font-size: .82rem; }

.aapd-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

.aapd-cta {
	padding: .75rem 1.2rem;
	border-radius: 999px;
	background: #fff;
	color: #111214;
	font-weight: 700;
	text-decoration: none;
}

.aapd-reset {
	padding: .75rem 1rem;
	border: 1px solid #2c2e34;
	border-radius: 999px;
	background: none;
	color: #e9e9ec;
	font: inherit;
	cursor: pointer;
}

/* Téléphone : le dock devient une barre de trois boutons en bas d'écran. */
@media (max-width: 40rem) {
	body.aap-profile-page { padding-bottom: 4.75rem; }
	.aapd-dock { left: .6rem; right: .6rem; bottom: .6rem; gap: .35rem; }
	.aapd-dock > * { flex: 1 1 0; justify-content: center; padding: .75rem .4rem; font-size: .8rem; }
	.aapd-fab::before { display: none; }
}

/* Un menu plein écran ouvert recouvre tout, dock et panneau compris. */
body.aap-nav-open .aapd-dock,
body.aap-nav-open .aapd-panel { display: none; }