/*
 * Video Snapshot — parcours de commande.
 * L'essentiel des styles vit dans le thème (style.css) : on ne trouve ici
 * que ce qui est propre au parcours et n'a pas de raison d'être ailleurs.
 */

/* Pendant l'envoi d'un fichier, l'emplacement se met en attente. */
.slot .s-meta span:only-child { opacity: .8; }
.slot.over .s-drop { box-shadow: 0 0 0 4px var(--amber); }

/* Message d'erreur de l'étape, visible sans avoir à chercher. */
#stepErr:not([hidden]) {
	background: #FFF7F6;
	border: 1px solid #F3C4BB;
	border-radius: 10px;
	padding: 12px 14px;
}

/* Le parcours garde de l'air sous la barre fixe du mobile. */
@media (max-width: 980px) {
	.cfg { padding-bottom: 90px; }
}

/* Le tuto vidéo, replié sous la règle des images à l'étape des contenus. */
.cfg .tuto {
	margin: 14px 0 6px;
	border: 1px solid var(--line, #DCE8EF);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.cfg .tuto > summary {
	cursor: pointer;
	padding: 12px 16px;
	font: 600 14px/1.4 var(--ui, Arial, sans-serif);
	color: var(--blue, #2F7FA8);
	list-style: none;
}
.cfg .tuto > summary::-webkit-details-marker { display: none; }
.cfg .tuto > summary::before { content: "▶ "; font-size: 11px; }
.cfg .tuto[open] > summary::before { content: "▼ "; }
.cfg .tuto > summary:hover { background: #F3F8FB; }
.cfg .tuto video {
	display: block;
	width: 100%;
	height: auto;
	background: #0C1B24;
}
.cfg .tuto .hint { padding: 10px 16px; margin: 0; }

/* L'emplacement du décor de fond, un peu plus large que les visuels. */
.slots.one .slot.decor { max-width: 340px; }
.slot.decor .s-ph b { background: var(--encre, #2F4C5D); }

/* La bibliothèque des décors filmés de la série Walk. */
.decor-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.decor {
	display: block;
	padding: 0;
	text-align: left;
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.decor img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--ink);
}
.decor .d-nom {
	display: block;
	padding: 8px 10px;
	font: 600 13px/1.3 var(--ui);
	color: var(--ink);
}
.decor:hover { border-color: var(--blue); }
.decor:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.decor.on { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(46, 158, 106, .15); }
.decor.on .d-nom::before { content: "✓ "; color: var(--ok); }
.plan.decors.ok { border-color: var(--ok); }