/* Parcours de devis loi 18-07 — couleurs du site (bleu marine #0c244a / #0e3573) */

.d18 { background: #f4f7fb; }

.d18-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(12, 36, 74, .10);
	padding: 40px 48px 34px;
	font-family: 'Poppins', sans-serif;
}

/* En-tête et progression */
.d18-head { margin-bottom: 30px; }
.d18-kicker {
	font: 600 12px/1.4 'Montserrat', sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #0e3573;
	margin: 0 0 18px;
}
.d18-kicker .fa { margin-right: 6px; }
.d18-progress { display: flex; gap: 8px; }
.d18-seg {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: #e3e9f2;
	transition: background-color .35s ease;
}
.d18-seg.is-done { background: #0e3573; }
.d18-count { margin: 10px 0 0; font-size: 13px; color: #6b778c; }

/* Étapes : sans JavaScript, toutes sont visibles */
.d18-step { border: 0; padding: 0; margin: 0 0 36px; min-width: 0; }
.d18-js .d18-step { display: none; margin: 0; }
.d18-js .d18-step.is-active { display: block; animation: d18-in .35s ease both; }
.d18-js .d18-step.is-back { animation-name: d18-in-back; }
@keyframes d18-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes d18-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.d18-q {
	display: block;
	width: 100%;
	font: 600 26px/1.3 'Montserrat', sans-serif;
	color: #0c244a;
	margin: 0 0 26px;
	padding: 0;
	border: 0;
	outline: none;
}
.d18-lead { font-size: 16px; color: #4a5568; margin: -12px 0 26px; line-height: 1.6; }

/* Cartes cliquables */
.d18-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.d18-choices-2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.d18-choice { position: relative; margin: 0; cursor: pointer; display: block; }
.d18-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.d18-choice-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	min-height: 150px;
	padding: 26px 16px;
	border: 1.5px solid #dfe5ef;
	border-radius: 14px;
	background: #fff;
	text-align: center;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.d18-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef3fb;
	color: #0e3573;
	font-size: 22px;
	transition: background-color .2s ease, color .2s ease;
}
.d18-text { display: flex; flex-direction: column; gap: 6px; }
.d18-label { font: 600 16px/1.35 'Montserrat', sans-serif; color: #0c244a; }
.d18-sub { font: 400 13px/1.5 'Poppins', sans-serif; color: #6b778c; }
.d18-choices-wide { max-width: none; }

/* Nom du parcours au-dessus de chaque question : utile seulement sans JavaScript */
.d18-qt { display: block; }
.d18-track-label {
	display: block;
	font: 600 12px/1.4 'Montserrat', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0e3573;
	margin-bottom: 8px;
}
.d18-js .d18-track-label { display: none; }
.d18-tick {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0e3573;
	color: #fff;
	font-size: 11px;
	line-height: 22px;
	text-align: center;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .2s ease;
}
.d18-choice:hover .d18-choice-body {
	border-color: #0e3573;
	box-shadow: 0 10px 24px rgba(14, 53, 115, .12);
	transform: translateY(-3px);
}
.d18-radio:checked + .d18-choice-body { border-color: #0e3573; background: #f3f7fd; }
.d18-radio:checked + .d18-choice-body .d18-icon { background: #0e3573; color: #fff; }
.d18-radio:checked + .d18-choice-body .d18-tick { opacity: 1; transform: none; }
.d18-radio:focus + .d18-choice-body { outline: 3px solid #6095e6; outline-offset: 2px; }
.d18-radio:focus:not(:focus-visible) + .d18-choice-body { outline: none; }

/* Coordonnées */
.d18-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.d18-field label { display: block; font: 600 13px/1.4 'Montserrat', sans-serif; color: #0c244a; margin: 0 0 7px; }
.d18-opt { font-weight: 400; color: #8a94a6; }
.d18-field input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1.5px solid #dfe5ef;
	border-radius: 10px;
	background: #fff;
	font: 15px 'Poppins', sans-serif;
	color: #1f2a3d;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.d18-field input:focus { outline: none; border-color: #0e3573; box-shadow: 0 0 0 3px rgba(96, 149, 230, .35); }
.d18-field.has-error input { border-color: #c62828; }
.d18-err { display: block; min-height: 18px; margin-top: 5px; font-size: 12.5px; color: #c62828; }

.d18-alert { background: #fdecec; color: #8e1c1c; border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; font-size: 14px; }
.d18-alert a { color: inherit; text-decoration: underline; }
.d18-alert[hidden] { display: none; }

.d18-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.d18-privacy { font-size: 13px; color: #6b778c; margin: 8px 0 22px; }
.d18-privacy a { color: #0e3573; text-decoration: underline; }

/* Boutons */
.d18-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border: 0;
	border-radius: 10px;
	background: #0e3573;
	color: #fff;
	font: 600 14px 'Montserrat', sans-serif;
	letter-spacing: .5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.d18-btn:hover { background: #0c244a; color: #fff; transform: translateY(-1px); }
.d18-btn:focus { outline: 3px solid #6095e6 !important; outline-offset: 2px !important; }
.d18-btn[disabled] { opacity: .65; cursor: wait; transform: none; }
.d18-btn-ghost { background: #eef3fb; color: #0e3573; }
.d18-btn-ghost:hover { background: #dfe8f7; color: #0c244a; }

.d18-nav { margin-top: 26px; min-height: 22px; }
.d18-back {
	border: 0;
	background: none;
	padding: 4px 0;
	font: 500 14px 'Poppins', sans-serif;
	color: #6b778c;
	cursor: pointer;
}
.d18-back:hover { color: #0e3573; }
.d18-back:focus { outline: 3px solid #6095e6 !important; outline-offset: 2px !important; }
.d18-back .fa { margin-right: 6px; }
.d18-back[hidden] { display: none; }

/* Confirmation */
.d18-done { text-align: center; padding: 20px 0 10px; outline: none; }
.d18-done[hidden] { display: none; }
.d18-done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #e7f5ec;
	color: #1e7b45;
	font-size: 32px;
	margin-bottom: 20px;
}
.d18-done h2 { font: 600 26px/1.3 'Montserrat', sans-serif; color: #0c244a; margin: 0 0 10px; }
.d18-done p { font-size: 16px; color: #4a5568; margin: 0 0 26px; }
.d18-form[hidden] { display: none; }

/* Bandeau compact sur la page d'accueil : texte et bouton côte à côte */
.d18-promo {
	margin: 40px 0; /* espace blanc avec les sections voisines */
	padding: 38px 0;
	background: linear-gradient(110deg, #0c244a 0%, #0e3573 50%, #0c244a 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	transition: background-position .7s ease;
}
.d18-promo:hover, .d18-promo:focus-within { background-position: 100% 0; }
.d18-promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.d18-promo-text { display: flex; align-items: center; gap: 22px; min-width: 0; }
.d18-promo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 27px;
	transition: transform .35s ease, background-color .35s ease;
}
.d18-promo:hover .d18-promo-icon, .d18-promo:focus-within .d18-promo-icon { transform: rotate(-8deg) scale(1.06); background: rgba(255, 255, 255, .2); }
.d18-promo h3 { font: 600 24px/1.3 'Montserrat', sans-serif; color: #fff; margin: 0 0 6px; }
.d18-promo p { color: #c9d5e8; font-size: 16px; line-height: 1.55; margin: 0; }
.d18-promo .d18-btn { background: #fff; color: #0c244a; white-space: nowrap; flex-shrink: 0; padding: 17px 32px; font-size: 15px; }
/* Flèche du bouton : léger va-et-vient continu, avec une pause, et passage au bleu du site */
.d18-promo .d18-btn .fa { color: #0e3573; animation: d18-nudge 2.4s ease-in-out infinite; }
/* Survol (et focus clavier) : le bouton passe au bleu clair du site */
.d18-promo .d18-btn:hover, .d18-promo .d18-btn:focus-visible { background: #8fb3ec; color: #0c244a; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); transform: translateY(-2px); }
.d18-promo .d18-btn:hover .fa, .d18-promo .d18-btn:focus-visible .fa { color: #0c244a; animation-name: d18-nudge-move; }
@keyframes d18-nudge {
	0%, 55%, 100% { transform: translateX(0); color: #0e3573; }
	20% { transform: translateX(5px); color: #6095e6; }
	35% { transform: translateX(1px); }
}
@keyframes d18-nudge-move {
	0%, 55%, 100% { transform: translateX(0); }
	20% { transform: translateX(5px); }
	35% { transform: translateX(1px); }
}
.d18-promo .d18-btn:focus { outline: 3px solid #8fb3ec !important; outline-offset: 3px !important; }

/* Même bandeau, en encart arrondi à la fin des articles et des pages service */
.d18-promo-box { margin: 40px 0 30px; padding: 30px 32px; border-radius: 16px; }
.d18-promo-box h2 { font: 600 21px/1.3 'Montserrat', sans-serif; color: #fff; margin: 0 0 6px; }
.d18-promo-box p { font-size: 15px; }
.d18-promo-box .d18-btn { padding: 15px 26px; font-size: 14px; }

/* Bouton flottant « Lancer mes démarches de conformité » (toutes les pages sauf le devis) */
.d18-fab {
	position: fixed;
	right: 15px;
	bottom: 24px;
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 10px;
	border-radius: 999px;
	background: #0e3573;
	color: #fff;
	font: 600 14px/1.2 'Montserrat', sans-serif;
	box-shadow: 0 10px 28px rgba(12, 36, 74, .35);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
	/* apparition une seule fois, à l'arrivée sur la page ; « backwards » pour laisser le survol libre ensuite */
	animation: d18-fab-in .6s cubic-bezier(.2, .8, .2, 1) .8s backwards;
}
.d18-fab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: 15px;
}
.d18-fab:hover { background: #0c244a; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(12, 36, 74, .45); }
.d18-fab:focus { color: #fff; outline: 3px solid #6095e6 !important; outline-offset: 3px !important; }
@keyframes d18-fab-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }

/* Page vitrine DPO Academy */
.dpoa-kicker {
	font: 600 12px/1.4 'Montserrat', sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #0e3573;
	margin: 0 0 14px;
}
.dpoa-kicker .fa { margin-right: 6px; }
.dpoa-title { font: 600 32px/1.25 'Montserrat', sans-serif; color: #0c244a; margin: 0 0 18px; }
.dpoa-lead { font-size: 16px; line-height: 1.75; color: #4a5568; margin: 0 0 20px; }
.dpoa-points { list-style: none; margin: 0 0 30px; padding: 0; }
.dpoa-points li { position: relative; padding-left: 30px; margin-bottom: 10px; color: #333; font-size: 15px; line-height: 1.6; }
.dpoa-points .fa {
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e7f0fc;
	color: #0e3573;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
}
.dpoa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.dpoa-link { font: 600 14px 'Montserrat', sans-serif; color: #0e3573; text-decoration: underline; text-underline-offset: 4px; }
.dpoa-link:hover { color: #0c244a; }
.dpoa-link:focus { outline: 3px solid #6095e6 !important; outline-offset: 3px !important; }

.dpoa-facts { background: #0c244a; color: #fff; border-radius: 18px; padding: 32px 30px; box-shadow: 0 20px 50px rgba(12, 36, 74, .18); }
.dpoa-facts h3 { font: 600 18px 'Montserrat', sans-serif; color: #fff; margin: 0 0 18px; }
.dpoa-facts dl { margin: 0; }
.dpoa-facts dl > div { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.dpoa-facts dt { font: 600 12px 'Montserrat', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #8fb3ec; margin-bottom: 4px; }
.dpoa-facts dt .fa { width: 18px; }
.dpoa-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: #e6ecf5; }

.dpoa-modules { background: #f4f7fb; }
.dpoa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dpoa-module {
	background: #fff;
	border-radius: 16px;
	padding: 28px 24px;
	border: 1.5px solid transparent;
	box-shadow: 0 10px 30px rgba(12, 36, 74, .07);
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dpoa-module:hover { transform: translateY(-4px); border-color: #0e3573; box-shadow: 0 16px 36px rgba(12, 36, 74, .12); }
.dpoa-module-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: #eef3fb;
	color: #0e3573;
	font-size: 22px;
	margin-bottom: 18px;
}
.dpoa-module h3 { font: 600 17px/1.35 'Montserrat', sans-serif; color: #0c244a; margin: 0 0 10px; }
.dpoa-module p { font-size: 14.5px; line-height: 1.65; color: #4a5568; margin: 0; }

.dpoa-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: none; }
.dpoa-steps-list li { text-align: center; padding: 0 10px; }
.dpoa-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #0e3573;
	color: #fff;
	font: 700 20px 'Montserrat', sans-serif;
	margin-bottom: 16px;
}
.dpoa-steps-list h3 { font: 600 18px 'Montserrat', sans-serif; color: #0c244a; margin: 0 0 8px; }
.dpoa-steps-list p { font-size: 15px; line-height: 1.6; color: #4a5568; margin: 0; }

.dpoa-cta { background: linear-gradient(110deg, #0c244a 0%, #0e3573 100%); padding: 50px 0; }
.dpoa-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.dpoa-cta h2 { font: 600 24px/1.3 'Montserrat', sans-serif; color: #fff; margin: 0 0 6px; }
.dpoa-cta p { color: #c9d5e8; margin: 0; font-size: 15px; }
.dpoa-cta .d18-btn { background: #fff; color: #0c244a; white-space: nowrap; flex-shrink: 0; }
.dpoa-cta .d18-btn:hover { background: #dfe8f7; color: #0c244a; }
.dpoa-cta .d18-btn:focus { outline-color: #8fb3ec !important; }

@media (max-width: 991px) {
	.dpoa-facts { margin-top: 40px; }
	.dpoa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.dpoa-title { font-size: 25px; }
	.dpoa-grid, .dpoa-steps-list { grid-template-columns: 1fr; }
	.dpoa-cta-inner { flex-direction: column; align-items: stretch; text-align: left; }
	.dpoa-cta .d18-btn { justify-content: center; white-space: normal; }
	.dpoa-cta h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
	.dpoa-module { transition: none; }
	.dpoa-module:hover { transform: none; }
}

@media (max-width: 575px) {
	.dpoa-actions .d18-btn { width: 100%; justify-content: center; white-space: normal; }
	.d18-promo { margin: 28px 0; padding: 30px 0; }
	.d18-promo-inner { flex-direction: column; align-items: stretch; gap: 20px; }
	.d18-promo .d18-btn { justify-content: center; }
	.d18-promo-icon { width: 52px; height: 52px; font-size: 22px; }
	.d18-promo h3 { font-size: 20px; }
	.d18-promo p { font-size: 15px; }
	.d18-promo-box { margin: 30px 0 24px; padding: 26px 20px; border-radius: 14px; }
	.d18-promo-box h2 { font-size: 19px; }
	.d18-fab { right: 12px; bottom: 16px; font-size: 13px; padding: 8px 16px 8px 8px; gap: 8px; }
	.d18-fab-icon { width: 28px; height: 28px; font-size: 13px; }
	footer.footer { padding-bottom: 64px; }
}
@media print { .d18-fab { display: none; } }

@media (max-width: 767px) {
	.d18-card { padding: 28px 20px 24px; border-radius: 14px; }
	.d18-q { font-size: 21px; margin-bottom: 20px; }
	.d18-choices, .d18-choices-2 { grid-template-columns: 1fr; gap: 12px; max-width: none; }
	.d18-choice-body { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 16px 48px 16px 16px; text-align: left; }
	.d18-icon { width: 46px; height: 46px; font-size: 18px; flex-shrink: 0; }
	.d18-tick { top: 50%; margin-top: -11px; }
	.d18-choice:hover .d18-choice-body { transform: none; }
	.d18-fields { grid-template-columns: 1fr; }
	.d18-submit { width: 100%; justify-content: center; }
	.d18-promo-box .d18-promo-inner { flex-direction: column; align-items: stretch; gap: 20px; }
	.d18-promo-box .d18-btn { justify-content: center; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.d18-js .d18-step.is-active { animation: none; }
	.d18-choice-body, .d18-btn, .d18-seg, .d18-promo, .d18-promo-icon, .d18-fab { transition: none; }
	.d18-choice:hover .d18-choice-body, .d18-fab:hover, .d18-promo .d18-btn:hover,
	.d18-promo:hover .d18-promo-icon, .d18-promo:focus-within .d18-promo-icon { transform: none; }
	.d18-fab, .d18-promo .d18-btn .fa { animation: none; }
}