/* ===========================================================================
   Page Contact — présentation DESKTOP (plugin galerie-lamy-contact).
   ⚠ FEUILLE DESKTOP UNIQUEMENT — chargée avec media="(min-width: 1281px)".
   La version MOBILE (≤ 1280px, seuil du burger) vit dans contact-mobile.css,
   feuille AUTONOME et découplée : les deux ne partagent aucune règle. Éditer
   celle-ci n'a AUCUN effet en mobile ; éditer contact-mobile.css n'a aucun effet
   en desktop. (Découplage voulu — cf. mémoire « mobile/desktop découplés ».)

   Chargée uniquement sur la page Contact. Réutilise les variables de design du
   thème (avec replis) pour rester cohérente sans dépendre du style.css en refonte.

   Composition au NOMBRE D'OR (φ ≈ 1.618) :
   - 3 colonnes en φ : 1 : φ (extérieures dorées, centre plus étroit) ;
   - rythme vertical en multiples de φ (colonnes → carte → boutons) ;
   - carte = rectangle d'or (φ : 1).
   Colonnes 1 et 2 : REPRODUCTION en direct du pied de page (contenu + police,
   via --glc-footer-font / --glc-footer-size posées inline par le plugin).
=========================================================================== */

.glc-contact-page {
	--glc-phi: 1.618;
	/* Base de rythme vertical ; les écarts en découlent par ×φ ou ÷φ. */
	--glc-rhythm: clamp(2.6rem, 1.6rem + 3vw, 4.2rem);
	/* Padding haut du bandeau newsletter ; le bas = ×√φ (1.272). */
	--glc-band-top: clamp(2.2rem, 1.4rem + 2vw, 3.25rem);

	/* Mêmes marges que .content-wrap : dégagement sous le header fixe, marge gauche =
	   largeur du logo, marge droite alignée sur « Contact ». Dégagement HAUT renforcé
	   (plus d'air entre la barre de navigation et l'introduction). */
	padding:
		calc(var(--header-height, 7rem) + var(--nav-gap, 4rem) + clamp(2rem, 4vw, 4rem))
		var(--marge-site-right, var(--page-padding, 13rem))
		5rem
		var(--page-padding, 13rem);
	color: var(--color-text, rgba(255, 255, 255, 0.75));
	font-family: var(--font-display, 'EB Garamond', serif);
}

/* --- Composition en DEUX COLONNES en regard (nombre d'or) -------------------
   Colonne GAUCHE (texte) : « Contact us » empilé au-dessus de « Stay in the know ».
   Colonne DROITE : titre « Find us » + carte en deux parties (infos + carte Google).
   Rapport gauche : droite = 1 : φ (la carte, cœur visuel, prend le plus de place).
   Les deux colonnes sont alignées en HAUT (la carte ne s'étire pas sur la hauteur du
   texte, ni l'inverse). */
.glc-contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.618fr;
	gap: clamp(2rem, 1rem + 3vw, 4.2rem);
	align-items: start;
}

/* Colonne gauche : « Contact us » puis « Stay in the know », espacés au rythme √φ. */
.glc-contact-col-left {
	display: flex;
	flex-direction: column;
	gap: var(--glc-rhythm);
}

/* Dans la colonne (étroite), intro et newsletter s'EMPILENT (libellés puis bouton/champ) ;
   on neutralise les marges verticales propres à ces blocs — le gap de la colonne suffit. */
.glc-contact-col-left .glc-contact-intro,
.glc-contact-col-left .glc-news-band {
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1.2rem, 0.8rem + 1.5vw, 1.9rem);
	margin: 0;
}

/* Colonne droite : le titre « Find us » coiffe la carte ; plus de marge basse (dernier bloc). */
.glc-contact-col-right .glc-contact-card {
	margin-bottom: 0;
}

/* --- Bandeau newsletter « 2A » (haut de page = titre éditorial) ------------
   Réinterprété dans le système du site : EB Garamond (titre/champ), Type Deux pour
   le bouton, accent jaune du site, tokens √φ. Rapport titre/sous-texte ≈ φ
   (--fs-d4 ÷ --fs-h2). Padding bas = padding haut × √φ. Souligné seul, sans boîte. */
.glc-news-band {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: clamp(2rem, 1rem + 3vw, 3.75rem);
	/* Module SOUS la carte : espacement au-dessus seulement (pas de séparateur). */
	margin-top: var(--glc-rhythm);
}

.glc-news-label {
	max-width: 42rem;
}

/* Titre éditorial : échelle « titre de page » du site (√φ). h1 mais non gras, sobre. */
.glc-news-heading {
	font-family: var(--font-display, 'EB Garamond', serif);
	font-size: var(--fs-d4, clamp(1.78rem, 1.4rem + 1.2vw, 2.26rem));
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0 0 0.4rem;
	color: var(--color-text, rgba(255, 255, 255, 0.9));
}

.glc-news-sub {
	font-family: var(--font-display, 'EB Garamond', serif);
	font-style: italic;
	font-size: var(--fs-h2, 1.4rem);
	line-height: 1.4;
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
}

/* Formulaire : rangée inline, souligné UNIQUEMENT (pas de boîte / fond / rayon). */
.glc-news-right {
	flex: 0 1 auto;
}

.glc-news-form {
	display: flex;
	align-items: center;
	min-width: min(420px, 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35); /* soulignement sous le champ (conservé) */
}

.glc-news-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--color-text, rgba(255, 255, 255, 0.9));
	font-family: var(--font-display, 'EB Garamond', serif);
	font-size: var(--fs-h2, 1.4rem);
	padding: 10px 4px;
}

.glc-news-input::placeholder {
	color: var(--color-text, #ffffff);
	opacity: 0.5;
}

.glc-news-input:focus {
	outline: none;
}

/* Saisie assistée du navigateur : pas de boîte blanche, on garde le fond du site. La
   transition quasi infinie empêche Chrome/Safari d’appliquer son fond ; le texte garde
   la police et la couleur du champ. */
.glc-news-input:-webkit-autofill,
.glc-news-input:-webkit-autofill:hover,
.glc-news-input:-webkit-autofill:focus,
.glc-news-input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--color-text, #ffffff);
	caret-color: var(--color-text, #ffffff);
	transition: background-color 600000s 0s, color 600000s 0s;
}

.glc-news-input:autofill {
	background: transparent;
	color: var(--color-text, #ffffff);
}

/* Bouton : texte seul, Type Deux capitales espacées, accent → texte au survol. */
.glc-news-submit {
	flex: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--color-accent, #FFC600);
	font-family: var(--font-ui, 'Type Deux', sans-serif);
	font-size: var(--fs-h5, 0.68rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 10px 4px 10px 1.25rem;
	transition: color 0.25s ease;
}

/* Survol = lueur INTENSIFIÉE (reprend l'accent-glow du site, amplifié). Le doré reste ;
   c'est la lueur qui signale l'interaction. */
@keyframes glc-news-glow {
	0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 198, 0, 0.45)); }
	50%      { filter: drop-shadow(0 0 11px rgba(255, 198, 0, 0.9)); }
}

.glc-news-submit:hover,
.glc-news-submit:focus-visible {
	color: var(--color-accent, #FFC600);
	animation: glc-news-glow 3s ease-in-out infinite;
}

/* Mouvement réduit : lueur forte mais FIXE (pas de pulsation). */
@media (prefers-reduced-motion: reduce) {
	.glc-news-submit:hover,
	.glc-news-submit:focus-visible {
		animation: none;
		filter: drop-shadow(0 0 7px rgba(255, 198, 0, 0.75));
	}
}

/* Pot de miel anti-robot : hors écran (jamais vu ni tabulé par un humain). */
.glc-news-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Message de confirmation / erreur (Type Deux, discret ; accent si succès). */
.glc-news-msg {
	margin: 0.6rem 0 0;
	font-family: var(--font-ui, 'Type Deux', sans-serif);
	font-size: var(--fs-h5, 0.68rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.glc-news-msg--ok {
	color: var(--color-accent, #FFC600);
}

/* --- 1) Rangée d'introduction : titre + sous-titre à gauche, bouton à droite ---
   Titre = Garamond BLANC ; sous-titre = Garamond ITALIQUE GRISÉ (mêmes traitements que
   .glc-news-heading / .glc-news-sub, réutilisés pour l'unité typographique). */
.glc-contact-intro {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: clamp(1.5rem, 1rem + 3vw, 3.75rem);
	margin-bottom: var(--glc-rhythm);
}

.glc-intro-text {
	max-width: 46rem;
}

.glc-intro-heading {
	font-family: var(--font-display, 'EB Garamond', serif);
	/* Titre de section : MÊME échelle (√φ, --fs-d4) que « Stay in the know » et « Find us »
	   — les trois titres de la page sont harmonisés sur une seule taille. */
	font-size: var(--fs-d4, clamp(1.78rem, 1.4rem + 1.2vw, 2.26rem));
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	margin: 0 0 0.5rem;
	color: var(--color-text, rgba(255, 255, 255, 0.9));
}

.glc-intro-sub {
	font-family: var(--font-display, 'EB Garamond', serif);
	font-style: italic;
	font-size: var(--fs-h2, 1.4rem);
	line-height: 1.4;
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
}

/* Bouton « Contact Us » : contour sobre → accent au survol (système du site). */
.glc-intro-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0.9rem 1.9rem;
	font-family: var(--font-ui, 'Type Deux', sans-serif);
	font-size: var(--fs-h5, 0.68rem); /* même repli que les autres labels Type Deux de la page */
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-text, rgba(255, 255, 255, 0.85));
	border: 1px solid currentColor;
	border-radius: var(--img-radius, 0.4rem);
	transition: color 0.25s ease, border-color 0.25s ease;
}

.glc-intro-btn:hover,
.glc-intro-btn:focus-visible {
	color: var(--color-accent, #FFC600);
	border-color: var(--color-accent, #FFC600);
}

/* Titre de la carte (« Find us ») : Garamond blanc, échelle titre de section (√φ),
   au même rang que « Stay in the know » — sous le grand titre « Contact us ». */
.glc-card-title {
	font-family: var(--font-display, 'EB Garamond', serif);
	font-size: var(--fs-d4, clamp(1.78rem, 1.4rem + 1.2vw, 2.26rem));
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0 0 clamp(1rem, 0.6rem + 1vw, 1.6rem);
	color: var(--color-text, rgba(255, 255, 255, 0.9));
}

/* --- 2) Carte : infos à GAUCHE (50 %), carte en direct à DROITE (50 %) ------
   La carte AFFLEURE les bords de la card (haut / droite / bas) : pas de padding sur
   la card, l'ombrage/rayon propres à la carte sont retirés et c'est le `overflow:hidden`
   + le rayon de la CARD qui arrondissent les coins de la carte. Le padding vit sur le
   bloc infos uniquement. */
.glc-contact-card {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 50 / 50 */
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: calc(var(--img-radius, 0.4rem) * 2.5);
	background: rgba(255, 255, 255, 0.03);
	overflow: hidden; /* clippe la carte affleurante aux coins arrondis de la card */
	margin-bottom: var(--glc-rhythm);
}

/* Infos = colonnes 1 puis 2 du pied de page, EMPILÉES (galerie / adresse / Paris →
   horaires → téléphone → e-mail), centrées verticalement en regard de la carte. Le
   padding de la card est porté ici (la carte, elle, affleure les bords). */
.glc-card-info {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 0.8rem + 1vw, 1.9rem);
	justify-content: center;
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* Colonnes 1 et 2 = MÊME typographie que le pied de page (police + taille reprises via
   les variables inline ; replis = pile du footer puis Type Deux). */
.glc-col-1,
.glc-col-2 {
	font-family: var(--glc-footer-font, var(--font-footer, 'Accident', 'Helvetica Neue', Helvetica, Arial, sans-serif));
	font-size: var(--glc-footer-size, 1rem);
	line-height: 1.6;
}

/* Titre de colonne — même traitement que .footer-col-title du pied de page. */
.glc-col-title {
	font-family: var(--font-footer, 'Accident', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.82em;
	opacity: 0.7;
	margin: 0 0 0.8em;
}

/* Lignes reproduites du footer (glf_render_lines émet .footer-line / .footer-line-space). */
.glc-col .footer-line {
	margin: 0 0 0.2rem;
	font-weight: 400;
}

.glc-col .footer-line:last-child {
	margin-bottom: 0;
}

/* « **gras** » du footer = Medium réel (500), comme le pied de page. */
.glc-col .footer-line strong,
.glc-col .footer-line b {
	font-weight: 500;
}

.glc-col .footer-line em {
	font-style: italic;
}

/* Colonne 3 : paragraphes du WYSIWYG. */
.glc-col-3 p {
	margin: 0 0 1rem;
}

.glc-col-3 p:last-child {
	margin-bottom: 0;
}

/* Liens de TEXTE (e-mail/téléphone du footer dans .footer-line, liens du texte libre de
   la colonne 3) : soulignés discrets → accent. Les liens sociaux (icônes) sont exclus car
   ciblés séparément ci-dessous. */
.glc-col .footer-line a,
.glc-col-3 a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.glc-col .footer-line a:hover,
.glc-col .footer-line a:focus-visible,
.glc-col-3 a:hover,
.glc-col-3 a:focus-visible {
	color: var(--color-accent, #FFC600);
}

/* Icônes sociales reproduites (.footer-social > a > svg), traitement identique au footer. */
.glc-col .footer-social {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.9rem;
}

.glc-col .footer-social a {
	color: inherit;
	display: inline-flex;
	transition: color 0.25s ease;
}

.glc-col .footer-social a:hover,
.glc-col .footer-social a:focus-visible {
	color: var(--color-accent, #FFC600);
}

.glc-col .footer-social svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* --- Carte Google : moitié DROITE de la card, affleurant ses bords --------- */
.glc-contact-map {
	position: relative;
	width: 100%;
	min-height: clamp(280px, 42vh, 520px); /* garde une belle carte même si les infos sont courtes */
	overflow: hidden;
	background: rgba(0, 0, 0, 0.25);
	/* Ni rayon ni ombre propres : la carte affleure ; les coins sont clippés par la card. */
}

.glc-contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* La carte Google est claire ; on l'assombrit légèrement pour l'accorder au fond
	   sombre du site sans la rendre illisible. */
	filter: grayscale(0.35) contrast(0.95) brightness(0.92);
}

/* NOTE : aucune règle mobile ici. Cette feuille est chargée UNIQUEMENT au-dessus du
   seuil du burger (min-width: 1281px, cf. l'attribut media à l'enqueue). Toute la
   « version mobile » (≤ 1280px) vit dans contact-mobile.css, feuille autonome et
   totalement découplée : modifier l'une n'affecte jamais l'autre. */