/* ===========================================================================
   Page Contact — présentation MOBILE (plugin galerie-lamy-contact).
   ⚠ FEUILLE MOBILE UNIQUEMENT — chargée avec media="(max-width: 1280px)"
   (≤ 1280px = « version mobile » du site, seuil du burger, cf. thème).
   Feuille AUTONOME et TOTALEMENT DÉCOUPLÉE du desktop : elle contient sa propre
   base complète (pas seulement des surcharges). La version DESKTOP (≥ 1281px)
   vit dans contact.css. Les deux ne partagent AUCUNE règle : éditer l'une n'a
   AUCUN effet sur l'autre. Toute modif desktop de contact.css doit être reportée
   ICI À LA MAIN si (et seulement si) on la veut aussi en mobile.
   (Découplage voulu — cf. mémoire « mobile/desktop découplés ».)

   Point de départ : copie conforme de la présentation desktop, si bien que le rendu
   mobile est aujourd'hui identique à l'existant ; on itère librement à partir d'ici.

   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 ÷φ. RELEVÉ pour aérer
	   la page mobile (plus d'air entre modules empilés : intro, newsletter, carte…). */
	--glc-rhythm: clamp(4.75rem, 3rem + 6vw, 7.5rem);
	/* Rythme INTERNE (÷φ du précédent) : air à l'intérieur d'un module — padding de la
	   carte, écart entre les deux blocs d'infos. C'est là que la page était comprimée :
	   les modules respiraient entre eux, pas dedans. */
	--glc-rhythm-in: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	/* Padding haut du bandeau newsletter ; le bas = ×√φ (1.272). */
	--glc-band-top: clamp(2.2rem, 1.4rem + 2vw, 3.25rem);

	/* MOBILE : marges latérales étroites et SYMÉTRIQUES (--header-padding-side), jamais
	   --page-padding/--marge-site (calées sur le logo → énormes en mobile). Dégagement haut
	   = header + écart sous le logo (--header-gap). (Surchargé de toute façon par le bloc
	   @media ≤1280 plus bas — valeur ici alignée pour éviter tout repli erroné.) */
	padding:
		calc(var(--header-height, 7rem) + var(--header-gap, 3.5rem))
		var(--header-padding-side, 1.25rem)
		6rem
		var(--header-padding-side, 1.25rem);
	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; /* MOBILE : tout empilé */
	gap: var(--glc-rhythm);
	align-items: start;
}

/* ORDRE MOBILE (demande galerie) : « Nous trouver » (carte) EN PREMIER, puis
   « Nous contacter », puis « Rester informé ». La colonne droite passe donc devant la
   colonne gauche — par `order` uniquement : l'ordre du DOM (donc celui de la lecture
   d'écran et des titres h1/h2) reste inchangé, et le desktop, servi par contact.css,
   n'est pas concerné. */
.glc-contact-col-right {
	order: -1;
}

/* 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.8rem, 1.2rem + 2vw, 2.6rem);
	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.8rem;
	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);
	/* Champ plus haut : confort de frappe au doigt, et le soulignement se décolle du texte. */
	padding: 14px 4px;
}

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

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

/* 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: 14px 4px 14px 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.8rem;
	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;
	/* Le titre coiffe la carte : il lui faut de l'air en dessous, sinon il s'y colle. */
	margin: 0 0 clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	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; /* MOBILE : infos (footer) EMPILÉES au-dessus de la carte */
	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;
	/* Écart entre le bloc « galerie / adresse » et le bloc « horaires / contact » :
	   deux groupes distincts, il leur faut plus qu'un interligne. */
	gap: var(--glc-rhythm-in);
	justify-content: center;
	padding: var(--glc-rhythm-in);
}

/* 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);
	/* Interligne ouvert (1.75 au lieu de 1.6) : en mobile ces lignes sont l'essentiel de
	   la page — adresse, horaires, téléphone —, elles ne doivent pas former un pavé. */
	line-height: 1.75;
}

/* 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 1.1em;
}

/* Lignes reproduites du footer (glf_render_lines émet .footer-line / .footer-line-space). */
.glc-col .footer-line {
	margin: 0 0 0.5rem;
	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.9rem;
	margin-top: 1.4rem;
}

.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);
}

/* --- Bandeau newsletter : sous ~900px, le formulaire passe sous le libellé ---- */
@media (max-width: 900px) {
	.glc-news-band {
		flex-direction: column;
		align-items: flex-start;
		gap: 2.2rem;
	}
	.glc-news-right,
	.glc-news-form {
		width: 100%;
		min-width: 0;
	}
}

/* (En mobile tout est déjà empilé dès la base : colonnes → 1 colonne, carte → infos
   au-dessus de la carte Google. Plus de sous-paliers 1080/960px nécessaires.) */

/* Pied de page du thème RETIRÉ sur la page Contact en mobile : ses informations sont
   déjà reproduites dans la carte (« Find us »), il ferait doublon. Feuille chargée
   uniquement sur la page Contact (body.glc-contact) et ≤1280px → portée sûre. */
.glc-contact .site-footer {
	display: none;
}

/* --- Marges mobile = repère « sitewide » (--header-padding-side), SYMÉTRIQUES et étroites.
   PAS --marge-site / --page-padding (calées sur le logo → énormes en mobile, contenu
   comprimé à droite). Même correction que .content-wrap du thème. Écart haut = --header-gap. */
@media (max-width: 1280px) {
	.glc-contact-page {
		padding:
			calc(var(--header-height, 7rem) + var(--header-gap, 3.5rem))
			var(--header-padding-side, 1.25rem)
			6rem
			var(--header-padding-side, 1.25rem);
	}
}

/* --- Mobile : intro empilée (titre/sous-titre puis bouton) ---------------- */
@media (max-width: 720px) {
	.glc-contact-intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 2.2rem;
	}
	.glc-contact-map {
		min-height: 320px;
	}
}