/*!
 * POC — Formulaire de devis
 * Version: 1.0.1
 * Thème cible : Modins (Gavias).
 *
 * Reconstruit de zéro. Règles tenues dans tout ce fichier :
 *   - la racine est confinée : rien ne peut en sortir latéralement ;
 *   - aucun élément du formulaire n'est positionné hors du flux ;
 *   - tout enfant de grille ou de flex porte min-width: 0 ;
 *   - aucune unité vw, aucune marge négative, aucune largeur fixe ;
 *   - le popup vit en fin de <body>, hors du bloc.
 */

/* =====================================================================
   1. VARIABLES
   ===================================================================== */
.poc-dv,
.poc-dvp {
	--poc-dv-fond: #ffffff;
	--poc-dv-encre: #4e4e4c;
	--poc-dv-gris: #76766f;
	--poc-dv-or: #a21a18;
	--poc-dv-or-clair: #f38c8b;
	--poc-dv-creme: #fbf3f3;
	--poc-dv-err: #d23b2e;

	--poc-dv-pad-x: 40px;
	--poc-dv-pad-y: 32px;
	--poc-dv-radius: 20px;
	--poc-dv-cw: 880px;
	--poc-dv-cols: 4;

	--poc-dv-et-off: #daadac;
	--poc-dv-et-on: #4e4e4c;
	--poc-dv-et-done: #a21a18;

	--poc-dv-carte-bg: #fbf3f3;
	--poc-dv-carte-bd: #f6e1e1;
	--poc-dv-carte-radius: 14px;

	--poc-dv-ch-bg: #ffffff;
	--poc-dv-ch-bd: #efd2d2;
	--poc-dv-ch-radius: 12px;
	--poc-dv-ch-py: 12px;

	--poc-dv-bt-txt: #4e4e4c;
	--poc-dv-bt-bg1: #f38c8b;
	--poc-dv-bt-bg2: #a21a18;
	--poc-dv-bt-txt-h: #4e4e4c;
	--poc-dv-bt-bg1-h: #f7b2b1;
	--poc-dv-bt-bg2-h: #b22b28;
	--poc-dv-bt-py: 15px;
	--poc-dv-bt-px: 30px;
	--poc-dv-bt-radius: 12px;

	--poc-dv-nav-txt: #4e4e4c;
	--poc-dv-nav-bd: #efd2d2;
	--poc-dv-nav-bg-h: #4e4e4c;
	--poc-dv-nav-txt-h: #f38c8b;

	--poc-dv-pop-bg: #ffffff;
	--poc-dv-pop-voile: rgba(45, 45, 42, 0.62);
	--poc-dv-pop-sceau: #a21a18;

	--poc-dv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. GARDES — thème Modins
   `:where()` ne compte pas dans la spécificité : la garde pèse (0,1,0),
   assez pour battre le thème (0,0,1) sans écraser les composants.
   ===================================================================== */
.poc-dv,
.poc-dv *,
.poc-dvp,
.poc-dvp * {
	box-sizing: border-box;
	min-width: 0;
}

.poc-dv [hidden],
.poc-dvp[hidden] {
	display: none !important;
}

.poc-dv :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li),
.poc-dvp :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	list-style: none;
}

.poc-dv button,
.poc-dvp button {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	border-radius: 0;
	position: static;
	z-index: auto;
	box-shadow: none;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.poc-dv button:hover,
.poc-dv button:focus,
.poc-dv button:active,
.poc-dvp button:hover,
.poc-dvp button:focus {
	opacity: 1;
	box-shadow: none;
	background: none;
	color: inherit;
}

.poc-dv .poc-dv__titre,
.poc-dv .poc-dv__surtitre,
.poc-dv .poc-dv__intro,
.poc-dv .poc-dv__question,
.poc-dv .poc-dv__label,
.poc-dv .poc-dv__btn,
.poc-dv .poc-dv__carte-txt {
	text-transform: none;
}

.poc-dv svg,
.poc-dvp svg {
	height: auto;
	vertical-align: middle;
}

.poc-dv a {
	text-decoration: none;
}

/* =====================================================================
   3. RACINE — confinement
   `clip` et non `hidden` : `hidden` créerait un conteneur de défilement
   et casserait le défilement vertical de la page. Le popup n'est pas
   concerné, il est déplacé en fin de <body> par le script.
   ===================================================================== */
.poc-dv {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	background: var(--poc-dv-fond);
	color: var(--poc-dv-encre);
	border-radius: var(--poc-dv-radius);
	padding: var(--poc-dv-pad-y) var(--poc-dv-pad-x);
	box-shadow: 0 18px 46px -26px rgba(78, 78, 76, 0.4);
	font-size: 15px;
	line-height: 1.6;
}

/* =====================================================================
   4. EN-TÊTE
   ===================================================================== */
/*
 * Le contenu est borné et centré. Sans cela, sur un écran large les
 * listes déroulantes et la zone de texte s'étirent sur toute la largeur
 * du bloc et donnent des champs démesurés.
 */
.poc-dv .poc-dv__entete,
.poc-dv .poc-dv__etapes,
.poc-dv .poc-dv__form {
	width: 100%;
	max-width: var(--poc-dv-cw);
	margin-left: auto;
	margin-right: auto;
}

.poc-dv .poc-dv__entete {
	margin-bottom: 20px;
}

.poc-dv .poc-dv__surtitre {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 12px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--poc-dv-creme);
	color: var(--poc-dv-or);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__titre {
	font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
	line-height: 1.2;
	font-weight: 800;
	margin-bottom: 10px;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__intro {
	color: var(--poc-dv-gris);
	overflow-wrap: anywhere;
}

/* =====================================================================
   5. ÉTAPES
   Quatre pastilles réparties en flex. Les traits de liaison sont des
   éléments souples : ils absorbent toute la largeur restante et ne
   peuvent donc jamais pousser la ligne au-delà du bloc.
   ===================================================================== */
.poc-dv .poc-dv__etapes {
	display: flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 20px;
}

.poc-dv .poc-dv__etape {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	color: var(--poc-dv-et-off);
	font-size: 13px;
	font-weight: 600;
}

.poc-dv .poc-dv__etape:last-child {
	flex: 0 0 auto;
}

.poc-dv .poc-dv__etape::after {
	content: '';
	flex: 1 1 0;
	min-width: 8px;
	height: 2px;
	margin: 0 8px;
	border-radius: 99px;
	background: currentColor;
	opacity: 0.3;
}

.poc-dv .poc-dv__etape:last-child::after {
	display: none;
}

.poc-dv .poc-dv__etape-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid currentColor;
	font-size: 12.5px;
	font-weight: 700;
	transition: background 240ms var(--poc-dv-ease), color 240ms var(--poc-dv-ease);
}

.poc-dv .poc-dv__etape-nom {
	margin-left: 8px !important;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.poc-dv .poc-dv__etape.is-active {
	color: var(--poc-dv-et-on);
}

.poc-dv .poc-dv__etape.is-done {
	color: var(--poc-dv-et-done);
}

.poc-dv .poc-dv__etape.is-done .poc-dv__etape-num {
	background: var(--poc-dv-et-done);
	border-color: var(--poc-dv-et-done);
	color: #fff;
}

/* =====================================================================
   6. FORMULAIRE ET PANNEAUX
   ===================================================================== */
/* La largeur du formulaire est fixée plus haut par --poc-dv-cw. */

/*
 * Pot de miel : dans le flux, taille nulle, jamais projeté hors écran.
 * Un `left: -9999px` étendrait la zone de rendu vers la gauche et ferait
 * glisser la page latéralement sur mobile.
 */
.poc-dv .poc-dv__pot {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.poc-dv .poc-dv__panneau {
	display: none;
	width: 100%;
	max-width: 100%;
}

.poc-dv .poc-dv__panneau.is-active {
	display: block;
	animation: poc-dv-entree 380ms var(--poc-dv-ease);
}

@keyframes poc-dv-entree {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.poc-dv .poc-dv__question {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 14px;
	overflow-wrap: anywhere;
}

/* Deux colonnes qui deviennent une seule sous 720 px. */
.poc-dv .poc-dv__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 16px;
}

/* =====================================================================
   7. CARTES DE PRESTATION
   ===================================================================== */
.poc-dv .poc-dv__cartes {
	display: grid;
	grid-template-columns: repeat(var(--poc-dv-cols), minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 6px;
}

.poc-dv .poc-dv__carte {
	display: block;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.poc-dv .poc-dv__carte input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.poc-dv .poc-dv__carte-in {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--poc-dv-carte-bd);
	border-radius: var(--poc-dv-carte-radius);
	background: var(--poc-dv-carte-bg);
	transition: border-color 220ms var(--poc-dv-ease), background 220ms var(--poc-dv-ease);
}

.poc-dv .poc-dv__carte-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	flex: 0 0 auto;
	margin-right: 10px !important;
	font-size: 18px;
	color: var(--poc-dv-or);
}

.poc-dv .poc-dv__carte-ico i,
.poc-dv .poc-dv__carte-ico i::before,
.poc-dv .poc-dv__carte-ico svg {
	line-height: 1 !important;
	vertical-align: middle;
	display: block;
}

.poc-dv .poc-dv__carte-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-dv .poc-dv__carte-txt {
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__carte:hover .poc-dv__carte-in {
	border-color: var(--poc-dv-or-clair);
}

.poc-dv .poc-dv__carte input:checked + .poc-dv__carte-in {
	border-color: var(--poc-dv-or);
	background: var(--poc-dv-fond);
	box-shadow: inset 0 0 0 1px var(--poc-dv-or);
}

.poc-dv .poc-dv__carte input:focus-visible + .poc-dv__carte-in {
	outline: 2px solid var(--poc-dv-or);
	outline-offset: 2px;
}

/* =====================================================================
   8. CHAMPS
   ===================================================================== */
.poc-dv .poc-dv__champ {
	width: 100%;
	max-width: 100%;
	margin-bottom: 12px;
}

.poc-dv .poc-dv__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__requis {
	color: var(--poc-dv-or);
	margin-left: 2px;
}

.poc-dv .poc-dv__input {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: var(--poc-dv-ch-py) 15px;
	border: 1.5px solid var(--poc-dv-ch-bd);
	border-radius: var(--poc-dv-ch-radius);
	background: var(--poc-dv-ch-bg);
	color: var(--poc-dv-encre);
	font-family: inherit;
	font-size: 16px; /* 16px évite le zoom automatique d'iOS à la saisie. */
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 200ms var(--poc-dv-ease), box-shadow 200ms var(--poc-dv-ease);
}

.poc-dv .poc-dv__input:focus {
	outline: none;
	border-color: var(--poc-dv-or);
	box-shadow: 0 0 0 3px rgba(162, 26, 24, 0.16);
}

.poc-dv .poc-dv__textarea {
	resize: vertical;
	min-height: 76px;
}

.poc-dv .poc-dv__select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A616B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 18px 18px;
}

/* --- Pastilles --- */
.poc-dv .poc-dv__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	max-width: 100%;
}

.poc-dv .poc-dv__pastille {
	display: block;
	max-width: 100%;
	margin: 0;
	cursor: pointer;
}

.poc-dv .poc-dv__pastille input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.poc-dv .poc-dv__pastille-txt {
	display: block;
	max-width: 100%;
	padding: 10px 16px;
	border: 1.5px solid var(--poc-dv-ch-bd);
	border-radius: 999px;
	background: var(--poc-dv-ch-bg);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
	transition: border-color 200ms var(--poc-dv-ease),
		background 200ms var(--poc-dv-ease),
		color 200ms var(--poc-dv-ease);
}

.poc-dv .poc-dv__pastille:hover .poc-dv__pastille-txt {
	border-color: var(--poc-dv-or-clair);
}

.poc-dv .poc-dv__pastille input:checked + .poc-dv__pastille-txt {
	border-color: var(--poc-dv-or);
	background: var(--poc-dv-or);
	color: #fff;
}

.poc-dv .poc-dv__pastille input:focus-visible + .poc-dv__pastille-txt {
	outline: 2px solid var(--poc-dv-or);
	outline-offset: 2px;
}

/* --- Erreurs : uniquement à la validation --- */
.poc-dv .poc-dv__erreur {
	margin-top: 6px;
	color: var(--poc-dv-err);
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__erreur--bloc {
	margin-top: 12px;
	padding: 11px 14px;
	border-radius: 10px;
	background: rgba(210, 59, 46, 0.08);
	border: 1px solid rgba(210, 59, 46, 0.24);
}

.poc-dv .is-invalide .poc-dv__input,
.poc-dv .poc-dv__input.is-invalide {
	border-color: var(--poc-dv-err);
}

/* =====================================================================
   9. RÉCAPITULATIF
   Liste simple : libellé au-dessus, valeur en dessous. Aucune grille à
   deux pistes, donc aucun risque qu'une valeur longue élargisse le bloc.
   ===================================================================== */
.poc-dv .poc-dv__recap {
	width: 100%;
	max-width: 100%;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--poc-dv-creme);
	border: 1px solid var(--poc-dv-carte-bd);
}

.poc-dv .poc-dv__recap li {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
	padding: 5px 0;
	border-bottom: 1px solid rgba(78, 78, 76, 0.07);
}

.poc-dv .poc-dv__recap li:last-child {
	border-bottom: 0;
}

.poc-dv .poc-dv__recap-cle {
	flex: 0 0 auto;
	color: var(--poc-dv-gris);
	font-size: 12.5px;
}

.poc-dv .poc-dv__recap-val {
	flex: 1 1 140px;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* =====================================================================
   10. CONSENTEMENT ET MENTION
   ===================================================================== */
.poc-dv .poc-dv__consent {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--poc-dv-gris);
}

.poc-dv .poc-dv__consent input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.poc-dv .poc-dv__consent-case {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-right: 11px !important;
	border: 1.5px solid var(--poc-dv-ch-bd);
	border-radius: 6px;
	background: var(--poc-dv-ch-bg);
	transition: background 180ms var(--poc-dv-ease), border-color 180ms var(--poc-dv-ease);
}

.poc-dv .poc-dv__consent input:checked + .poc-dv__consent-case {
	background: var(--poc-dv-or);
	border-color: var(--poc-dv-or);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
}

.poc-dv .poc-dv__consent input:focus-visible + .poc-dv__consent-case {
	outline: 2px solid var(--poc-dv-or);
	outline-offset: 2px;
}

.poc-dv .poc-dv__consent-txt {
	min-width: 0;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__mention {
	width: 100%;
	max-width: 100%;
	margin: 0 0 16px;
	border-radius: 10px;
	background: var(--poc-dv-creme);
	color: var(--poc-dv-gris);
}

.poc-dv .poc-dv__mention-titre {
	list-style: none;
	cursor: pointer;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.poc-dv .poc-dv__mention-titre::-webkit-details-marker {
	display: none;
}

.poc-dv .poc-dv__mention-titre::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
	color: var(--poc-dv-or);
}

.poc-dv .poc-dv__mention[open] .poc-dv__mention-titre::after {
	content: '\2212';
}

.poc-dv .poc-dv__mention-corps {
	padding: 0 14px 12px;
	font-size: 11.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.poc-dv .poc-dv__mention a {
	color: var(--poc-dv-or);
	font-weight: 700;
	text-decoration: underline;
}

/* =====================================================================
   11. BOUTONS
   ===================================================================== */
.poc-dv .poc-dv__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	margin-top: 20px;
}

.poc-dv .poc-dv__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--poc-dv-bt-py) var(--poc-dv-bt-px);
	border-radius: var(--poc-dv-bt-radius);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
	transition: background 220ms var(--poc-dv-ease),
		color 220ms var(--poc-dv-ease),
		border-color 220ms var(--poc-dv-ease),
		box-shadow 220ms var(--poc-dv-ease);
}

.poc-dv .poc-dv__btn--retour {
	margin-right: auto;
	border: 1.5px solid var(--poc-dv-nav-bd);
	background: transparent;
	color: var(--poc-dv-nav-txt);
}

.poc-dv .poc-dv__btn--retour:hover,
.poc-dv .poc-dv__btn--retour:focus-visible {
	background: var(--poc-dv-nav-bg-h);
	border-color: var(--poc-dv-nav-bg-h);
	color: var(--poc-dv-nav-txt-h);
}

.poc-dv .poc-dv__btn--action {
	border: 1.5px solid transparent;
	background: linear-gradient(135deg, var(--poc-dv-bt-bg1), var(--poc-dv-bt-bg2));
	color: var(--poc-dv-bt-txt);
	box-shadow: 0 10px 24px -12px rgba(162, 26, 24, 0.85);
}

.poc-dv .poc-dv__btn--action:hover,
.poc-dv .poc-dv__btn--action:focus-visible {
	background: linear-gradient(135deg, var(--poc-dv-bt-bg1-h), var(--poc-dv-bt-bg2-h));
	color: var(--poc-dv-bt-txt-h);
}

.poc-dv .poc-dv__btn:focus-visible {
	outline: 2px solid var(--poc-dv-or);
	outline-offset: 2px;
}

.poc-dv .poc-dv__btn[disabled] {
	opacity: 0.65;
	cursor: wait;
}

.poc-dv .poc-dv__spinner {
	display: none;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	margin-left: 9px !important;
	border: 2px solid rgba(78, 78, 76, 0.28);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: poc-dv-tourne 700ms linear infinite;
}

.poc-dv .is-envoi .poc-dv__spinner {
	display: block;
}

@keyframes poc-dv-tourne {
	to {
		transform: rotate(360deg);
	}
}

/* =====================================================================
   12. RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.poc-dv {
		--poc-dv-pad-x: 26px;
		--poc-dv-cols: 2;
	}
}

@media (max-width: 720px) {
	.poc-dv .poc-dv__duo {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.poc-dv {
		--poc-dv-pad-x: 16px;
		--poc-dv-pad-y: 24px;
		--poc-dv-bt-px: 18px;
		/* Deux colonnes sur mobile, même si le réglage Elementor
		   n'a jamais été touché. */
		--poc-dv-cols: 2;
	}

	.poc-dv .poc-dv__cartes {
		gap: 8px;
	}

	.poc-dv .poc-dv__carte-in {
		padding: 11px 10px;
	}

	.poc-dv .poc-dv__carte-ico {
		margin-right: 8px !important;
		font-size: 16px;
	}

	.poc-dv .poc-dv__carte-txt {
		font-size: 12.5px;
		line-height: 1.25;
	}

	.poc-dv .poc-dv__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.poc-dv .poc-dv__btn {
		width: 100%;
		margin-right: 0;
	}

	/* Sous 560 px, seuls les numéros d'étape restent. */
	.poc-dv .poc-dv__etape-nom {
		display: none;
	}
}

@media (max-width: 339px) {
	.poc-dv {
		--poc-dv-cols: 1;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	.poc-dv .poc-dv__etape-nom {
		font-size: 12px;
	}
}

/* =====================================================================
   13. POPUP (hors du bloc, en fin de body)
   ===================================================================== */
.poc-dvp {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	font-family: inherit;
}

.poc-dvp__voile {
	position: absolute;
	inset: 0;
	background: var(--poc-dv-pop-voile);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: poc-dvp-voile 320ms var(--poc-dv-ease);
}

@keyframes poc-dvp-voile {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.poc-dvp__panneau {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	overflow-x: clip;
	padding: 40px 30px 30px;
	border-radius: 24px;
	background: var(--poc-dv-pop-bg);
	color: var(--poc-dv-encre);
	text-align: center;
	box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	animation: poc-dvp-entree 520ms var(--poc-dv-ease);
}

/* Liseré rouge en tête du panneau : la signature de la marque. */
.poc-dvp__panneau::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--poc-dv-or-clair),
		var(--poc-dv-or),
		var(--poc-dv-or-clair)
	);
}

@keyframes poc-dvp-entree {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(0.95);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Les blocs montent l'un après l'autre. */
.poc-dvp__sceau,
.poc-dvp__titre,
.poc-dvp__texte,
.poc-dvp__suite,
.poc-dvp__tel,
.poc-dvp__btn {
	animation: poc-dvp-monte 560ms var(--poc-dv-ease) backwards;
}

.poc-dvp__titre {
	animation-delay: 380ms;
}
.poc-dvp__texte {
	animation-delay: 460ms;
}
.poc-dvp__suite {
	animation-delay: 540ms;
}
.poc-dvp__tel {
	animation-delay: 620ms;
}
.poc-dvp__btn {
	animation-delay: 700ms;
}

@keyframes poc-dvp-monte {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Le sceau : un halo rouge s'épanouit, l'anneau se trace, puis la coche.
 * C'est le cachet que l'artisan appose sur la demande.
 */
.poc-dvp__sceau {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto 22px;
	color: var(--poc-dv-pop-sceau);
}

.poc-dvp__halo {
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(162, 26, 24, 0.26) 0%,
		rgba(162, 26, 24, 0.08) 45%,
		rgba(162, 26, 24, 0) 70%
	);
	transform: scale(0.4);
	opacity: 0;
	animation: poc-dvp-halo 1100ms var(--poc-dv-ease) 260ms forwards;
}

@keyframes poc-dvp-halo {
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.poc-dvp__sceau svg {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.poc-dvp__anneau {
	stroke-dasharray: 327;
	stroke-dashoffset: 327;
	transform-origin: 50% 50%;
	transform: rotate(-90deg);
	opacity: 0.45;
	animation: poc-dvp-trace 900ms var(--poc-dv-ease) 120ms forwards;
}

.poc-dvp__check {
	stroke-dasharray: 76;
	stroke-dashoffset: 76;
	animation: poc-dvp-trace 520ms var(--poc-dv-ease) 620ms forwards;
}

@keyframes poc-dvp-trace {
	to {
		stroke-dashoffset: 0;
	}
}

.poc-dvp__titre {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.22;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.poc-dvp__texte {
	color: var(--poc-dv-gris);
	font-size: 14.5px;
	line-height: 1.6;
	margin-bottom: 22px;
	overflow-wrap: anywhere;
}

/* --- La suite du parcours --- */
.poc-dvp__suite {
	text-align: left;
	padding: 16px 18px;
	margin-bottom: 16px;
	border-radius: 16px;
	background: var(--poc-dv-creme);
}

.poc-dvp__suite-titre {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--poc-dv-gris);
	margin-bottom: 12px;
}

.poc-dvp__etapes {
	display: block;
}

.poc-dvp__etape {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding-bottom: 13px;
}

.poc-dvp__etape:last-child {
	padding-bottom: 0;
}

/* Le fil qui relie les pastilles. */
.poc-dvp__etape:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 24px;
	bottom: 2px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(
		to bottom,
		var(--poc-dv-or-clair),
		rgba(162, 26, 24, 0.18)
	);
}

.poc-dvp__puce {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	margin-right: 12px !important;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-dv-or-clair), var(--poc-dv-or));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 4px 10px -4px rgba(162, 26, 24, 0.9);
}

.poc-dvp__etape-txt {
	min-width: 0;
	padding-top: 2px;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--poc-dv-encre);
	overflow-wrap: anywhere;
}

/* --- Bloc téléphone --- */
.poc-dvp__tel {
	display: block;
	padding: 14px 16px;
	margin-bottom: 20px;
	border-radius: 16px;
	background: var(--poc-dv-encre);
	text-decoration: none;
	transition: transform 220ms var(--poc-dv-ease), box-shadow 220ms var(--poc-dv-ease);
}

.poc-dvp__tel:hover,
.poc-dvp__tel:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.7);
}

.poc-dvp__tel-label {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 3px;
}

.poc-dvp__tel-num {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: var(--poc-dv-or-clair);
	letter-spacing: 0.01em;
}

.poc-dvp__btn {
	display: block;
	width: 100%;
	padding: var(--poc-dv-bt-py) var(--poc-dv-bt-px);
	border-radius: var(--poc-dv-bt-radius);
	background: linear-gradient(135deg, var(--poc-dv-bt-bg1), var(--poc-dv-bt-bg2));
	color: var(--poc-dv-bt-txt);
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 12px 26px -12px rgba(162, 26, 24, 0.9);
	transition: background 220ms var(--poc-dv-ease), transform 220ms var(--poc-dv-ease);
}

.poc-dvp__btn:hover,
.poc-dvp__btn:focus-visible {
	background: linear-gradient(135deg, var(--poc-dv-bt-bg1-h), var(--poc-dv-bt-bg2-h));
	color: var(--poc-dv-bt-txt-h);
	transform: translateY(-2px);
}

@media (max-width: 400px) {
	.poc-dvp__panneau {
		padding: 32px 20px 24px;
	}
	.poc-dvp__sceau {
		width: 78px;
		height: 78px;
		margin-bottom: 16px;
	}
	.poc-dvp__titre {
		font-size: 20px;
	}
}

/* =====================================================================
   14. ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.poc-dv *,
	.poc-dv *::before,
	.poc-dv *::after,
	.poc-dvp *,
	.poc-dvp *::before,
	.poc-dvp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.poc-dvp__anneau,
	.poc-dvp__check {
		stroke-dashoffset: 0;
	}

	.poc-dvp__halo {
		opacity: 1;
		transform: scale(1);
	}
}