/* Commun aux démonstrations (/demo/…) : bandeau, fenêtres de formulaire, avis, tableaux triables.
   Chaque démonstration définit ses couleurs ; ici, des variables --d-* avec des valeurs de repli.
   --d-surface : fond des fenêtres · --d-encre : texte · --d-trait : filets · --d-accent : bouton principal
   --d-accent-texte : texte du bouton principal · --d-pale : texte secondaire · --d-champ : fond des champs */

/* Bandeau « Démonstration » : toujours clair, aux couleurs de Physalis Design */
.d-bandeau {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 0.5em 1.2em;
	flex-wrap: wrap;
	padding: 0.55em 1.2em; /* 8 / 19 */
	background: #f3efe2;
	border-bottom: 1px solid #e2dbc6;
	color: #3b3a1a;
	font: 400 0.8125rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; /* 13 */
}
.d-bandeau p { margin: 0; flex: 1 1 20em; }
.d-bandeau a, .d-bandeau button { color: inherit; font: inherit; }
.d-retour { font-weight: 600; text-decoration: none; white-space: nowrap; }
.d-retour:hover { text-decoration: underline; }
.d-reinit {
	padding: 0.3em 0.9em;
	border: 1px solid #cfc6aa;
	border-radius: 2em;
	background: #fffdf6;
	cursor: pointer;
	white-space: nowrap;
}
.d-reinit:hover { background: #fff; border-color: #a9a07e; }

/* Fenêtres */
.d-dialog {
	width: min(36em, calc(100vw - 2em));
	max-height: calc(100dvh - 2em);
	padding: 0;
	border: 1px solid var(--d-trait, #e2dbc6);
	border-radius: 1em;
	background: var(--d-surface, #fffdf8);
	color: var(--d-encre, #2a2a10);
	box-shadow: 0 1.5em 3em -1em rgba(0, 0, 0, .35);
	font-size: 0.9375rem; /* 15 */
}
.d-dialog::backdrop { background: rgba(20, 22, 18, .45); }
.d-dialog form { padding: 1.2em 1.4em 1.3em; }
.d-dialog-tete { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 0.9em; }
.d-dialog-tete h2 { margin: 0; font-size: 1.15em; line-height: 1.25; }
.d-fermer { width: 2em; height: 2em; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 1.3em; line-height: 1; cursor: pointer; }
.d-fermer:hover { background: var(--d-champ, #f4efe2); }
.d-intro { margin: -0.3em 0 1em; color: var(--d-pale, #6b6a4a); }
.d-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em 1em; }
.d-champ { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.d-pleine { grid-column: 1 / -1; }
.d-champ label { font-size: 0.87em; font-weight: 600; color: var(--d-pale, #6b6a4a); }
.d-champ small { font-size: 0.8em; color: var(--d-pale, #6b6a4a); }
.d-champ input, .d-champ select, .d-champ textarea {
	width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid var(--d-trait, #e2dbc6);
	border-radius: 0.6em;
	background: var(--d-champ, #fff);
	color: inherit;
	font: inherit;
}
.d-champ input:focus, .d-champ select:focus, .d-champ textarea:focus { outline: 2px solid var(--d-accent, #e0701a); outline-offset: 1px; }
.d-case { display: flex; gap: 0.5em; align-items: center; font-size: 0.93em; }
.d-erreur { margin: 0.9em 0 0; color: #b3261e; font-size: 0.9em; }
.d-dialog-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-top: 1.3em; }
.d-espace { flex: 1; }
.d-btn {
	padding: 0.55em 1.1em;
	border: 1px solid var(--d-trait, #e2dbc6);
	border-radius: 0.6em;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.d-btn:hover { background: var(--d-champ, #f4efe2); }
.d-btn.d-plein { background: var(--d-accent, #e0701a); border-color: var(--d-accent, #e0701a); color: var(--d-accent-texte, #fff); }
.d-btn.d-plein:hover { filter: brightness(1.06); }
.d-btn.d-danger { color: #b3261e; border-color: transparent; }
.d-petit { width: min(26em, calc(100vw - 2em)); padding: 1.3em 1.4em; }
.d-petit p { margin: 0; }
@media (max-width: 34em) {
	.d-champs { grid-template-columns: 1fr; }
	.d-dialog form { padding: 1em 1.1em 1.1em; }
}

/* Avis */
.d-avis {
	position: fixed;
	left: 50%;
	bottom: 1.2em;
	z-index: 60;
	padding: 0.65em 1.2em;
	border-radius: 2em;
	background: #2a2a10;
	color: #fff;
	font: 500 0.875rem/1.3 system-ui, sans-serif; /* 14 */
	opacity: 0;
	transform: translate(-50%, 1em);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.d-avis.d-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 48em) { .d-avis { bottom: 5.5em; } }

/* Tableaux triables : défilement horizontal au besoin */
.d-table { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.d-table table { min-width: 100%; }
.d-table th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.d-table th button:hover { text-decoration: underline; }
.d-cliquable { cursor: pointer; }
.d-cliquable:hover td { background: var(--d-survol, rgba(0, 0, 0, .025)); }
.d-cliquable:focus-visible { outline: 2px solid var(--d-accent, #e0701a); outline-offset: -2px; }
.d-vide { text-align: center; color: var(--d-pale, #9a987c); padding: 2em 0 !important; white-space: normal !important; }

/* Titre de vue qui reçoit le focus après navigation : pas de contour */
#vue h1:focus { outline: none; }

/* Texte réservé aux lecteurs d'écran */
.d-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .d-avis { transition: none; } }