/*
 * pages/contact.css — Styles spécifiques à la page Contact.
 * Chargé via inc/enqueue.php (body.page-template-tpl-contact).
 *
 * Sections :
 *   - .contact-intro        → éditorial Fraunces italic (kicker + titre + lead)
 *   - .contact-form-wrap    → conteneur formulaire (max-width éditorial)
 *   - .contact-coords       → bandeau anthracite "coordonnées" (pattern .home-stats)
 *   - .contact-coords__cert → carte rouge urgence CERT (pleine largeur, accentuée)
 *   - .contact-coords__meta → horaires + qualifs en mono micro
 *
 * Motion : red line draw au sommet + stagger .bw-reveal (règle générique
 * dans components.css). Reduced-motion neutralise le red line uniquement.
 */

/* ════════════════════════════════════════════════════════════════════
 * INTRO ÉDITORIALE
 * ════════════════════════════════════════════════════════════════════ */

.contact-intro {
	max-width:     720px;
	margin:        0 auto var(--space-12);
	text-align:    center;
}

.contact-intro__kicker {
	display:         inline-block;
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.18em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	margin:          0 0 var(--space-4);
}

.contact-intro__title {
	font-family:     var(--font-display);
	font-size:       clamp(1.75rem, 3vw, 2.5rem);
	font-weight:     500;
	line-height:     var(--lh-tight);
	letter-spacing:  -0.015em;
	color:           var(--fg);
	margin:          0 0 var(--space-5);
}

.contact-intro__title em {
	font-style:      italic;
	color:           var(--bw-red);
}

.contact-intro__lead {
	font-size:       var(--text-md);
	color:           var(--fg-muted);
	line-height:     var(--lh-relaxed);
	margin:          0;
}

/* ════════════════════════════════════════════════════════════════════
 * FORMULAIRE — conteneur centré, max-width éditoriale
 * ════════════════════════════════════════════════════════════════════ */

.contact-form-wrap {
	max-width: 780px;
	margin:    0 auto;
}

/* ════════════════════════════════════════════════════════════════════
 * SECTION COORDONNÉES (anthracite + grain via .section-dark)
 * Red line draw au sommet — pattern extrait de .home-stats.
 * ════════════════════════════════════════════════════════════════════ */

html.js-reveals-ready .contact-coords::before {
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	height:     1px;
	width:      0;
	background: var(--bw-red);
	transition: width 700ms cubic-bezier(.22, .61, .36, 1);
	z-index:    2;
}

html.js-reveals-ready .contact-coords.is-visible::before {
	width: 100%;
}

.contact-coords__header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.contact-coords__kicker {
	display:         inline-block;
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.18em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	margin:          0 0 var(--space-3);
}

.contact-coords__title {
	font-family:     var(--font-display);
	font-size:       clamp(1.75rem, 3vw, 2.5rem);
	font-weight:     500;
	line-height:     var(--lh-tight);
	letter-spacing:  -0.015em;
	color:           #e8eaed;
	margin:          0;
}

.contact-coords__title em {
	font-style: italic;
	color:      var(--bw-red);
}

/* ── Grid 3 coordonnées ──────────────────────────────────────────── */

.contact-coords__grid {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   0;
	margin-bottom:         var(--space-10);
}

@media (max-width: 860px) {
	.contact-coords__grid {
		grid-template-columns: 1fr;
	}
}

.contact-coord {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-3);
	padding:         var(--space-6) var(--space-6);
	min-width:       0;
}

.contact-coord + .contact-coord {
	border-left: 1px solid color-mix(in srgb, #e8eaed 12%, transparent);
}

@media (max-width: 860px) {
	.contact-coord {
		padding: var(--space-6) 0;
	}
	.contact-coord + .contact-coord {
		border-left: 0;
		border-top:  1px solid color-mix(in srgb, #e8eaed 12%, transparent);
	}
}

.contact-coord__label {
	font-family:       var(--font-mono);
	font-size:         var(--text-xs);
	font-weight:       var(--fw-semi);
	letter-spacing:    0.15em;
	text-transform:    uppercase;
	color:             var(--bw-red);
	padding-bottom:    var(--space-2);
	border-bottom:     1px solid color-mix(in srgb, var(--bw-red) 40%, transparent);
	align-self:        flex-start;
}

.contact-coord__value {
	font-family:     var(--font-mono);
	font-size:       var(--text-lg);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.01em;
	line-height:     1.4;
	color:           #f3f5f7;
	text-decoration: none;
	font-style:      normal;
	word-break:      break-word;
}

a.contact-coord__value {
	transition: color var(--transition);
}

a.contact-coord__value:hover,
a.contact-coord__value:focus-visible {
	color: var(--bw-red);
}

.contact-coord__value--secondary {
	font-size: var(--text-base);
	color:     color-mix(in srgb, #f3f5f7 72%, transparent);
}

.contact-coord__meta {
	font-size:      var(--text-xs);
	color:          color-mix(in srgb, #f3f5f7 58%, transparent);
	letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════
 * CARTE URGENCE CERT — pleine largeur, bordure rouge 3px
 * ════════════════════════════════════════════════════════════════════ */

.contact-coords__cert {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-3);
	padding:         var(--space-8);
	border:          1px solid var(--bw-red);
	border-left:     3px solid var(--bw-red);
	background:      color-mix(in srgb, var(--bw-red) 7%, transparent);
	border-radius:   var(--radius-sm);
	margin-bottom:   var(--space-10);
}

.contact-coords__cert-head {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
}

.contact-coords__cert-head svg {
	color:       var(--bw-red);
	flex-shrink: 0;
}

.contact-coords__cert-label {
	font-family:    var(--font-mono);
	font-size:      var(--text-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          var(--bw-red);
}

.contact-coords__cert-email {
	font-family:     var(--font-mono);
	font-size:       clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.01em;
	color:           #f3f5f7;
	text-decoration: none;
	transition:      color var(--transition);
	word-break:      break-word;
}

.contact-coords__cert-email:hover,
.contact-coords__cert-email:focus-visible {
	color: var(--bw-red);
}

.contact-coords__cert-note {
	font-size:   var(--text-sm);
	color:       color-mix(in srgb, #f3f5f7 70%, transparent);
	line-height: var(--lh-relaxed);
	margin:      0;
}

.contact-coords__cert-note a {
	color:                 var(--bw-red);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.contact-coords__cert-note a:hover,
.contact-coords__cert-note a:focus-visible {
	color: #f3f5f7;
}

/* ════════════════════════════════════════════════════════════════════
 * MÉTADONNÉES BAS DE SECTION — qualifs inline
 * ════════════════════════════════════════════════════════════════════ */

.contact-coords__meta {
	display:         flex;
	align-items:     center;
	flex-wrap:       wrap;
	gap:             var(--space-3) var(--space-4);
	padding-top:     var(--space-6);
	border-top:      1px solid color-mix(in srgb, #e8eaed 10%, transparent);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	letter-spacing:  0.12em;
	text-transform:  uppercase;
}

.contact-coords__meta-label {
	color:        color-mix(in srgb, #e8eaed 45%, transparent);
	margin-right: var(--space-2);
}

.contact-coords__meta-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	gap:        var(--space-4);
	flex-wrap:  wrap;
	align-items: center;
}

.contact-coords__meta-list li {
	color:       #e8eaed;
	font-weight: var(--fw-semi);
	display:     inline-flex;
	align-items: center;
}

.contact-coords__meta-list li + li::before {
	content:      '·';
	color:        var(--bw-red);
	margin-right: var(--space-4);
	margin-left:  calc(var(--space-4) * -1);
	font-weight:  var(--fw-bold);
}

/* ════════════════════════════════════════════════════════════════════
 * STAGGER REVEALS — coord tiles + carte CERT
 * (règle générique .bw-reveal dans components.css)
 * ════════════════════════════════════════════════════════════════════ */

.contact-coords__grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.contact-coords__grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.contact-coords__grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.contact-coords__cert                           { --bw-reveal-delay: 240ms; }

/* ════════════════════════════════════════════════════════════════════
 * REDUCED MOTION — neutralise le red line draw
 * (.bw-reveal est déjà neutralisé en amont dans components.css)
 * ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	html.js-reveals-ready .contact-coords::before {
		width:      100%;
		transition: none;
	}
}