/* ═══════════════════════════════════════════════════════════════════
   PROJECIA — Déposer mon projet
   Reprise du template du tunnel domogenie.fr/mon-projet.
   Tout est préfixé .pmp- et réinitialisé localement pour ne pas
   dépendre du thème (Divi applique des styles agressifs aux
   boutons, champs et listes).
   ═══════════════════════════════════════════════════════════════════ */

.pmp-app {
	--pmp-primary:   #187185;
	--pmp-primary-d: #0f5a6b;
	--pmp-accent:    #72BF01;
	--pmp-dark:      #01312D;
	--pmp-white:     #ffffff;
	--pmp-gray:      #F5F5F5;
	--pmp-border:    #e0e0e0;
	--pmp-text:      #222222;
	--pmp-soft:      #555555;
	--pmp-radius:    10px;
	--pmp-font:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	container-type: inline-size;
	container-name: pmp;

	position: relative;
	box-sizing: border-box;
	font-family: var(--pmp-font);
	color: var(--pmp-text);
	background: var(--pmp-white);
	line-height: 1.5;
	text-align: left;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(1, 49, 45, .06);
}

.pmp-app *,
.pmp-app *::before,
.pmp-app *::after { box-sizing: border-box; }

/* La réinitialisation passe par :where() : spécificité nulle, donc les
   classes de composants définies plus bas l'emportent toujours, tout en
   neutralisant les styles agressifs du thème (Divi, Astra, etc.). */
.pmp-app :where(p, h2, h3, ul, li, blockquote, cite, figure) {
	margin: 0;
	padding: 0;
	font-style: normal;
}

.pmp-app :where(ul) { list-style: none; }

.pmp-app :where(a) { color: var(--pmp-primary); }

.pmp-app :where(button) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
/* Divi ajoute une flèche en ::after sur ses boutons : on la retire, sans
   toucher aux pseudo-éléments de nos propres composants internes. */
.pmp-app :where(button)::after,
.pmp-app :where(button)::before { content: none; }

.pmp-app :where(input, textarea) {
	font-family: inherit;
	font-size: 15px;
	color: var(--pmp-dark);
	-webkit-appearance: none;
	appearance: none;
}

/* ── Écrans ──────────────────────────────────────────────────────── */
.pmp-screen { display: none; }
.pmp-screen.is-active { display: block; }

/* ═══ Écran 0 · Choix du parcours ═══ */
.pmp-fork {
	padding: 40px 24px 48px;
	text-align: center;
}

.pmp-fork__logo { margin-bottom: 32px; }
.pmp-fork__logo img {
	height: 52px;
	width: auto;
	max-width: 100%;
	display: inline-block;
}

.pmp-fork__hero {
	max-width: 660px;
	margin: 0 auto 36px;
}
.pmp-fork__title {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--pmp-dark);
	margin-bottom: 16px;
}
.pmp-fork__hero p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--pmp-soft);
	margin-bottom: 10px;
}
.pmp-fork__signature {
	font-size: 13px;
	font-weight: 700;
	color: var(--pmp-primary);
	margin-top: 8px;
}

.pmp-fork__question {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pmp-primary);
	margin-bottom: 20px;
}

.pmp-fork__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 1080px;
	margin: 0 auto;
}

.pmp-app .pmp-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	border: 2px solid var(--pmp-border);
	border-radius: 14px;
	padding: 28px 24px;
	background: var(--pmp-white);
	color: var(--pmp-primary);
	transition: border-color .2s, box-shadow .2s, transform .15s;
	width: 100%;
}
.pmp-app .pmp-card:hover,
.pmp-app .pmp-card:focus-visible {
	border-color: var(--pmp-accent);
	box-shadow: 0 4px 20px rgba(24, 113, 133, .12);
	transform: translateY(-2px);
	outline: none;
}
.pmp-card__icon { display: block; }
.pmp-card__icon svg { width: 48px; height: 48px; display: block; }
.pmp-card__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--pmp-dark);
	line-height: 1.35;
}
.pmp-card__desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--pmp-soft);
}
.pmp-card__cta {
	margin-top: auto;      /* aligne les boutons quelle que soit la hauteur du texte */
	display: inline-block;
	background: var(--pmp-primary);
	color: var(--pmp-white);
	padding: 11px 28px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	transition: background .2s;
}
.pmp-app .pmp-card:hover .pmp-card__cta { background: var(--pmp-primary-d); }

.pmp-fork__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-top: 36px;
}
.pmp-fork__stats li { text-align: center; }
.pmp-fork__stats strong {
	display: block;
	font-size: 14px;
	color: var(--pmp-dark);
	font-weight: 700;
}
.pmp-fork__stats span {
	font-size: 12px;
	color: var(--pmp-soft);
}

/* ═══ Layout question ═══ */
.pmp-layout {
	display: grid;
	grid-template-columns: 1fr;
}

/* ── Panneau visuel ── */
.pmp-panel {
	background: linear-gradient(160deg, var(--pmp-dark) 0%, var(--pmp-primary) 100%);
	color: var(--pmp-white);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	min-height: 0;
}
.pmp-panel__num {
	font-size: 34px;
	font-weight: 700;
	color: var(--pmp-accent);
	line-height: 1;
	flex-shrink: 0;
}
.pmp-panel__desc {
	font-size: 13px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
}
.pmp-panel__check {
	font-size: 40px;
	color: var(--pmp-accent);
	line-height: 1;
	flex-shrink: 0;
}
.pmp-panel__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--pmp-white);
	margin-bottom: 4px;
}

/* ── Colonne formulaire ── */
.pmp-form {
	padding: 26px 22px 32px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pmp-prog { margin-bottom: 22px; }
.pmp-prog__label {
	font-size: 12px;
	color: var(--pmp-soft);
	margin-bottom: 6px;
}
.pmp-prog__bar {
	background: var(--pmp-border);
	height: 4px;
	border-radius: 4px;
	overflow: hidden;
}
.pmp-prog__fill {
	background: var(--pmp-primary);
	height: 100%;
	border-radius: 4px;
	transition: width .4s ease;
}

.pmp-app .pmp-btn-prev {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pmp-primary);
	font-size: 13px;
	padding: 0 0 16px;
	width: fit-content;
}
.pmp-app .pmp-btn-prev:hover { text-decoration: underline; }
.pmp-btn-prev svg { width: 14px; height: 14px; }
.pmp-app .pmp-btn-prev[hidden] { display: none; }

.pmp-q__title {
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--pmp-dark);
	margin-bottom: 10px;
}
.pmp-q__subtitle {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pmp-soft);
	margin-bottom: 24px;
}
.pmp-q__subtitle:empty { display: none; }

/* ── Options ── */
.pmp-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pmp-app .pmp-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: var(--pmp-gray);
	border: 1.5px solid var(--pmp-accent);
	border-radius: var(--pmp-radius);
	padding: 14px 18px;
	font-size: 15px;
	color: var(--pmp-dark);
	line-height: 1.4;
	transition: background .15s, border-color .15s, transform .1s;
}
.pmp-app .pmp-option:hover,
.pmp-app .pmp-option:focus-visible {
	background: #eaf7ea;
	border-color: var(--pmp-primary);
	transform: translateX(3px);
	outline: none;
}
.pmp-app .pmp-option.is-selected {
	background: #d6eef3;
	border-color: var(--pmp-primary);
	font-weight: 700;
}
.pmp-option__label { display: block; }
.pmp-option__help {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--pmp-soft);
	margin-top: 3px;
	line-height: 1.5;
}

/* Case à cocher dessinée pour les questions à choix multiple */
.pmp-option__box {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 2px solid var(--pmp-primary);
	border-radius: 5px;
	background: var(--pmp-white);
	position: relative;
	transition: background .15s;
}
.pmp-option.is-selected .pmp-option__box { background: var(--pmp-primary); }
.pmp-option.is-selected .pmp-option__box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--pmp-white);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ── Champs ── */
.pmp-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pmp-field-line {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pmp-input,
.pmp-app .pmp-field input,
.pmp-app .pmp-field textarea {
	width: 100%;
	background: var(--pmp-gray);
	border: 1.5px solid var(--pmp-accent);
	border-radius: var(--pmp-radius);
	padding: 13px 16px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--pmp-dark);
	outline: none;
	transition: border-color .2s, background .2s;
	box-shadow: none;
}
.pmp-input:focus,
.pmp-app .pmp-field input:focus,
.pmp-app .pmp-field textarea:focus {
	border-color: var(--pmp-primary);
	background: var(--pmp-white);
}
.pmp-app textarea.pmp-input {
	min-height: 120px;
	resize: vertical;
}
.pmp-field-unit {
	font-size: 14px;
	color: var(--pmp-soft);
	flex-shrink: 0;
}

/* Champ « autre secteur », révélé au clic */
.pmp-other {
	margin-top: 4px;
	padding: 14px 16px;
	background: #f8fcfd;
	border: 1px solid #c8dde4;
	border-radius: var(--pmp-radius);
}
.pmp-other[hidden] { display: none; }
.pmp-other label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--pmp-dark);
	margin-bottom: 8px;
}

/* ── Messages ── */
.pmp-msg {
	font-size: 13px;
	margin-top: 10px;
	min-height: 0;
}
.pmp-msg:empty { display: none; }
.pmp-msg.is-warn { color: #b45309; }
.pmp-msg.is-ok { color: #4a8a0a; }

.pmp-cond {
	display: none;
	background: #eafaf0;
	border-left: 4px solid var(--pmp-accent);
	border-radius: 0 6px 6px 0;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pmp-dark);
	margin-top: 14px;
}
.pmp-cond.is-visible { display: block; }

.pmp-error {
	font-size: 13px;
	color: #c0392b;
	margin-top: 4px;
}
.pmp-error:empty { display: none; }

/* ── Boutons ── */
.pmp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.pmp-app .pmp-btn {
	background: var(--pmp-primary);
	color: var(--pmp-white);
	padding: 14px 30px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	transition: background .2s, opacity .2s;
	text-align: center;
}
.pmp-app .pmp-btn:hover:not(:disabled) { background: var(--pmp-primary-d); }
.pmp-app .pmp-btn:disabled { background: #9bb3b8; cursor: not-allowed; }
.pmp-app .pmp-btn[hidden] { display: none; }
.pmp-app .pmp-btn--next { margin-left: auto; }
.pmp-app .pmp-btn--ghost {
	background: none;
	color: var(--pmp-primary);
	border: 1px solid var(--pmp-primary);
	font-weight: 500;
	padding: 12px 22px;
	font-size: 14px;
}
.pmp-app .pmp-btn--ghost:hover { background: #e8f5f8; }
.pmp-app .pmp-btn--submit {
	width: 100%;
	margin-top: 8px;
	padding: 16px;
}

/* ── Récapitulatif ── */
.pmp-summary {
	display: none;
	border-top: 1px solid var(--pmp-border);
	padding: 24px 22px;
	background: #fafafa;
}
.pmp-summary h3 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pmp-primary);
	margin-bottom: 18px;
}
.pmp-summary__item { margin-bottom: 14px; }
.pmp-summary__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pmp-soft);
	margin-bottom: 2px;
}
.pmp-summary__value {
	font-size: 13px;
	font-weight: 700;
	color: var(--pmp-dark);
	line-height: 1.45;
}
.pmp-summary__empty {
	font-size: 13px;
	color: #bbb;
	font-style: italic;
}

/* ── Formulaire de coordonnées ── */
.pmp-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
}
.pmp-fields__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.pmp-fields__row .pmp-field {
	flex: 1 1 160px;
	min-width: 0;
}
.pmp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pmp-field label {
	font-size: 13px;
	font-weight: 700;
	color: var(--pmp-dark);
}
.pmp-req { color: #c0392b; margin-left: 2px; }

.pmp-field input.is-invalid,
.pmp-input.is-invalid { border-color: #ef4444; background: #fff5f5; }

/* Champ leurre : masqué sans display:none (certains robots l'ignorent) */
.pmp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pmp-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #f8fcfd;
	border: 1px solid #c8dde4;
	border-radius: 8px;
	padding: 12px 14px;
}
.pmp-app .pmp-consent input[type="checkbox"] {
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--pmp-primary);
	cursor: pointer;
	-webkit-appearance: auto;
	appearance: auto;
}
.pmp-consent label {
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--pmp-dark);
	cursor: pointer;
	font-weight: 400;
}
.pmp-consent label a { color: var(--pmp-primary); text-decoration: underline; }
.pmp-consent.is-invalid { border-color: #ef4444; background: #fff5f5; }

.pmp-legal {
	font-size: 11px;
	line-height: 1.7;
	color: var(--pmp-soft);
}

/* ── Confirmation ── */
.pmp-confirm {
	text-align: center;
	padding: 56px 24px 60px;
	max-width: 560px;
	margin: 0 auto;
}
.pmp-confirm__check {
	width: 72px;
	height: 72px;
	background: var(--pmp-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 26px;
}
.pmp-confirm__check svg { width: 34px; height: 34px; }
.pmp-confirm h2 {
	font-size: 25px;
	font-weight: 700;
	color: var(--pmp-dark);
	margin-bottom: 14px;
	line-height: 1.3;
}
.pmp-confirm p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--pmp-soft);
}
.pmp-confirm__quote {
	font-style: italic;
	color: var(--pmp-primary);
	font-size: 15px;
	line-height: 1.65;
	max-width: 440px;
	margin: 26px auto 0;
	border-left: 3px solid var(--pmp-accent);
	padding-left: 16px;
	text-align: left;
}
.pmp-confirm__quote cite {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: var(--pmp-soft);
	margin-top: 8px;
}

/* ── Pied de page ── */
.pmp-footer {
	background: var(--pmp-dark);
	color: rgba(255, 255, 255, .85);
	padding: 16px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 12px;
}
.pmp-footer[hidden] { display: none; }
.pmp-footer__quote { flex: 1 1 220px; min-width: 0; }
.pmp-footer__quote blockquote {
	font-style: italic;
	line-height: 1.55;
	margin-bottom: 3px;
}
.pmp-footer__quote cite {
	font-style: normal;
	font-size: 11px;
	color: var(--pmp-accent);
}
.pmp-footer__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.pmp-footer__stats li { text-align: center; }
.pmp-footer__stats strong {
	display: block;
	color: var(--pmp-white);
	font-size: 13px;
}
.pmp-footer__stats span {
	font-size: 10px;
	color: rgba(255, 255, 255, .55);
}

.pmp-noscript {
	padding: 24px;
	background: #fff8e1;
	border-left: 4px solid #f59e0b;
	font-size: 14px;
	line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════
   Tablette et plus — largeur du conteneur, pas de la fenêtre :
   le parcours peut être posé dans une colonne Divi étroite.
   ═══════════════════════════════════════════════════════════════════ */
@container pmp (min-width: 640px) {
	.pmp-fork { padding: 48px 32px 56px; }
	.pmp-fork__title { font-size: 32px; }
	.pmp-fork__cards { grid-template-columns: repeat(3, 1fr); }
	.pmp-form { padding: 32px 34px 40px; }
	.pmp-fields__row .pmp-field { flex: 1 1 200px; }
}

@container pmp (min-width: 980px) {
	.pmp-layout {
		grid-template-columns: 34% 1fr;
		align-items: stretch;
	}
	.pmp-panel {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 12px;
		padding: 48px 32px;
		min-height: 460px;
	}
	.pmp-panel__num { font-size: 56px; margin-bottom: 4px; }
	.pmp-panel__desc { font-size: 14px; max-width: 260px; }
	.pmp-panel__check { font-size: 60px; }
	.pmp-form { padding: 40px 44px 48px; }
	.pmp-q__title { font-size: 25px; }
}

@container pmp (min-width: 1180px) {
	.pmp-layout { grid-template-columns: 32% 1fr 262px; }
	.pmp-summary {
		display: block;
		border-top: none;
		border-left: 1px solid var(--pmp-border);
		padding: 40px 24px;
	}
}

/* Repli pour les navigateurs sans requêtes de conteneur */
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.pmp-fork__cards { grid-template-columns: repeat(3, 1fr); }
		.pmp-form { padding: 32px 34px 40px; }
	}
	@media (min-width: 1024px) {
		.pmp-layout { grid-template-columns: 34% 1fr; }
		.pmp-panel {
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 48px 32px;
			min-height: 460px;
		}
		.pmp-panel__num { font-size: 56px; }
	}
	@media (min-width: 1280px) {
		.pmp-layout { grid-template-columns: 32% 1fr 262px; }
		.pmp-summary {
			display: block;
			border-top: none;
			border-left: 1px solid var(--pmp-border);
			padding: 40px 24px;
		}
	}
}

/* Confort tactile sur petits écrans */
@media (max-width: 600px) {
	.pmp-app { border-radius: 0; }
	.pmp-fork__title { font-size: 23px; }
	.pmp-q__title { font-size: 20px; }
	.pmp-option { padding: 15px 16px; }
	.pmp-btn { width: 100%; }
	.pmp-btn--next { margin-left: 0; }
	.pmp-fork__stats { gap: 18px; }
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
	.pmp-app *,
	.pmp-app *::before,
	.pmp-app *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}