/**
 * Module "Devis par photo" — styles du choix d'entrée et des 5 écrans du
 * flux (photo / chargement / erreur / questions / confirmation), voir
 * HS_Devis_Shortcode::render_entry_choice()/render_ai_photo_module() et
 * assets/js/hs-devis-ai-photo.js.
 *
 * Réutilise les variables CSS déjà définies par hs-devis-wizard.css (chargé
 * en dépendance, voir HS_Devis_Shortcode::maybe_enqueue_assets()) — jamais
 * redéfinies ici, pour rester visuellement cohérent avec le reste du
 * wizard. Écrit mobile-first d'emblée (aucune régression du type de celles
 * corrigées sur l'écran d'estimation à reproduire ici).
 */

/* ---- Icônes en ligne (voir HS_Devis_Shortcode::render_icon()) ---- */

.hs-devis-icon {
	width: 1.2em;
	height: 1.2em;
	flex: none;
}

/* ---- Utilitaire accessibilité ---- */

.hs-devis-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Variantes de boutons propres à ce module ---- */

.hs-devis-btn--outline {
	background: #fff;
	border-color: var(--hs-devis-primary);
	color: var(--hs-devis-primary-hover);
}

.hs-devis-btn--outline:hover {
	background: var(--hs-devis-primary-tint);
}

.hs-devis-btn--block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
}

/* ---- Page d'accueil : titre + sous-titre (voir render_entry_choice()) ---- */

.hs-devis-hero {
	text-align: center;
	margin: 0 0 1.75em;
}

.hs-devis-hero__title {
	font-size: 1.5em;
	font-weight: 800;
	color: #1a1613;
	line-height: 1.25;
	margin: 0 0 0.4em;
}

.hs-devis-hero__subtitle {
	font-size: 1em;
	color: #6b6258;
	margin: 0;
}

.hs-devis-hero__only-desktop {
	display: none;
}

/* ---- Page d'accueil : conteneur global (voir render_entry_choice()) —
   porte l'id "hs-devis-entry-choice" masqué/révélé en bloc par le JS
   (assets/js/hs-devis-ai-photo.js), pour que le titre, les 2 cartes, les
   badges de confiance ET le slider disparaissent tous ensemble dès qu'un
   parcours est choisi. ---- */

.hs-devis-home[hidden] {
	display: none;
}

/* ---- Page d'accueil : les 2 cartes de parcours ---- */

.hs-devis-entry-cards {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 1.75em;
}

.hs-devis-entry-card {
	display: flex;
	align-items: center;
	gap: 1em;
	width: 100%;
	padding: 1.25em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 18px;
	box-shadow: var(--hs-devis-shadow-card);
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hs-devis-entry-card:hover,
.hs-devis-entry-card:focus-visible {
	border-color: var(--hs-devis-primary);
	box-shadow: 0 6px 18px rgba(199, 141, 91, 0.22);
	transform: translateY(-1px);
}

.hs-devis-entry-card__thumb {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background-color: var(--hs-devis-primary-tint);
	background-size: cover;
	background-position: center;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(26, 22, 19, 0.12);
}

.hs-devis-entry-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
}

.hs-devis-entry-card__badge {
	align-self: flex-start;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background: var(--hs-devis-primary-tint);
	color: var(--hs-devis-primary-hover);
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.15em;
}

.hs-devis-entry-card__title {
	font-size: 1.25em;
	font-weight: 800;
	color: #1a1613;
	line-height: 1.2;
}

.hs-devis-entry-card__desc {
	font-size: 0.88em;
	color: #6b6258;
	line-height: 1.5;
}

.hs-devis-entry-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5em;
}

.hs-devis-entry-card__time {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.82em;
	font-weight: 600;
	color: #6b6258;
}

.hs-devis-entry-card__chevron {
	display: inline-flex;
	color: var(--hs-devis-primary);
}

@media screen and (min-width: 640px) {
	.hs-devis-entry-card__thumb {
		width: 120px;
		height: 120px;
	}

	.hs-devis-entry-card__title {
		font-size: 1.5em;
	}
}

@media screen and (min-width: 960px) {
	.hs-devis-hero__only-mobile {
		display: none;
	}

	.hs-devis-hero__only-desktop {
		display: inline;
	}

	.hs-devis-hero__title {
		font-size: 2.3em;
	}

	.hs-devis-hero__subtitle {
		font-size: 1.15em;
	}
}

/* ---- Rangée de badges de confiance (page d'accueil ET écran "Spécial
   salle de bain") ---- */

.hs-devis-trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25em 1.75em;
	margin: 0 0 1.75em;
}

.hs-devis-trust-badge {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.85em;
	font-weight: 600;
	color: #4a4238;
	max-width: 170px;
}

.hs-devis-trust-badge .hs-devis-icon {
	width: 1.7em;
	height: 1.7em;
	color: var(--hs-devis-primary);
}

/* ---- Conteneur du module et navigation entre écrans ---- */

.hs-devis-ai-photo {
	margin-bottom: 1.5em;
	padding: 1.25em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	box-shadow: var(--hs-devis-shadow-card);
}

.hs-devis-ai-photo__back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 1em;
	padding: 0;
	background: none;
	border: none;
	color: var(--hs-devis-primary-hover);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---- Écran "Spécial salle de bain" (voir render_ai_photo_module(), écran
   'photo') ---- */

.hs-devis-sdb-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--hs-devis-primary-tint);
	color: var(--hs-devis-primary-hover);
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 1em;
}

.hs-devis-sdb-title {
	font-size: 1.4em;
	font-weight: 800;
	color: #1a1613;
	line-height: 1.3;
	margin: 0 0 0.5em;
}

.hs-devis-sdb-title__accent {
	color: var(--hs-devis-primary);
}

.hs-devis-sdb-subtitle {
	color: #6b6258;
	margin: 0 0 1.5em;
}

.hs-devis-sdb-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5em;
	margin-bottom: 1.75em;
}

@media screen and (min-width: 640px) {
	.hs-devis-sdb-features {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hs-devis-sdb-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.6em;
}

.hs-devis-sdb-feature .hs-devis-icon {
	width: 1.5em;
	height: 1.5em;
	padding: 0.65em;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--hs-devis-primary-tint);
	color: var(--hs-devis-primary);
}

.hs-devis-sdb-feature span {
	font-size: 0.85em;
	font-weight: 600;
	color: #4a4238;
	line-height: 1.4;
}

.hs-devis-sdb-card {
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 16px;
	padding: 1.5em;
	margin-bottom: 1.75em;
}

.hs-devis-sdb-card__title {
	font-size: 1.15em;
	font-weight: 800;
	color: #1a1613;
	margin: 0 0 0.4em;
}

.hs-devis-sdb-card__subtitle {
	font-size: 0.9em;
	color: #6b6258;
	margin: 0 0 1.25em;
}

.hs-devis-sdb-upload {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.hs-devis-sdb-upload__hint {
	text-align: center;
	font-size: 0.8em;
	color: #8a8078;
	margin: 0.25em 0 0;
}

.hs-devis-sdb-example-label {
	text-align: center;
	font-weight: 700;
	color: #1a1613;
	margin: 0 0 0.75em;
}

.hs-devis-trust-badges--sdb {
	margin: 1.75em 0 1em;
}

.hs-devis-sdb-confidential {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: 0.85em;
	color: #6b6258;
	margin: 0 0 1.75em;
}

.hs-devis-sdb-confidential .hs-devis-icon {
	width: 1.1em;
	height: 1.1em;
	color: var(--hs-devis-primary);
}

@media screen and (min-width: 960px) {
	.hs-devis-sdb-title {
		font-size: 1.9em;
	}
}

.hs-devis-ai-photo__screen[hidden] {
	display: none;
}

.hs-devis-ai-photo__intro {
	margin: 0 0 1em;
	font-weight: 600;
}

/* ---- Écran "photo" ---- */

.hs-devis-ai-photo__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0.75em 0;
}

.hs-devis-ai-photo__error {
	margin: 0.75em 0 0;
	padding: 0.6em 0.9em;
	background: #fdecea;
	border: 1px solid #f3c1bc;
	border-radius: 10px;
	color: #9a2c22;
	font-size: 0.9em;
}

.hs-devis-ai-photo__preview {
	margin-top: 1em;
}

.hs-devis-ai-photo__preview img {
	display: block;
	width: 100%;
	max-width: 320px;
	border-radius: 12px;
	border: 1px solid var(--hs-devis-border);
	margin-bottom: 0.75em;
}

/* ---- Écran "loading" ---- */

.hs-devis-ai-photo__loading {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 2em 0;
	font-weight: 600;
}

.hs-devis-ai-photo__spinner {
	flex: none;
	width: 1.4em;
	height: 1.4em;
	border: 3px solid var(--hs-devis-primary-tint);
	border-top-color: var(--hs-devis-primary);
	border-radius: 50%;
	animation: hs-devis-ai-photo-spin 0.8s linear infinite;
}

@keyframes hs-devis-ai-photo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Écran "questions" ---- */

.hs-devis-ai-photo__detected {
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	background: #FBF6F0;
	border-radius: 10px;
	font-weight: 600;
}

/* ---- Rendu visuel avant/après (Partie 2) ---- */

.hs-devis-ai-photo__rendu {
	margin-bottom: 1.25em;
}

.hs-devis-ai-photo__rendu-compare {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.hs-devis-ai-photo__rendu-item {
	flex: 1 1 220px;
	margin: 0;
}

.hs-devis-ai-photo__rendu-item img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--hs-devis-border-input);
	display: block;
}

.hs-devis-ai-photo__rendu-item figcaption {
	margin-top: 0.4em;
	font-weight: 600;
	text-align: center;
}

.hs-devis-ai-photo__rendu-disclaimer {
	margin-top: 0.75em;
	font-size: 0.85em;
	color: var(--hs-devis-text-muted, #6b6b6b);
	font-style: italic;
}

/* ---- Écran "confirm" (récapitulatif) ---- */

.hs-devis-ai-photo__recap {
	margin-bottom: 1.25em;
	padding: 0.9em 1em;
	background: #FBF6F0;
	border: 1px solid var(--hs-devis-border-input);
	border-radius: 12px;
}

.hs-devis-ai-photo__recap p {
	margin: 0 0 0.5em;
}

.hs-devis-ai-photo__recap ul {
	margin: 0;
	padding-left: 1.2em;
}

.hs-devis-ai-photo__recap li {
	margin-bottom: 0.3em;
}

/* En dessous de 600px, les mêmes garde-fous que le reste du wizard pour les
   boutons pleine largeur (voir .hs-devis-upsell__cta dans hs-devis-wizard.css) :
   jamais de texte qui déborde d'un bouton, wrap normal plutôt qu'un forçage
   sur une seule ligne. */
@media screen and (max-width: 599px) {
	.hs-devis-ai-photo__buttons .hs-devis-btn {
		flex: 1 1 auto;
		white-space: normal;
	}
}

/* ---- Conteneur élargi en desktop (voir la demande du 23/08/2026,
   Partie 5) ----
   .hs-devis-wizard plafonne à 640px (voir hs-devis-wizard.css) — volontai-
   rement laissé intact pour le parcours classique (hors périmètre de cette
   refonte). On l'élargit UNIQUEMENT quand l'écran d'accueil ou le module
   photo sont réellement affichés, via :has() — dégradation gracieuse sur un
   navigateur qui ne le supporterait pas : le conteneur reste alors à 640px,
   toujours utilisable, juste moins large que la maquette desktop. */
@media screen and (min-width: 960px) {
	.hs-devis-wizard:has(#hs-devis-entry-choice:not([hidden])),
	.hs-devis-wizard:has(#hs-devis-ai-photo:not([hidden])) {
		max-width: 900px;
	}
}