/**
 * "Je cherche par envie" — reprend le langage visuel du prototype conçu
 * ensemble, mais avec les mêmes variables (couleur, polices) que le reste du
 * plugin plutôt qu'une palette à part, pour un rendu cohérent avec la carte
 * et la liste sans rien dupliquer à régler deux fois.
 */
.sdme-wrap {
	--sdm-marker: #6E3B23;
	--sdm-cream: #F7F3ED;
	--sdm-dark: #2B1810;
	--sdm-border: #E4DDD2;
	--sdm-muted: #8a7d6c;
	font-family: var(--sdm-font-body, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	color: var(--sdm-dark, #2B1810) !important;
	background: var(--sdm-cream, #F7F3ED);
	width: 100%;
	min-height: 60vh;
	-webkit-font-smoothing: antialiased;
}
.sdme-wrap *, .sdme-wrap *::before, .sdme-wrap *::after { box-sizing: border-box; }
.sdme-wrap button, .sdme-wrap a, .sdme-wrap textarea { all: revert; box-sizing: border-box; font-family: inherit; }
.sdme-wrap button { cursor: pointer; background: none !important; border: none; }
.sdme-wrap a { text-decoration: none; color: inherit; }

.sdme-page { display: flex; flex-direction: column; min-height: 60vh; }
.sdme-content { flex: 1; padding: 28px 20px 48px; max-width: 600px; margin: 0 auto; width: 100%; }

/* Progression */
.sdme-prog-wrap { margin-bottom: 28px; }
.sdme-prog-track { height: 3px; background: var(--sdm-border, #E4DDD2); border-radius: 2px; overflow: hidden; }
.sdme-prog-fill { height: 100%; background: var(--sdm-primary, #A8542E); border-radius: 2px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.sdme-prog-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.sdme-prog-lbl { font-size: 11px; color: var(--sdm-muted, #8a7d6c) !important; text-transform: uppercase; letter-spacing: .1em; }
.sdme-prog-num { font-size: 11px; color: var(--sdm-muted, #8a7d6c) !important; }

/* Étapes */
.sdme-step-outer { overflow: hidden; }
.sdme-step { display: none; }
.sdme-step.active { display: block; animation: sdmeStepIn .3s ease both; }
.sdme-step.exit { display: block; animation: sdmeStepOut .25s ease forwards; }
@keyframes sdmeStepIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sdmeStepOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); } }

.sdme-q-intro { margin-bottom: 24px; }
.sdme-q-h { font-family: var(--sdm-font-heading, "Cormorant Garamond", serif); font-size: 26px; font-weight: 400; font-style: italic; color: var(--sdm-dark, #2B1810) !important; line-height: 1.25; margin-bottom: 6px; }
.sdme-q-sub { font-size: 13px; color: var(--sdm-muted, #8a7d6c) !important; line-height: 1.6; }
.sdme-multi-hint { font-size: 11px; color: var(--sdm-muted, #8a7d6c) !important; margin-top: 8px; }

/* Options */
.sdme-opts { display: grid; gap: 10px; margin-bottom: 28px; }
.sdme-g2 { grid-template-columns: 1fr 1fr; }
.sdme-g3 { grid-template-columns: 1fr 1fr 1fr; }
.sdme-opt {
	border: 1.5px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 10px !important;
	padding: 14px 15px !important;
	cursor: pointer;
	background: #fff !important;
	text-align: left;
	transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.sdme-opt:hover { box-shadow: 0 4px 14px rgba(43,24,16,.09); border-color: var(--sdm-primary, #A8542E) !important; }
.sdme-opt:active { transform: scale(.97); }
.sdme-opt.on { border-color: var(--sdm-primary, #A8542E) !important; background: var(--sdm-cream, #F7F3ED) !important; box-shadow: 0 4px 14px rgba(43,24,16,.09); }
.sdme-opt-ico { font-size: 22px; margin-bottom: 7px; display: block; line-height: 1; }
.sdme-opt-ico img, .sdme-opt-ico svg { width: 26px; height: 26px; display: block; }
.sdme-opt-lbl { font-size: 15px; font-weight: 500; display: block; color: var(--sdm-dark, #2B1810) !important; line-height: 1.3; }
.sdme-opt-desc { font-size: 12px; color: var(--sdm-muted, #8a7d6c) !important; display: block; margin-top: 3px; line-height: 1.4; }

/* Texte libre */
.sdme-free-wrap { margin-bottom: 28px; }
.sdme-free-wrap textarea {
	width: 100%;
	border: 1.5px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 10px !important;
	padding: 14px 15px !important;
	font-size: 14px;
	font-family: inherit;
	background: #fff !important;
	color: var(--sdm-dark, #2B1810) !important;
	resize: none;
	height: 96px;
	line-height: 1.6;
	outline: none;
	transition: border-color .2s;
}
.sdme-free-wrap textarea:focus { border-color: var(--sdm-primary, #A8542E) !important; }

/* Navigation — fond blanc, texte marron, rouge du site au survol/actif
   (retour du 24/08). L'ancien bouton "Continuer" à opacité 30% avant sélection
   était quasiment illisible (fond coloré + texte blanc à 30% d'opacité sur un
   fond clair) — d'où l'impression de "page d'erreur". Toujours pleinement
   opaque désormais, y compris à l'état "pas encore prêt" : seule la couleur
   change, jamais la lisibilité. */
.sdme-step-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sdme-btn-prev, .sdme-btn-next {
	background: #fff !important;
	border: 1.5px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 9px !important;
	padding: 12px 20px !important;
	font-size: 14px;
	font-weight: 500;
	color: var(--sdm-dark, #2B1810) !important;
	transition: border-color .2s, color .2s, background .2s;
}
.sdme-btn-prev:hover, .sdme-btn-prev:active {
	border-color: var(--sdm-primary, #A8542E) !important;
	color: var(--sdm-primary, #A8542E) !important;
}
.sdme-btn-next {
	flex: 1;
	text-align: center;
}
/* Pas encore prêt (aucune option choisie) : texte discret mais toujours
   parfaitement lisible, plutôt qu'une faible opacité qui le rendait presque
   invisible. */
.sdme-btn-next:not(.sdme-rdy) {
	color: var(--sdm-muted, #8a7d6c) !important;
	cursor: not-allowed;
	pointer-events: none;
}
.sdme-btn-next.sdme-rdy {
	border-color: var(--sdm-primary, #A8542E) !important;
	color: var(--sdm-primary, #A8542E) !important;
	font-weight: 600;
}
.sdme-btn-next.sdme-rdy:hover {
	background: var(--sdm-primary, #A8542E) !important;
	color: #fff !important;
}
.sdme-step-count { font-size: 11px; color: var(--sdm-muted, #8a7d6c) !important; white-space: nowrap; }

/* Résultats */
.sdme-res-intro { margin-bottom: 24px; }
.sdme-res-h { font-family: var(--sdm-font-heading, "Cormorant Garamond", serif); font-size: 26px; font-style: italic; color: var(--sdm-dark, #2B1810) !important; margin-bottom: 6px; }
.sdme-res-sub { font-size: 13px; color: var(--sdm-muted, #8a7d6c) !important; }
.sdme-loading-row { display: flex; align-items: center; gap: 12px; padding: 24px 0; font-size: 13px; color: var(--sdm-muted, #8a7d6c) !important; }
.sdme-spin { width: 18px; height: 18px; border: 2px solid var(--sdm-border, #E4DDD2); border-top-color: var(--sdm-primary, #A8542E) !important; border-radius: 50%; animation: sdmeSpin .7s linear infinite; flex-shrink: 0; }
@keyframes sdmeSpin { to { transform: rotate(360deg); } }

.sdme-card {
	background: #fff;
	border: 1px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 12px !important;
	padding: 18px !important;
	margin-bottom: 12px;
	animation: sdmeSlideUp .35s ease both;
}
.sdme-card:nth-child(2) { animation-delay: .08s; }
.sdme-card:nth-child(3) { animation-delay: .16s; }
@keyframes sdmeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sdme-rc-name { font-family: var(--sdm-font-heading, "Cormorant Garamond", serif); font-style: italic; font-size: 16px; font-weight: 500; color: var(--sdm-dark, #2B1810) !important; margin-bottom: 3px; }
.sdme-rc-meta { font-size: 12px; margin-bottom: 10px; font-weight: 600; }
.sdme-match-row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.sdme-match-track { flex: 1; height: 3px; background: var(--sdm-border, #E4DDD2); border-radius: 2px; }
.sdme-match-fill { height: 100%; border-radius: 2px; background: var(--sdm-primary, #A8542E); }
.sdme-match-score { font-size: 11px; color: var(--sdm-primary, #A8542E) !important; font-weight: 500; white-space: nowrap; }
.sdme-rc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.sdme-rtag { font-size: 11px; padding: 3px 9px; border-radius: 8px; background: var(--sdm-cream, #F7F3ED); color: var(--sdm-dark, #2B1810) !important; }
.sdme-rc-capa { font-size: 12px; color: var(--sdm-dark, #2B1810) !important; margin-bottom: 5px; }
.sdme-rc-spec { font-size: 11px; color: var(--sdm-muted, #8a7d6c) !important; line-height: 1.55; margin-bottom: 12px; }
.sdme-rc-actions { display: flex; flex-direction: column; gap: 8px; }
.sdme-btn-mail, .sdme-btn-site {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 11px 16px !important; border-radius: 8px !important;
	font-size: 13px; font-weight: 500; cursor: pointer;
}
.sdme-btn-mail { color: var(--sdm-primary, #A8542E) !important; background: none !important; border: 1.5px solid var(--sdm-primary, #A8542E) !important; }
.sdme-btn-site { color: var(--sdm-muted, #8a7d6c) !important; background: none !important; border: 1.5px solid var(--sdm-border, #E4DDD2) !important; }
.sdme-no-contact { font-size: 12px; color: var(--sdm-muted, #8a7d6c) !important; background: var(--sdm-cream, #F7F3ED); border: 1px dashed var(--sdm-border, #E4DDD2); border-radius: 8px; padding: 12px 14px; line-height: 1.7; }

.sdme-btn-map {
	display: block !important; width: 100% !important; text-align: center;
	background: none !important; border: 1.5px solid var(--sdm-primary, #A8542E) !important;
	border-radius: 9px !important; padding: 12px !important;
	font-size: 13px; font-weight: 500; color: var(--sdm-primary, #A8542E) !important;
	margin: 8px 0 0 0 !important;
	box-sizing: border-box;
}
.sdme-btn-restart {
	width: 100% !important; background: none !important; border: 1.5px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 9px !important; padding: 12px !important;
	font-size: 13px; color: var(--sdm-muted, #8a7d6c) !important;
	/* Marge protégée par !important (retour du 15/09 — sur le vrai site, avec
	   Astra/Elementor, les deux boutons se chevauchaient : le thème écrasait
	   très probablement cette marge non protégée, comme déjà vu plusieurs fois
	   sur d'autres éléments de ce plugin). Écart généreux plutôt que minimal,
	   pour une marge de sécurité même si un futur style vient encore grignoter
	   un peu d'espace. */
	margin: 18px 0 0 0 !important;
	display: flex !important; align-items: center; justify-content: center; gap: 6px;
	box-sizing: border-box;
}
.sdme-empty-box { background: var(--sdm-cream, #F7F3ED); border: 1px solid var(--sdm-border, #E4DDD2); border-radius: 10px; padding: 16px 18px; margin-top: 12px; }
.sdme-empty-box strong { font-size: 13px; color: var(--sdm-primary, #A8542E) !important; display: block; margin-bottom: 5px; }
.sdme-empty-box p { font-size: 12px; color: var(--sdm-dark, #2B1810) !important; line-height: 1.8; margin: 0; }
.sdme-empty-box a { color: var(--sdm-primary, #A8542E) !important; font-weight: 500; }

/* Responsive desktop */
@media (min-width: 768px) {
	.sdme-content { padding: 48px 24px 64px; }
	.sdme-q-h { font-size: 30px; }
	.sdme-opt-lbl { font-size: 16px; }
	.sdme-opt-desc { font-size: 12px; }
	.sdme-opts { gap: 12px; }
	.sdme-opt { padding: 16px 18px !important; }
	.sdme-opt-ico { font-size: 24px; margin-bottom: 8px; }
	.sdme-btn-next { flex: 0; padding: 12px 28px !important; }
}