:root{
	--spide-blue:#0000FF;
	--spide-black:#2D2D2D;
	--spide-white:#F1F1F1;
	--spide-foot:#F9F9F9;
}

.spide-footer,
.spide-footer *,
.spide-footer *::before,
.spide-footer *::after{ box-sizing:border-box; }

.spide-footer{
	background:var(--spide-black);
	font-family:"Montserrat",sans-serif;
	color:var(--spide-foot);
	position:relative;
}

/* ============ CARTE + ÉPINGLE ============ */
.spide-map{
	position:relative;
	line-height:0;
}
.spide-map__img{
	width:100%;
	aspect-ratio:1440 / 442;  /* hauteur bornée (maquette) ; le crop cover est proportionnel */
	object-fit:cover;
	object-position:center;
	display:block;
	filter:grayscale(1) contrast(.98);
}
.spide-map__pin{
	position:absolute;
	left:50%;                /* la carte est centrée sur l'adresse (Neufchâteau) : l'épingle */
	top:50%;                 /* est au centre, et le crop cover étant symétrique, ça vaut aussi en mobile */
	transform:translate(-50%,-50%);
	width:55px;
	height:55px;
	border-radius:9999px;
	background:var(--spide-blue);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.spide-map__pin img{
	width:26px;
	height:auto;
	display:block;
}

/* ============ BLOC CONTACT (bleu) ============ */
.spide-contact{
	position:relative;
	padding:0 clamp(16px,5.5vw,80px);
}
.spide-contact__panel{
	max-width:1440px;
	margin:clamp(-72px,-5vw,-48px) auto 0;
	position:relative;
	z-index:2;
	color:var(--spide-white);
	background:
		radial-gradient(rgba(241,241,241,.14) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
		var(--spide-blue);
	padding:clamp(32px,4vw,53px) clamp(24px,5vw,89px);
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,440px);
	gap:clamp(36px,6vw,90px);
	align-items:start;
}

/* --- Colonne gauche --- */
.spide-contact__overline{
	display:block;
	font-size:14px;
	font-weight:600;
}
.spide-contact__title{
	margin:24px 0 0;
	font-size:clamp(22px,2.1vw,30px);
	font-weight:700;
	line-height:1.2;
	text-transform:uppercase;
}
.spide-contact__lead{
	margin:24px 0 0;
	font-size:16px;
	font-weight:500;
	line-height:1.4;
}
.spide-contact__coords{
	margin-top:clamp(30px,5vw,64px);
	padding-top:clamp(20px,3vw,30px);
	border-top:1px solid rgba(241,241,241,.64);
	display:flex;
	flex-wrap:wrap;
	gap:clamp(24px,7vw,90px);
}
.spide-contact__addr{
	font-style:normal;
	font-size:16px;
	font-weight:600;
	line-height:1.4;
}
.spide-contact__reach{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.spide-contact__phone{
	font-size:18px;
	font-weight:600;
	text-transform:uppercase;
}
.spide-contact__mail{
	font-size:16px;
	font-weight:600;
}

/* --- Formulaire (colonne droite) --- */
.spide-contact__form-wrap{ width:100%; }
.spide-contact__form{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.spide-contact__row{
	display:flex;
	gap:20px;
}
/* ⚠️ SPÉCIFICITÉ : le socle absorbé (base.css) pose
 *   input[type=text], input[type=email], … { border:1px solid #666 }
 * soit 0-1-1, ce qui BAT `.spide-field` (0-1-0) — les champs texte sortaient donc
 * en bordure grise. Le <textarea>, lui, n'est ciblé que par l'élément nu (0-0-1) :
 * il perdait contre la classe et gardait le blanc. D'où un formulaire à deux styles.
 * On préfixe par le conteneur (0-2-0) plutôt que d'ajouter !important. */
.spide-contact__form .spide-field,
.spide-field{
	flex:1 1 0;
	min-width:0;
	width:100%;
	background:transparent;
	border:1px solid var(--spide-white);
	border-radius:0;
	color:var(--spide-white);
	font-family:inherit;
	font-size:14px;
	line-height:1.36;
	padding:11px 21px;
	transition:border-color .15s ease, background .15s ease;
}
.spide-contact__form .spide-field--area,
.spide-field--area{
	min-height:130px;
	resize:vertical;
}
.spide-contact__form .spide-field::placeholder,
.spide-field::placeholder{
	color:#DCDCDC;
	font-style:italic;
	opacity:1;
}
.spide-contact__form .spide-field:focus,
.spide-field:focus{
	outline:none;
	border-color:var(--spide-white);
	background:rgba(255,255,255,.07);
}
/* Mention RGPD sous le formulaire — discrète mais lisible (obligation d'information) */
.spide-contact__rgpd{
	margin:-6px 0 0;
	font-size:12px;
	line-height:1.45;
	color:rgba(241,241,241,.82);
}
.spide-contact__rgpd a{
	color:var(--spide-white);
	text-decoration:underline;
	text-underline-offset:2px;
}
.spide-contact__submit{
	margin-top:2px;
	width:100%;
	background:var(--spide-black);
	color:var(--spide-white);
	border:0;
	font-family:inherit;
	font-size:14px;
	font-weight:600;
	letter-spacing:.02em;
	padding:18px 33px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	cursor:pointer;
	transition:background .15s ease;
}
.spide-contact__submit svg{ display:block; }

/* honeypot */
.spide-hp{
	position:absolute !important;
	left:-9999px !important;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* notices */
.spide-contact__notice{
	margin:0 0 18px;
	padding:13px 18px;
	font-size:14px;
	font-weight:600;
	line-height:1.4;
}
.spide-contact__notice--ok{ background:rgba(255,255,255,.16); }
.spide-contact__notice--err{ background:rgba(0,0,0,.28); }

/* ============ NAVIGATION DE PIED DE PAGE ============ */
.spide-foot{
	padding:clamp(44px,6vw,64px) clamp(16px,5.5vw,80px) 0;
}
.spide-foot__inner{
	max-width:1440px;
	margin:0 auto;
	display:flex;
	gap:clamp(40px,6vw,79px);
	align-items:flex-start;
}
.spide-foot__logo{ flex:0 0 auto; }
.spide-foot__logo img{
	width:clamp(190px,18vw,286px);
	height:auto;
	display:block;
}
.spide-foot__cols{
	flex:1 1 auto;
	min-width:0;
}
.spide-foot__top{
	display:flex;
	gap:clamp(40px,7vw,84px);
	flex-wrap:wrap;
	padding-bottom:24px;
	border-bottom:1px solid rgba(241,241,241,.26);
}
.spide-foot__heading{
	display:block;
	margin:0 0 24px;
	font-size:16px;
	font-weight:600;
	line-height:1.4;
	color:var(--spide-foot);
}
.spide-foot__list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.spide-foot__list a{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:var(--spide-foot);
	text-decoration:none;
}
.spide-foot__list a:hover{ text-decoration:underline; }
.spide-foot__secteurs-grid{
	display:flex;
	gap:clamp(20px,3vw,24px);
}
.spide-foot__secteurs-grid .spide-foot__list{ min-width:190px; }
.spide-foot__bottom-nav{
	display:flex;
	gap:clamp(40px,7vw,84px);
	padding-top:24px;
}
.spide-foot__heading--link{
	margin:0;
	text-decoration:none;
}
.spide-foot__heading--link:hover{ text-decoration:underline; }

/* ============ BAS DE PAGE — légal + partenaires ============ */
.spide-legal{
	padding:clamp(30px,4vw,40px) clamp(16px,5.5vw,80px) clamp(44px,5vw,60px);
}
.spide-legal__inner{
	max-width:1440px;
	margin:0 auto;
	padding-top:clamp(28px,3vw,38px);
	border-top:1px solid rgba(241,241,241,.26);
	display:flex;
	flex-wrap:wrap;
	gap:clamp(40px,8vw,128px);
	align-items:flex-start;
}
.spide-legal__brand{
	display:flex;
	flex-direction:column;
	gap:24px;
	max-width:340px;
}
.spide-legal__copy{
	margin:0;
	font-size:16px;
	font-weight:600;
	line-height:1.4;
}
.spide-legal__copy a{ color:inherit; text-decoration:underline; }
.spide-legal__links{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.spide-legal__links a{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:var(--spide-foot);
	text-decoration:none;
}
.spide-legal__links a:hover{ text-decoration:underline; }
.spide-legal__heading{
	margin:0 0 24px;
	font-size:16px;
	font-weight:600;
	line-height:1.4;
}
.spide-legal__partners{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:24px;
}
.spide-legal__partners a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:16px;
	font-weight:600;
	line-height:1.4;
	color:var(--spide-foot);
	text-decoration:underline;
}
.spide-legal__partners svg{ flex:0 0 auto; }

/* ============ Neutralisation du rose #c36 du socle (base.css) ============ */
.spide-footer a,
.spide-footer a:hover,
.spide-footer a:focus{ color:var(--spide-foot); }
.spide-contact__panel a,
.spide-contact__panel a:hover,
.spide-contact__panel a:focus{ color:var(--spide-white); }


/* ============ RESPONSIVE ============ */
@media (max-width:980px){
	.spide-contact__panel{
		grid-template-columns:1fr;
		gap:clamp(28px,5vw,40px);
	}
}
@media (max-width:860px){
	.spide-foot__inner{
		flex-direction:column;
		gap:36px;
	}
	.spide-foot__top{ gap:32px; }
}
@media (max-width:640px){
	.spide-contact__row{
		flex-direction:column;
		gap:20px;
	}
	.spide-contact__coords{
		flex-direction:column;
		gap:24px;
	}
	.spide-foot__top{
		flex-direction:column;
		gap:32px;
	}
	.spide-foot__secteurs-grid{
		flex-direction:column;
		gap:8px;
	}
	.spide-foot__bottom-nav{ gap:32px; }
	.spide-legal__inner{ gap:40px; }
	.spide-legal__partners{ gap:16px 24px; }
	/* Mobile : carte plus haute (ratio portrait) — on zoome, on rogne les bords */
	.spide-map__img{
		aspect-ratio:1 / 1.15;   /* crop horizontal : le vertical est exact, le marqueur reste à sa hauteur */
	}
	.spide-map__pin{
		left:50%;
		top:50%;
		width:46px;
		height:46px;
	}
	.spide-map__pin img{ width:22px; }
}

/* ============================================================
 * Anti-spam ALTCHA — widget posé sur le panneau bleu du formulaire.
 * ALTCHA 3.x rend en light DOM : on cible ses variables et ses classes.
 * ⚠️ --altcha-color-success (fond de la case cochée) est ici clair,
 * donc --altcha-color-success-content DOIT être contrasté, sinon la
 * coche est blanche sur blanc = « vérifié » mais case visuellement vide.
 * ============================================================ */
.cf-altcha{ margin:4px 0 2px; }
.cf-altcha altcha-widget{
	--altcha-max-width:100%;
	--altcha-border-width:1px;
	--altcha-border-radius:0;
	--altcha-color-base:transparent;
	--altcha-border-color:var(--spide-white);
	--altcha-color-base-content:var(--spide-white);
	--altcha-color-text:var(--spide-white);
	--altcha-color-success:var(--spide-white);
	--altcha-color-success-content:var(--spide-blue);
	--altcha-color-error-content:#FFD2D2;
	--altcha-color-footer-bg:transparent;
	display:block;
}
.cf-altcha .altcha-checkbox-wrap label{
	font-size:13px;
	line-height:1.36;
	white-space:nowrap;
}

/* Attribution OpenStreetMap (obligatoire pour les fonds de carte OSM) */
.spide-map__credit{
	position:absolute;
	right:8px;
	bottom:6px;
	font-size:10px;
	line-height:1.2;
	color:#6b6b6b;
	background:rgba(255,255,255,.72);
	padding:2px 6px;
	border-radius:2px;
	letter-spacing:.01em;
}
.spide-map__credit a{ color:inherit; text-decoration:none; }
.spide-map__credit a:hover{ text-decoration:underline; }