/* =============================================================
 * DiagnosFix Site — feuille de l'extension compagnon
 *
 * Chargée après theme.css (dépendance déclarée à l'enqueue), donc
 * une règle de même spécificité l'emporte sur celle du thème.
 * ============================================================= */

/* -------------------------------------------------------------
 * 1 · Icônes du menu principal
 *
 * L'icône est un masque alimenté par une variable définie sur le
 * lien lui-même : la couleur suit currentColor, donc l'état survol
 * et le mode sombre du thème n'ont rien de plus à déclarer.
 * Le soulignement du thème vit dans ::after — d'où ::before ici.
 * ---------------------------------------------------------- */

.dpm-header .wp-block-navigation .wp-block-navigation-item__content {
	align-items: center;
	display: inline-flex;
	gap: 0.45rem;
}

/* La puce n'est dessinée que sur les liens dont l'icône est connue :
   sans cette liste explicite, un lien ajouté au menu plus tard
   afficherait un carré plein de la couleur du texte. */
.dpm-header .wp-block-navigation a[href*="post_type=appareil"]::before,
.dpm-header .wp-block-navigation a[href$="/appliances/"]::before,
.dpm-header .wp-block-navigation a[href$="/appareils/"]::before,
.dpm-header .wp-block-navigation a[href*="post_type=panne"]::before,
.dpm-header .wp-block-navigation a[href$="/problems/"]::before,
.dpm-header .wp-block-navigation a[href$="/pannes/"]::before,
.dpm-header .wp-block-navigation a[href$="/guides/"]::before,
.dpm-header .wp-block-navigation a[href$="/error-codes/"]::before,
.dpm-header .wp-block-navigation a[href$="/codes-erreur/"]::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 1.05em;
	-webkit-mask: var(--dfx-icon) center / contain no-repeat;
	mask: var(--dfx-icon) center / contain no-repeat;
	opacity: 0.78;
	transition: opacity var(--df-base, 220ms) var(--df-ease, ease),
		transform var(--df-base, 220ms) var(--df-ease, ease);
	width: 1.05em;
}

.dpm-header .wp-block-navigation .wp-block-navigation-item__content:hover::before,
.dpm-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::before {
	opacity: 1;
	transform: translateY(-1px);
}

/* Appareils / Appliances — façade de lave-linge. */
.dpm-header .wp-block-navigation a[href*="post_type=appareil"],
.dpm-header .wp-block-navigation a[href$="/appliances/"],
.dpm-header .wp-block-navigation a[href$="/appareils/"] {
	--dfx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.6' width='16' height='18.8' rx='2.6'/%3E%3Ccircle cx='12' cy='14' r='4.4'/%3E%3Cpath d='M7 6.6h2.6'/%3E%3Cpath d='M16.6 6.6h.01'/%3E%3C/svg%3E");
}

/* Pannes / Problems — témoin d'alerte. */
.dpm-header .wp-block-navigation a[href*="post_type=panne"],
.dpm-header .wp-block-navigation a[href$="/problems/"],
.dpm-header .wp-block-navigation a[href$="/pannes/"] {
	--dfx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 21.2 19.6H2.8z'/%3E%3Cpath d='M12 9.6v4.2'/%3E%3Cpath d='M12 17.1h.01'/%3E%3C/svg%3E");
}

/* Guides — livre ouvert. */
.dpm-header .wp-block-navigation a[href$="/guides/"] {
	--dfx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.4C10.4 4.9 8.3 4.2 5 4.2v13.2c3.3 0 5.4.7 7 2.2 1.6-1.5 3.7-2.2 7-2.2V4.2c-3.3 0-5.4.7-7 2.2z'/%3E%3Cpath d='M12 6.4v13.2'/%3E%3C/svg%3E");
}

/* Codes erreur / Error codes — chevrons d'afficheur. */
.dpm-header .wp-block-navigation a[href$="/error-codes/"],
.dpm-header .wp-block-navigation a[href$="/codes-erreur/"] {
	--dfx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.6 8.4-4.2 3.6 4.2 3.6'/%3E%3Cpath d='m15.4 8.4 4.2 3.6-4.2 3.6'/%3E%3Cpath d='m13.4 5-2.8 14'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
 * 1 bis · Le panneau de menu mobile
 *
 * Le bloc de navigation hérite sa couleur de texte de l'en-tête sombre
 * (--df-ink-100). Ouvert en petit écran, le panneau plein écran de
 * WordPress n'a pourtant aucun fond déclaré : le menu s'affichait donc en
 * gris très clair sur blanc, soit 1,2:1 — illisible. Le panneau reprend
 * ici le fond de l'en-tête, ce qui rétablit le contraste d'origine.
 * ---------------------------------------------------------- */

/* Le sélecteur reprend celui de WordPress — trois classes plus deux :not() —
   sinon la règle du cœur, plus spécifique, garde le fond blanc. */
.dpm-header
	.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--df-ink-900, #0d1320);
	color: var(--df-ink-100, #e2e8f0);
	padding: 4.5rem 1.5rem 2.5rem;
}

/* Le menu est justifié à droite dans l'en-tête ; empilé en plein écran,
   cet alignement laisse les libellés collés au bord. */
.dpm-header
	.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
	.wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.35rem;
	justify-content: flex-start;
}

.dpm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.15rem;
	padding: 0.55rem 0;
}

.dpm-header .wp-block-navigation__responsive-container-close,
.dpm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--df-ink-100, #e2e8f0);
}

/* -------------------------------------------------------------
 * 2 · Vignettes sur « Autres versions de cette panne »
 *
 * La liste était une rangée de pastilles en chasse fixe : sans image,
 * elle ne pouvait rien montrer. Elle reprend ici le gabarit des
 * « Guides associés », qui portait déjà une vignette.
 * ---------------------------------------------------------- */

.dpm-related--marques {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.dpm-related--marques .dpm-related__item a {
	border-radius: var(--df-r-md);
	font-family: var(--df-body);
	font-size: 0.98rem;
	letter-spacing: 0;
	padding: 0.55rem 0.9rem 0.55rem 0.55rem;
	text-transform: none;
}

.dpm-related--marques .dpm-related__thumb {
	height: 38px;
	width: 38px;
}

/* Fiche sans image mise en avant : un cadre de même gabarit, pour
   que les lignes de la liste restent alignées. */
.dpm-related__thumb--none {
	background:
		repeating-linear-gradient(
			135deg,
			var(--df-enamel-deep, #ebeff7) 0 6px,
			var(--df-enamel, #f5f7fb) 6px 12px
		);
	border: 1px solid var(--df-border, #d7deea);
	border-radius: var(--df-r-sm, 8px);
	display: block;
	flex: 0 0 auto;
	height: 38px;
	width: 38px;
}

/* -------------------------------------------------------------
 * 3 · Pièces concernées — repère visuel
 *
 * Ces liens mènent à des archives de terme, pas à des articles :
 * il n'y a aucune image à afficher, mais une puce d'outil suffit à
 * les distinguer d'un lien de texte courant.
 * ---------------------------------------------------------- */

.dpm-pieces__item a {
	--dfx-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.6 6.2a3.9 3.9 0 0 0 5 5L15 15.8l-3.4 3.4a2.1 2.1 0 0 1-3-3l3.4-3.4z'/%3E%3Cpath d='m9.4 9.4-4-4'/%3E%3C/svg%3E");
}

.dpm-pieces__item a::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1em;
	margin-right: 0.45rem;
	-webkit-mask: var(--dfx-tool) center / contain no-repeat;
	mask: var(--dfx-tool) center / contain no-repeat;
	opacity: 0.6;
	vertical-align: -0.14em;
	width: 1em;
}

/* -------------------------------------------------------------
 * 4 · Formulaire de contact
 * ---------------------------------------------------------- */

.dfx-contact {
	margin: 1.75rem 0 2.5rem;
}

/* L'encadré qui dit ce que le site ne fait pas. Il précède le
   formulaire parce qu'il évite la moitié des messages hors sujet. */
.dfx-notice {
	background: var(--df-warn-50, #fff4e0);
	border: 1px solid rgba(245, 166, 35, 0.4);
	border-left: 4px solid var(--df-warn-500, #f5a623);
	border-radius: var(--df-r-md, 14px);
	box-shadow: var(--df-molded);
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
}

.dfx-notice__title {
	color: var(--df-warn-700, #7a4b00);
	font-family: var(--df-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.35rem;
}

.dfx-notice__body {
	color: var(--df-ink-800, #161e2f);
	font-size: 0.97rem;
	line-height: 1.6;
	margin: 0;
}

.dfx-flash {
	border-radius: var(--df-r-md, 14px);
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0 0 1.5rem;
	padding: 0.95rem 1.2rem;
}

.dfx-flash.is-ok {
	background: var(--df-ok-50, #e3f8ee);
	border: 1px solid rgba(0, 181, 101, 0.35);
	color: var(--df-ok-700, #046140);
}

.dfx-flash.is-err {
	background: var(--df-alarm-50, #ffe9ec);
	border: 1px solid rgba(240, 50, 75, 0.35);
	color: var(--df-alarm-700, #8e0d22);
}

.dfx-form {
	background: var(--df-white, #fff);
	border: 1px solid var(--df-border, #d7deea);
	border-radius: var(--df-r-lg, 20px);
	box-shadow: var(--df-molded), var(--df-lift-2);
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}

.dfx-row {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.dfx-row {
		grid-template-columns: 1fr 1fr;
	}
}

.dfx-field {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.dfx-field > label {
	color: var(--df-muted, #5f6e8c);
	font-family: var(--df-mono);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dfx-req {
	color: var(--df-alarm-500, #f0324b);
}

.dfx-field input[type="text"],
.dfx-field input[type="email"],
.dfx-field select,
.dfx-field textarea {
	background: var(--df-enamel, #f5f7fb);
	border: 1px solid var(--df-border, #d7deea);
	border-radius: var(--df-r-sm, 8px);
	color: var(--df-ink-900, #0d1320);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	transition: border-color var(--df-fast, 140ms) var(--df-ease, ease),
		box-shadow var(--df-fast, 140ms) var(--df-ease, ease);
	width: 100%;
}

.dfx-field textarea {
	min-height: 190px;
	resize: vertical;
}

.dfx-field input:focus,
.dfx-field select:focus,
.dfx-field textarea:focus {
	background: var(--df-white, #fff);
	border-color: var(--df-volt-500, #3d55ff);
	box-shadow: 0 0 0 3px var(--df-volt-50, #eaedff);
	outline: none;
}

.dfx-hint {
	color: var(--df-muted, #5f6e8c);
	font-size: 0.87rem;
	line-height: 1.55;
}

.dfx-consent label {
	align-items: flex-start;
	color: var(--df-ink-700, #212c41);
	display: flex;
	font-family: var(--df-body);
	font-size: 0.93rem;
	font-weight: 400;
	gap: 0.65rem;
	letter-spacing: 0;
	line-height: 1.55;
	text-transform: none;
}

.dfx-consent input {
	accent-color: var(--df-volt-500, #3d55ff);
	flex: 0 0 auto;
	height: 20px;
	margin-top: 0.15em;
	width: 20px;
}

.dfx-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 0;
}

.dfx-submit {
	background: var(--df-volt-500, #3d55ff);
	border: 0;
	border-radius: var(--df-r-pill, 999px);
	box-shadow: var(--df-lift-1);
	color: #fff;
	cursor: pointer;
	font-family: var(--df-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 0.8rem 1.6rem;
	transition: background var(--df-fast, 140ms) var(--df-ease, ease),
		box-shadow var(--df-fast, 140ms) var(--df-ease, ease),
		transform var(--df-fast, 140ms) var(--df-ease, ease);
}

.dfx-submit:hover:not(:disabled) {
	background: var(--df-volt-600, #2b3fe0);
	box-shadow: var(--df-lift-2);
	transform: translateY(-1px);
}

.dfx-submit:disabled {
	background: var(--df-ink-400, #6b7c99);
	cursor: progress;
}

/* Pot de miel : hors écran plutôt que masqué, que certains robots ignorent. */
.dfx-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* -------------------------------------------------------------
 * 5 · Adresse affichée en image
 *
 * L'adresse n'existe nulle part en texte dans la source : elle est
 * rendue en image, avec un texte alternatif volontairement obscurci.
 * La règle ci-dessous ne fait qu'aligner l'image sur la ligne de base
 * du texte voisin, quelle que soit la taille du corps.
 * ---------------------------------------------------------- */

.dpm-email-img {
	border-radius: 0;
	box-shadow: none;
	display: inline-block;
	height: 1.333em;
	max-width: 100%;
	vertical-align: -0.294em;
	width: auto;
}