/**
 * Styles frontend des blocs depannage-core.
 * Chargés uniquement sur les pages qui utilisent au moins un bloc
 * (handle partagé "dpm-blocks" référencé par chaque block.json).
 * Les couleurs proviennent des design tokens du thème (theme.json),
 * avec valeurs de repli identiques à la palette documentée.
 */

/* ---- Cartes et grilles ---- */
.dpm-grid {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.dpm-card {
	background: var(--wp--preset--color--blanc, #ffffff);
	border: 1px solid var(--wp--preset--color--bordures, #dce3ea);
	border-radius: 1rem;
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dpm-card:hover,
.dpm-card:focus-within {
	box-shadow: 0 6px 18px rgba(16, 42, 67, 0.1);
	transform: translateY(-2px);
}

.dpm-card__title {
	font-size: 1.15rem;
	margin: 0;
}

.dpm-card__title a {
	color: var(--wp--preset--color--texte-principal, #17212b);
	text-decoration: none;
}

.dpm-card__title a:hover,
.dpm-card__title a:focus-visible {
	color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	text-decoration: underline;
}

.dpm-card__text {
	color: var(--wp--preset--color--texte-secondaire, #667085);
	font-size: 0.95rem;
	margin: 0;
}

.dpm-card__link {
	color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: auto;
}

.dpm-card__icon {
	background-color: var(--wp--preset--color--bleu-clair, #eaf2ff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4.5 4.5 0 0 0-6 5.7L4 16.7V20h3.3l4.7-4.7a4.5 4.5 0 0 0 5.7-6l-3 3-2.3-2.3z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.75rem 1.75rem;
	border-radius: 0.75rem;
	display: inline-block;
	height: 3rem;
	width: 3rem;
}

.dpm-card__icon[data-icon="lave-linge"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='2.5' width='17' height='19' rx='2'/%3E%3Ccircle cx='12' cy='13.5' r='4.75'/%3E%3Cpath d='M9.6 13.5a2.4 2.4 0 0 0 4.8 0'/%3E%3Ccircle cx='7' cy='5.5' r='.6'/%3E%3Ccircle cx='9.5' cy='5.5' r='.6'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="lave-vaisselle"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='2.5' width='17' height='19' rx='2'/%3E%3Cpath d='M3.5 7.5h17'/%3E%3Ccircle cx='6.5' cy='5' r='.6'/%3E%3Cpath d='M8 11v6M12 11v6M16 11v6'/%3E%3Cpath d='M6.5 18.5h11'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="refrigerateur"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='5.5' y='2' width='13' height='20' rx='2'/%3E%3Cpath d='M5.5 9.5h13'/%3E%3Cpath d='M8.5 4.5v2.5M8.5 12.5v3.5'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="four"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 8h18'/%3E%3Ccircle cx='6' cy='5.5' r='.6'/%3E%3Ccircle cx='9' cy='5.5' r='.6'/%3E%3Ccircle cx='12' cy='5.5' r='.6'/%3E%3Crect x='7' y='11.5' width='10' height='6' rx='1'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="seche-linge"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='2.5' width='17' height='19' rx='2'/%3E%3Ccircle cx='12' cy='13.5' r='4.75'/%3E%3Cpath d='M9.9 12c1.2 1 3 1 4.2 0M9.9 15c1.2 1 3 1 4.2 0'/%3E%3Ccircle cx='7' cy='5.5' r='.6'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="machine-a-cafe"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='4.5' rx='1'/%3E%3Cpath d='M9 7v2.5h6V7'/%3E%3Cpath d='M9 13.5h6v2.5a3 3 0 0 1-6 0z'/%3E%3Cpath d='M12 9.5v2'/%3E%3Cpath d='M5.5 21.5h13'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="congelateur"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='5.5' y='2' width='13' height='20' rx='2'/%3E%3Cpath d='M5.5 8h13'/%3E%3Cpath d='M12 11v8M9 13l6 4M15 13l-6 4'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="micro-ondes"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Crect x='5' y='7.5' width='10' height='9' rx='1'/%3E%3Cpath d='M18 8v2M18 12v.5'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="plaque-cuisson"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='8.5' cy='12' r='2.5'/%3E%3Ccircle cx='15.5' cy='12' r='2.5'/%3E%3C/svg%3E");
}

.dpm-card__icon[data-icon="aspirateur"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='15' r='5'/%3E%3Ccircle cx='9' cy='15' r='1.5'/%3E%3Cpath d='M13.5 11.5 17 5h3'/%3E%3Cpath d='M16 20.5h4'/%3E%3C/svg%3E");
}

/* ---- Badges ---- */
.dpm-badge {
	background: var(--wp--preset--color--fond-secondaire, #eef3f8);
	border-radius: 999px;
	color: var(--wp--preset--color--texte-principal, #17212b);
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.2rem 0.75rem;
	width: fit-content;
}

.dpm-badge--risque-eleve,
.dpm-badge--niveau-tres-probable {
	background: #fbeaea;
	color: #8f2f2f;
}

.dpm-badge--risque-modere,
.dpm-badge--niveau-probable {
	background: #fdf3e0;
	color: #8a5a08;
}

.dpm-badge--risque-faible,
.dpm-badge--niveau-possible {
	background: var(--wp--preset--color--vert-clair, #e8f8f1);
	color: #0d6b4a;
}

.dpm-badge--niveau-rare {
	background: var(--wp--preset--color--fond-secondaire, #eef3f8);
	color: var(--wp--preset--color--texte-secondaire, #667085);
}

.dpm-badge--pro {
	background: var(--wp--preset--color--bleu-nuit, #102a43);
	color: var(--wp--preset--color--blanc, #ffffff);
}

.dpm-badge--code {
	background: var(--wp--preset--color--bleu-clair, #eaf2ff);
	color: var(--wp--preset--color--bleu-nuit, #102a43);
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---- Alertes ---- */
.dpm-alert {
	border-left: 4px solid;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
}

.dpm-alert--info {
	background: var(--wp--preset--color--bleu-clair, #eaf2ff);
	border-color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
}

.dpm-alert--warning {
	background: #fdf6e7;
	border-color: var(--wp--preset--color--orange-vigilance, #f59e0b);
}

.dpm-alert--danger {
	background: #fbeeee;
	border-color: var(--wp--preset--color--rouge-erreur, #d95c5c);
}

.dpm-alert__title {
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.dpm-alert__text {
	margin: 0;
}

/* ---- Étapes ---- */
.dpm-steps {
	counter-reset: dpm-step;
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpm-steps__item {
	background: var(--wp--preset--color--blanc, #ffffff);
	border: 1px solid var(--wp--preset--color--bordures, #dce3ea);
	border-radius: 0.75rem;
	counter-increment: dpm-step;
	padding: 1rem 1rem 1rem 3.25rem;
	position: relative;
}

.dpm-steps__item::before {
	background: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	border-radius: 999px;
	color: var(--wp--preset--color--blanc, #ffffff);
	content: counter(dpm-step);
	font-weight: 700;
	height: 1.75rem;
	left: 0.9rem;
	line-height: 1.75rem;
	position: absolute;
	text-align: center;
	top: 0.85rem;
	width: 1.75rem;
}

/* ---- Causes, outils, pièces, liens associés ---- */
.dpm-causes,
.dpm-tools,
.dpm-pieces,
.dpm-related {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpm-causes__item,
.dpm-related__item {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--bordures, #dce3ea);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.5rem 0;
}

.dpm-tools__item::before {
	color: var(--wp--preset--color--vert-validation, #18a673);
	content: "\2713\00a0";
	font-weight: 700;
}

.dpm-pieces {
	flex-direction: row;
	flex-wrap: wrap;
	display: flex;
}

.dpm-pieces__item a {
	background: var(--wp--preset--color--fond-secondaire, #eef3f8);
	border-radius: 999px;
	color: var(--wp--preset--color--texte-principal, #17212b);
	display: inline-block;
	padding: 0.25rem 0.9rem;
	text-decoration: none;
}

.dpm-pieces__item a:hover,
.dpm-pieces__item a:focus-visible {
	background: var(--wp--preset--color--bleu-clair, #eaf2ff);
	text-decoration: underline;
}

/* ---- Barre de métadonnées ---- */
.dpm-meta-bar {
	background: var(--wp--preset--color--fond-secondaire, #eef3f8);
	border-radius: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 1rem 1.5rem;
}

.dpm-meta-bar__item dt {
	color: var(--wp--preset--color--texte-secondaire, #667085);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dpm-meta-bar__item dd {
	margin: 0.15rem 0 0;
}

/* ---- FAQ ---- */
.dpm-faq {
	display: grid;
	gap: 0.75rem;
}

.dpm-faq__item {
	background: var(--wp--preset--color--blanc, #ffffff);
	border: 1px solid var(--wp--preset--color--bordures, #dce3ea);
	border-radius: 0.75rem;
	padding: 0;
}

.dpm-faq__question {
	cursor: pointer;
	font-weight: 600;
	padding: 1rem 1.25rem;
}

.dpm-faq__question:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-diagnostic, #2563eb);
	outline-offset: 2px;
}

.dpm-faq__answer {
	color: var(--wp--preset--color--texte-secondaire, #667085);
	margin: 0;
	padding: 0 1.25rem 1rem;
}

/* ---- Expert ---- */
.dpm-expert {
	align-items: center;
	background: var(--wp--preset--color--fond-secondaire, #eef3f8);
	border-radius: 1rem;
	display: flex;
	gap: 1rem;
	padding: 1rem 1.25rem;
}

.dpm-expert__avatar {
	align-items: center;
	background: var(--wp--preset--color--bleu-clair, #eaf2ff);
	border-radius: 999px;
	display: flex;
	flex-shrink: 0;
	height: 3rem;
	justify-content: center;
	overflow: hidden;
	width: 3rem;
}

.dpm-expert__avatar-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.dpm-expert--page {
	padding: 1.5rem 1.75rem;
}

.dpm-expert--page .dpm-expert__avatar {
	height: 6rem;
	width: 6rem;
}

.dpm-expert__bio {
	margin: 0.5rem 0 0;
}

.dpm-expert__name {
	font-weight: 700;
	margin: 0;
}

.dpm-expert__role,
.dpm-expert__date {
	color: var(--wp--preset--color--texte-secondaire, #667085);
	font-size: 0.85rem;
	margin: 0;
}

/* ---- CTA professionnel ---- */
.dpm-pro-cta {
	background: var(--wp--preset--color--bleu-clair, #eaf2ff);
	border-radius: 1rem;
	display: grid;
	gap: 0.75rem;
	padding: 1.75rem;
}

.dpm-pro-cta--recommended {
	border: 1px solid var(--wp--preset--color--bleu-diagnostic, #2563eb);
}

.dpm-pro-cta__title {
	margin: 0;
}

.dpm-pro-cta__text {
	margin: 0;
}

/* ---- Recherche ---- */
.dpm-recherche-panne__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.dpm-recherche-panne__form input[type="search"] {
	background: var(--wp--preset--color--blanc, #ffffff);
	border: 1px solid var(--wp--preset--color--bordures, #dce3ea);
	border-radius: 0.75rem;
	flex: 1 1 16rem;
	font-size: 1.05rem;
	min-height: 44px;
	padding: 0.65rem 1rem;
}

.dpm-recherche-panne__form input[type="search"]:focus-visible {
	border-color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	outline: 2px solid var(--wp--preset--color--bleu-diagnostic, #2563eb);
	outline-offset: 1px;
}

.dpm-recherche-panne__examples {
	color: var(--wp--preset--color--texte-secondaire, #667085);
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}

.dpm-recherche-panne__examples a {
	color: inherit;
	margin-right: 0.25rem;
}

/* ---- Boutons ---- */
.dpm-btn {
	border: 1px solid transparent;
	border-radius: 0.75rem;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	text-decoration: none;
	transition: background 0.15s ease;
}

.dpm-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-diagnostic, #2563eb);
	outline-offset: 2px;
}

.dpm-btn--primary {
	background: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	color: var(--wp--preset--color--blanc, #ffffff);
}

.dpm-btn--primary:hover {
	background: var(--wp--preset--color--bleu-nuit, #102a43);
	color: var(--wp--preset--color--blanc, #ffffff);
}

.dpm-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.dpm-btn--choice {
	background: var(--wp--preset--color--blanc, #ffffff);
	border-color: var(--wp--preset--color--bordures, #dce3ea);
	color: var(--wp--preset--color--texte-principal, #17212b);
	text-align: left;
}

.dpm-btn--choice:hover,
.dpm-btn--choice:focus-visible {
	border-color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
}

/* ---- Assistant ---- */
.dpm-assistant {
	background: var(--wp--preset--color--bleu-nuit, #102a43);
	border-radius: 1.25rem;
	color: var(--wp--preset--color--blanc, #ffffff);
	padding: 2rem;
}

.dpm-assistant__title {
	color: inherit;
	margin: 0 0 1rem;
}

.dpm-assistant__progress {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.dpm-assistant__progress li {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	height: 0.5rem;
	width: 2.5rem;
}

.dpm-assistant__progress li.is-active {
	background: var(--wp--preset--color--vert-validation, #18a673);
}

.dpm-assistant__step-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.dpm-assistant__choices {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	margin-bottom: 1rem;
}

.dpm-assistant__result {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 1rem;
	margin-bottom: 1rem;
	padding: 1.25rem;
}

.dpm-assistant__result h4 {
	margin: 0 0 0.5rem;
}

.dpm-assistant__result a {
	color: var(--wp--preset--color--blanc, #ffffff);
}

.dpm-assistant__result-subtitle {
	font-weight: 600;
	margin: 0.75rem 0 0.25rem;
}

.dpm-assistant__notice,
.dpm-assistant__disclaimer {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
}

.dpm-assistant__error {
	background: rgba(217, 92, 92, 0.2);
	border-radius: 0.75rem;
	padding: 1rem;
}

.dpm-assistant__back {
	color: var(--wp--preset--color--blanc, #ffffff);
	margin-right: 0.5rem;
}

/* ---- Placeholder éditeur ---- */
.dpm-placeholder {
	background: var(--wp--preset--color--fond-secondaire, #eef3f8);
	border: 1px dashed var(--wp--preset--color--bordures, #dce3ea);
	border-radius: 0.75rem;
	color: var(--wp--preset--color--texte-secondaire, #667085);
	font-size: 0.95rem;
	padding: 1rem 1.25rem;
}

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
	.dpm-card,
	.dpm-btn {
		transition: none;
	}

	.dpm-card:hover {
		transform: none;
	}
}

.dpm-steps--unordered {
	counter-reset: none;
}

.dpm-steps--unordered .dpm-steps__item {
	padding-left: 2.5rem;
}

.dpm-steps--unordered .dpm-steps__item::before {
	background: var(--wp--preset--color--bleu-clair, #eaf2ff);
	color: var(--wp--preset--color--bleu-diagnostic, #2563eb);
	content: "\2713";
}