/*
 * Le formulaire de contact — ce que l'extension y ajoute.
 *
 * Trois blocs seulement : les mots d'ambiance, la palette de couleurs, et
 * les photos. Le reste du formulaire reste au thème, on n'y touche pas.
 *
 * Les couleurs reprennent les variables du thème quand elles existent, avec
 * un repli chiffré pour que le bloc reste correct si l'extension est employée
 * sur une autre installation.
 */

/*
 * Le texte d'aide sous un intitulé. Le thème le définit à partir de sa
 * version 1.6 ; comme le site peut tourner sur une version antérieure, on le
 * définit ici aussi. Deux définitions identiques ne se gênent pas.
 */
.wpcf7-form .champ-aide {
	margin: -0.15rem 0 1rem 0;
	font-family: var(--font-sans, inherit);
	font-size: 0.8rem;
	font-style: italic;
	color: var(--color-lin, #C2BBB2);
}

/* ------------------------------------------------------------ les pastilles */
.wpcf7-form .meb-pastilles .wpcf7-list-item {
	margin: 0;
}

/*
 * Contact Form 7 enveloppe chaque choix dans une étiquette. Le thème met
 * TOUTES les étiquettes du formulaire en majuscules espacées, en « important » :
 * un mot d'ambiance n'est pas un intitulé de champ, il reprend la main.
 */
.wpcf7-form .meb-pastilles .wpcf7-list-item label,
.wpcf7-form .meb-palette .wpcf7-list-item label {
	display: block !important;
	margin: 0 !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 0.85rem !important;
	font-weight: 300 !important;
	color: var(--color-noir-doux, #1A1A1A) !important;
}

.wpcf7-form .meb-pastilles .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.wpcf7-form .meb-pastilles .wpcf7-list-item-label {
	display: inline-block;
	border: 1px solid var(--color-beige-mineral, #DCD8D3);
	border-radius: 2px;
	padding: 7px 15px;
	font-family: var(--font-sans, inherit);
	font-size: 0.85rem;
	color: var(--color-noir-doux, #1A1A1A);
	background: transparent;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wpcf7-form .meb-pastilles .wpcf7-list-item-label:hover {
	border-color: var(--color-vert-sauge, #6B7F62);
}

/* la case d'origine disparaît, la pastille prend le relais */
.wpcf7-form .meb-pastilles input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* le mot choisi : fond vert sauge, texte clair — comme la maquette validée */
.wpcf7-form .meb-pastilles input[type="checkbox"]:checked + .wpcf7-list-item-label {
	background: var(--color-vert-sauge, #6B7F62);
	border-color: var(--color-vert-sauge, #6B7F62);
	color: #fff;
}

.wpcf7-form .meb-pastilles input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--color-vert-sombre, #2A3628);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ la palette */
.wpcf7-form .meb-palette .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wpcf7-form .meb-palette .wpcf7-list-item {
	margin: 0;
}

/* le libellé porte le code de la teinte : on l'efface et on peint la pastille */
.wpcf7-form .meb-palette .wpcf7-list-item-label {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--color-beige-mineral, #DCD8D3);
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	background-color: var(--meb-teinte, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form .meb-palette .wpcf7-list-item-label:hover {
	transform: scale(1.08);
}

.wpcf7-form .meb-palette input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wpcf7-form .meb-palette input[type="checkbox"]:checked + .wpcf7-list-item-label {
	box-shadow: 0 0 0 2px var(--color-blanc-casse, #F9F9F8), 0 0 0 4px var(--color-vert-sauge, #6B7F62);
}

.wpcf7-form .meb-palette input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--color-vert-sombre, #2A3628);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ les photos */
.wpcf7-form .meb-photos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.wpcf7-form .meb-photo {
	width: 100%;
	max-width: 420px;
}

/* le champ d'origine et son bouton noir disparaissent — mais son enveloppe
   reste en place, c'est elle qui porte les messages d'erreur de Contact Form 7 */
.wpcf7-form .meb-photo input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}

.wpcf7-form .meb-photo .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.wpcf7-form .meb-photo .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	color: var(--color-brun-leger, #8C7B6C);
}

/*
 * Le thème met TOUS les intitulés du formulaire en majuscules espacées, et il
 * le fait en « important ». Une étiquette de dépôt n'est pas un intitulé de
 * champ : c'est une zone à cliquer. Elle doit donc reprendre la main sur ces
 * quelques propriétés, au même niveau de force — c'est la seule raison des
 * « important » ci-dessous.
 */
.wpcf7-form .meb-photos label.meb-photo-etiquette {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 !important;
	padding: 13px 16px;
	border: 1px dashed var(--color-beige-mineral, #DCD8D3);
	border-radius: 2px;
	background: transparent;
	font-family: var(--font-sans, inherit) !important;
	font-size: 0.82rem !important;
	font-weight: 300 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--color-gris-chaud, #9A958F) !important;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
	box-sizing: border-box;
}

.wpcf7-form .meb-photos label.meb-photo-etiquette:hover {
	border-color: var(--color-vert-sauge, #6B7F62);
	color: var(--color-vert-sombre, #2A3628) !important;
}

.wpcf7-form .meb-photo-etiquette::before {
	content: "＋";
	font-size: 1rem;
	line-height: 1;
	color: var(--color-lin, #C2BBB2);
}

/* une photo choisie : trait plein, nom du fichier, croix pour l'enlever */
.wpcf7-form .meb-photo.est-remplie label.meb-photo-etiquette {
	border-style: solid;
	border-color: var(--color-vert-sauge, #6B7F62);
	color: var(--color-noir-doux, #1A1A1A) !important;
}

.wpcf7-form .meb-photo.est-remplie .meb-photo-etiquette::before {
	content: "🗎";
}

.wpcf7-form .meb-photo-nom {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpcf7-form .meb-photo-retirer {
	border: 0;
	background: transparent;
	padding: 0 2px;
	font-size: 1rem;
	line-height: 1;
	color: var(--color-gris-chaud, #9A958F);
	cursor: pointer;
}

.wpcf7-form .meb-photo-retirer:hover {
	color: var(--color-brun-leger, #8C7B6C);
}

.wpcf7-form .meb-photos label.meb-photo-etiquette::before {
	margin-right: 2px;
}

.wpcf7-form .meb-photo-ajouter {
	border: 0;
	background: transparent;
	padding: 4px 0;
	font-family: var(--font-sans, inherit);
	font-size: 0.8rem;
	color: var(--color-vert-sauge, #6B7F62);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.wpcf7-form .meb-photo-ajouter[hidden] {
	display: none;
}

.wpcf7-form .meb-photo-ajouter:hover {
	color: var(--color-vert-sombre, #2A3628);
}