/* ==========================================================================
   Formulaire adaptatif JDK Concept
   Palette du kit : ardoise #1B1B1B, onyx #353839, neige #FFFAFA,
   texte #D8D5D5, accent or #D2AF87.
   Valeurs des champs et du bouton relevées sur le formulaire de la
   production (v1) le 2026-08-18 : fond #161A1F, bordure #353839, labels
   13px, bouton or pleine largeur en Oswald capitales.
   Le rayon déclaré est de 5px (charte v2) ; tant que kit.css figé est
   chargé, sa règle « * { border-radius:0 !important } » rend le 0 de la
   v1. À la dépose du kit (phase DA), les 5px prendront effet seuls.
   ========================================================================== */
.jdk-f,
.jdk-f * { box-sizing: border-box; }

.jdk-f {
	font-family: "Montserrat", sans-serif;
	color: #D8D5D5;
}

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

.jdk-f__form { display: grid; gap: 18px; }

/* --- choix du profil --- */
.jdk-f__profils {
	border: 0;
	padding: 0;
	margin: 0;
}

.jdk-f__profils legend {
	padding: 0;
	margin-bottom: 10px;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	font-weight: 600;
	color: #FFFAFA;
}

.jdk-f__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.jdk-f__option { position: relative; }

/* la case reste focusable au clavier, mais invisible : c'est le label qui s'habille */
.jdk-f__option input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.jdk-f__option label {
	display: block;
	padding: 11px 20px;
	border: 1px solid rgba(210, 175, 135, .45);
	border-radius: 5px;
	background-color: #161A1F;
	color: #D8D5D5;
	cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s;
}

.jdk-f__option input:hover + label { border-color: #D2AF87; }

.jdk-f__option input:focus-visible + label {
	outline: 2px solid #D2AF87;
	outline-offset: 2px;
}

.jdk-f__option input:checked + label {
	background-color: #D2AF87;
	border-color: #D2AF87;
	color: #1B1B1B;
	font-weight: 600;
}

/* --- champs --- */
.jdk-f__bloc { display: grid; gap: 16px; }

/* Le JavaScript masque les blocs en posant l attribut hidden : la feuille doit
   l honorer, sinon le display:grid ci-dessus l ecraserait (feuille auteur >
   feuille navigateur). Sans JavaScript, rien ne pose hidden : tout reste visible. */
.jdk-f [hidden] { display: none; }

.jdk-f__champ { margin: 0; display: grid; gap: 6px; }

.jdk-f__champ label {
	font-size: 13px;
	font-weight: 500;
	color: #D8D5D5;
}

.jdk-f__requis { color: #D2AF87; }

.jdk-f__champ input,
.jdk-f__champ select,
.jdk-f__champ textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid #353839;
	border-radius: 5px;
	background-color: #161A1F;
	color: #FFFAFA;
	font-family: inherit;
	font-size: 15px;
	transition: border-color .25s, background-color .25s;
}

.jdk-f__champ input::placeholder,
.jdk-f__champ textarea::placeholder { color: rgba(216, 213, 213, .55); }

.jdk-f__champ textarea { resize: vertical; min-height: 130px; }

.jdk-f__champ input:focus,
.jdk-f__champ select:focus,
.jdk-f__champ textarea:focus {
	outline: none;
	border-color: #D2AF87;
	background-color: #161A1F;
}

.jdk-f__champ select { appearance: none; padding-right: 40px; }

.jdk-f__champ--select { position: relative; }

.jdk-f__champ--select::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 20px;
	width: 9px;
	height: 9px;
	border-right: 2px solid #D2AF87;
	border-bottom: 2px solid #D2AF87;
	transform: rotate(45deg);
	pointer-events: none;
}

/* --- consentement --- */
.jdk-f__champ--consentement {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.jdk-f__champ--consentement input {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 3px;
	accent-color: #D2AF87;
}

.jdk-f__champ--consentement label { font-size: .88rem; line-height: 1.5; }
.jdk-f__champ--consentement a { color: #D2AF87; }

/* --- bouton : or, pleine largeur, Oswald capitales, comme la production --- */
.jdk-f__envoi { margin: 6px 0 0; }

.jdk-f__bouton {
	display: block;
	width: 100%;
	padding: 15px 34px;
	border: 0;
	border-radius: 5px;
	background-color: #D2AF87;
	color: #1B1B1B;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.12px;
	cursor: pointer;
	transition: background-color .25s, transform .25s;
}

.jdk-f__bouton:hover { background-color: #E0C4A3; }
.jdk-f__bouton:active { transform: translateY(1px); }
.jdk-f__bouton:focus-visible { outline: 2px solid #FFFAFA; outline-offset: 3px; }

.jdk-f__mention { margin: 0; font-size: .8rem; opacity: .75; }
.jdk-f__intro { margin: 0 0 4px; font-size: .95rem; }

/* --- messages --- */
.jdk-f__message {
	padding: 16px 18px;
	border-radius: 5px;
	margin: 0 0 18px;
}

.jdk-f__message--ok {
	background-color: rgba(210, 175, 135, .16);
	color: #FFFAFA;
}

.jdk-f__message--erreur {
	background-color: rgba(192, 57, 43, .18);
	color: #FFFAFA;
}

.jdk-f__message ul { margin: 8px 0 0; padding-left: 20px; }

/* --- deux colonnes des l espace disponible --- */
@media (min-width: 720px) {
	.jdk-f__bloc { grid-template-columns: 1fr 1fr; }
	.jdk-f__champ--textarea { grid-column: 1 / -1; }
	.jdk-f__intro { grid-column: 1 / -1; }
}

/* --- sur fond clair --- */
.jdk-f--clair { color: #1e1e1e; }
.jdk-f--clair .jdk-f__profils legend { color: #1B1B1B; }
.jdk-f--clair .jdk-f__champ label { color: #353839; }
.jdk-f--clair .jdk-f__option label { background-color: #fff; color: #353839; }
.jdk-f--clair .jdk-f__champ input,
.jdk-f--clair .jdk-f__champ select,
.jdk-f--clair .jdk-f__champ textarea {
	background-color: #fff;
	border-color: rgba(0, 0, 0, .18);
	color: #1B1B1B;
}


/* --- le reset du theme peint les boutons en rose au survol/focus et blanchit
   leur texte : le bouton d'envoi reste or clair, texte ardoise. --- */
.jdk-f .jdk-f__bouton:hover,
.jdk-f .jdk-f__bouton:focus {
	background-color: #E0C4A3;
	color: #1B1B1B;
}