/*
 * Page Réalisations : bandeau en vidéo de fond (titre, introduction), qui passe sous l'en-tête
 * transparent (header.css), puis section blanche avec les filtres par secteur et la grille de
 * cartes « cartouche de plan » (la carte elle-même vient de carte-plan.css).
 * Le titre, l'introduction et la vidéo (bloc YouTube) s'écrivent dans la page ; la liste vient du
 * bloc « Liste des réalisations » (blocks/works-archive).
 */

/* ---------- Mise en page : sections collées ---------- */
.wp-site-blocks > .cp-wa-main,
.cp-wa-page { margin-block: 0; }
.cp-wa-main > *,
.cp-wa-page > * { margin-block: 0 !important; }

/* ---------- Bandeau ---------- */
.cp-wa-band {
	--cp-wa-head: calc(var(--cp-top-h, 40px) + var(--cp-bar-h, 76px));
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(420px, 62vh, 620px);
	padding-block: clamp(56px, 7vw, 96px);
	overflow: clip;
	background: var(--wp--preset--color--navy, #000033);
	color: #fff;
}
/* Avec la vidéo : le bandeau remonte sous l'en-tête, qui devient transparent (header.css). */
body:not(.editor-styles-wrapper) .cp-wa-page > .cp-wa-band:has(.cp-wa-band__video) {
	margin-top: calc(-1 * var(--cp-wa-head)) !important;
	min-height: calc(var(--cp-wa-head) + clamp(420px, 62vh, 620px));
	padding-top: calc(var(--cp-wa-head) + clamp(40px, 5vw, 72px));
}
/*
 * Vidéo de fond : un bloc YouTube dans le contenu de la page, rendu en image fixe par
 * functions.php puis remplacé par la vidéo en boucle après l'accord aux cookies (footer.js).
 */
div.cp-wa-band__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
	container-type: size;
	background: var(--wp--preset--color--navy, #000033);
}
.cp-wa-band__poster,
div.cp-wa-band__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-wa-band__video iframe { opacity: 0; transition: opacity .8s ease; }
div.cp-wa-band__video.is-playing iframe { opacity: 1; }
/*
 * Voile noir uniforme à 55 % (demande client : noir, comme celui de l'en-tête) : le plus léger qui
 * garde le texte lisible sur les plans à fond blanc de la vidéo (cas le plus défavorable, image
 * blanche : 4,8:1 pour le texte blanc, sans compter l'ombre des lettres). L'introduction s'étend
 * sur toute la largeur : pas de dégradé.
 */
div.cp-wa-band__video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}
.editor-styles-wrapper figure.cp-wa-band__video { position: relative; max-width: 520px; margin-bottom: 24px !important; }
.cp-wa-band__in {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 40px);
}
.cp-wa-band__in > * { margin: 0 !important; }
.cp-wa-band__txt { display: grid; gap: 20px; min-width: 0; }
.cp-wa-band__txt > * { margin: 0 !important; }
.cp-wa-band .cp-wa-band__title,
.cp-wa-band h1 { color: #fff; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -.015em; }
.cp-wa-band .cp-wa-band__lead { color: #fff; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
.cp-wa-band__lead strong,
.cp-wa-band__lead b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-wa-band a { color: #fff; text-decoration-color: var(--wp--preset--color--orange, #FF9900); }
/* Ombre douce portée par les lettres seules : le texte reste lisible sur les passages clairs de la vidéo. */
.cp-wa-band:has(.cp-wa-band__video) .cp-wa-band__title,
.cp-wa-band:has(.cp-wa-band__video) .cp-wa-band__lead {
	text-shadow: 0 0 10px rgba(0, 0, 30, .7), 0 0 24px rgba(0, 0, 30, .6), 0 0 48px rgba(0, 0, 30, .45);
}

/* ---------- Liste ---------- */
.cp-wa {
	display: flow-root;
	overflow-x: clip; /* le fond pleine largeur de la barre des filtres ne fait pas défiler la page ; clip garde le collant */
	padding-block: clamp(56px, 7vw, 96px) clamp(72px, 9vw, 120px);
	background: #fff;
}
.cp-wa__in {
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 40px);
}
/*
 * Barre des filtres (demande client du 04/10) : une seule ligne à toutes les tailles, qui défile si la place
 * manque (fondu sur le bord, flèches sur ordinateur, view.js), et collée sous l'en-tête au défilement, sur un
 * fond blanc pleine largeur ; ombre légère une fois collée (classe is-stuck, view.js).
 */
.cp-wa__bar {
	--cp-wa-pad: clamp(16px, 3vw, 40px);
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cp-bar-h, 76px));
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(20px, 2.6vw, 32px);
	padding-block: 12px;
}
.cp-wa__bar::before {
	content: "";
	position: absolute;
	inset: 0 50%;
	z-index: -1;
	width: 100vw;
	margin-left: -50vw;
	background: #fff;
	box-shadow: 0 1px 0 transparent;
	transition: box-shadow .25s;
}
.cp-wa__bar.is-stuck::before { box-shadow: 0 12px 24px -16px rgba(0, 0, 51, .35); }
.cp-wa__filters {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 8px;
	min-width: 0;
	padding: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.cp-wa__filters::-webkit-scrollbar { display: none; }
.cp-wa__bar.has-more-end .cp-wa__filters { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.cp-wa__bar.has-more-start .cp-wa__filters { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.cp-wa__bar.has-more-start.has-more-end .cp-wa__filters { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
/* Flèches en orange de la charte, flèche bleu nuit (demande client du 04/10) ; au bout de la ligne, contour gris. */
.cp-wa__arrow { display: none; flex: none; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--wp--preset--color--orange, #FF9900); border-radius: 8px; background: var(--wp--preset--color--orange, #FF9900); color: var(--wp--preset--color--navy, #000033); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.cp-wa__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-wa__arrow:hover { border-color: #FFAD33; background: #FFAD33; }
.cp-wa__arrow:disabled { border-color: #D9DCE6; background: #fff; color: #B4B8C7; cursor: default; }
.cp-wa__arrow:focus-visible { outline: 2px solid var(--wp--preset--color--navy, #000033); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.cp-wa__bar.has-overflow .cp-wa__arrow { display: grid; }
}
.cp-wa__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	min-height: 40px;
	padding: 7px 12px;
	white-space: nowrap;
	border: 1px solid #D9DCE6;
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--navy, #000033);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.cp-wa__chip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--cp-chip, #555B6B); }
.cp-wa__chip span { color: #555B6B; font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-wa__chip:hover { border-color: var(--wp--preset--color--navy, #000033); }
.cp-wa__chip[aria-pressed="true"] { border-color: var(--wp--preset--color--navy, #000033); background: var(--wp--preset--color--navy, #000033); color: #fff; }
.cp-wa__chip[aria-pressed="true"] span { color: #C9CCE0; }
.cp-wa__chip:focus-visible { outline: 2px solid var(--wp--preset--color--orange, #FF9900); outline-offset: 2px; }
.cp-wa__count { margin: 0 0 18px; color: #555B6B; font-size: 15px; }
.cp-wa__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.cp-wa__grid > li { display: flex; min-width: 0; margin: 0; }
.cp-wa__grid > li[hidden] { display: none; }
/* Séparateur, puis le filtre « Particulier » (type de la catégorie), à part des secteurs. */
.cp-wa__sep { flex: none; align-self: stretch; width: 1px; margin: 4px 4px; background: #D5DDEA; }
.cp-wa__chip--type svg { width: 15px; height: 15px; fill: none; stroke: var(--wp--preset--color--orange, #FF9900); stroke-width: 1.5; stroke-linejoin: round; }
/* Toutes les cartes sont dans la page : elles apparaissent en fondu à l'arrivée à l'écran (view.js).
   Sans script ou avec moins d'animations, la classe cp-wa--reveal n'est pas posée : rien n'est masqué. */
.cp-wa--reveal .cp-wa__grid > li { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); }
.cp-wa--reveal .cp-wa__grid > li.is-in { opacity: 1; transform: none; }
.cp-wa__empty { padding: 24px; border: 1px dashed #D9DCE6; color: #555B6B; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1000px) {
	.cp-wa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.cp-wa__grid { grid-template-columns: minmax(0, 1fr); }
	/* Téléphone : la ligne de filtres va jusqu'aux bords de l'écran. */
	.cp-wa__bar { margin-inline: calc(-1 * var(--cp-wa-pad)); padding-inline: var(--cp-wa-pad); padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	div.cp-wa-band__video iframe { transition: none; }
}