/* ==========================================================================
   Pied de page JDK Concept, autonome (sans Elementor).

   Trois bandeaux (marque, menus, mentions) empilés sur UN SEUL axe horizontal :
   le conteneur reprend exactement le cadre des sections du site,
   1180px de large et 24px de retrait, si bien que les colonnes du pied
   s'alignent sur le contenu des pages au lieu de flotter plus à gauche.

   Toutes les respirations descendent de quatre variables. Corriger l'air du
   pied de page, c'est corriger une valeur, jamais dix règles.

   ⛔ Le fond est déclaré ICI, explicitement. La version précédente n'en
   posait aucun : depuis la dépose d'Elementor plus rien ne peignait derrière,
   et le texte clair se retrouvait sur le blanc du body.
   ========================================================================== */

.jdk-pied {
	/* palette */
	--pied-fond: #151515;
	--pied-or: #D2AF87;
	--pied-or-clair: #E3C9A9;
	--pied-neige: #FFFAFA;
	--pied-texte: #D8D5D5;
	--pied-sourdine: #9AA0A0;
	--pied-filet: rgba(255, 255, 255, .10);
	--pied-rayon: 0px;

	/* respirations : les quatre seules valeurs à toucher */
	--pied-cadre: 1180px;
	--pied-marge-x: 24px;
	--pied-bande: clamp(40px, 4vw, 60px);
	--pied-gouttiere: clamp(28px, 3.4vw, 52px);
	--pied-titre-liste: 20px;

	background-color: var(--pied-fond);
	font-family: "Montserrat", sans-serif;
	color: var(--pied-texte);
}

.jdk-pied *,
.jdk-pied *::before,
.jdk-pied *::after { box-sizing: border-box; }

.jdk-pied__wrap {
	max-width: var(--pied-cadre);
	margin-inline: auto;
	padding-inline: var(--pied-marge-x);
}

.jdk-pied__hors-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- pictogrammes --- */

.jdk-pied__picto {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jdk-pied__picto--plein {
	width: 20px;
	height: 20px;
	fill: currentColor;
	stroke: none;
}

/* ==========================================================================
   Bandeau 1 : la marque
   ========================================================================== */

.jdk-pied__marque {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
	align-items: center;
	gap: var(--pied-gouttiere);
	padding-block: var(--pied-bande);
}

.jdk-pied__logo { display: block; }

.jdk-pied__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 172px;
}

/* ⛔ Le logo animé insère un conteneur entre le lien et l'image, et ce
   conteneur DOIT se réduire à l'image : le calque de lumière se cale dessus
   par inset:0, et son masque est étiré à 100% de sa boîte. En display:block
   il occupait toute la colonne, mesuré 342px pour une image de 172px, soit
   170px de décalage, et la lumière ne suivait plus le tracé. */
.jdk-pied__logo .jdk-logo { display: inline-block; }

.jdk-pied__coordonnees {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px var(--pied-gouttiere);
	font-style: normal;
}

.jdk-pied__ligne {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: .92rem;
	line-height: 1.65;
	color: var(--pied-texte);
}

.jdk-pied__ligne .jdk-pied__picto {
	margin-top: 3px;
	color: var(--pied-or);
}

.jdk-pied__tel,
.jdk-pied__tel:visited {
	font-family: "Oswald", sans-serif;
	font-size: 1.06rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--pied-neige);
	text-decoration: none;
	transition: color .25s ease;
}

.jdk-pied__tel:hover,
.jdk-pied__tel:focus,
.jdk-pied__tel:active { color: var(--pied-or); }

.jdk-pied__suivre { text-align: left; }

.jdk-pied__suivre-titre {
	margin: 0 0 14px;
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pied-sourdine);
}

.jdk-pied__reseaux {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ⛔ Le reset de Hello Elementor porte `a:active, a:hover { color: #336 }`
   en (0,1,1) : sans redéclaration explicite de la couleur au survol, le
   pictogramme, qui suit currentColor, virerait au bleu-violet. */
.jdk-pied__reseaux a,
.jdk-pied__reseaux a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--pied-rayon);
	background-color: var(--pied-or);
	color: #1B1B1B;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease;
}

.jdk-pied__reseaux a:hover,
.jdk-pied__reseaux a:focus,
.jdk-pied__reseaux a:active {
	background-color: var(--pied-or-clair);
	color: #1B1B1B;
	transform: translateY(-2px);
}

/* ==========================================================================
   Bandeau 2 : les menus
   ========================================================================== */

.jdk-pied__menus {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pied-gouttiere);
	padding-block: var(--pied-bande);
	border-top: 1px solid var(--pied-filet);
}

.jdk-pied__colonne { min-width: 0; }

.jdk-pied__titre {
	position: relative;
	margin: 0 0 var(--pied-titre-liste);
	padding-bottom: 12px;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pied-or);
}

.jdk-pied__titre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background-color: var(--pied-or);
}

.jdk-pied__liste,
.jdk-pied__liste ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* le retrait horizontal est nul : le libellé doit s'aligner sur le titre */
.jdk-pied__liste a,
.jdk-pied__liste a:visited {
	display: block;
	padding: 9px 0;
	font-size: .92rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pied-texte);
	text-decoration: none;
	transition: color .25s ease, transform .25s ease;
}

.jdk-pied__liste a:hover,
.jdk-pied__liste a:focus,
.jdk-pied__liste a:active {
	color: var(--pied-or);
	transform: translateX(4px);
}

/* ==========================================================================
   Bandeau 3 : les mentions
   ========================================================================== */

.jdk-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
	padding-block: 26px;
	border-top: 1px solid var(--pied-filet);
}

.jdk-pied__copyright {
	margin: 0;
	font-size: .85rem;
	color: var(--pied-sourdine);
}

.jdk-pied__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdk-pied__legal a,
.jdk-pied__legal a:visited {
	font-size: .85rem;
	color: var(--pied-sourdine);
	text-decoration: none;
	transition: color .25s ease;
}

.jdk-pied__legal a:hover,
.jdk-pied__legal a:focus,
.jdk-pied__legal a:active { color: var(--pied-or); }

/* ==========================================================================
   Adaptation aux écrans
   ========================================================================== */

@media (max-width: 1200px) {

	.jdk-pied__marque {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		align-items: start;
	}

	/* les réseaux passent sous les coordonnées plutôt que de comprimer la ligne */
	.jdk-pied__suivre { grid-column: 2; }
}

@media (max-width: 900px) {

	.jdk-pied__marque { grid-template-columns: minmax(0, 1fr); }

	.jdk-pied__suivre { grid-column: auto; }

	.jdk-pied__menus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {

	.jdk-pied {
		--pied-bande: 36px;
		--pied-gouttiere: 26px;
	}

	.jdk-pied__coordonnees { grid-template-columns: minmax(0, 1fr); }

	.jdk-pied__menus { grid-template-columns: minmax(0, 1fr); }

	.jdk-pied__bas {
		justify-content: center;
		text-align: center;
	}

	.jdk-pied__legal { justify-content: center; }

	.jdk-pied__copyright { order: 2; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {

	.jdk-pied *,
	.jdk-pied *::before,
	.jdk-pied *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.jdk-pied__liste a:hover,
	.jdk-pied__reseaux a:hover { transform: none; }
}