/**
 * JDK Concept - questionnaire en fenetre modale.
 *
 * Tout est borne par .jdk-qm : la feuille ne peut rien casser ailleurs.
 *
 * Les trois ors du kit, a ne pas confondre :
 *   --or        #D2AF87  les APLATS (boutons, pastille retenue). 8,37:1 sur l ardoise.
 *   --or-survol #E0C4A3  le survol des aplats.
 *   --or-texte  #8F5E25  le TEXTE sur fond clair. #D2AF87 n y vaudrait que 2,05:1.
 */

.jdk-qm {
	--encre: #1B1B1B;
	--papier: #FAF8F5;
	--filet: #EAE4DA;
	--or: #D2AF87;
	--or-survol: #E0C4A3;
	--or-texte: #8F5E25;
	--gris: #65696D;
	--titre: "Oswald", sans-serif;
	--corps: "Montserrat", sans-serif;
	--courbe: cubic-bezier(.2, .75, .2, 1);
}

.jdk-qm *,
.jdk-qm *::before,
.jdk-qm *::after { box-sizing: border-box }

/**
 * ⛔⛔⛔ L attribut hidden du navigateur ne pose qu un display:none de
 * feuille utilisateur : la moindre regle d auteur qui declare un display
 * le bat. .jdk-qm__opt est en display:flex, et les options des autres
 * familles restaient donc VISIBLES alors que hidden etait bien pose.
 * Cette regle, en (0,2,0), passe devant toutes les regles a une classe.
 */
.jdk-qm [hidden] { display: none }

/* ==========================================================================
   LE VOILE
   ========================================================================== */

.jdk-qm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	background: rgba(14, 13, 12, .74);
	-webkit-backdrop-filter: blur(7px) saturate(.88);
	backdrop-filter: blur(7px) saturate(.88);
	opacity: 0;
	transition: opacity .22s var(--courbe);
	font-family: var(--corps);
	font-size: 16px;
	line-height: 1.5;
	color: var(--encre);
}

.jdk-qm.est-ouverte { display: grid; place-items: center; padding: 24px 16px }
.jdk-qm.est-visible { opacity: 1 }

/* ==========================================================================
   LA FENETRE
   ⛔ grid-template-rows:minmax(0,1fr) est OBLIGATOIRE : sans lui la rangee
   prend la hauteur de son contenu, max-height ne fait que la ROGNER, et le
   pied part hors de la fenetre sans qu aucune zone ne defile.
   ========================================================================== */

.jdk-qm__boite {
	width: min(1060px, 100%);
	max-height: min(860px, 92svh);
	display: grid;
	grid-template-columns: 304px 1fr;
	grid-template-rows: minmax(0, 1fr);
	background: var(--papier);
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 44px 120px -24px rgba(10, 9, 8, .66);
	transform: translateY(18px) scale(.985);
	opacity: 0;
	transition: transform .3s var(--courbe), opacity .3s var(--courbe);
}

.jdk-qm.est-visible .jdk-qm__boite { transform: none; opacity: 1 }

/* ==========================================================================
   LE RAIL
   ========================================================================== */

.jdk-qm__rail {
	position: relative;
	background: var(--encre);
	color: #fff;
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	overflow-y: auto;
}

.jdk-qm__sur {
	font-family: var(--titre); font-weight: 600; text-transform: uppercase;
	letter-spacing: .14em; font-size: .72rem; color: var(--or); margin: 0;
}
.jdk-qm__palier {
	font-family: var(--titre); font-weight: 500; font-size: 1.56rem;
	line-height: 1.14; color: #fff; margin: 0;
}
.jdk-qm__compte { font-size: .84rem; color: #C9C4BD; margin: 0 }
.jdk-qm__compte b { color: #fff; font-weight: 600 }

.jdk-qm__jauge { list-style: none; display: flex; gap: 6px; margin: 2px 0 0; padding: 0 }
.jdk-qm__jauge li { height: 3px; flex: 1; background: #38352F; transition: background-color .3s var(--courbe) }
.jdk-qm__jauge li.est-faite { background: var(--or) }

.jdk-qm__note {
	margin: auto 0 0; font-size: .8rem; line-height: 1.6; color: #B6B0A8;
	border-top: 1px solid #312E29; padding-top: 16px;
}
.jdk-qm__note[hidden] { display: none }

/* ---------- le recapitulatif ---------- */

.jdk-qm__recap {
	margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid #312E29;
	min-height: 0; display: flex; flex-direction: column;
}
.jdk-qm__recap[hidden] { display: none }
.jdk-qm__recap-t {
	font-family: var(--titre); font-weight: 600; text-transform: uppercase;
	letter-spacing: .14em; font-size: .66rem; color: var(--or); margin: 0 0 10px;
}
.jdk-qm__bascule { display: none }
.jdk-qm__liste { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto }

.jdk-qm__ligne {
	display: block; width: 100%; text-align: left; cursor: pointer;
	background: transparent; border: 0; border-bottom: 1px solid #2A2722;
	border-radius: 0; padding: 8px 4px; font-family: var(--corps);
	transition: background-color .16s var(--courbe);
}
/* qui neutralise redeclare : le reset du theme peint les boutons en rose au
   survol ET au focus. Les deux etats sont repris, partout dans cette feuille. */
.jdk-qm__ligne:hover,
.jdk-qm__ligne:focus { background: #262320; color: inherit }
.jdk-qm__ligne:focus-visible { outline: 2px solid var(--or); outline-offset: -2px }
.jdk-qm__cle { display: block; font-size: .7rem; color: #B6B0A8; margin-bottom: 2px }
.jdk-qm__val { display: block; font-size: .86rem; color: #fff; line-height: 1.35; overflow-wrap: anywhere }

/* ==========================================================================
   LE CORPS
   ========================================================================== */

.jdk-qm__corps { display: flex; flex-direction: column; min-width: 0; min-height: 0 }

.jdk-qm__tete {
	flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between;
	gap: 20px; padding: 28px 34px 19px; border-bottom: 1px solid var(--filet);
}
.jdk-qm__titre {
	font-family: var(--titre); font-weight: 500; font-size: clamp(20px, 2.3vw, 27px);
	line-height: 1.22; color: var(--encre); margin: 0;
}
.jdk-qm__etoile { color: var(--or-texte); font-weight: 400 }

.jdk-qm__fermer {
	flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
	cursor: pointer; background: transparent; border: 1px solid var(--filet);
	/* ⛔ padding:0 OBLIGATOIRE : le theme pose 8px 16px sur tout bouton. La
	   boite interieure tombait a 6,4 px, la croix de 15 px debordait, et
	   place-items:center bascule alors sur le bord. 8,6 px de decalage. */
	padding: 0; line-height: 0;
	border-radius: 0; color: var(--gris);
	transition: color .2s var(--courbe), border-color .2s var(--courbe);
}
.jdk-qm__fermer:hover,
.jdk-qm__fermer:focus { background: transparent; color: var(--encre); border-color: var(--encre) }
.jdk-qm__fermer:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px }

.jdk-qm__vue { flex: 1 1 auto; overflow-y: auto; padding: 22px 34px 28px; min-height: 0 }

.jdk-qm__ecran {
	opacity: 0; transform: translateY(10px);
	transition: opacity .24s var(--courbe), transform .24s var(--courbe);
}
.jdk-qm__ecran.est-la { opacity: 1; transform: none }
.jdk-qm__ecran[hidden] { display: none }
/* l ecran recoit le focus au changement d etape : repere pour les lecteurs
   d ecran, jamais un lisere a montrer */
.jdk-qm__ecran:focus { outline: none }

/* ---------- le bandeau de brouillon ---------- */

.jdk-qm__brouillon {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
	background: #F4EDDE; border: 1px solid #E4D8BE; padding: 12px 16px;
	margin: 0 0 20px; font-size: .86rem; line-height: 1.5; color: var(--encre);
}
.jdk-qm__brouillon[hidden] { display: none }
.jdk-qm__brouillon p { margin: 0 }

/* ==========================================================================
   LES CARTES PHOTO
   ========================================================================== */

.jdk-qm__cartes {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0;
}
.jdk-qm__cartes > legend {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.jdk-qm__carte {
	position: relative; display: block; cursor: pointer; background: var(--encre);
	height: clamp(168px, 24svh, 258px); overflow: hidden;
	transition: box-shadow .2s var(--courbe);
}
.jdk-qm__carte input { position: absolute; opacity: 0; pointer-events: none }
.jdk-qm__photo {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .55s var(--courbe), filter .3s var(--courbe);
}
.jdk-qm__carte:hover .jdk-qm__photo { transform: scale(1.045) }

/* Voile en VRAI degrade, cinq paliers, mesure contre le pixel le plus CLAIR.
   ⛔ Les paliers sont en PIXELS depuis le bas, pas en pourcentage : la carte
   change de hauteur avec clamp(), et en pourcentage le titre remontait dans
   le degrade jusqu a 4,81:1 sur les cartes courtes. En pixels, le voile sous
   le texte est le meme a 150, 168 ou 258 px de carte : mesure 12,33:1. */
.jdk-qm__voile {
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		rgba(12, 12, 12, .94) 0,
		rgba(12, 12, 12, .90) 78px,
		rgba(12, 12, 12, .72) 112px,
		rgba(12, 12, 12, .34) 148px,
		rgba(12, 12, 12, 0) 185px);
}
.jdk-qm__carte-txt { position: absolute; inset: auto 0 0 0; padding: 18px 20px 19px }
.jdk-qm__carte-titre {
	display: block; font-family: var(--titre); font-weight: 500; font-size: 1.18rem;
	line-height: 1.2; color: #fff; margin: 0 0 5px;
}
.jdk-qm__carte-resume { display: block; font-size: .84rem; line-height: 1.5; color: #E6E2DC; margin: 0 }

.jdk-qm__coche {
	position: absolute; display: grid; place-items: center;
	background: var(--or); color: var(--encre); opacity: 0;
	transition: opacity .2s var(--courbe), transform .22s var(--courbe);
}
.jdk-qm__carte .jdk-qm__coche { top: 14px; right: 14px; width: 30px; height: 30px; transform: scale(.6) }

/* ⛔ :focus-within ferait porter le cadre d encre a la simple arrivee du focus,
   et l option se lirait comme DEJA choisie alors que Continuer est inactif.
   Le cadre de focus est reserve au clavier. */
.jdk-qm__carte:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--encre) }
.jdk-qm__carte.est-prise { box-shadow: 0 0 0 3px var(--encre) }
.jdk-qm__carte.est-prise .jdk-qm__coche { opacity: 1; transform: none }
.jdk-qm__carte.est-prise .jdk-qm__photo { filter: saturate(1.06) }

/* ==========================================================================
   LES BLOCS DE QUESTION
   ========================================================================== */

.jdk-qm__bloc { margin: 0; padding: 0; border: 0; min-width: 0 }
.jdk-qm__bloc + .jdk-qm__bloc { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--filet) }
.jdk-qm__bloc[hidden] { display: none }
.jdk-qm__intitule {
	font-family: var(--titre); font-weight: 500; font-size: 1.1rem; line-height: 1.3;
	color: var(--encre); margin: 0 0 12px; padding: 0;
}
.jdk-qm__aide { font-size: .86rem; line-height: 1.55; color: var(--gris); margin: -4px 0 12px }
.jdk-qm__cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }

/* ---------- les tuiles ---------- */

.jdk-qm__choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px }
.jdk-qm__choix--serre { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) }

.jdk-qm__opt {
	position: relative; display: flex; align-items: center; min-height: 56px;
	padding: 12px 48px 12px 18px; background: #fff; border: 1px solid var(--filet);
	cursor: pointer;
	transition: border-color .18s var(--courbe), box-shadow .18s var(--courbe);
}
.jdk-qm__opt input { position: absolute; opacity: 0; pointer-events: none }
.jdk-qm__opt-txt {
	font-family: var(--titre); font-weight: 500; font-size: 1.02rem;
	line-height: 1.25; color: var(--encre);
}
.jdk-qm__opt:hover { border-color: #CDC3B3 }
.jdk-qm__opt:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--encre); border-color: var(--encre) }
.jdk-qm__opt.est-prise { box-shadow: 0 0 0 2px var(--encre); border-color: var(--encre) }
.jdk-qm__opt .jdk-qm__coche { top: 50%; right: 14px; width: 24px; height: 24px; transform: translateY(-50%) scale(.6) }
.jdk-qm__opt.est-prise .jdk-qm__coche { opacity: 1; transform: translateY(-50%) scale(1) }

/* ---------- les champs ---------- */

.jdk-qm__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)); gap: 16px }
.jdk-qm__precis { margin: 14px 0 0 }
.jdk-qm__precis[hidden] { display: none }
.jdk-qm__etiq { display: block; font-size: .86rem; color: var(--gris); margin: 0 0 7px }

/* ⛔ .jdk-qm .jdk-qm__champ, pas .jdk-qm__champ seul : le theme declare un
   padding sur input[type=...], en (0,1,1), qui passe devant une simple
   classe. Mesure avant correction : 8px 16px au lieu de 14px 16px. */
.jdk-qm .jdk-qm__champ {
	display: block; width: 100%; max-width: 440px; font-family: var(--corps);
	font-size: 1rem; line-height: 1.5; color: var(--encre); background: #fff;
	border: 1px solid var(--filet); border-radius: 0; padding: 14px 16px; min-height: 52px;
}
.jdk-qm__duo .jdk-qm__champ { max-width: none }
.jdk-qm__champ--long { max-width: none; min-height: 112px; resize: vertical; line-height: 1.6 }
.jdk-qm__champ:hover { border-color: #CDC3B3 }
.jdk-qm__champ:focus { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre) }

select.jdk-qm__champ {
	-webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='%231B1B1B' stroke-width='1.6'/></svg>");
	background-repeat: no-repeat; background-position: right 16px center;
}

/* ---------- le telephone : indicatif puis numero ---------- */

.jdk-qm__tel { display: flex; align-items: stretch; max-width: 440px }
/* ⛔ (0,2,0) comme pour .jdk-qm__champ : le theme declare un padding sur
   les controles de formulaire et passe devant une simple classe. */
.jdk-qm .jdk-qm__indicatif {
	flex: 0 0 auto; max-width: 152px;
	font-family: var(--corps); font-size: 1rem; line-height: 1.5; color: var(--encre);
	background: #fff; border: 1px solid var(--filet); border-right: 0; border-radius: 0;
	padding: 14px 32px 14px 16px; min-height: 52px; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='%231B1B1B' stroke-width='1.6'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center;
}
.jdk-qm .jdk-qm__indicatif:hover { border-color: #CDC3B3 }
.jdk-qm .jdk-qm__indicatif:focus { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre) }
.jdk-qm .jdk-qm__tel .jdk-qm__champ { flex: 1 1 auto; max-width: none }

/* ---------- les cases a cocher ---------- */

.jdk-qm__case {
	position: relative; display: flex; align-items: flex-start; gap: 13px; cursor: pointer;
	padding: 14px 16px; background: #fff; border: 1px solid var(--filet);
	transition: border-color .18s var(--courbe), box-shadow .18s var(--courbe);
}
.jdk-qm__case + .jdk-qm__case { margin-top: 10px }
.jdk-qm__case:hover { border-color: #CDC3B3 }
.jdk-qm__case:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--encre); border-color: var(--encre) }
.jdk-qm__case input { position: absolute; opacity: 0; pointer-events: none }
.jdk-qm__boite-case {
	flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; display: grid;
	place-items: center; background: #fff; border: 1px solid #B4AA9A; color: var(--encre);
	transition: background-color .16s var(--courbe), border-color .16s var(--courbe);
}
.jdk-qm__boite-case svg {
	opacity: 0; transform: scale(.55);
	transition: opacity .16s var(--courbe), transform .18s var(--courbe);
}
.jdk-qm__case input:checked ~ .jdk-qm__boite-case { background: var(--or); border-color: var(--or) }
.jdk-qm__case input:checked ~ .jdk-qm__boite-case svg { opacity: 1; transform: none }
.jdk-qm__case-txt { font-size: .9rem; line-height: 1.58; color: var(--encre) }
.jdk-qm__case-txt a { color: var(--or-texte); text-decoration: underline; text-underline-offset: 2px }
.jdk-qm__case-txt a:hover,
.jdk-qm__case-txt a:focus { color: var(--encre) }

/* ---------- l alerte de coherence ---------- */

.jdk-qm__alerte {
	margin: 12px 0 0; max-width: 440px; padding: 11px 14px;
	font-size: .86rem; line-height: 1.5; color: #7E2114;
	background: #FBEDEA; border: 1px solid #E8CCC5;
}

/* ---------- le pot de miel ---------- */

.jdk-qm__piege { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden }

/* ==========================================================================
   LES SORTIES
   ========================================================================== */

.jdk-qm__fin { max-width: 54ch }
.jdk-qm__merci {
	font-family: var(--titre); font-weight: 500; font-size: 1.34rem;
	line-height: 1.25; margin: 0 0 12px;
}
.jdk-qm__texte { color: var(--gris); line-height: 1.7; margin: 0 0 10px }
.jdk-qm__texte[hidden] { display: none }
.jdk-qm__relance { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--filet) }
.jdk-qm__relance .jdk-qm__texte { margin-bottom: 18px }
.jdk-qm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px }

/* ==========================================================================
   LE PIED ET LES BOUTONS
   ========================================================================== */

.jdk-qm__pied {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap; padding: 18px 34px; border-top: 1px solid var(--filet);
}
.jdk-qm__pied[hidden] { display: none }
.jdk-qm__legende { margin: 0; font-size: .8rem; color: var(--gris) }
.jdk-qm__boutons { display: flex; align-items: center; gap: 6px; margin-left: auto }

/* La charte de la maison : Oswald capitales, interlettrage .14em, angles droits. */
.jdk-qm__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	cursor: pointer; font-family: var(--titre); font-weight: 600; font-size: .92rem;
	text-transform: uppercase; letter-spacing: .14em; padding: 15px 36px;
	border: 1px solid var(--or); border-radius: 0;
	background: var(--or); color: var(--encre);
	transition: background-color .2s var(--courbe), border-color .2s var(--courbe), transform .2s var(--courbe);
}
.jdk-qm__btn:hover,
.jdk-qm__btn:focus { background: var(--or-survol); border-color: var(--or-survol); color: var(--encre) }
.jdk-qm__btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px }
.jdk-qm__btn:active { transform: translateY(1px) }
/* #A29A90 ne valait que 2,62:1 sur le papier : le gris de la maison en vaut 5,22 */
.jdk-qm__btn[disabled] { background: transparent; border-color: var(--filet); color: var(--gris); cursor: not-allowed }
.jdk-qm__btn[disabled]:hover,
.jdk-qm__btn[disabled]:focus { background: transparent; border-color: var(--filet); color: var(--gris) }
.jdk-qm__btn[hidden] { display: none }

.jdk-qm__btn--nu { background: transparent; border-color: transparent; color: var(--gris); padding: 15px 14px; letter-spacing: .1em }
.jdk-qm__btn--nu:hover,
.jdk-qm__btn--nu:focus { background: transparent; border-color: transparent; color: var(--encre) }

.jdk-qm__lien {
	display: inline-block; font-family: var(--corps); font-size: .86rem; color: var(--gris);
	background: none; border: 0; padding: 4px 0; cursor: pointer;
	text-decoration: underline; text-underline-offset: 3px;
}
.jdk-qm__lien:hover,
.jdk-qm__lien:focus { color: var(--encre); background: none }
.jdk-qm__lien:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px }

.jdk-qm__erreur { margin: 10px 0 0; font-size: .86rem; color: #8A2B1F; line-height: 1.5 }
.jdk-qm__erreur[hidden] { display: none }

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 860px) {

	.jdk-qm__boite { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: 94svh }

	.jdk-qm__rail {
		padding: 16px 22px 14px; gap: 9px;
		display: grid; grid-template-columns: 1fr auto; align-items: baseline; overflow: visible;
	}
	.jdk-qm__sur,
	.jdk-qm__note { display: none }
	.jdk-qm__palier { font-size: 1.18rem }
	.jdk-qm__compte { justify-self: end; font-size: .8rem }
	.jdk-qm__jauge { grid-column: 1 / -1; margin: 3px 0 0 }

	.jdk-qm__recap { grid-column: 1 / -1; display: block; margin: 6px 0 0; padding: 10px 0 0 }
	.jdk-qm__recap-t { display: none }
	.jdk-qm__bascule {
		display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
		background: transparent; border: 0; border-radius: 0; padding: 6px 2px;
		font-family: var(--titre); font-weight: 600; text-transform: uppercase;
		letter-spacing: .14em; font-size: .68rem; color: var(--or);
		transition: color .16s var(--courbe);
	}
	.jdk-qm__bascule:hover,
	.jdk-qm__bascule:focus { background: transparent; color: #F0DCC3 }
	.jdk-qm__bascule:focus-visible { outline: 2px solid var(--or); outline-offset: 2px }
	.jdk-qm__n { margin-left: auto; font-family: var(--corps); font-weight: 600; letter-spacing: 0; font-size: .72rem; color: #fff }
	.jdk-qm__chev { flex: 0 0 auto; transition: transform .2s var(--courbe) }
	.jdk-qm__recap.est-ouvert .jdk-qm__chev { transform: rotate(180deg) }

	.jdk-qm__liste { display: none }
	/* ⛔ la liste PASSE PAR-DESSUS le contenu, elle ne le pousse pas : depliee
	   dans le flux elle faisait tomber la zone de questions a 111 px. */
	.jdk-qm__recap.est-ouvert .jdk-qm__liste {
		display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 3;
		background: var(--encre); border-top: 1px solid #312E29;
		margin: 0; padding: 6px 22px 14px; max-height: 52svh; overflow-y: auto;
		box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .75);
	}

	.jdk-qm__tete { padding: 20px 22px 15px }
	.jdk-qm__titre { font-size: 1.22rem }
	.jdk-qm__vue { padding: 18px 22px 20px }
	.jdk-qm__cartes { grid-template-columns: 1fr; gap: 14px }
	.jdk-qm__carte { height: 172px }
	.jdk-qm__choix,
	.jdk-qm__duo { grid-template-columns: 1fr }
	.jdk-qm__choix--serre { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) }

	.jdk-qm__pied { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 14px 22px }
	.jdk-qm__legende { text-align: center; font-size: .76rem }
	.jdk-qm__boutons { margin-left: 0 }
	.jdk-qm__boutons .jdk-qm__btn { flex: 1 1 auto }
	.jdk-qm__actions { flex-direction: column; align-items: stretch }
	.jdk-qm__actions .jdk-qm__btn { width: 100% }
}

/* ============================================================
   LE PIED SOUS 560 px
   Mesure du 10/11 a 375 px : Retour (100) + 6 + Envoyer ma
   demande (288) = 394 px pour 299 px disponibles. Le groupe
   .jdk-qm__boutons restait en ligne, le bouton sortait du
   cadre. La bascule du pied ne portait que sur le pied.
   ============================================================ */

@media (max-width: 560px) {

	.jdk-qm__boutons { width: 100%; flex-direction: column; gap: 10px }
	.jdk-qm__boutons .jdk-qm__btn { width: 100%; justify-content: center }
}

@media (prefers-reduced-motion: reduce) {
	.jdk-qm *,
	.jdk-qm *::before,
	.jdk-qm *::after { transition-duration: 1ms !important; animation-duration: 1ms !important }
	.jdk-qm__carte:hover .jdk-qm__photo { transform: none }
}