/* ==========================================================================
   Questionnaire projet JDK Concept — habillage clair
   Palette du kit : ardoise #1B1B1B, or #D2AF87, neige #FFFAFA.
   ⛔ Sur fond clair, l or du kit ne passe pas en texte : #D2AF87 mesure
   2,05:1 sur blanc. Le texte doré utilise donc #8F5E25 (5,22:1 sur le papier
   #FAF8F5), et #D2AF87 ne sert plus qu a des aplats décoratifs.
   ⛔ Le questionnaire DECLARE son fond. Pose sur une page blanche, un
   composant teinte pour le sombre disparait : releve du 19/10/2026, titre a
   1,03:1 et texte courant a 1,46:1.
   ========================================================================== */

/* Le titre et le chapo de la page vivent dans le contenu, pas dans le
   gabarit : on ne les deplace pas, on aligne leur enveloppe sur celle du
   panneau. La classe `jdk-a-questionnaire` n est posee que sur les pages qui
   portent le shortcode, les autres ne bougent pas. */
.jdk-a-questionnaire .site-main > *:not(.jdk-q) {
	max-width: 920px;
	margin-inline: auto;
}

.jdk-q,
.jdk-q * { box-sizing: border-box; }

.jdk-q {
	--encre: #1B1B1B;
	--texte: #44474A;
	--discret: #65696D; /* 5,22:1 sur le papier ; #6E7276 ne donnait que 4,57:1 */
	--papier: #FAF8F5;
	--filet: #EAE4DA;
	/* ⛔ L or de la charte, #D2AF87, sert aux APLATS (boutons, etats retenus) :
	   sur #1B1B1B il mesure 8,37:1. En TEXTE sur fond clair il ne vaut que
	   2,05:1, d ou --or-texte, le meme or assombri, a 5,22:1. */
	--or: #D2AF87;
	--or-survol: #E0C4A3;
	--or-texte: #8F5E25;
	--champ: #FFFFFF;

	position: relative;
	max-width: 920px;
	margin-inline: auto;
	margin-block: clamp(36px, 6vw, 80px);
	padding: clamp(28px, 4.5vw, 64px);
	border: 1px solid var(--filet);
	border-radius: 0;
	background: var(--papier);
	box-shadow: 0 24px 60px -34px rgba(27, 27, 27, .34);
	font-family: "Montserrat", sans-serif;
	color: var(--texte);
}

/* le piege a robots ne doit jamais etre vu ni atteint au clavier */
.jdk-q__piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- avancement --- */
.jdk-q__barre {
	height: 2px;
	margin-bottom: 40px;
	background: var(--filet);
	overflow: hidden;
}

.jdk-q__barre i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--or-texte);
	transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   Ecrans
   ========================================================================== */

/* Sans script, rien ne pose hidden : les ecrans du palier 1 s empilent et le
   formulaire reste utilisable. Avec script, un seul ecran est visible. */
.jdk-q [hidden] { display: none !important; }

.jdk-q__ecran { margin: 0 0 48px; }

.jdk-q[data-pilote] .jdk-q__ecran {
	margin: 0;
	animation: jdk-q-entree .34s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes jdk-q-entree {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jdk-q[data-pilote] .jdk-q__ecran { animation: none; }
	.jdk-q__barre i { transition: none; }
	.jdk-q__carte label,
	.jdk-q__photo { transition: none !important; }
}

.jdk-q__rang {
	margin: 0 0 12px;
	font-family: "Oswald", sans-serif;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--or-texte);
}

.jdk-q__question {
	margin: 0 0 10px;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--encre);
}

.jdk-q__question label { cursor: default; }

.jdk-q__requis {
	color: var(--or-texte);
	font-weight: 400;
}

.jdk-q__aide {
	margin: 0 0 24px;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--discret);
}

.jdk-q__question + .jdk-q__choix,
.jdk-q__question + .jdk-q__cartes,
.jdk-q__question + .jdk-q__mesure,
.jdk-q__question + .jdk-q__saisie { margin-top: 28px; }

/* ==========================================================================
   Cartes de famille, photo en fond
   ========================================================================== */

.jdk-q__cartes {
	display: grid;
	/* Deux colonnes : quatre familles en 3+1 laissent un trou, et la photo
	   d une carte etroite ne montre plus rien du projet. */
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 16px;
	margin-bottom: 10px;
}

.jdk-q__carte { position: relative; }

.jdk-q__carte input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.jdk-q__carte label {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;
	background: var(--encre);
	cursor: pointer;
	transition: box-shadow .3s, transform .3s;
}

.jdk-q__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

/* ⛔ Un degrade franc, pas un aplat en opacite : la photo d un bardage clair
   ou d un ciel blanc avalerait un simple voile. Mesure sur les quatre
   visuels retenus : le titre blanc reste au-dessus de 11:1. */
.jdk-q__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(12, 12, 12, .94) 0%,
		rgba(12, 12, 12, .80) 26%,
		rgba(12, 12, 12, .42) 52%,
		rgba(12, 12, 12, .10) 78%,
		rgba(12, 12, 12, 0) 100%
	);
}

.jdk-q__carte-texte {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px 20px 18px;
}

/* ⛔ Couleur DECLAREE, jamais heritee : ce texte est sur une photo. */
.jdk-q__carte-texte b {
	display: block;
	margin-bottom: 5px;
	font-family: "Roboto", sans-serif;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
}

.jdk-q__carte-texte small {
	display: block;
	font-size: .82rem;
	line-height: 1.45;
	color: #E4E1DC;
}

.jdk-q__carte input:hover + label { box-shadow: 0 16px 34px -18px rgba(27, 27, 27, .55); }
.jdk-q__carte input:hover + label .jdk-q__photo { transform: scale(1.045); }

.jdk-q__carte input:focus-visible + label {
	outline: 2px solid var(--encre);
	outline-offset: 3px;
}

/* L etat retenu se dit par un cadre franc et une pastille a coche, dans l or
   de la charte, comme partout ailleurs sur le site. Ce n est pas un lisere
   decoratif : il ne parait que sur la carte choisie. */
.jdk-q__carte input:checked + label {
	box-shadow: 0 0 0 3px var(--or), 0 18px 38px -20px rgba(27, 27, 27, .6);
}

.jdk-q__carte input:checked + label::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--or) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ==========================================================================
   Choix simples
   ========================================================================== */

.jdk-q__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.jdk-q__option { position: relative; }

.jdk-q__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.jdk-q__option label {
	display: block;
	padding: 13px 24px;
	border: 1px solid #D9D2C7;
	border-radius: 0;
	background: var(--champ);
	color: var(--texte);
	cursor: pointer;
	transition: background-color .22s, border-color .22s, color .22s;
}

.jdk-q__option input:hover + label {
	border-color: var(--encre);
	color: var(--encre);
}

.jdk-q__option input:focus-visible + label {
	outline: 2px solid var(--encre);
	outline-offset: 2px;
}

.jdk-q__option input:checked + label {
	background: var(--or);
	border-color: var(--or);
	color: var(--encre);
	font-weight: 600;
}

/* ==========================================================================
   Saisies
   ========================================================================== */

.jdk-q__saisie {
	display: block;
	width: 100%;
	padding: 15px 18px;
	border: 1px solid #D9D2C7;
	border-radius: 0;
	background: var(--champ);
	color: var(--encre);
	font-family: inherit;
	font-size: 1.05rem;
	transition: border-color .22s, box-shadow .22s;
}

.jdk-q__saisie::placeholder { color: #9A9792; }

.jdk-q__saisie:focus {
	border-color: var(--or-texte);
	outline: 2px solid var(--or-texte);
	outline-offset: 1px;
}

.jdk-q__saisie--court { max-width: 240px; }

textarea.jdk-q__saisie { resize: vertical; min-height: 118px; }

.jdk-q__mesure {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jdk-q__unite {
	flex: 0 0 auto;
	font-size: .95rem;
	color: var(--discret);
}

.jdk-q__precision {
	margin: 18px 0 0;
	display: grid;
	gap: 8px;
}

.jdk-q__precision label {
	font-size: .88rem;
	color: var(--discret);
}

/* --- consentement --- */
.jdk-q__accord {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin: 0 0 10px;
	font-size: .93rem;
	line-height: 1.58;
}

.jdk-q__accord input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--encre);
	cursor: pointer;
}

.jdk-q__accord a { color: var(--or-texte); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.jdk-q__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 34px;
}

.jdk-q__suite,
.jdk-q__envoi {
	padding: 15px 36px;
	/* ⭐ Convention MAJORITAIRE du site, relevee le 19/10/2026 : Oswald,
	   capitales, graisse 600, interlettrage .14em. Elle regit 8 regles sur 9
	   et 110 boutons rendus sur 134. Le CTA de l en-tete, seule exception,
	   a ete aligne dessus le meme jour. Le remplissage reste plus genereux :
	   c est une action de formulaire, pas un element de navigation. */
	border: 1px solid var(--or);
	border-radius: 0;
	background: var(--or);
	color: var(--encre);
	font-family: "Oswald", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .22s, border-color .22s, color .22s;
}

/* ⛔⛔ QUI NEUTRALISE REDECLARE. Le reset du theme
   (themes/jdk-concept/assets/css/reset.css) peint TOUT bouton du site en
   #c36, soit #CC3366, sur `button:hover` ET sur `button:focus`. Declarer le
   seul survol laisse le focus virer au rose : il faut les deux etats, sur
   les trois boutons. Releve du 19/10/2026 sur le bouton « Retour ». */
.jdk-q__suite:hover,
.jdk-q__suite:focus,
.jdk-q__envoi:hover,
.jdk-q__envoi:focus {
	background: var(--or-survol);
	border-color: var(--or-survol);
	color: var(--encre);
}

.jdk-q__suite:focus-visible,
.jdk-q__envoi:focus-visible {
	outline: 2px solid var(--encre);
	outline-offset: 3px;
}

.jdk-q__suite[disabled],
.jdk-q__envoi[disabled] { opacity: .55; cursor: progress; }

.jdk-q__suite--large {
	width: 100%;
	margin-top: 8px;
}

.jdk-q__retour {
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--discret);
	font-family: inherit;
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.jdk-q__retour:hover,
.jdk-q__retour:focus {
	background: none;
	color: var(--encre);
}

.jdk-q__retour:focus-visible {
	outline: 2px solid var(--encre);
	outline-offset: 2px;
}

/* sans script, les boutons de navigation n ont pas de sens */
.jdk-q:not([data-pilote]) .jdk-q__nav { display: none; }

.jdk-q:not([data-pilote]) .jdk-q__ecran[data-champ="consentement"] .jdk-q__nav {
	display: flex;
	justify-content: flex-end;
}

.jdk-q:not([data-pilote]) .jdk-q__retour { display: none; }

/* ==========================================================================
   Messages
   ========================================================================== */

.jdk-q__erreur {
	margin: 13px 0 0;
	font-size: .9rem;
	color: #A8261E;
}

.jdk-q__alerte {
	margin: 0 0 26px;
	padding: 14px 18px;
	border: 1px solid #A8261E;
	border-radius: 0;
	color: #A8261E;
}

.jdk-q__legende {
	margin: 30px 0 0;
	font-size: .82rem;
	color: var(--discret);
}

.jdk-q:not([data-pilote]) .jdk-q__legende { margin-top: 12px; }

.jdk-q__sortie {
	padding: 10px 0 0;
	text-align: center;
	animation: jdk-q-entree .34s cubic-bezier(.4, 0, .2, 1) both;
}

.jdk-q__merci {
	margin: 0 0 26px;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
	font-weight: 600;
	line-height: 1.26;
	color: var(--encre);
}

.jdk-q__relance {
	margin: 0 0 20px;
	color: var(--texte);
}

.jdk-q__passer {
	margin: 20px 0 0;
	font-size: .9rem;
}

.jdk-q__passer a {
	color: var(--discret);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jdk-q__passer a:hover { color: var(--or-texte); }

@media (max-width: 600px) {
	.jdk-q__nav { flex-direction: column-reverse; align-items: stretch; }
	.jdk-q__suite, .jdk-q__envoi { width: 100%; }
	.jdk-q__choix { flex-direction: column; }
	.jdk-q__option label { text-align: center; }
	.jdk-q__carte label { aspect-ratio: 16 / 9; }
}