/* CPTS Centre-Hérault — page de contact [cpts_contact]. */

.cptsc {
	--cptsc-blue:  #3f87c0;
	--cptsc-teal:  #2fa6b3;
	--cptsc-navy:  #234155;
	--cptsc-ink:   #2b3a47;
	--cptsc-muted: #6b7a89;
	--cptsc-line:  #e4eaf0;

	margin: 2.5rem 0;
	color: var(--cptsc-ink);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.cptsc__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

/* ==========================================================================
   Coordonnées
   ========================================================================== */

.cptsc__title {
	margin: 0 0 14px;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.15;
	color: var(--cptsc-navy);
}

.cptsc__intro {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cptsc-muted);
	max-width: 46ch;
}

.cptsc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }

.cptsc__item { display: flex; flex-direction: column; gap: 3px; padding-left: 32px; position: relative; }

.cptsc__label {
	font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--cptsc-teal);
}
.cptsc__value { font-size: 15.5px; line-height: 1.55; color: var(--cptsc-ink); text-decoration: none; }
a.cptsc__value:hover { color: var(--cptsc-blue); }

/* Pictogrammes dessinés en CSS : la police d'icônes du dashboard n'est pas
   servie aux visiteurs, le public ne doit dépendre que de formes simples. */
.cptsc__item::before {
	content: "";
	position: absolute; left: 0; top: 3px;
	width: 18px; height: 18px;
	border: 2px solid var(--cptsc-teal);
}
.cptsc__item--place::before { border-radius: 50% 50% 50% 2px; transform: rotate(-45deg); }
.cptsc__item--phone::before { border-radius: 5px 12px 5px 12px; }
.cptsc__item--mail::before  { border-radius: 3px; }
.cptsc__item--hours::before { border-radius: 50%; }

/* ==========================================================================
   Formulaire
   ========================================================================== */

.cptsc__panel {
	background: #fff;
	border: 1px solid var(--cptsc-line);
	border-radius: 18px;
	padding: clamp(22px, 3vw, 38px);
	box-shadow: 0 2px 4px rgba(35, 65, 85, .05), 0 20px 48px rgba(35, 65, 85, .08);
}

.cptsc__form { display: flex; flex-direction: column; gap: 18px; }
.cptsc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.cptsc__field { display: flex; flex-direction: column; gap: 6px; }
.cptsc__field-label { font-size: 13.5px; font-weight: 600; color: var(--cptsc-navy); }
.cptsc__field-label span { color: var(--cptsc-blue); }

.cptsc__form input,
.cptsc__form select,
.cptsc__form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #fbfcfe;
	border: 1px solid #c9d5e0;
	border-radius: 10px;
	padding: 11px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--cptsc-ink);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cptsc__form textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.cptsc__form input:focus,
.cptsc__form select:focus,
.cptsc__form textarea:focus {
	background: #fff;
	border-color: var(--cptsc-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cptsc-blue) 18%, #fff);
	outline: none;
}

.cptsc__form .is-invalid {
	border-color: #d0554b;
	box-shadow: 0 0 0 3px rgba(208, 85, 75, .14);
}

.cptsc__consent {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13.5px; line-height: 1.55; color: var(--cptsc-muted);
}
.cptsc__consent input { width: auto; flex: 0 0 auto; margin-top: 2px; }

/* Champ piège : masqué sans `display: none`, que certains robots détectent. */
.cptsc__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.cptsc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }

.cptsc__submit {
	background: linear-gradient(135deg, var(--cptsc-blue), var(--cptsc-teal));
	border: 0; border-radius: 999px;
	padding: 13px 30px;
	font: inherit; font-size: 15px; font-weight: 700; color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 22px color-mix(in srgb, var(--cptsc-blue) 30%, transparent);
	transition: filter .15s ease, transform .15s ease;
}
.cptsc__submit:hover { filter: brightness(.94); }
.cptsc__submit:active { transform: translateY(1px); }
.cptsc__submit[disabled] { opacity: .6; cursor: default; }

.cptsc__status { margin: 0; font-size: 14px; font-weight: 600; color: var(--cptsc-muted); }
.cptsc__status[data-kind="ok"]    { color: #15803d; }
.cptsc__status[data-kind="error"] { color: #b42318; }

/* ==========================================================================
   Carte
   ========================================================================== */

.cptsc__map {
	margin-top: clamp(28px, 4vw, 52px);
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--cptsc-line);
	line-height: 0;
}
.cptsc__map iframe { display: block; width: 100%; height: clamp(260px, 38vh, 420px); border: 0; }

@media (max-width: 900px) {
	.cptsc__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.cptsc__row { grid-template-columns: 1fr; }
}