/*
 * Pied de page : appel au devis sur une vidéo de fond (footer.js),
 * colonnes de liens, bande légale dessinée comme le cartouche d'un plan.
 * Tout le contenu est en blocs cœur, modifiable dans l'éditeur de site.
 * Les couleurs sont déclarées ici : sur fond bleu nuit, rien ne doit hériter des styles
 * globaux (titres et liens bleu nuit).
 */

.cp-pied {
	--cp-f-text: #fff;
	--cp-f-text-2: #C9CBE0;
	--cp-f-text-3: #9A9EBD;
	--cp-f-line: rgba(255, 255, 255, .12);
	--cp-f-line-2: rgba(255, 255, 255, .24);
	--cp-f-orange: var(--wp--preset--color--orange, #FF9900);
	position: relative;
	margin: 0 !important;
	background: var(--wp--preset--color--navy, #000033);
	color: var(--cp-f-text);
	overflow: hidden;
	/* clip rogne comme hidden sans créer de conteneur de défilement : la colonne collante de la FAQ fonctionne. */
	overflow: clip;
}
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.cp-pied,
.cp-pied *,
.cp-pied *::before,
.cp-pied *::after { box-sizing: border-box; }
.cp-pied p { margin: 0; }
.cp-pied a { color: inherit; }
.cp-pied a:focus-visible { outline: 2px solid var(--cp-f-orange); outline-offset: 3px; border-radius: 3px; }

/*
 * Les grilles gèrent leurs espacements : on neutralise la marge automatique des blocs.
 * Sans cela, WordPress met 24 px entre la bande vidéo, les colonnes et le cartouche, et la marge
 * du bloc de texte (placé après la vidéo) déborde au-dessus de la bande : deux bandes bleu nuit.
 */
.cp-pied > *,
.cp-pied__band > *,
.cp-pied__cta > *,
.cp-pied__pitch > *,
.cp-cols > *,
.cp-col > *,
.cp-cartouche__grid > * { margin-block: 0 !important; }

/* ---------- Appel au devis ---------- */
.cp-pied__cta {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	min-height: clamp(460px, 62vh, 640px);
	padding-block: clamp(72px, 9vw, 128px);
}
.cp-pied__pitch { display: flex; flex-direction: column; align-items: flex-start; }
.cp-pied .cp-pied__title {
	margin-bottom: 18px !important;
	color: var(--cp-f-text);
	font-size: clamp(32px, 3.6vw, 54px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.01em;
}
.cp-pied__lead { margin-bottom: 32px !important; color: var(--cp-f-text-2); font-size: clamp(17px, 1.3vw, 19px); }
.cp-pied__actions { gap: 14px 18px; }
.cp-pied__actions .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; font-size: 17px; font-weight: 700; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.cp-pied__devis .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s;
}
.cp-pied__devis .wp-block-button__link:hover::after { transform: translateX(3px); }
.cp-pied .cp-pied__devis .wp-block-button__link { background: var(--cp-f-orange); color: var(--wp--preset--color--navy, #000033); }
.cp-pied .cp-pied__devis .wp-block-button__link:hover { background: #FFAD33; color: var(--wp--preset--color--navy, #000033); }
.cp-pied .cp-pied__tel .wp-block-button__link {
	padding: 14px 22px;
	border: 1px solid var(--cp-f-line-2);
	background: transparent;
	color: var(--cp-f-text);
	font-variant-numeric: tabular-nums;
}
.cp-pied__tel .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--cp-f-orange);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.5 2.5 8 6 6.3 7.3a10 10 0 0 0 6.4 6.4L14 12l3.5 1.5-.6 3A2 2 0 0 1 15 18 13 13 0 0 1 2 5a2 2 0 0 1 1.5-1.9z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.5 2.5 8 6 6.3 7.3a10 10 0 0 0 6.4 6.4L14 12l3.5 1.5-.6 3A2 2 0 0 1 15 18 13 13 0 0 1 2 5a2 2 0 0 1 1.5-1.9z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cp-pied .cp-pied__tel .wp-block-button__link:hover { border-color: var(--cp-f-orange); background: transparent; color: var(--cp-f-text); }
.cp-pied__reply { display: flex; align-items: center; gap: 10px; margin-top: 22px !important; color: var(--cp-f-text-3); font-size: 15px; }
.cp-pied__reply::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--secteur-tertiaire, #4DAF47); box-shadow: 0 0 0 4px rgba(77, 175, 71, .18); }

/* ---------- Vidéo de fond (rendu serveur : div.cp-pied__video ; dans l'éditeur c'est un bloc YouTube) ---------- */
.cp-pied__band { position: relative; isolation: isolate; }
div.cp-pied__video {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
	container-type: size;
	background: #000;
}
.cp-pied__poster,
div.cp-pied__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%);
	border: 0;
	object-fit: cover;
	pointer-events: none;
}
div.cp-pied__video iframe { opacity: 0; transition: opacity .8s ease; }
div.cp-pied__video.is-playing iframe { opacity: 1; }
/* Voile noir (choix client) : dense sous le texte à gauche, la vidéo reste lisible à droite ; fondu bleu nuit en bas pour rejoindre les colonnes. */
div.cp-pied__video::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .7) 38%, rgba(0, 0, 0, .3) 68%, rgba(0, 0, 0, .15) 100%),
		linear-gradient(0deg, rgba(0, 0, 51, .85) 0%, rgba(0, 0, 51, 0) 22%);
}
.cp-pied__pitch { text-shadow: 0 1px 2px rgba(0, 0, 30, .4); }
.cp-pied__pitch .wp-block-button__link { text-shadow: none; }
.editor-styles-wrapper figure.cp-pied__video { margin-bottom: 24px !important; }

/* ---------- Colonnes ---------- */
.cp-pied__main { position: relative; border-top: 1px solid var(--cp-f-line); }

/* Trait de cote (comme entre les sections de l'accueil) : au-dessus du bandeau, de la FAQ et des colonnes. */
.cp-pied__band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 1px; background: var(--cp-f-line-2); pointer-events: none; }
.cp-pied__band::after,
.cp-pied .cp-faq::after,
.cp-pied__main::after {
	content: "";
	position: absolute;
	top: -1px;
	left: max(var(--wp--style--root--padding-left, 16px), calc((100% - 1400px) / 2));
	z-index: 5;
	width: 48px;
	height: 3px;
	background: var(--cp-f-orange);
	pointer-events: none;
}
.cp-pied .cp-faq { position: relative; box-shadow: inset 0 1px 0 rgba(0, 0, 51, .10); }
.cp-cols {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1.2fr .9fr 1.05fr;
	gap: 40px clamp(24px, 3vw, 48px);
	padding-block: clamp(48px, 5vw, 72px);
}
.cp-col { min-width: 0; }
.cp-col__title { margin-bottom: 18px !important; color: var(--cp-f-text); font-size: 17px; font-weight: 700; }
.cp-pied .cp-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cp-pied .cp-links a { color: var(--cp-f-text-2); font-size: 16px; text-decoration: none; transition: color .15s; }
.cp-pied .cp-links a:hover { color: var(--cp-f-orange); }
/* Pastille de secteur accrochée à l'adresse du lien : survit à un changement d'ordre ou de libellé. */
.cp-sectors a { display: inline-flex; align-items: baseline; gap: 10px; }
.cp-sectors a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--cp-f-text-3); transform: translateY(-1px); }
.cp-sectors a[href*="tertiaire"]::before { background: var(--wp--preset--color--secteur-tertiaire); }
.cp-sectors a[href*="culturel"]::before { background: var(--wp--preset--color--secteur-culturel); }
.cp-sectors a[href*="industriel"]::before { background: var(--wp--preset--color--secteur-industrie); }
.cp-sectors a[href*="patrimoine"]::before { background: var(--wp--preset--color--secteur-patrimoine); }
.cp-sectors a[href*="visite"]::before { background: var(--wp--preset--color--secteur-visite); }
.cp-sectors a[href*="particulier"]::before { background: var(--wp--preset--color--secteur-projet); }

.cp-brand__logo { margin-bottom: 20px !important; }
.cp-brand__logo img { display: block; height: auto; }
.cp-brand__pitch { margin-bottom: 22px !important; color: var(--cp-f-text-2); font-size: 16px; }
.cp-brand__mail { margin-bottom: 24px !important; }
.cp-brand__mail a { color: var(--cp-f-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--cp-f-line-2); }
.cp-brand__mail a:hover { border-color: var(--cp-f-orange); }
.cp-pied__social { gap: 10px !important; margin: 0; padding: 0; }
.cp-pied__social.is-style-logos-only .wp-social-link { background: none; color: var(--cp-f-text-2); }
.cp-pied__social .wp-social-link a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--cp-f-line-2); border-radius: 50%; transition: color .15s, border-color .15s, background .15s; }
.cp-pied__social .wp-social-link a:hover { border-color: var(--cp-f-orange); background: var(--cp-f-orange); color: var(--wp--preset--color--navy, #000033); }
.cp-pied__social .wp-social-link svg { width: 17px; height: 17px; }

.cp-agency { color: var(--cp-f-text-2); font-size: 16px; }
.cp-agency + .cp-agency { margin-top: 22px !important; }
.cp-agency strong { display: block; color: var(--cp-f-text); font-weight: 600; }
.cp-agency a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--cp-f-text-3); font-size: 14px; text-decoration: none; }
.cp-agency a::after { content: "↗"; font-size: 12px; }
.cp-agency a:hover { color: var(--cp-f-orange); }

/* ---------- Cartouche ---------- */
.cp-cartouche { border-top: 1px solid var(--cp-f-line); background: var(--wp--preset--color--navy-2, #00012E); }
.cp-cartouche__grid { display: grid; grid-template-columns: auto 1fr auto auto; color: var(--cp-f-text-3); font-size: 13px; }
.cp-cell { min-width: 0; padding: 16px 20px; border-right: 1px solid var(--cp-f-line); }
.cp-cell:first-child { padding-left: 0; }
.cp-cell:last-child { padding-right: 0; border-right: 0; }
.cp-cell strong { display: block; margin-bottom: 2px; color: var(--cp-f-text-2); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cp-cell--legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.cp-cell--legal a { color: var(--cp-f-text-2); text-decoration: none; }
.cp-cell--legal a:hover { color: var(--cp-f-orange); }
.cp-cell--scale { display: grid; grid-template-columns: auto 72px; align-items: end; column-gap: 10px; font-variant-numeric: tabular-nums; }
.cp-cell--scale strong { grid-column: 1 / -1; }
.cp-cell--scale::after {
	content: "";
	grid-column: 2;
	grid-row: 2;
	height: 6px;
	margin-bottom: 5px;
	border: 1px solid var(--cp-f-text-3);
	border-top: 0;
	background: linear-gradient(90deg, var(--cp-f-text-3) 0 25%, transparent 25% 50%, var(--cp-f-text-3) 50% 75%, transparent 75%);
}

/* ---------- Points de rupture ---------- */
@media (max-width: 1100px) {
	.cp-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cp-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: start; }
	.cp-brand > .cp-brand__logo { grid-row: span 3; }
	.cp-cartouche__grid { grid-template-columns: 1fr 1fr; }
	.cp-cell:nth-child(2) { padding-right: 0; border-right: 0; }
	.cp-cell:nth-child(3) { padding-left: 0; }
	.cp-cell:nth-child(n+3) { border-top: 1px solid var(--cp-f-line); }
}
@media (max-width: 820px) {
	.cp-pied__cta { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	div.cp-pied__video::after { background: rgba(0, 0, 0, .7); }
}
@media (max-width: 640px) {
	.cp-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 20px; }
	.cp-brand { display: block; }
	.cp-cartouche__grid { grid-template-columns: minmax(0, 1fr); }
	.cp-cell,
	.cp-cell:first-child,
	.cp-cell:nth-child(3) { padding-inline: 0; border-right: 0; }
	.cp-cell + .cp-cell { border-top: 1px solid var(--cp-f-line); }
	.cp-pied__actions .wp-block-button__link { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-pied * { transition: none !important; }
}

/* Bandeau de cookies : voir assets/css/cookies.css. */

/* Cartes Google soumises au consentement (functions.php + consent.js) : encart à la place de la carte. */
.cp-consent { position: relative; overflow: hidden; border-radius: 8px; }
.cp-consent iframe { display: block; }
.cp-consent__ask { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; border-radius: 8px; background: linear-gradient(135deg, #EDF2F9, #E1E8F3); color: var(--wp--preset--color--navy, #000033); text-align: center; }
.cp-consent.is-loaded .cp-consent__ask { display: none; }
.cp-consent__pin { color: var(--wp--preset--color--orange, #FF9900); }
.cp-consent__ask p { max-width: 34ch; margin: 0; font-size: 16px; line-height: 1.5; }
.cp-consent__accept { padding: 13px 22px; border: 0; border-radius: 8px; background: var(--wp--preset--color--navy, #000033); color: #fff; font: 700 15.5px/1.2 var(--wp--preset--font-family--titillium, sans-serif); cursor: pointer; transition: background-color .2s, color .2s; }
.cp-consent__accept:hover { background: var(--wp--preset--color--orange, #FF9900); color: var(--wp--preset--color--navy, #000033); }
.cp-consent__accept:focus-visible,
.cp-consent__out:focus-visible { outline: 2px solid var(--wp--preset--color--orange, #FF9900); outline-offset: 3px; }
.cp-consent__out { color: var(--wp--preset--color--navy, #000033); font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--wp--preset--color--orange, #FF9900); text-underline-offset: 3px; }