/* =========================================================================================
   Accueil : sections ajoutées le 25/09/2026 (audit SEO) — « Nos savoir-faire » et « Notre showroom ».
   Même grammaire visuelle que le site : titres Cormorant en capitales, texte Quicksand, prune #743344,
   cartes blanches à ombre douce (comme les cartes « Artisanat »), beige #f5f4ef / #eae8e0 de la page Contact.
   ========================================================================================= */

/* Enveloppe commune : même rythme que les sections converties (4 % en haut et en bas, rangée à 80 %). */
.cld-savoir-faire, .cld-showroom { padding: 4% 0; }
@media (max-width: 980px) { .cld-savoir-faire, .cld-showroom { padding: 50px 0; } }
/* Taille, interligne et espacement : style commun des H2 (contenu.css). */
.cld-titre-section { color: #000; }

/* ---- Nos savoir-faire ------------------------------------------------------------------ */
.cld-savoir-faire { background: #fff; }
.cld-savoir-faire__tete, .cld-savoir-faire__grille { width: var(--cld-largeur); max-width: var(--cld-largeur-max); margin: 0 auto; }
.cld-savoir-faire__tete { max-width: 760px; margin-bottom: 50px; }
.cld-savoir-faire__tete p { font-size: 17px; }
.cld-savoir-faire__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}
@media (max-width: 1100px) { .cld-savoir-faire__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cld-savoir-faire__grille { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.cld-metier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.07);
	transition: box-shadow .25s, transform .25s;
}
.cld-metier:hover { box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.12); transform: translateY(-3px); }
.cld-metier__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.cld-metier__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cld-metier:hover .cld-metier__photo img { transform: scale(1.04); }
.cld-metier__corps { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 24px; border-top: 3px solid var(--gcid-primary-color); }
.cld-metier__titre { font-size: 22px; line-height: 1.2em; padding-bottom: 12px; }
.cld-metier__corps > p:not(.cld-lien-fleche) { font-size: 15px; line-height: 1.7em; padding-bottom: 18px; }
.cld-metier__corps > .cld-lien-fleche { margin-top: auto; padding: 0; }
/* Toute la carte est cliquable (le lien s'étend sur la carte), le texte du lien reste l'ancre. */
.cld-metier .cld-lien-fleche a::before { content: ""; position: absolute; inset: 0; z-index: 1; }


/* ---- Notre showroom -------------------------------------------------------------------- */
/* Rangée du haut sur les deux tons de la page Contact, zone d'intervention sur une bande unie. */
.cld-showroom { padding: 0; background: #f5f4ef; }
.cld-showroom__haut {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* visuel plus large (demande de Guillaume, 25/09) */
	column-gap: 5.5%;
	align-items: center;
	padding: 4% 4% 4% 10%;
	/* Changement de ton au milieu de l'écart : 10 % + (86 % − 4,73 %) / 2,2 + 4,73 % / 2 ≈ 49,3 %. */
	background: linear-gradient(90deg, #f5f4ef 49.3%, #eae8e0 49.3%);
}
.cld-showroom__sous-titre, .cld-zone__titre { font-size: 22px; padding: 10px 0 8px; }
.cld-showroom__horaires { list-style: none; padding: 0 0 12px; line-height: 1.9; }
.cld-showroom__horaires strong { color: #000; font-weight: 600; }
.cld-showroom__adresse { position: relative; padding: 0 0 26px 26px !important; }
.cld-showroom__adresse::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 16px;
	height: 16px;
	background: var(--gcid-primary-color);
	-webkit-mask: url("../icones/fa-f124.svg") center / contain no-repeat;
	mask: url("../icones/fa-f124.svg") center / contain no-repeat;
}
/* Boutons : modèle commun (contenu.css). */
.cld-showroom__photo { margin: 0; text-align: center; }
.cld-showroom__photo img { width: 100%; height: auto; }

.cld-zone { padding: 50px 10% 4%; border-top: 1px solid rgba(116, 51, 68, .18); }
.cld-zone > p { max-width: 900px; }
.cld-zone__communes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 18px 0 0; }
.cld-zone__communes li {
	padding: 6px 16px;
	border: 1px solid rgba(116, 51, 68, .35);
	border-radius: 999px;
	background: #fff;
	color: var(--gcid-primary-color);
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 980px) {
	.cld-showroom__haut { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding: 50px 10%; background: #f5f4ef; }
	.cld-showroom__visuel { order: -1; }
	.cld-showroom__photo img { max-width: 480px; }
	.cld-zone { padding: 40px 10% 50px; }
}


/* Lien vers la page « Agencement intérieur », sous les cartes (02/10/2026). */
.cld-savoir-faire__suite { width: var(--cld-largeur); margin: 44px auto 0; text-align: center; }