@charset "UTF-8";
/**
 * Escape Gamer — page de contact
 *
 * Chargée sur cette seule page.
 *
 * Un formulaire ne se regarde pas, il se remplit. Le décor sert donc à
 * répondre aux questions qu'on se pose avant d'écrire — à qui, pour
 * quoi — puis à s'effacer devant les champs.
 */

/* =========================================================================
   1. Ouverture
   ====================================================================== */

.eg-contact__hero {
	position: relative;
	background: var(--eg-dark);
	color: #EDEAE4;
	overflow: hidden;
	isolation: isolate;
}

.eg-contact__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(46% 60% at 78% 30%, rgba(240, 201, 122, .16), transparent 68%),
		radial-gradient(60% 70% at 4% 92%, rgba(14, 135, 168, .16), transparent 66%);
}

.eg-contact__hero-in {
	position: relative;
	max-width: var(--eg-wrap);
	margin-inline: auto;
	padding: calc(var(--eg-u) * 8) calc(var(--eg-u) * 3.25) calc(var(--eg-u) * 6);
}

.eg-contact__h {
	margin: 0;
	max-width: 21ch;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: clamp(30px, 4.8vw, 58px);
	line-height: 1.02;
	letter-spacing: -.018em;
	color: #F6F3EE;
	text-wrap: balance;
}

.eg-contact__h span {
	display: block;
	color: var(--eg-lamp);
}

.eg-contact__lede {
	margin: 20px 0 0;
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.55;
	color: #B4BCC7;
}

/* Les chiffres disent ce que pèse l'annuaire — donc pourquoi écrire. */
.eg-contact__chiffres {
	display: flex;
	margin: calc(var(--eg-u) * 5) 0 0;
	border-top: 1px solid var(--eg-line);
}

.eg-contact__chiffres > div {
	flex: 1;
	padding: 20px 0 4px;
	border-right: 1px solid var(--eg-line);
}

.eg-contact__chiffres > div:last-child {
	border-right: none;
}

.eg-contact__chiffres dt {
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 28px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #F6F3EE;
}

.eg-contact__chiffres dd {
	margin: 7px 0 0;
	font-family: var(--eg-mono);
	font-size: 11px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #7A8492;
}

.eg-contact__chiffres--hl dt {
	color: var(--eg-lamp);
}

@media (max-width: 620px) {
	.eg-contact__chiffres {
		flex-direction: column;
	}

	.eg-contact__chiffres > div {
		border-right: none;
		border-bottom: 1px solid var(--eg-line);
		padding: 14px 0;
	}

	.eg-contact__chiffres > div:last-child {
		border-bottom: none;
	}
}

/* =========================================================================
   2. Corps
   ====================================================================== */

/**
 * Le formulaire remonte sur la bande sombre : il devient l'objet posé au
 * milieu de la page, celui qu'on ne peut pas manquer.
 */
.eg-contact__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: calc(var(--eg-u) * 6);
	align-items: start;
	padding-block: 0 calc(var(--eg-u) * 9);
	margin-top: calc(var(--eg-u) * -5);
}

.eg-contact__motifs {
	padding-top: calc(var(--eg-u) * 8);
}

.eg-contact__st {
	margin: 0 0 calc(var(--eg-u) * 2.5);
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -.008em;
	color: var(--eg-ink);
}

/* --- Les motifs ----------------------------------------------------------- */

.eg-motifs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--eg-hair);
}

.eg-motif {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--eg-hair);
}

.eg-motif__ic {
	width: 42px;
	height: 42px;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--eg-accent-soft);
	color: var(--eg-accent);
	font-size: 20px;
	transition: background-color .2s, color .2s;
}

.eg-motif:hover .eg-motif__ic {
	background: var(--eg-dark);
	color: var(--eg-lamp);
}

.eg-motif h3 {
	margin: 0 0 5px;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.2;
	color: var(--eg-ink);
}

.eg-motif p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--eg-muted);
}

.eg-contact__social {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: calc(var(--eg-u) * 3);
}

.eg-contact__social > span {
	font-family: var(--eg-mono);
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

.eg-contact__social .eg-social {
	border-right: none;
	padding: 0;
}

.eg-contact__social .eg-social a {
	width: 38px;
	height: 38px;
	border: 1px solid var(--eg-hair-2);
}

/* =========================================================================
   3. Le formulaire
   ====================================================================== */

.eg-contact__form-in {
	background: var(--eg-surface);
	border: 1px solid var(--eg-hair-2);
	box-shadow: 0 26px 60px rgba(20, 24, 30, .14);
	padding: calc(var(--eg-u) * 4.5) calc(var(--eg-u) * 4.5) calc(var(--eg-u) * 5);
}

.eg-contact__note {
	margin: -14px 0 calc(var(--eg-u) * 3);
	font-size: 14px;
	color: var(--eg-muted);
}

/* --- Contact Form 7 ------------------------------------------------------- */

/**
 * Contact Form 7 enveloppe chaque champ dans un <p> et laisse le libellé
 * juste avant la commande, sans mise en forme. On reprend l'ensemble :
 * libellé en petites capitales, champ souligné plutôt qu'encadré, et une
 * ligne d'accent qui se dessine à la saisie.
 */
.eg-contact__form .wpcf7 p {
	margin: 0 0 calc(var(--eg-u) * 3);
}

.eg-contact__form .wpcf7 label {
	display: block;
	font-family: var(--eg-mono);
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

.eg-contact__form .wpcf7 input[type="text"],
.eg-contact__form .wpcf7 input[type="email"],
.eg-contact__form .wpcf7 input[type="tel"],
.eg-contact__form .wpcf7 textarea,
.eg-contact__form .wpcf7 select {
	width: 100%;
	margin-top: 8px;
	padding: 11px 0;
	border: none;
	border-bottom: 1.5px solid var(--eg-hair-2);
	border-radius: 0;
	background: transparent;
	font-family: var(--eg-body);
	font-size: 16px;
	color: var(--eg-ink);
	transition: border-color .18s;
	appearance: none;
	-webkit-appearance: none;
}

.eg-contact__form .wpcf7 select {
	background-image: linear-gradient(45deg, transparent 50%, var(--eg-ink-2) 50%), linear-gradient(135deg, var(--eg-ink-2) 50%, transparent 50%);
	background-position: calc(100% - 12px) 22px, calc(100% - 7px) 22px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 28px;
	cursor: pointer;
}

.eg-contact__form .wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.6;
}

.eg-contact__form .wpcf7 input:focus,
.eg-contact__form .wpcf7 textarea:focus,
.eg-contact__form .wpcf7 select:focus {
	outline: none;
	border-bottom-color: var(--eg-accent);
}

.eg-contact__form .wpcf7 input::placeholder,
.eg-contact__form .wpcf7 textarea::placeholder {
	color: #9AA3AF;
}

/* --- La pièce jointe ------------------------------------------------------ */

/**
 * Le sélecteur de fichier natif est laid dans tous les navigateurs et
 * différent dans chacun. On habille son bouton, qui est le seul morceau
 * réellement stylable sans le remplacer.
 */
.eg-contact__form .wpcf7 input[type="file"] {
	width: 100%;
	margin-top: 10px;
	font-family: var(--eg-body);
	font-size: 14px;
	color: var(--eg-muted);
}

.eg-contact__form .wpcf7 input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 10px 16px;
	border: 1px solid var(--eg-hair-2);
	border-radius: 0;
	background: var(--eg-paper);
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--eg-ink-2);
	cursor: pointer;
	transition: border-color .16s, color .16s;
}

.eg-contact__form .wpcf7 input[type="file"]::file-selector-button:hover {
	border-color: var(--eg-accent);
	color: var(--eg-accent);
}

/* --- Envoi ---------------------------------------------------------------- */

.eg-contact__form .wpcf7 input[type="submit"] {
	width: 100%;
	margin-top: calc(var(--eg-u) * 1);
	padding: 17px 24px;
	border: none;
	border-radius: 0;
	background: var(--eg-btn-bg);
	color: var(--eg-btn-fg);
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .13em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s;
}

.eg-contact__form .wpcf7 input[type="submit"]:hover {
	background: var(--eg-btn-bg-hi);
}

/* --- Messages ------------------------------------------------------------- */

.eg-contact__form .wpcf7-not-valid-tip {
	margin-top: 7px;
	font-family: var(--eg-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: #A8342A;
}

.eg-contact__form .wpcf7 .wpcf7-not-valid {
	border-bottom-color: #A8342A;
}

.eg-contact__form .wpcf7-response-output {
	margin: calc(var(--eg-u) * 2.5) 0 0 !important;
	padding: 14px 18px !important;
	border: 1px solid var(--eg-hair-2) !important;
	border-radius: 0;
	font-size: 14.5px;
}

.eg-contact__form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--eg-ok, #1E7A55) !important;
	background: #E4F2EB;
	color: #15583C;
}

.eg-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.eg-contact__form .wpcf7 form.failed .wpcf7-response-output {
	border-color: #A8342A !important;
	background: #FBE9E7;
	color: #7E2A22;
}

.eg-contact__form .wpcf7-spinner {
	margin: 12px auto 0;
	display: block;
}

/* =========================================================================
   4. Adaptations
   ====================================================================== */

@media (max-width: 980px) {
	.eg-contact__corps {
		grid-template-columns: 1fr;
		gap: calc(var(--eg-u) * 4);
		margin-top: 0;
	}

	.eg-contact__motifs {
		padding-top: calc(var(--eg-u) * 6);
		order: 2;
	}

	.eg-contact__form {
		order: 1;
		margin-top: calc(var(--eg-u) * -5);
	}
}

@media (max-width: 560px) {
	.eg-contact__form-in {
		padding: calc(var(--eg-u) * 3) calc(var(--eg-u) * 2.5) calc(var(--eg-u) * 3.5);
	}
}