/*
 * Pages secteur (gabarit commun, maquettes validées le 01/10) : haut de page photo sous l'en-tête
 * transparent, cartouche de 3 chiffres à cheval, types de bâtiments en onglets, livrables (visionneuse), frise des étapes,
 * section propre (6 dispositions), réalisations sur fond brume, FAQ sous le bandeau du pied.
 * La teinte du secteur arrive dans --cp-sx-tint (posée par chaque bloc).
 * Fonds : blanc, brume, bleu nuit, blanc, brume : jamais deux voisins identiques.
 */

.cp-sx-page {
	--cp-sx-navy: var(--wp--preset--color--navy, #000033);
	--cp-sx-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-sx-ink: var(--wp--preset--color--ink, #0B0B1F);
	--cp-sx-mute: var(--wp--preset--color--mute, #555B6B);
	--cp-sx-mist: var(--wp--preset--color--mist, #F3F4F8);
	--cp-sx-sky: #EDF2F9;
	--cp-sx-line: #D5DDEA;
	--cp-sx-head: calc(var(--cp-top-h, 40px) + var(--cp-bar-h, 76px));
}
.cp-sx-page > * { margin-block: 0 !important; }
[class*="cp-sx-"],
[class*="cp-sx-"] * { box-sizing: border-box; }
/* Teinte profonde du secteur (vert sombre pour le tertiaire) : remplace le bleu nuit de tous les fonds et
   voiles des pages secteur (demande client) ; les titres restent bleu nuit. */
.cp-sx-hero, .cp-sx-typo, .cp-sx-liv, .cp-sx-steps, .cp-sx-focus, .cp-sx-page > .cp-last { --cp-sx-deep: color-mix(in srgb, var(--cp-sx-tint, #000033) 25%, #010403); }
/* Fonds clairs et filets dans la teinte du secteur (demande client du 01/10 : « le code couleur propre à chaque
   page ») : ils remplacent le bleu clair (#EDF2F9) et le filet bleuté de la charte générale. */
.cp-sx-typo, .cp-sx-liv, .cp-sx-focus { --cp-sx-sky: color-mix(in srgb, var(--cp-sx-tint, #000033) 10%, #fff); --cp-sx-line: color-mix(in srgb, var(--cp-sx-tint, #000033) 24%, #E4E6EA); }
[class*="cp-sx-"] :is(h1, h2, h3, p, ul, ol, dl, dd, dt, figure) { margin: 0; }
[class*="cp-sx-"] :is(ul, ol) { padding: 0; list-style: none; }
[class*="cp-sx-"] img { display: block; max-width: 100%; height: auto; }

.cp-sx-wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }
.cp-sx-h2 { color: var(--cp-sx-navy); font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; font-weight: 700; letter-spacing: -.012em; }
.cp-sx-intro { margin-top: 18px; color: var(--cp-sx-mute); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; }
.cp-sx-intro p + p { margin-top: 16px; }
.cp-sx-intro a { color: var(--cp-sx-navy); font-weight: 700; text-decoration: none; box-shadow: inset 0 -2px rgba(255, 153, 0, .7); }
.cp-sx-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.cp-sx-head .cp-sx-intro { margin-top: 0; }
.cp-sx-lnk { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 2px; border-bottom: 2px solid var(--cp-sx-orange); color: var(--cp-sx-navy); font-weight: 700; text-decoration: none; }
.cp-sx-lnk svg { width: 15px; height: 15px; transition: transform .2s; }
.cp-sx-lnk:hover svg { transform: translateX(3px); }
.cp-sx-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--cp-sx-tint, var(--cp-sx-orange)); color: var(--cp-sx-navy); }
[class*="cp-sx-"] svg[viewBox="0 0 32 32"],
.cp-sx-dec__k svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-ico svg { width: 30px; height: 30px; }
:is(.cp-sx-lnk, .cp-sx-btn, .cp-sx-ev, .cp-sx-lv button, .cp-sx-crumb a):focus-visible { outline: 3px solid var(--cp-sx-orange); outline-offset: 3px; }
@media (max-width: 900px) {
	.cp-sx-head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Haut de page (validé le 01/10) : contenu à gauche, carte des départements à droite ----------
   Fond bleu nuit uni sous l'en-tête transparent, un seul halo de la teinte du secteur derrière la carte. */
.cp-sx-hero {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--cp-sx-head)) !important;
	overflow: clip;
	background: var(--cp-sx-deep);
	color: #fff;
}
/* Photo sous le dégradé de la production (demande client du 02/10), relevé sur ses images d'en-tête :
   plein jusqu'à 35 % de la largeur puis fondu jusqu'à 65 % ; bande pleine en haut (11 %) fondue jusqu'à 36 %,
   fondu du bas de 68 % au plein. Teinte du secteur sur les 6 pages secteur, #01012C ailleurs. Avec un bloc à
   droite (carte, trajectoire, chiffres), un voile à 50 % reste derrière lui pour qu'il se lise. */
.cp-sx-hero .cp-sx-hero__img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.cp-sx-hero.has-bg { --cp-veil: var(--cp-sx-deep); }
.cp-sx-hero.has-bg.is-charte { --cp-veil: #01012C; }
.cp-sx-hero.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
}
@media (min-width: 901px) {
.cp-sx-hero.has-bg::after {
	--cp-veil-h: linear-gradient(90deg, var(--cp-veil) 0%, var(--cp-veil) 35%, color-mix(in srgb, var(--cp-veil) 92%, transparent) 40%, color-mix(in srgb, var(--cp-veil) 78%, transparent) 45%, color-mix(in srgb, var(--cp-veil) 58%, transparent) 50%, color-mix(in srgb, var(--cp-veil) 38%, transparent) 55%, color-mix(in srgb, var(--cp-veil) 20%, transparent) 60%, color-mix(in srgb, var(--cp-veil) 7%, transparent) 65%, transparent 70%);
	--cp-veil-v: linear-gradient(180deg, var(--cp-veil) 0%, var(--cp-veil) 11%, color-mix(in srgb, var(--cp-veil) 90%, transparent) 15%, color-mix(in srgb, var(--cp-veil) 70%, transparent) 20%, color-mix(in srgb, var(--cp-veil) 45%, transparent) 25%, color-mix(in srgb, var(--cp-veil) 20%, transparent) 30%, transparent 36%, transparent 68%, color-mix(in srgb, var(--cp-veil) 30%, transparent) 75%, color-mix(in srgb, var(--cp-veil) 50%, transparent) 80%, color-mix(in srgb, var(--cp-veil) 68%, transparent) 85%, color-mix(in srgb, var(--cp-veil) 86%, transparent) 90%, color-mix(in srgb, var(--cp-veil) 96%, transparent) 95%, var(--cp-veil) 100%);
	background: var(--cp-veil-h), var(--cp-veil-v);
}
.cp-sx-hero.has-bg:not(.is-solo)::after { background: var(--cp-veil-h), var(--cp-veil-v), linear-gradient(90deg, transparent 45%, color-mix(in srgb, var(--cp-veil) 50%, transparent) 62%); }
}
.cp-sx-hero::before { content: ""; position: absolute; right: -10%; top: 12%; z-index: -1; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 16%, transparent), transparent); pointer-events: none; }
.cp-sx-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: calc(var(--cp-sx-head) + clamp(48px, 6vw, 88px)) clamp(72px, 8vw, 120px); }
.cp-sx-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: rgba(255, 255, 255, .75); font-size: 14px; }
.cp-sx-crumb a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.cp-sx-crumb a:hover { text-decoration: underline; text-decoration-color: var(--cp-sx-orange); }
.cp-sx-crumb span[aria-hidden] { color: var(--cp-sx-orange); }
/* Taille des titres longs validée le 01/10 (is-traj), étendue à tous les hauts de page : 2 lignes maxi sur ordinateur. */
.cp-sx-hero .cp-sx-hero__title { margin-top: 24px; color: #fff; font-size: clamp(32px, 3.1vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.018em; text-wrap: balance; }
.cp-sx-hero .cp-sx-hero__lead { max-width: 90%; margin-top: 24px; color: rgba(255, 255, 255, .8); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; } /* 90 % : demande client du 14/10 */
.cp-sx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.cp-sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 8px; background: var(--cp-sx-orange); color: var(--cp-sx-navy); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s, box-shadow .2s, color .2s; }
.cp-sx-btn:hover { background: #fff; color: var(--cp-sx-navy); }
.cp-sx-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.cp-sx-btn--ghost:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--cp-sx-orange); }

/* Carte : départements gris, ceux du secteur dans sa teinte, orange au survol. */
.cp-sx-map { position: relative; width: 100%; max-width: 560px; justify-self: end; }
.cp-sx-map svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.cp-sx-map path { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .2); stroke-width: .6; stroke-linejoin: round; transition: fill .25s, opacity .25s; }
/* Sur photo, les départements gris translucides disparaissaient (vu par le client) : silhouette pleine à
   filets blancs et ombre portée, qui se détache de n'importe quelle photo. */
.cp-sx-hero.has-bg .cp-sx-map svg { filter: drop-shadow(0 18px 40px rgba(0, 0, 20, .45)); }
/* Fond de carte dans la couleur du secteur (vert pour le tertiaire), sombre et translucide ; les départements
   à réalisations restent dans la couleur pleine. */
.cp-sx-hero.has-bg .cp-sx-map path { fill: color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 34%, rgb(0 0 30 / .72)); stroke: rgba(255, 255, 255, .36); }
.cp-sx-map path.is-on,
.cp-sx-hero.has-bg .cp-sx-map path.is-on { fill: var(--cp-sx-tint, var(--cp-sx-orange)); stroke: var(--cp-sx-deep, #000033); stroke-width: .8; cursor: pointer; outline: none; }
.cp-sx-map path.is-on:hover,
.cp-sx-map path.is-on:focus-visible,
.cp-sx-map path.is-on.is-open,
.cp-sx-hero.has-bg .cp-sx-map path.is-on:hover,
.cp-sx-hero.has-bg .cp-sx-map path.is-on:focus-visible,
.cp-sx-hero.has-bg .cp-sx-map path.is-on.is-open { fill: var(--cp-sx-orange); }
.cp-sx-map svg:has(path.is-open) path.is-on:not(.is-open) { opacity: .55; }
.cp-sx-map figcaption { margin-top: 18px; color: rgba(255, 255, 255, .72); font-size: 14px; text-align: center; }
.cp-sx-map figcaption b { color: #fff; font-weight: 700; }
/* Fiches des départements. Sans script : liste sous la carte. Avec script (.is-js) : bulle sur la carte. */
.cp-sx-map__pops { display: grid; gap: 12px; margin-top: 20px; }
.cp-sx-pop { padding: 16px 18px; border-radius: 8px; background: #fff; color: var(--cp-sx-navy); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.cp-sx-map.is-js .cp-sx-map__pops { display: contents; }
.cp-sx-map.is-js .cp-sx-pop { position: absolute; z-index: 5; width: min(320px, 90%); }
.cp-sx-map.is-js .cp-sx-pop:not(.is-open) { display: none; }
.cp-sx-pop__h { font-size: 17px; line-height: 1.3; font-weight: 700; }
.cp-sx-pop__h small { display: block; margin-top: 2px; color: var(--cp-sx-mute); font-size: 13px; font-weight: 600; }
.cp-sx-pop ul { max-height: 260px; margin-top: 10px !important; overflow: auto; border-top: 1px solid #E3E5EC; }
.cp-sx-pop li + li { border-top: 1px solid #E3E5EC; }
.cp-sx-pop a { display: flex; flex-direction: column; padding: 9px 0; color: var(--cp-sx-navy); font-size: 14px; line-height: 1.35; text-decoration: none; }
.cp-sx-pop a b { font-weight: 700; }
.cp-sx-pop a span { color: var(--cp-sx-mute); font-size: 13px; }
.cp-sx-pop a:hover b { text-decoration: underline; text-decoration-color: var(--cp-sx-orange); }
.cp-sx-pop a:focus-visible { outline: 2px solid var(--cp-sx-orange); outline-offset: 2px; }
@media (max-width: 900px) {
	.cp-sx-hero__in { grid-template-columns: minmax(0, 1fr); }
	/* Texte sur toute la largeur : voile uniforme. */
	.cp-sx-hero.has-bg::after { background: linear-gradient(color-mix(in srgb, var(--cp-sx-deep) 76%, transparent), color-mix(in srgb, var(--cp-sx-deep) 76%, transparent)), linear-gradient(180deg, color-mix(in srgb, var(--cp-sx-deep) 50%, transparent) 0%, color-mix(in srgb, var(--cp-sx-deep) 0%, transparent) 30%, color-mix(in srgb, var(--cp-sx-deep) 35%, transparent) 100%); }
	.cp-sx-map { max-width: 520px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-map path { transition: none; }
}

/* ---------- Types de bâtiments : explorateur en onglets (maquette validée le 01/10, remplace les cartes) ----------
   Onglets à gauche (en rangée défilante sous 900 px), photo en fondu, puis texte, chiffres et réalisations sur la
   teinte profonde du secteur. Tous les panneaux occupent la même case de grille : la hauteur ne bouge pas quand
   les onglets défilent seuls (secteur.js), et la page en dessous ne saute pas. */
.cp-sx-typo { padding-block: clamp(72px, 9vw, 128px) clamp(72px, 9vw, 120px); background: #fff; }
.cp-sx-ex { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-ex__tabs { position: sticky; top: calc(var(--cp-bar-h, 76px) + 24px); display: flex; flex-direction: column; gap: 6px; }
.cp-sx-ex__tab { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--cp-sx-navy); font: inherit; font-size: 17px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .3s, color .3s; }
.cp-sx-ex__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 14%, #fff); color: color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 50%, #000033); transition: background-color .3s, color .3s; }
.cp-sx-ex__ico svg { width: 24px; height: 24px; }
.cp-sx-ex__bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; overflow: hidden; }
.cp-sx-ex__bar i { display: block; width: 100%; height: 100%; background: var(--cp-sx-orange); transform: scaleX(0); transform-origin: left; }
.cp-sx-ex__tab:hover { background: var(--cp-sx-mist); }
.cp-sx-ex__tab.is-on { background: var(--cp-sx-deep); color: #fff; }
.cp-sx-ex__tab.is-on .cp-sx-ex__ico { background: var(--cp-sx-tint, var(--cp-sx-orange)); color: var(--cp-sx-tint-ink, var(--cp-sx-navy)); }
.cp-sx-ex__tab.is-on .cp-sx-ex__bar { background: rgba(255, 255, 255, .16); }
.cp-sx-ex.is-run .cp-sx-ex__tab.is-on .cp-sx-ex__bar i { animation: cp-sx-ex-fill var(--cp-sx-ex-dur, 8s) linear forwards; }
.cp-sx-ex.is-paused .cp-sx-ex__tab.is-on .cp-sx-ex__bar i { animation-play-state: paused; }
.cp-sx-ex:not(.is-run) .cp-sx-ex__tab.is-on .cp-sx-ex__bar i { transform: scaleX(1); }
@keyframes cp-sx-ex-fill { to { transform: scaleX(1); } }
.cp-sx-ex :is(.cp-sx-ex__tab, .cp-sx-ex__ctrl button, .cp-sx-ex__r):focus-visible { outline: 3px solid var(--cp-sx-orange); outline-offset: 2px; }

.cp-sx-ex__stage { min-width: 0; border-radius: 8px; overflow: hidden; background: var(--cp-sx-deep); color: #fff; }
.cp-sx-ex__pic { position: relative; aspect-ratio: 16 / 7; max-width: 100%; overflow: hidden; background: var(--cp-sx-deep); }
.cp-sx-ex .cp-sx-ex__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s ease, transform 9s linear; }
.cp-sx-ex .cp-sx-ex__img.is-on { opacity: 1; transform: scale(1); }
/* Photo à fond blanc (détection automatique) : ciel bleu clair à la place du blanc, comme sur les cartes. */
.cp-sx-ex__pic { transition: background-color .9s ease; }
.cp-sx-ex__pic:has(> .cp-sx-ex__img.is-fond-clair.is-on) { background: #E3EAF4; }
.cp-sx-ex .cp-sx-ex__img.is-fond-clair { mix-blend-mode: multiply; }
.cp-sx-ex__pic::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cp-sx-deep) 85%, transparent)); pointer-events: none; }
.cp-sx-ex__ctrl { position: absolute; right: 16px; top: 16px; z-index: 2; display: flex; gap: 8px; }
.cp-sx-ex__ctrl button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--cp-sx-deep) 82%, transparent); color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.cp-sx-ex__ctrl button:hover { background: var(--cp-sx-orange); color: var(--cp-sx-navy); }
.cp-sx-ex__ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-ex__pp .cp-sx-ex__i-play,
.cp-sx-ex__pp.is-stopped .cp-sx-ex__i-pause { display: none; }
.cp-sx-ex__pp.is-stopped .cp-sx-ex__i-play { display: inline; }

.cp-sx-ex__panes { display: grid; }
.cp-sx-ex__pane { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px clamp(28px, 3.5vw, 56px); padding: clamp(24px, 3vw, 40px); }
.cp-sx-ex__pane.is-solo { grid-template-columns: minmax(0, 1fr); }
.cp-sx-ex__pane:not(.is-on) { visibility: hidden; }
.cp-sx-ex__pane.is-on { animation: cp-sx-ex-rise .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes cp-sx-ex-rise { from { opacity: 0; transform: translateY(14px); } }
.cp-sx-ex__txt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cp-sx-ex__txt h3 { color: #fff; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.15; font-weight: 700; text-wrap: balance; }
.cp-sx-ex__txt > p { color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.65; }
.cp-sx-ex__kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cp-sx-ex__kpi div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 16px 18px; border-radius: 8px; background: rgba(255, 255, 255, .07); }
.cp-sx-ex__kpi dd { color: var(--cp-sx-orange); font-size: clamp(30px, 2.6vw, 40px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-sx-ex__kpi dt { color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.4; }
.cp-sx-ex__real { min-width: 0; }
.cp-sx-ex__rl { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cp-sx-ex__real li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cp-sx-ex__r { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 16px; align-items: center; padding: 14px 0; color: #fff; text-decoration: none; }
.cp-sx-ex__rn { font-weight: 600; line-height: 1.3; }
.cp-sx-ex__r small { grid-row: 2; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.4; }
.cp-sx-ex__r svg { grid-row: 1 / 3; grid-column: 2; width: 20px; height: 20px; fill: none; stroke: var(--cp-sx-orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
a.cp-sx-ex__r:hover .cp-sx-ex__rn { text-decoration: underline; text-decoration-color: var(--cp-sx-orange); text-underline-offset: 4px; }
a.cp-sx-ex__r:hover svg { transform: translateX(4px); }
@media (max-width: 1100px) {
	.cp-sx-ex__pane { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.cp-sx-ex { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-ex__tabs { position: static; flex-direction: row; gap: 8px; margin-inline: calc(-1 * clamp(16px, 3vw, 40px)); padding: 2px clamp(16px, 3vw, 40px) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.cp-sx-ex__tabs::-webkit-scrollbar { display: none; }
	.cp-sx-ex__tabs li { flex: 0 0 auto; scroll-snap-align: start; }
	.cp-sx-ex__tab { grid-template-columns: 32px auto; gap: 10px; padding: 10px 14px; font-size: 15px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--cp-sx-line); }
	.cp-sx-ex__tab.is-on { box-shadow: none; }
	.cp-sx-ex__ico { width: 32px; height: 32px; }
	.cp-sx-ex__ico svg { width: 19px; height: 19px; }
	.cp-sx-ex__pic { aspect-ratio: 4 / 3; }
}

/* ---------- Livrables : visionneuse + liste ---------- */
.cp-sx-liv { padding-block: clamp(72px, 9vw, 128px); background: var(--cp-sx-mist); }
.cp-sx-liv__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: start; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-viewer { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cp-bar-h, 76px) + 24px); border-radius: 8px; overflow: hidden; background: var(--cp-sx-deep); box-shadow: 0 30px 70px -30px rgba(0, 0, 51, .45); }
.cp-sx-viewer__stage { position: relative; aspect-ratio: 4 / 3; }
.cp-sx-viewer__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.cp-sx-viewer__stage img.is-on { opacity: 1; }
.cp-sx-viewer__cap { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); font-size: 14px; }
.cp-sx-viewer__cap b { flex: none; color: #fff; }
/* Cartes empilées au défilement : chaque carte colle sous l'en-tête et la suivante se pose dessus.
   Liste en flex (pas en grille : une cellule de grille bornerait le collage à sa propre rangée) ;
   hauteur égale posée par secteur.js. La carte recouverte recule légèrement. */
.cp-sx-liv__list { display: flex; flex-direction: column; gap: 16px; }
/* Fin de pile calée sur la visionneuse : sans cette réserve (hauteur posée par secteur.js), la
   visionneuse, plus haute qu'une carte, quitterait l'écran avant que les dernières cartes s'empilent.
   En marge (hors de la boîte de la liste) : la dernière carte et la visionneuse partent ensemble. */
.cp-sx-liv .cp-sx-liv__list { margin-bottom: var(--cp-sx-tail, 0px); }
.cp-sx-lv { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cp-bar-h, 76px) + 24px); padding: 26px 26px 26px 80px; border-radius: 8px; background: #fff; color: var(--cp-sx-ink); box-shadow: 0 -14px 34px -22px rgba(0, 0, 51, .45); transform-origin: 50% 0; transition: background-color .35s, transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s; }
.cp-sx-lv.is-on { background: var(--cp-sx-deep); color: #fff; }
.cp-sx-lv.is-under { transform: scale(.95); opacity: .6; }
.cp-sx-lv__img { display: none; }
.cp-sx-lv__n { position: absolute; left: 26px; top: 26px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--cp-sx-sky); color: var(--cp-sx-navy); font-size: 14px; font-weight: 700; }
.cp-sx-lv.is-on .cp-sx-lv__n { background: var(--cp-sx-orange); }
.cp-sx-lv h3 { font-size: 21px; line-height: 1.25; font-weight: 700; color: inherit; }
/* Toute la carte réagit au clic : le bouton du titre la recouvre. */
.cp-sx-lv button { all: unset; cursor: pointer; }
.cp-sx-lv button::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.cp-sx-lv button:focus-visible::after { outline: 3px solid var(--cp-sx-orange); outline-offset: 2px; }
.cp-sx-lv p { margin-top: 10px; color: var(--cp-sx-mute); font-size: 16px; line-height: 1.6; }
.cp-sx-lv.is-on p { color: rgba(255, 255, 255, .85); }
@media (max-width: 900px) {
	.cp-sx-liv__grid { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-viewer { display: none; }
	.cp-sx-lv { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cp-bar-h, 64px) + 12px); padding: 0 0 22px; overflow: hidden; }
	.cp-sx-lv__img { display: block; aspect-ratio: 16 / 9; margin-bottom: 20px; background: var(--cp-sx-deep); }
	.cp-sx-lv__img img { width: 100%; height: 100%; object-fit: cover; }
	.cp-sx-lv__n { top: 12px; left: 12px; }
	.cp-sx-lv h3,
	.cp-sx-lv p { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-lv.is-under { transform: none; }
}

/* ---------- Étapes : frise dynamique sur photo voilée ----------
   Au défilement, la ligne se remplit en orange et les étapes s'allument (secteur.js pose .is-tl sur la
   section, puis .is-done sur chaque étape atteinte et --cp-sx-p, avancement de 0 à 1). Sans script,
   tout est allumé. Voile dans la teinte profonde du secteur, mesuré au canevas sur les 6 photos : texte >= 5,7:1. */
.cp-sx-steps { position: relative; isolation: isolate; padding-block: clamp(80px, 10vw, 140px); background: var(--cp-sx-deep); color: #fff; overflow: clip; }
.cp-sx-steps .cp-sx-steps__bg { position: absolute; inset: -6% 0; z-index: -2; width: 100%; height: 112%; max-width: none; object-fit: cover; transform: translateY(calc((var(--cp-sx-p, .5) - .5) * -6%)); }
.cp-sx-steps.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-sx-deep) 86%, transparent) 0%, color-mix(in srgb, var(--cp-sx-deep) 76%, transparent) 45%, color-mix(in srgb, var(--cp-sx-deep) 88%, transparent) 100%); }
/* Pages hors secteur (charte) : voile noir sur la photo, demande client du 01/10. Plus dense en haut (titre) et
   en bas ; pire cas, texte blanc sur pixel blanc voilé à 62 % : 5,9:1. */
.cp-sx-steps.has-bg.is-charte::before { background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .72) 100%); }
.cp-sx-steps .cp-sx-h2 { color: #fff; }
.cp-sx-steps .cp-sx-intro { color: rgba(255, 255, 255, .85); }
/* Liens du chapeau sur fond sombre : blancs, soulignés d'orange (le bleu nuit de .cp-sx-intro a y était illisible). */
.cp-sx-steps .cp-sx-intro a,
.cp-sx-focus.is-nuit .cp-sx-intro a { color: #fff; }
.cp-sx-tl { position: relative; margin-top: clamp(44px, 5vw, 72px); }
.cp-sx-tl__track { position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: rgba(255, 255, 255, .22); }
.cp-sx-tl__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--cp-sx-tint, var(--cp-sx-orange)); transform-origin: 0 50%; transform: scaleX(var(--cp-sx-p, 1)); }
.cp-sx-steps .cp-sx-steps__list { position: relative; display: grid; grid-template-columns: repeat(var(--cp-sx-steps, 5), minmax(0, 1fr)); gap: 28px; margin: 0; }
.cp-sx-st { position: relative; }
.cp-sx-st__n { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--cp-sx-tint, var(--cp-sx-orange)); color: var(--cp-sx-tint-ink, var(--cp-sx-navy)); font-weight: 700; box-shadow: 0 0 0 6px color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 22%, transparent); transition: background-color .4s, color .4s, box-shadow .4s; }
.cp-sx-steps .cp-sx-st h3 { margin-top: 22px; color: #fff; font-size: 21px; line-height: 1.25; font-weight: 700; }
.cp-sx-st p { margin-top: 10px; color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.6; }
.cp-sx-st h3,
.cp-sx-st p { transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1); }
/* Étapes pas encore atteintes : numéro en creux, texte en retrait. */
.cp-sx-steps.is-tl .cp-sx-st:not(.is-done) .cp-sx-st__n { background: var(--cp-sx-deep); color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.cp-sx-steps.is-tl .cp-sx-st:not(.is-done) h3,
.cp-sx-steps.is-tl .cp-sx-st:not(.is-done) p { opacity: .62; transform: translateY(10px); }
@media (max-width: 1100px) {
	.cp-sx-steps .cp-sx-steps__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.cp-sx-tl__track { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
	.cp-sx-tl__fill { width: auto; right: 0; transform-origin: 50% 0; transform: scaleY(var(--cp-sx-p, 1)); }
	.cp-sx-st { padding-left: 68px; }
	.cp-sx-st__n { position: absolute; left: 0; top: 0; }
	.cp-sx-steps .cp-sx-st h3 { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-steps .cp-sx-steps__bg { transform: none; }
	.cp-sx-st__n,
	.cp-sx-st h3,
	.cp-sx-st p { transition: none; }
}

/* ---------- Section propre (fond blanc entre la frise et les réalisations) ---------- */
.cp-sx-focus { padding-block: clamp(72px, 9vw, 128px); background: #fff; }
/* En-tête des sections propres : titre sur toute la largeur, texte dessous. */
.cp-sx-focus .cp-sx-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cp-sx-focus .cp-sx-head .cp-sx-intro { margin-top: 22px; }

/* Texte et panneau de chiffres (décret tertiaire) */
.cp-sx-dec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.cp-sx-dec__txt .cp-sx-intro { margin-top: 22px; color: var(--cp-sx-ink); }
.cp-sx-dec__plan { padding: clamp(24px, 3vw, 40px); border-radius: 8px; background: var(--cp-sx-sky); }
.cp-sx-dec__k { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 22px !important; color: var(--cp-sx-navy); font-size: 16px; font-weight: 600; }
.cp-sx-dec__k span { display: inline-flex; align-items: center; gap: 10px; }
.cp-sx-dec__k svg { flex: none; width: 22px; height: 22px; stroke: color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 55%, #000033); stroke-width: 1.8; }
.cp-sx-dec__dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cp-sx-line); }
.cp-sx-dec__dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 22px 18px 4px; border-left: 1px solid var(--cp-sx-line); }
.cp-sx-dec__dl > div:first-child { padding-left: 0; border-left: 0; }
.cp-sx-dec__dl dd { color: var(--cp-sx-navy); font-size: clamp(34px, 3.4vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.cp-sx-dec__dl dt { margin-top: 8px; color: var(--cp-sx-mute); font-size: 15px; }
.cp-sx-dec__note { margin-top: 18px !important; color: var(--cp-sx-mute); font-size: 13px; line-height: 1.5; }
/* Trajectoire (décret tertiaire, maquette validée le 01/10) : panneau dans la teinte profonde du secteur, barres à
   l'échelle (consommation restante, base 100), économie hachurée orange au-dessus. Les barres montent et les
   pourcentages défilent une fois, quand le panneau arrive à l'écran (secteur.js). */
.cp-sx-dec__pts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px !important; }
.cp-sx-dec__pts li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 8px; background: color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 12%, #fff); color: var(--cp-sx-navy); font-size: 15px; font-weight: 600; line-height: 1.3; }
.cp-sx-dec__pi { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--cp-sx-tint, var(--cp-sx-orange)); color: var(--cp-sx-tint-ink, var(--cp-sx-navy)); }
.cp-sx-dec__pi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-traj { position: relative; isolation: isolate; margin: 0; padding: clamp(24px, 3vw, 40px); overflow: hidden; border-radius: 8px; background: var(--cp-sx-deep); color: #fff; }
.cp-sx-traj::before { content: ""; position: absolute; top: -30%; right: -20%; z-index: -1; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 22%, transparent), transparent); pointer-events: none; }
.cp-sx-traj__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.cp-sx-traj__t { font-size: 18px; font-weight: 700; line-height: 1.3; }
.cp-sx-traj__u { color: rgba(255, 255, 255, .72); font-size: 14px; }
.cp-sx-traj__chart { position: relative; display: grid; grid-template-columns: repeat(var(--cp-sx-traj-n, 4), minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); height: clamp(240px, 26vw, 320px); margin-top: 28px; padding-top: 44px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.cp-sx-traj__mid { position: absolute; left: 0; right: 0; bottom: calc((100% - 44px) / 2); border-top: 1px dashed rgba(255, 255, 255, .14); pointer-events: none; }
.cp-sx-traj__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.cp-sx-traj__bar { display: block; height: calc(var(--v) * 1%); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--cp-sx-bar, var(--cp-sx-tint, var(--cp-sx-orange))), color-mix(in srgb, var(--cp-sx-bar, var(--cp-sx-tint, var(--cp-sx-orange))) 65%, var(--cp-sx-deep))); transform: scaleY(var(--s, 1)); transform-origin: bottom; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.cp-sx-traj__col.is-ref .cp-sx-traj__bar { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.cp-sx-traj__val { position: absolute; left: 0; right: 0; bottom: calc(var(--v) * 1% + 10px); color: #fff; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; opacity: var(--o, 1); transition: opacity .5s ease calc(var(--d, 0s) + .6s); }
.cp-sx-traj__col.is-ref .cp-sx-traj__val { color: rgba(255, 255, 255, .8); font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; }
.cp-sx-traj__saved { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--v) * 1%); border-radius: 8px 8px 0 0; background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 153, 0, .28) 7px 9px); border: 1px solid rgba(255, 153, 0, .45); border-bottom: 0; opacity: var(--o, 1); transition: opacity .6s ease calc(var(--d, 0s) + .5s); }
/* Sous la zone hachurée, la barre a le haut droit : les deux forment une seule colonne arrondie en haut. */
.cp-sx-traj__col:not(.is-ref) .cp-sx-traj__bar { border-radius: 0; }
.cp-sx-traj__yrs { display: grid; grid-template-columns: repeat(var(--cp-sx-traj-n, 4), minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); margin-top: 10px; color: rgba(255, 255, 255, .8); font-size: 15px; font-weight: 600; text-align: center; }
.cp-sx-traj__leg { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px !important; color: rgba(255, 255, 255, .78); font-size: 14px; }
.cp-sx-traj__leg span { display: inline-flex; align-items: center; gap: 8px; }
.cp-sx-traj__leg b { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--cp-sx-bar, var(--cp-sx-tint, var(--cp-sx-orange))); }
.cp-sx-traj__leg b.is-eco { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255, 153, 0, .6) 3px 5px); box-shadow: inset 0 0 0 1px rgba(255, 153, 0, .6); }
.cp-sx-traj__note { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.55; }
.cp-sx-traj.is-wait .cp-sx-traj__bar { --s: 0; }
.cp-sx-traj.is-wait :is(.cp-sx-traj__val, .cp-sx-traj__saved) { --o: 0; }
@media (max-width: 480px) {
	.cp-sx-traj__yrs { font-size: 13px; }
}

/* Photo avec un chiffre, texte et liste (billetterie) */
.cp-sx-bil__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.cp-sx-bil__txt { display: flex; flex-direction: column; justify-content: center; }
.cp-sx-bil__txt .cp-sx-intro { margin-top: 20px; color: var(--cp-sx-ink); }
.cp-sx-bil__stat { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; margin-top: 24px !important; padding: 12px 18px 12px 12px; border-radius: 8px; background: var(--cp-sx-deep); color: #fff; }
.cp-sx-bil__stat b { display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px; background: var(--cp-sx-orange); color: var(--cp-sx-navy); font-size: 17px; line-height: 1.1; font-weight: 700; }
.cp-sx-bil__stat span { color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.35; }
.cp-sx-bil__fig { position: relative; min-height: 340px; margin: 0; overflow: hidden; border-radius: 8px; background-color: var(--cp-sx-sky); background-image: linear-gradient(rgba(0, 0, 51, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 51, .05) 1px, transparent 1px); background-size: 24px 24px; }
.cp-sx-bil__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.cp-sx-bil__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px) !important; }
.cp-sx-bil__list.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-sx-bil__list > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 6px 18px; padding: 26px 26px 28px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--cp-sx-line), 0 20px 40px -32px rgba(0, 0, 51, .45); }
.cp-sx-focus.is-in .cp-sx-bil__list > li.cp-sx-rv { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s, opacity .7s ease calc(var(--i, 0) * .1s); }
.cp-sx-bil__list > li:hover,
.cp-sx-focus.is-in .cp-sx-bil__list > li.cp-sx-rv:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--cp-sx-navy), 0 30px 50px -30px rgba(0, 0, 51, .5); }
.cp-sx-bil__ico { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: var(--cp-sx-sky); color: var(--cp-sx-navy); transition: background-color .35s, color .35s; }
.cp-sx-bil__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-bil__list > li:hover .cp-sx-bil__ico { background: var(--cp-sx-navy); color: var(--cp-sx-orange); }
.cp-sx-bil__list h3 { align-self: center; padding-right: 34px; color: var(--cp-sx-navy); font-size: 19px; line-height: 1.3; font-weight: 700; }
.cp-sx-bil__list li > p { grid-column: 2; color: var(--cp-sx-mute); font-size: 15.5px; line-height: 1.6; }
.cp-sx-bil__ok { position: absolute; right: 22px; top: 24px; width: 26px; height: 26px; }
.cp-sx-bil__ok circle { fill: none; stroke: var(--cp-sx-line); stroke-width: 1.6; transition: stroke .35s; }
.cp-sx-bil__ok path { fill: none; stroke: var(--cp-sx-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s .05s; }
.cp-sx-bil__list > li:hover .cp-sx-bil__ok circle { stroke: var(--cp-sx-orange); }
.cp-sx-bil__list > li:hover .cp-sx-bil__ok path { stroke-dashoffset: 0; }
.cp-sx-bil__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px !important; }
.cp-sx-bil__chips span { padding: 3px 12px; border-radius: 8px; background: var(--cp-sx-sky); color: var(--cp-sx-navy); font-size: 14px; font-weight: 600; }
.cp-sx-focus.is-ciel .cp-sx-bil__fig { background-color: #fff; }
@media (max-width: 1100px) {
	.cp-sx-bil__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.cp-sx-bil__top { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-bil__fig { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
	.cp-sx-bil__list,
	.cp-sx-bil__list.is-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-bil__list > li,
	.cp-sx-bil__list > li * { transition: none !important; }
}

/* Deux images légendées et cartouche (calepinage) */
.cp-sx-focus--galerie .cp-sx-head .cp-sx-intro { color: var(--cp-sx-ink); }
/* Mosaïque de photos (disposition photos, 15/10) : grille dense, verticales sur deux rangs, horizontales en grand. */
.cp-sx-ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); grid-auto-flow: dense; gap: 14px; margin: clamp(36px, 4vw, 56px) 0 0 !important; padding: 0; list-style: none; }
.cp-sx-ph__it { grid-row: span 2; margin: 0; border-radius: 8px; overflow: hidden; background: var(--cp-sx-deep); box-shadow: 0 18px 40px -28px rgba(0, 0, 51, .55); }
.cp-sx-ph__it.is-wide { grid-column: span 2; }
.cp-sx-ph__bt { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cp-sx-ph__bt img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-ph__bt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 51, .72) 0%, rgba(0, 0, 51, 0) 42%); opacity: .85; transition: opacity .4s; }
.cp-sx-ph__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; }
.cp-sx-ph__bt:hover img,
.cp-sx-ph__bt:focus-visible img { transform: scale(1.05); }
.cp-sx-ph__bt:hover::after,
.cp-sx-ph__bt:focus-visible::after { opacity: 1; }
.cp-sx-ph__bt:focus-visible { outline: 3px solid var(--cp-sx-orange); outline-offset: -3px; }
.cp-sx-lb { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 26, .94); color: #fff; }
.cp-sx-lb[open] { display: grid; place-items: center; }
.cp-sx-lb::backdrop { background: rgba(0, 0, 26, .6); }
.cp-sx-lb figure { display: grid; justify-items: center; gap: 14px; margin: 0; padding: 64px 72px 40px; }
.cp-sx-lb img { max-width: min(92vw, 1600px); max-height: calc(100dvh - 160px); width: auto; height: auto; border-radius: 6px; }
.cp-sx-lb figcaption { color: #D3D5EA; font-size: 15px; text-align: center; }
.cp-sx-lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.cp-sx-lb button:hover,
.cp-sx-lb button:focus-visible { background: var(--cp-sx-orange); color: #000033; outline: none; }
.cp-sx-lb__x { top: 20px; right: 20px; }
.cp-sx-lb__pv { left: 20px; top: 50%; translate: 0 -50%; }
.cp-sx-lb__nx { right: 20px; top: 50%; translate: 0 -50%; }
.cp-sx-lb__nb { position: absolute; top: 32px; left: 28px; color: #A9ACCB; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
	.cp-sx-ph { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
	.cp-sx-lb figure { padding: 64px 12px 90px; }
	.cp-sx-lb__pv,
	.cp-sx-lb__nx { top: auto; bottom: 24px; translate: none; }
}
.cp-sx-cal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-cal__fig { position: relative; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--cp-sx-line); }
.cp-sx-cal__fig img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-cal__fig:hover img { transform: scale(1.04); }
.cp-sx-cal__fig figcaption { position: absolute; left: 14px; bottom: 14px; padding: 4px 12px; border-radius: 8px; background: var(--cp-sx-deep); color: #fff; font-size: 14px; font-weight: 600; }
.cp-sx-cal__tb { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 8px; background: var(--cp-sx-deep); }
.cp-sx-cal__tb > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 24px 28px; border-left: 1px solid rgba(255, 255, 255, .16); }
.cp-sx-cal__tb > div:first-child { border-left: 0; }
.cp-sx-cal__tb dd { color: var(--cp-sx-orange); font-size: clamp(28px, 2.6vw, 40px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-sx-cal__tb dt { margin-top: 10px; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.45; }

/* Texte et image avec sa fiche (archive numérique) */
.cp-sx-arc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.cp-sx-arc__txt .cp-sx-intro { margin-top: 22px; color: var(--cp-sx-ink); }
.cp-sx-arc__fig { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -30px rgba(0, 0, 51, .35), 0 0 0 1px var(--cp-sx-line); }
.cp-sx-arc__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; }
.cp-sx-arc__vid { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; }
.cp-sx-arc__vid .cp-consent { position: absolute; inset: 0; border-radius: 0; }
.cp-sx-arc__vid .cp-consent__ask { border-radius: 0; }
.cp-sx-arc__vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-sx-arc__tb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--cp-sx-deep); }
.cp-sx-arc__tb > div { padding: 16px 20px; border-left: 1px solid rgba(255, 255, 255, .16); }
.cp-sx-arc__tb > div:nth-child(odd) { border-left: 0; }
.cp-sx-arc__tb > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
.cp-sx-arc__tb dt { color: rgba(255, 255, 255, .72); font-size: 13px; }
.cp-sx-arc__tb dd { color: #fff; font-size: 16px; line-height: 1.35; font-weight: 700; }

/* Cartes à ouvrir (visites) */
.cp-sx-focus--cartes-lien .cp-sx-head .cp-sx-intro { color: var(--cp-sx-ink); }
.cp-sx-eco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-ev { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--cp-sx-deep); color: #fff; text-decoration: none; }
.cp-sx-ev__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cp-sx-ev__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-ev:hover .cp-sx-ev__img img { transform: scale(1.05); }
.cp-sx-ev__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: color-mix(in srgb, var(--cp-sx-deep) 72%, transparent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.cp-sx-ev__play svg { width: 34px; height: 34px; color: #fff; }
.cp-sx-ev__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.cp-sx-ev h3 { color: #fff; font-size: 21px; line-height: 1.25; font-weight: 700; }
.cp-sx-ev p { color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.55; }
.cp-sx-ev__go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; color: var(--cp-sx-orange); font-weight: 700; }
.cp-sx-ev__go svg { width: 16px; height: 16px; }

/* Sections propres : les éléments apparaissent l'un après l'autre à l'arrivée de la section (secteur.js pose
   is-armed puis is-in). Sans script ou si l'appareil demande moins d'animations, rien n'est masqué. */
.cp-sx-focus.is-armed .cp-sx-rv { opacity: 0; transform: translateY(22px); }
.cp-sx-focus.is-in .cp-sx-rv { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * .14s); }
.cp-sx-ev:hover .cp-sx-ev__play { background: var(--cp-sx-orange); box-shadow: 0 0 0 8px color-mix(in srgb, var(--cp-sx-orange) 30%, transparent); }
.cp-sx-ev:hover .cp-sx-ev__play svg { color: var(--cp-sx-navy); }
.cp-sx-ev__play { transition: background-color .3s, box-shadow .3s; }

/* Trajectoire dans le haut de page (pages hors secteur) : panneau translucide sur la photo voilée. */
.cp-sx-hero .cp-sx-traj--hero { background: rgba(0, 0, 20, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* Chiffres clés dans le haut de page (pages hors secteur) : même verre que la trajectoire, valeur en grand. */
.cp-sx-kpis { margin: 0; padding: clamp(24px, 2.8vw, 38px); border-radius: 8px; }
.cp-sx-kpis .cp-sx-traj__t { margin-bottom: 8px; }
.cp-sx-kpis ul { display: grid; }
.cp-sx-kpis li { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cp-sx-kpis li:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-sx-kpis li:first-child { padding-top: 0; }
.cp-sx-kpis b { color: var(--cp-sx-orange); font-size: clamp(36px, 3.6vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.cp-sx-kpis span { color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.45; }
/* Courbe de trajectoire (maquette validée le 01/10) : sans script, tout est visible ; avec script, is-wait masque
   puis la ligne se trace, les points et les pourcentages apparaissent l'un après l'autre. */
.cp-sx-traj__svg { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.cp-sx-traj__grid { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.cp-sx-traj__refl { stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 4 6; }
.cp-sx-traj__line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1000; }
.cp-sx-traj__dot { fill: var(--cp-sx-orange); stroke: #0b0b20; stroke-width: 3; }
.cp-sx-traj__dot.is-ref { fill: #fff; }
.cp-sx-traj__halo { fill: var(--cp-sx-orange); opacity: .22; }
.cp-sx-traj__svg .cp-sx-traj__val { fill: #fff; font: 700 30px var(--wp--preset--font-family--titillium, "Titillium Web", system-ui, sans-serif); }
.cp-sx-traj__svg .cp-sx-traj__val.is-ref { fill: rgba(255, 255, 255, .7); font-size: 16px; font-weight: 600; }
.cp-sx-traj__yr { fill: rgba(255, 255, 255, .72); font: 600 14px var(--wp--preset--font-family--titillium, "Titillium Web", system-ui, sans-serif); }
.cp-sx-traj.is-wait .cp-sx-traj__line { stroke-dashoffset: 1000; }
.cp-sx-traj.is-wait :is(.cp-sx-traj__area, .cp-sx-traj__dot, .cp-sx-traj__halo, .cp-sx-traj__svg .cp-sx-traj__val) { opacity: 0; }
.cp-sx-traj:not(.is-wait) .cp-sx-traj__line { animation: cp-sx-traj-draw 1.8s cubic-bezier(.4, 0, .2, 1) .2s both; }
.cp-sx-traj:not(.is-wait) .cp-sx-traj__area { animation: cp-sx-traj-fade 1s ease 1.1s both; }
.cp-sx-traj:not(.is-wait) :is(.cp-sx-traj__dot, .cp-sx-traj__svg .cp-sx-traj__val) { animation: cp-sx-traj-fade .45s ease var(--d, 0s) both; }
.cp-sx-traj:not(.is-wait) .cp-sx-traj__halo { animation: cp-sx-traj-halo .6s ease var(--d, 0s) both; }
@keyframes cp-sx-traj-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes cp-sx-traj-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-sx-traj-halo { from { opacity: 0; } to { opacity: .22; } }
@media (prefers-reduced-motion: reduce) {
	.cp-sx-traj :is(.cp-sx-traj__line, .cp-sx-traj__area, .cp-sx-traj__dot, .cp-sx-traj__halo, .cp-sx-traj__val) { animation: none !important; }
}
.cp-sx-hero .cp-sx-traj--hero::before { display: none; }
.cp-sx-hero .cp-sx-traj--hero .cp-sx-traj__chart { height: clamp(220px, 22vw, 290px); }
/* Haut de page des pages hors secteur (charte) : voile bleu nuit allégé (demande client du 02/10), sans le halo
   de couleur du coin. Accroche (blanc 80 %) au pire pixel blanc, à 60 % de la largeur : 5,1:1. */
.cp-sx-hero.is-charte::before { display: none; }
@media (max-width: 900px) {
	.cp-sx-hero.has-bg.is-charte::after { background: color-mix(in srgb, var(--cp-sx-deep) 68%, transparent); }
}
/* Haut de page avec trajectoire (pages hors secteur) : titres plus longs, taille réduite (demande client du 01/10). */
.cp-sx-hero.is-traj .cp-sx-hero__title { font-size: clamp(32px, 3.1vw, 48px); line-height: 1.1; }
/* Section propre avec photo de fond en parallaxe : la photo dépasse de 15 % en haut et en bas pour glisser
   (secteur.js), sous un voile noir qui garde titres et textes lisibles. */
.cp-sx-focus.has-bg { position: relative; isolation: isolate; overflow: clip; }
.cp-sx-focus .cp-sx-focus__bg { position: absolute; left: 0; top: -15%; z-index: -2; width: 100%; height: 130%; max-width: none; object-fit: cover; will-change: transform; }
.cp-sx-focus.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .6); pointer-events: none; }
/* Voile noir (demande client du 01/10, « pas très dense ») : titre et introduction en blanc, couleurs déclarées.
   Pire cas mesuré : texte blanc sur pixel blanc voilé à 60 % = 5,7:1. Les cartes gardent leurs couleurs. */
.cp-sx-focus.has-bg .cp-sx-h2 { color: #fff; }
.cp-sx-focus.has-bg .cp-sx-head .cp-sx-intro,
.cp-sx-focus.has-bg .cp-sx-head .cp-sx-intro p { color: rgba(255, 255, 255, .92); }
.cp-sx-focus.has-bg .cp-sx-head .cp-sx-intro a { color: #fff; }
/* Fond clair de la section propre (choix « Clair ») : les cartes passent en blanc. */
.cp-sx-focus.is-ciel { background: var(--cp-sx-sky); }
/* Titre au-dessus de l'introduction, sur toute la largeur : côte à côte, la demi-colonne passait les titres sur 3 lignes. */
.cp-sx-focus .cp-sx-head--duo { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-sx-focus .cp-sx-head--duo .cp-sx-intro { margin-top: 0; color: var(--cp-sx-ink); }
/* Indicateurs, version épurée (maquette validée le 01/10) : pas de cartes ; titre à gauche, lignes numérotées
   séparées par des filets à droite, alerte en citation. Couleurs pour fond clair, puis pour la photo voilée. */
.cp-sx-imp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.cp-sx-imp__head .cp-sx-intro { margin-top: 24px; color: var(--cp-sx-ink); }
.cp-sx-imp__rule { display: block; width: 56px; height: 2px; margin-top: 32px; background: var(--cp-sx-orange); }
.cp-sx-imp__list { margin: 0 !important; border-top: 1px solid var(--cp-sx-line); }
/* Le titre passe sur toute la largeur, au-dessus de l'introduction (à gauche) et des lignes numérotées (à droite). */
.cp-sx-imp { row-gap: 28px; grid-template-rows: auto auto 1fr; }
.cp-sx-imp__head { display: contents; }
.cp-sx-imp .cp-sx-h2 { grid-column: 1 / -1; grid-row: 1; }
.cp-sx-imp .cp-sx-imp__head .cp-sx-intro { grid-column: 1; grid-row: 2; margin-top: 0; }
.cp-sx-imp .cp-sx-imp__rule { grid-column: 1; grid-row: 3; margin-top: 0; }
.cp-sx-imp .cp-sx-imp__list { grid-column: 2; grid-row: 2 / span 2; }
.cp-sx-imp__list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 28px; padding: 34px 0; border-bottom: 1px solid var(--cp-sx-line); }
.cp-sx-imp__n { grid-row: 1 / 3; color: var(--cp-sx-orange); font-size: 56px; line-height: .9; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cp-sx-imp__list h3 { color: var(--cp-sx-navy); font-size: 22px; line-height: 1.25; font-weight: 600; }
.cp-sx-imp__list p { color: var(--cp-sx-ink); font-size: 17px; line-height: 1.65; }
.cp-sx-imp__alert { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); margin-top: clamp(64px, 7vw, 104px); }
.cp-sx-imp__i { justify-self: end; width: 64px; height: 64px; color: var(--cp-sx-orange); }
.cp-sx-imp__i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-imp__q { margin: 0; padding-left: 28px; border-left: 2px solid var(--cp-sx-orange); }
.cp-sx-imp__q p { color: var(--cp-sx-ink); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.6; }
.cp-sx-imp__q p + p { margin-top: 12px; }
.cp-sx-imp__q strong { display: block; margin-top: 14px; color: var(--cp-sx-navy); font-weight: 600; }
.cp-sx-imp__tags { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 26px !important; color: var(--cp-sx-mute); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cp-sx-imp__tags li + li::before { content: "·"; margin-inline: 14px; color: var(--cp-sx-orange); }
/* Sur la photo voilée : voile en dégradé (plus dense au centre), textes blancs, filets clairs. Pire cas, texte gris
   clair (76 %) sur pixel blanc voilé à 62 % : 4,9:1. */
.cp-sx-focus--indicateurs.has-bg::before { background: radial-gradient(120% 90% at 30% 40%, rgba(0, 0, 0, .8), rgba(0, 0, 0, .62) 70%), linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)); }
.cp-sx-focus.has-bg .cp-sx-imp__head .cp-sx-intro p { color: rgba(255, 255, 255, .8); font-weight: 300; }
.cp-sx-focus.has-bg .cp-sx-imp__list { border-top-color: rgba(255, 255, 255, .22); }
.cp-sx-focus.has-bg .cp-sx-imp__list li { border-bottom-color: rgba(255, 255, 255, .22); }
.cp-sx-focus.has-bg .cp-sx-imp__list h3 { color: #fff; }
.cp-sx-focus.has-bg .cp-sx-imp__list p { color: rgba(255, 255, 255, .78); font-weight: 300; }
.cp-sx-focus.has-bg .cp-sx-imp__q p { color: rgba(255, 255, 255, .76); font-weight: 300; }
.cp-sx-focus.has-bg .cp-sx-imp__q strong { color: #fff; }
.cp-sx-focus.has-bg .cp-sx-imp__q a { color: #fff; }
.cp-sx-focus.has-bg .cp-sx-imp__tags { color: rgba(255, 255, 255, .7); }
@media (max-width: 900px) {
	.cp-sx-imp,
	.cp-sx-imp__alert { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-imp__alert { gap: 18px; }
	.cp-sx-imp__i { justify-self: start; width: 44px; height: 44px; }
	.cp-sx-imp .cp-sx-imp__head .cp-sx-intro,
	.cp-sx-imp .cp-sx-imp__rule,
	.cp-sx-imp .cp-sx-imp__list { grid-column: 1; grid-row: auto; }
	.cp-sx-imp { grid-template-rows: none; }
	.cp-sx-imp__list li { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 18px; }
	.cp-sx-imp__n { font-size: 40px; }
}

/* Cartes à repère (jumeau numérique). */
.cp-sx-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 52px); }
/* Haut de page sans côté droit (« Rien ») et vidéo YouTube de fond : le cadre 16/9 couvre la section
   (unités du conteneur), sous le voile ; il apparaît en fondu une fois la vidéo lancée (is-playing, secteur.js). */
.cp-sx-hero.is-solo .cp-sx-hero__in { grid-template-columns: minmax(0, 1fr); }
.cp-sx-hero__vid { position: absolute; inset: 0; z-index: -3; overflow: hidden; container-type: size; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.cp-sx-hero__vid.is-playing { opacity: 1; }
.cp-sx-steps__vid { z-index: -2; }
.cp-sx-hero__vid iframe { position: absolute; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%) scale(1.2); }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.cp-sx-hero__vid { display: none; }
}
/* Sur ordinateur, le haut de page à vidéo occupe tout l'écran (barre d'administration déduite), contenu
   centré verticalement ; le menu est posé par-dessus (marge négative de .cp-sx-hero). */
@media (min-width: 1024px) {
	.cp-sx-hero.has-vid { display: grid; align-items: center; min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
}

/* Zones d'intervention (02/10) : lignes de zone à gauche (filet orange qui se déroule, villes en pastilles),
   carte des départements à droite ; la zone active met ses départements en avant (secteur.js). */
.cp-sx-rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.cp-sx-rad__zones { margin-top: clamp(28px, 3vw, 40px) !important; border-top: 1px solid var(--cp-sx-line); }
.cp-sx-rad__z { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 22px 16px 22px 0; border-bottom: 1px solid var(--cp-sx-line); outline: none; cursor: default; transition: background-color .35s, padding-left .45s cubic-bezier(.2, .7, .2, 1), opacity .7s ease calc(var(--i, 0) * .1s), transform .7s ease calc(var(--i, 0) * .1s); }
.cp-sx-rad__z::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--cp-sx-orange); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-rad__z:focus-visible { box-shadow: inset 0 0 0 2px var(--cp-sx-orange); }
.cp-sx-rad__n { grid-row: span 2; color: var(--cp-sx-navy); font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 32px; font-variant-numeric: tabular-nums; transition: color .3s; }
.cp-sx-rad__z h3 { color: var(--cp-sx-navy); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.3; font-weight: 700; }
.cp-sx-rad__d { grid-column: 2; color: var(--cp-sx-mute); font-size: 16px; line-height: 1.55; }
.cp-sx-rad__chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.cp-sx-rad__chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--cp-sx-sky); color: var(--cp-sx-navy); font-size: 14.5px; line-height: 1.4; font-weight: 600; text-decoration: none; transition: background-color .25s, color .25s, transform .25s; }
.cp-sx-rad__chips a::after { content: ""; width: 6px; height: 6px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55; }
.cp-sx-rad__chips a:hover,
.cp-sx-rad__chips a:focus-visible { background: var(--cp-sx-navy); color: #fff; transform: translateY(-2px); outline: none; }
.cp-sx-rad__z.is-on { padding-left: 16px; background: linear-gradient(90deg, var(--cp-sx-sky), rgb(237 242 249 / 0)); }
.cp-sx-rad__z.is-on::before { width: 100%; }
.cp-sx-rad__z.is-on .cp-sx-rad__n { color: #8A5200; }
/* Carte dans un panneau bleu nuit : départements sans réalisation en filet discret, départements à réalisations
   en bleu clair, orange au survol ; la zone active met ses départements en avant (is-zone), les autres pâlissent. */
.cp-sx-rad__map { position: relative; padding: clamp(24px, 3vw, 44px); border-radius: 8px; background: radial-gradient(circle at 50% 40%, #0A0A55 0%, #000033 70%); box-shadow: 0 40px 80px -40px rgba(0, 0, 51, .6); }
.cp-sx-rad__map .cp-sx-map { max-width: none; margin: 0; justify-self: auto; }
.cp-sx-rad__map .cp-sx-map path { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .22); stroke-width: .6; transition: fill .3s, opacity .3s, stroke .3s; }
.cp-sx-rad__map .cp-sx-map path.is-on { fill: #B9CBE6; stroke: #000033; stroke-width: .8; }
.cp-sx-rad__map.has-zone .cp-sx-map path.is-zone { fill: rgba(255, 153, 0, .28); stroke: var(--cp-sx-orange); }
.cp-sx-rad__map.has-zone .cp-sx-map path.is-on.is-zone { fill: var(--cp-sx-orange); stroke: #000033; }
.cp-sx-rad__map.has-zone .cp-sx-map path.is-on:not(.is-zone) { opacity: .45; }
.cp-sx-rad__map .cp-sx-map path.is-on:hover,
.cp-sx-rad__map .cp-sx-map path.is-on:focus-visible,
.cp-sx-rad__map .cp-sx-map path.is-on.is-open { fill: var(--cp-sx-orange); opacity: 1; }
.cp-sx-rad__map .cp-sx-map figcaption { margin-top: 20px; }
/* La carte reste collée sous l'en-tête pendant que les zones défilent (demande client du 05/10), sur ordinateur. */
@media (min-width: 901px) {
	.cp-sx-rad__map { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cp-bar-h, 76px) + 32px); align-self: start; }
}
@media (max-width: 1000px) {
	.cp-sx-rad { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-rad__map { width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 480px) {
	.cp-sx-rad__z { grid-template-columns: 40px minmax(0, 1fr); }
}

/* Volets (maquette validée le 02/10) : panneaux bleu nuit ; l'actif s'élargit (flex-grow), dévoile son texte
   (grille 0fr -> 1fr), pictogramme orange, filet orange qui se déroule, nuage de points qui défile. */
.cp-sx-vol { display: flex; gap: 14px; height: clamp(400px, 34vw, 460px); margin-top: clamp(40px, 5vw, 64px) !important; }
.cp-sx-vol__v { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 8px; background: linear-gradient(160deg, #0B0B5C 0%, #000033 70%); color: #fff; cursor: pointer; outline: none; transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, opacity .7s ease calc(var(--i, 0) * .1s), transform .7s ease calc(var(--i, 0) * .1s); }
.cp-sx-vol__v::before { content: ""; position: absolute; inset: -40px; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.4px); background-size: 14px 14px; opacity: .25; mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%); transition: opacity .6s; pointer-events: none; }
/* Photo du volet : couvre la carte, se rapproche quand le volet s'ouvre ; voile bleu nuit plus dense en bas, sous le
   titre blanc (couleurs déclarées). Pas de filet d'accent ni de numéro. */
.cp-sx-vol .cp-sx-vol__v > img.cp-sx-vol__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.08); filter: saturate(.8); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .8s; }
.cp-sx-vol__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 51, .62) 0%, rgba(0, 0, 51, .42) 38%, rgba(0, 0, 51, .9) 78%, rgba(0, 0, 51, .96) 100%); transition: background-color .8s; pointer-events: none; }
.cp-sx-vol__v.has-img::before { z-index: 1; }
.cp-sx-vol__v.has-img .cp-sx-vol__in { z-index: 2; }
.cp-sx-vol__v.is-on > img.cp-sx-vol__img { transform: scale(1); filter: saturate(1); }
.cp-sx-vol__v.is-on { flex-grow: 2.7; box-shadow: 0 40px 70px -40px rgba(0, 0, 51, .7); }
.cp-sx-vol__v.is-on::before { opacity: .6; animation: cp-sx-vol-drift 14s linear infinite; }
@keyframes cp-sx-vol-drift { to { transform: translate(14px, 14px); } }
.cp-sx-vol__v:focus-visible { box-shadow: 0 0 0 3px var(--cp-sx-orange); }
/* L'apparition (.cp-sx-rv) ne doit retarder que l'opacité et le glissement, pas l'ouverture du volet. */
.cp-sx-focus.is-in .cp-sx-vol__v.cp-sx-rv { transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, opacity .7s ease calc(var(--i, 0) * .14s), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .14s); }
.cp-sx-vol__in { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(22px, 2.4vw, 34px); }
.cp-sx-vol__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-sx-vol__n { color: rgba(255, 255, 255, .6); font-size: 15px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; transition: color .4s; }
.cp-sx-vol__v.is-on .cp-sx-vol__n { color: var(--cp-sx-orange); }
.cp-sx-vol__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; transition: background-color .4s, color .4s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-vol__ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-vol__v.is-on .cp-sx-vol__ico { background: var(--cp-sx-orange); color: var(--cp-sx-navy); transform: rotate(-6deg) scale(1.06); }
.cp-sx-vol__body { margin-top: auto; }
.cp-sx-vol__v h3 { color: #fff; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.cp-sx-vol__t { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-vol__t > div { overflow: hidden; }
.cp-sx-vol__t p { margin-top: 14px !important; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.6; opacity: 0; transform: translateY(12px); transition: opacity .45s .15s, transform .6s .15s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-vol__v.is-on .cp-sx-vol__t { grid-template-rows: 1fr; }
.cp-sx-vol__v.is-on .cp-sx-vol__t p { opacity: 1; transform: none; }
.cp-sx-vol__call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; margin-top: 24px; padding: 22px 28px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--cp-sx-line), 0 24px 50px -36px rgba(0, 0, 51, .4); }
.cp-sx-vol__ci { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cp-sx-sky); color: var(--cp-sx-navy); }
.cp-sx-vol__ci svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-vol__cq p { color: var(--cp-sx-navy); font-size: 17px; line-height: 1.5; font-weight: 600; }
.cp-sx-vol__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cp-sx-vol__tags li { padding: 5px 12px; border-radius: 999px; background: var(--cp-sx-sky); color: var(--cp-sx-navy); font-size: 13.5px; line-height: 1.4; font-weight: 600; transition: background-color .25s, color .25s; }
.cp-sx-vol__tags li:hover { background: var(--cp-sx-navy); color: #fff; }
.cp-sx-focus.is-ciel .cp-sx-vol__ci,
.cp-sx-focus.is-ciel .cp-sx-vol__tags li:not(:hover) { background: var(--cp-sx-sky); }
@media (max-width: 1100px) {
	.cp-sx-vol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
	.cp-sx-vol__body { margin-top: 32px; }
	.cp-sx-vol__t { grid-template-rows: 1fr; }
	.cp-sx-vol__t p { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
	.cp-sx-vol__call { grid-template-columns: auto minmax(0, 1fr); }
	.cp-sx-vol__tags { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
	.cp-sx-vol { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-vol__v,
	.cp-sx-vol__v *,
	.cp-sx-vol__v::before,
	.cp-sx-vol__v::after { transition: none !important; animation: none !important; }
}

/* Feuillets (maquette validée le 02/10) : bureau quadrillé, documents de papier inclinés qui se redressent au
   survol, sceau orange en tampon sur le coin, frise des délais dont la bande se déroule à l'arrivée. */
.cp-sx-feu { margin-top: clamp(40px, 5vw, 64px); padding: clamp(44px, 5vw, 64px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); border-radius: 8px; background-color: var(--cp-sx-sky); background-image: linear-gradient(rgba(0, 0, 51, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 51, .045) 1px, transparent 1px); background-size: 24px 24px; }
.cp-sx-focus.is-ciel .cp-sx-feu { background-color: #fff; }
.cp-sx-feu__docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(24px, 3vw, 48px); }
.cp-sx-feu__doc { position: relative; padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 36px); border-radius: 4px; background-color: #FFFDF8; background-image: repeating-linear-gradient(transparent 0 31px, rgba(0, 0, 51, .05) 31px 32px); box-shadow: 0 1px 0 rgba(0, 0, 51, .06), 0 24px 44px -28px rgba(0, 0, 51, .45); transform: rotate(var(--r, -1deg)); }
.cp-sx-feu__doc:nth-child(even) { --r: 1.2deg; }
.cp-sx-focus.is-in .cp-sx-feu__doc.cp-sx-rv { transform: rotate(var(--r, -1deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s, opacity .7s ease calc(var(--i, 0) * .14s); }
.cp-sx-feu__doc:hover,
.cp-sx-focus.is-in .cp-sx-feu__doc.cp-sx-rv:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 1px 0 rgba(0, 0, 51, .06), 0 40px 60px -30px rgba(0, 0, 51, .55); }
.cp-sx-feu__doc::after { content: ""; position: absolute; right: 0; top: 0; width: 34px; height: 34px; border-bottom-left-radius: 4px; background: linear-gradient(225deg, #fff 0 50%, #E6E9F1 50% 100%); box-shadow: -2px 2px 4px rgba(0, 0, 51, .08); }
.cp-sx-feu__doc.has-seal::after { display: none; }
.cp-sx-feu__ref { display: flex; align-items: center; gap: 12px; color: var(--cp-sx-mute); font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cp-sx-feu__ref b { display: grid; place-items: center; flex: none; height: 30px; padding: 0 10px; border-radius: 4px; background: var(--cp-sx-navy); color: #fff; letter-spacing: .06em; }
.cp-sx-feu__doc h3 { margin-top: 22px; color: var(--cp-sx-navy); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; font-weight: 700; text-wrap: balance; }
.cp-sx-feu__doc.has-seal .cp-sx-feu__ref,
.cp-sx-feu__doc.has-seal h3 { padding-right: 86px; }
.cp-sx-feu__t p { margin-top: 14px !important; color: var(--cp-sx-ink); font-size: 17px; line-height: 1.65; }
.cp-sx-feu__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px !important; padding-top: 18px; border-top: 1px dashed rgba(0, 0, 51, .2); color: var(--cp-sx-mute); font-size: 15px; }
.cp-sx-feu__meta b { color: var(--cp-sx-navy); }
.cp-sx-feu__seal { position: absolute; right: -18px; top: -30px; display: grid; place-items: center; width: 96px; height: 96px; border: 2px solid var(--cp-sx-orange); border-radius: 50%; background: #FFFDF8; box-shadow: 0 10px 24px -14px rgba(0, 0, 51, .5); color: #8A5200; font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(-14deg); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cp-sx-feu__seal::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(255, 153, 0, .7); border-radius: 50%; }
.cp-sx-feu__doc:hover .cp-sx-feu__seal { transform: rotate(0) scale(1.06); }
.cp-sx-feu__time { margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-feu__bar { position: relative; height: 64px; }
.cp-sx-feu__axis { position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--cp-sx-navy); }
.cp-sx-feu__band { position: absolute; left: 0; top: 30px; width: 100%; height: 22px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 153, 0, .28), rgba(255, 153, 0, .12)); transform-origin: left; }
.cp-sx-focus.is-armed:not(.is-in) .cp-sx-feu__band { transform: scaleX(0); }
.cp-sx-focus.is-armed.is-in .cp-sx-feu__band { animation: cp-sx-feu-grow 1.4s cubic-bezier(.2, .7, .2, 1) .3s both; }
@keyframes cp-sx-feu-grow { from { transform: scaleX(0); } }
.cp-sx-feu__tick { position: absolute; top: 34px; width: 2px; height: 14px; background: var(--cp-sx-navy); transform: translateX(-1px); }
.cp-sx-feu__tick span { position: absolute; top: 20px; left: 50%; color: var(--cp-sx-mute); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.cp-sx-feu__tick.is-start span { left: 0; transform: none; }
.cp-sx-feu__tick.is-end span { left: auto; right: 0; transform: none; }
.cp-sx-feu__pin { position: absolute; top: calc(var(--row, 0) * -30px); display: flex; flex-direction: column; align-items: flex-start; transform: translateX(-6px); }
.cp-sx-feu__pin b { padding: 3px 10px; border-radius: 999px; background: var(--cp-sx-navy); color: #fff; font-size: 12.5px; line-height: 1.4; font-weight: 700; white-space: nowrap; }
.cp-sx-feu__pin i { width: 12px; height: 12px; margin-top: calc(6px + var(--row, 0) * 30px); border-radius: 50%; background: var(--cp-sx-orange); box-shadow: 0 0 0 4px rgba(255, 153, 0, .25); }
.cp-sx-feu__legend { display: flex; margin-top: 34px !important; color: var(--cp-sx-navy); font-size: 16px; line-height: 1.5; }
.cp-sx-feu__legend span { display: inline-flex; align-items: flex-start; gap: 10px; }
.cp-sx-feu__legend span::before { content: ""; flex: none; width: 22px; height: 10px; margin-top: 7px; border-radius: 3px; background: rgba(255, 153, 0, .4); }
@media (max-width: 820px) {
	.cp-sx-feu__doc,
	.cp-sx-feu__doc:nth-child(even) { --r: 0deg; }
}
@media (max-width: 560px) {
	.cp-sx-feu__seal { right: -8px; width: 84px; height: 84px; font-size: 11px; }
	.cp-sx-feu__tick.is-mid span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-feu__doc,
	.cp-sx-feu__seal { transition: none !important; }
	.cp-sx-feu__band { animation: none !important; transform: none !important; }
}

/* Fond bleu nuit de la section propre (choix « Bleu nuit ») : titre et introduction en blanc déclarés. */
.cp-sx-focus.is-nuit { background: var(--cp-sx-deep); color: #fff; }
.cp-sx-focus.is-nuit .cp-sx-h2 { color: #fff; }
.cp-sx-focus.is-nuit .cp-sx-head .cp-sx-intro,
.cp-sx-focus.is-nuit .cp-sx-head .cp-sx-intro p { color: rgba(255, 255, 255, .85); }
/* Vidéos : grand lecteur 16/9 et liste de vidéos à droite ; la vidéo choisie a un filet orange. */
.cp-sx-vid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-vid__frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 8px; background: #000; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.cp-sx-vid__frame .cp-consent--video { position: absolute; inset: 0; border-radius: 8px; }
.cp-sx-vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-sx-vid__cap { margin-top: 14px !important; font-size: 17px; font-weight: 600; line-height: 1.4; }
/* Ordinateur : la visionneuse prend la hauteur de la liste (cadre noir, la vidéo s'y centre) ; la légende,
   redondante avec la carte active, reste lue par les lecteurs d'écran. */
@media (min-width: 1001px) {
	.cp-sx-vid { align-items: stretch; }
	.cp-sx-vid__main { display: flex; flex-direction: column; }
	.cp-sx-vid__frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; }
	.cp-sx-vid__cap { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.cp-sx-focus.is-nuit .cp-sx-vid__cap { color: #fff; }
.cp-sx-vid__list { display: grid; gap: 12px; }
.cp-sx-vid__it { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color .25s, box-shadow .25s; }
.cp-sx-focus:not(.is-nuit) .cp-sx-vid__it { background: #fff; box-shadow: inset 0 0 0 1px var(--cp-sx-line); color: var(--cp-sx-navy); }
.cp-sx-vid__it:hover { background: rgba(255, 255, 255, .12); }
.cp-sx-vid__it.is-on { box-shadow: inset 0 0 0 2px var(--cp-sx-orange); }
.cp-sx-vid__it:focus-visible { outline: 3px solid var(--cp-sx-orange); outline-offset: 2px; }
.cp-sx-vid__th { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.cp-sx-vid__th img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.cp-sx-vid__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(0, 0, 30, .7); color: #fff; transition: background-color .25s, color .25s; }
.cp-sx-vid__play svg { width: 16px; height: 16px; fill: currentColor; }
.cp-sx-vid__it:hover .cp-sx-vid__play,
.cp-sx-vid__it.is-on .cp-sx-vid__play { background: var(--cp-sx-orange); color: var(--cp-sx-navy); }
.cp-sx-vid__tx { display: grid; gap: 4px; min-width: 0; }
.cp-sx-vid__tx b { font-size: 16px; line-height: 1.3; font-weight: 700; }
.cp-sx-vid__tx small { color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.4; }
.cp-sx-focus:not(.is-nuit) .cp-sx-vid__tx small { color: var(--cp-sx-mute); }
@media (max-width: 1000px) {
	.cp-sx-vid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.cp-sx-vid__it { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
}

/* Planche technique (maquette validée le 02/10) : planche quadrillée bleu clair, dessin au trait bleu nuit, cotes
   orange (libellés orange foncé, 6,4:1), bénéfices sur une rangée. Le dessin se trace quand la section arrive
   (is-armed puis is-in, secteur.js) ; sans script il est visible tel quel. */
.cp-sx-plan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3.5vw, 56px); border-radius: 8px; background-color: var(--cp-sx-sky); background-image: linear-gradient(rgba(0, 0, 51, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 51, .05) 1px, transparent 1px); background-size: 24px 24px; }
.cp-sx-focus.is-ciel .cp-sx-plan { background-color: #fff; }
.cp-sx-plan__fig img { width: 100%; height: auto; border-radius: 8px; }
.cp-sx-plan__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cp-sx-plan__st { fill: none; stroke: var(--cp-sx-navy); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cp-sx-plan__fine { fill: none; stroke: var(--cp-sx-navy); stroke-width: 1.2; opacity: .55; }
.cp-sx-plan__cote { fill: none; stroke: var(--cp-sx-orange); stroke-width: 1.6; }
.cp-sx-plan__cote-t { fill: #8A5200; font: 700 13px var(--wp--preset--font-family--titillium, "Titillium Web", system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.cp-sx-plan__scan { fill: var(--cp-sx-navy); }
.cp-sx-plan__ray { fill: none; stroke: var(--cp-sx-orange); stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.cp-sx-plan__anc { fill: none; stroke: var(--cp-sx-orange); stroke-width: 2; }
.cp-sx-plan__svg [pathLength] { stroke-dasharray: 1000; }
.cp-sx-focus.is-armed:not(.is-in) .cp-sx-plan__svg [pathLength] { stroke-dashoffset: 1000; }
.cp-sx-focus.is-armed:not(.is-in) .cp-sx-plan__fade { opacity: 0; }
.cp-sx-focus.is-armed.is-in .cp-sx-plan__svg [pathLength] { animation: cp-sx-plan-draw 1.6s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
.cp-sx-focus.is-armed.is-in .cp-sx-plan__fade { animation: cp-sx-traj-fade .6s ease var(--d, 0s) both; }
@keyframes cp-sx-plan-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.cp-sx-plan__txt p { color: var(--cp-sx-ink); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.6; }
.cp-sx-plan__txt p + p { margin-top: 14px !important; }
.cp-sx-plan__txt strong { color: var(--cp-sx-navy); }
.cp-sx-plan__ben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(48px, 5vw, 72px) !important; }
.cp-sx-plan__ben li { padding-top: 22px; border-top: 2px solid var(--cp-sx-navy); }
.cp-sx-plan__n { display: block; color: var(--cp-sx-orange); font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: -.03em; }
.cp-sx-plan__ben h3 { margin-top: 16px; color: var(--cp-sx-navy); font-size: 20px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.cp-sx-plan__d { margin-top: 10px; color: var(--cp-sx-mute); font-size: 16px; line-height: 1.6; }
@media (max-width: 1100px) {
	.cp-sx-plan { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-plan__ben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.cp-sx-plan__ben { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-plan__cote-t { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-plan__svg [pathLength],
	.cp-sx-plan__fade { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* Fiche technique balayée au laser (maquette validée le 07/10, fond nuit) : un faisceau orange descend sur la grille,
   chaque valeur passe du nuage de points au trait plein et sa ligne de cote se trace (classes posées par secteur.js) ;
   filigrane en contour qui se dessine ; réticule de visée au survol. 4 éléments = 2 colonnes, sans case vide. */
.cp-sx-focus--fiche { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(180deg, #070B33 0%, #03051F 100%); }
.cp-sx-fx { --fx-line: rgba(160, 180, 255, .22); --fx-txt: rgba(225, 230, 255, .78); position: relative; margin-top: clamp(56px, 6vw, 88px); }
/* Place réservée au filigrane sous la grille : il ne passe jamais derrière un texte. */
.cp-sx-fx:has(.cp-sx-fx__wm) { padding-bottom: clamp(100px, 13vw, 220px); }
.cp-sx-fx__wm { position: absolute; right: -1%; bottom: -10px; z-index: -1; width: auto; height: clamp(120px, 15vw, 250px); max-width: none; pointer-events: none; transform: translate3d(0, var(--wy, 0px), 0); }
.cp-sx-fx__wm text { font: 900 220px 'Titillium Web', system-ui, sans-serif; letter-spacing: -.04em; fill: none; stroke: rgba(140, 165, 255, .24); stroke-width: 1.6; stroke-dasharray: 2400; stroke-dashoffset: 0; }
.cp-sx-fx.is-armed:not(.is-on) .cp-sx-fx__wm text { stroke-dashoffset: 2400; }
.cp-sx-fx.is-on .cp-sx-fx__wm text { transition: stroke-dashoffset 3.2s cubic-bezier(.2, .7, .1, 1); }
.cp-sx-fx__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 !important; padding: 0; list-style: none; border-top: 1px solid var(--fx-line); }
.cp-sx-fx.is-deux .cp-sx-fx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-sx-fx__it { position: relative; display: grid; align-content: start; gap: 14px; margin: 0; padding: clamp(32px, 3.4vw, 52px) clamp(20px, 2.4vw, 40px) clamp(36px, 3.6vw, 56px); border-bottom: 1px solid var(--fx-line); border-left: 1px solid var(--fx-line); }
.cp-sx-fx:not(.is-deux) .cp-sx-fx__it:nth-child(3n + 1),
.cp-sx-fx.is-deux .cp-sx-fx__it:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
/* Repère de croisement de traits à l'angle de chaque case, comme sur un plan. */
.cp-sx-fx__it::before { content: ""; position: absolute; left: -6px; top: -6px; width: 11px; height: 11px; background: linear-gradient(#fff, #fff) 50% / 1px 100% no-repeat, linear-gradient(#fff, #fff) 50% / 100% 1px no-repeat; opacity: .35; }
.cp-sx-fx .cp-sx-fx__v { position: relative; margin: 0; color: #fff; font-size: clamp(30px, 2.7vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -.02em; }
.cp-sx-fx__v b { font-weight: inherit; transition: color .9s ease .15s, filter .9s ease; }
.cp-sx-fx.is-armed .cp-sx-fx__it:not(.is-lit) .cp-sx-fx__v b { background: radial-gradient(circle, rgba(255, 255, 255, .6) 1.15px, transparent 1.4px) 0 0 / 5px 5px; -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(.4px); }
.cp-sx-fx .cp-sx-fx__t { margin: 0; color: #fff; font-size: 19px; line-height: 1.3; font-weight: 600; transition: opacity .6s ease .35s, transform .6s ease .35s; }
.cp-sx-fx__d { color: var(--fx-txt); font-size: 16px; line-height: 1.65; transition: opacity .6s ease .5s, transform .6s ease .5s; }
.cp-sx-fx__d > * { margin: 0; color: inherit; }
.cp-sx-fx.is-armed .cp-sx-fx__it:not(.is-lit) .cp-sx-fx__t,
.cp-sx-fx.is-armed .cp-sx-fx__it:not(.is-lit) .cp-sx-fx__d { opacity: 0; transform: translateY(10px); }
/* Ligne de cote sous la valeur : trait orange tracé de gauche à droite, puis les deux attaches. */
.cp-sx-fx__cote { position: relative; display: block; height: 11px; margin: 4px 0 2px; }
.cp-sx-fx__cote i { position: absolute; left: 0; top: 5px; width: 100%; height: 1px; background: var(--cp-sx-orange); transform-origin: left; transition: transform 1s cubic-bezier(.2, .7, .1, 1) .2s; }
.cp-sx-fx__cote::before, .cp-sx-fx__cote::after { content: ""; position: absolute; top: 0; width: 1px; height: 11px; background: var(--cp-sx-orange); transition: opacity .3s ease 1s; }
.cp-sx-fx__cote::before { left: 0; } .cp-sx-fx__cote::after { right: 0; }
.cp-sx-fx.is-armed .cp-sx-fx__it:not(.is-lit) .cp-sx-fx__cote i { transform: scaleX(0); }
.cp-sx-fx.is-armed .cp-sx-fx__it:not(.is-lit) .cp-sx-fx__cote::before,
.cp-sx-fx.is-armed .cp-sx-fx__it:not(.is-lit) .cp-sx-fx__cote::after { opacity: 0; }
/* Faisceau laser : descend une fois sur toute la hauteur de la grille. */
.cp-sx-fx__laser { position: absolute; left: -2vw; right: -2vw; top: 0; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, var(--cp-sx-orange) 12%, #FFD089 50%, var(--cp-sx-orange) 88%, transparent); box-shadow: 0 0 18px 3px rgba(255, 153, 0, .55), 0 0 60px 10px rgba(255, 153, 0, .18); opacity: 0; pointer-events: none; }
.cp-sx-fx__laser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 90px; background: linear-gradient(to top, rgba(255, 153, 0, .14), transparent); }
.cp-sx-fx.is-on .cp-sx-fx__laser { animation: cp-sx-fx-sweep 2.6s cubic-bezier(.45, .05, .35, 1) .3s forwards; }
@keyframes cp-sx-fx-sweep { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--fx-h, 600px)); } }
/* Réticule de visée qui suit le pointeur dans la case survolée. */
.cp-sx-fx__aim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.cp-sx-fx__aim::before, .cp-sx-fx__aim::after { content: ""; position: absolute; background: var(--cp-sx-orange); opacity: .7; }
.cp-sx-fx__aim::before { left: 0; right: 0; top: var(--y, 50%); height: 1px; }
.cp-sx-fx__aim::after { top: 0; bottom: 0; left: var(--x, 50%); width: 1px; }
@media (hover: hover) and (pointer: fine) {
	.cp-sx-fx__it:hover .cp-sx-fx__aim { opacity: 1; }
}
@media (max-width: 1000px) {
	.cp-sx-fx .cp-sx-fx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cp-sx-fx:not(.is-deux) .cp-sx-fx__it:nth-child(3n + 1) { border-left: 1px solid var(--fx-line); padding-left: clamp(20px, 2.4vw, 40px); }
	.cp-sx-fx .cp-sx-fx__it:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
	.cp-sx-fx .cp-sx-fx__grid { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-fx .cp-sx-fx__it { border-left: 0; padding-left: 0; padding-right: 0; }
	.cp-sx-fx__wm { height: 100px; }
	.cp-sx-fx:has(.cp-sx-fx__wm) { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sx-fx__laser { display: none; }
	.cp-sx-fx__wm text, .cp-sx-fx__v b, .cp-sx-fx .cp-sx-fx__t, .cp-sx-fx__d, .cp-sx-fx__cote i, .cp-sx-fx__cote::before, .cp-sx-fx__cote::after { transition: none !important; }
}

/* Mosaïque (profils, maquette validée le 01/10) : 6 cartes qui s'emboîtent sans vide, 1re haute et 6e large en
   bleu nuit ; lueur au survol comme les cartes à repère. Livrable en orange foncé sur blanc : 6,4:1. */
.cp-sx-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-bento.is-six { grid-template-areas: "a b b" "a c d" "e f f"; }
.cp-sx-bento.is-six .is-a { grid-area: a; } .cp-sx-bento.is-six .is-b { grid-area: b; } .cp-sx-bento.is-six .is-c { grid-area: c; }
.cp-sx-bento.is-six .is-d { grid-area: d; } .cp-sx-bento.is-six .is-e { grid-area: e; } .cp-sx-bento.is-six .is-f { grid-area: f; }
.cp-sx-bento__c { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 34px); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--cp-sx-line), 0 20px 50px -36px rgba(0, 0, 51, .45); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.cp-sx-bento__c::before { content: ""; position: absolute; inset: 0; z-index: 3; padding: 2px; border-radius: inherit; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--cp-sx-orange), color-mix(in srgb, var(--cp-sx-orange) 35%, transparent) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s; pointer-events: none; }
.cp-sx-bento__ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 8px; background: var(--cp-sx-sky); color: var(--cp-sx-navy); }
.cp-sx-bento__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-sx-bento__big { margin-top: 6px !important; color: var(--cp-sx-orange); font-size: clamp(44px, 4.6vw, 68px); line-height: .95; font-weight: 700; letter-spacing: -.03em; }
.cp-sx-bento__c h3 { color: var(--cp-sx-navy); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.cp-sx-bento__c.is-a h3 { font-size: clamp(24px, 2.2vw, 32px); }
.cp-sx-bento__t { color: var(--cp-sx-mute); font-size: 16px; line-height: 1.6; }
.cp-sx-bento__t p + p { margin-top: 10px !important; }
.cp-sx-bento__k { margin-top: auto !important; padding-top: 16px; border-top: 1px solid var(--cp-sx-line); color: #8A5200; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cp-sx-bento__c.is-dark { background: var(--cp-sx-deep); box-shadow: 0 30px 60px -34px rgba(0, 0, 51, .7); }
.cp-sx-bento__c.is-dark h3 { color: #fff; }
.cp-sx-bento__c.is-dark .cp-sx-bento__t { color: rgba(255, 255, 255, .8); }
.cp-sx-bento__c.is-dark .cp-sx-bento__ico { background: rgba(255, 255, 255, .08); color: var(--cp-sx-orange); }
.cp-sx-bento__c.is-dark .cp-sx-bento__k { color: var(--cp-sx-orange); border-top-color: rgba(255, 255, 255, .16); }
.cp-sx-bento.is-six :is(.is-b, .is-f) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-content: start; }
.cp-sx-bento.is-six :is(.is-b, .is-f) .cp-sx-bento__ico { grid-row: 1 / 4; }
.cp-sx-bento.is-six :is(.is-b, .is-f) .cp-sx-bento__k { grid-column: 2; }
.cp-sx-focus.is-in .cp-sx-bento__c { transition: opacity .7s ease calc(var(--i, 0) * .14s), transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
@media (hover: hover) and (pointer: fine) {
	.cp-sx-bento.is-glow .cp-sx-bento__c::before { opacity: 1; }
	.cp-sx-bento__c:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px transparent, 0 34px 70px -34px color-mix(in srgb, var(--cp-sx-orange) 55%, rgba(0, 0, 51, .5)); }
}
@media (max-width: 1100px) {
	.cp-sx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cp-sx-bento.is-six { grid-template-areas: "a b" "a c" "d e" "f f"; }
}
@media (max-width: 700px) {
	.cp-sx-bento,
	.cp-sx-bento.is-six { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
	.cp-sx-bento.is-six .cp-sx-bento__c { grid-area: auto; }
	.cp-sx-bento.is-six :is(.is-b, .is-f) { display: flex; }
}

/* Cartes lumineuses (inspirées du « glowing card » d'Unlimited Elements, demande client du 01/10) : une lueur
   orange suit le pointeur sur la bordure de toutes les cartes de la rangée, un halo l'accompagne sous le texte
   et un reflet sur le bandeau. Position du pointeur en --mx / --my, posée par secteur.js pour chaque carte.
   Sur écran tactile, ni lueur ni soulèvement. */
.cp-sx-rep__c { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--cp-sx-line), 0 20px 50px -34px rgba(0, 0, 51, .4); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.cp-sx-rep__c::before,
.cp-sx-rep__c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s; pointer-events: none; }
.cp-sx-rep__c::before { z-index: 3; padding: 2px; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--cp-sx-orange), color-mix(in srgb, var(--cp-sx-orange) 35%, transparent) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cp-sx-rep__c::after { z-index: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cp-sx-orange) 11%, transparent), transparent 60%); }
.cp-sx-rep__k { position: relative; z-index: 1; overflow: hidden; padding: 20px 26px; background: var(--cp-sx-deep); color: var(--cp-sx-orange); font-size: 24px; line-height: 1.2; font-weight: 700; }
.cp-sx-rep__k.has-img { padding-block: 44px; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-sx-deep) 88%, transparent) 0%, color-mix(in srgb, var(--cp-sx-deep) 62%, transparent) 50%, color-mix(in srgb, var(--cp-sx-deep) 22%, transparent) 100%), var(--bg) center 45% / cover no-repeat, var(--cp-sx-deep); }
.cp-sx-rep__k::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 65%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.cp-sx-rep__c h3 { position: relative; z-index: 1; padding: 22px 26px 0; color: var(--cp-sx-navy); font-size: 21px; line-height: 1.25; font-weight: 700; }
.cp-sx-rep__t { position: relative; z-index: 1; padding: 12px 26px 26px; color: var(--cp-sx-ink); font-size: 16px; line-height: 1.6; }
.cp-sx-rep__t p + p,
.cp-sx-rep__t p + ul,
.cp-sx-rep__t ul + p { margin-top: 12px !important; }
.cp-sx-rep__t ul { display: grid; gap: 8px; }
.cp-sx-rep__t li { position: relative; padding-left: 20px; }
.cp-sx-rep__t li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--cp-sx-orange); }
/* Carte sans repère : le titre ouvre la carte. */
.cp-sx-rep__c > h3:first-child { padding-top: 28px; }
@media (hover: hover) and (pointer: fine) {
	.cp-sx-rep.is-glow .cp-sx-rep__c::before { opacity: 1; }
	.cp-sx-rep__c:hover::after,
	.cp-sx-rep__c:hover .cp-sx-rep__k::after { opacity: 1; }
	.cp-sx-rep__c:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px transparent, 0 34px 70px -34px color-mix(in srgb, var(--cp-sx-orange) 55%, rgba(0, 0, 51, .5)); }
}
/* Après l'apparition en cascade, seul le fondu garde son décalage : le survol réagit sans attendre. */
.cp-sx-focus.is-in .cp-sx-rep__c { transition: opacity .7s ease calc(var(--i, 0) * .14s), transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
@media (max-width: 900px) {
	.cp-sx-focus .cp-sx-head--duo { grid-template-columns: minmax(0, 1fr); }
}

/* Panneaux à grand chiffre (seuil des 150 m²) */
.cp-sx-focus--panneaux .cp-sx-head .cp-sx-intro { color: var(--cp-sx-ink); }
.cp-sx-sl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(36px, 4vw, 56px); }
.cp-sx-sl__c { display: flex; flex-direction: column; gap: 12px; padding: 32px 30px 28px; border-radius: 8px; background: var(--cp-sx-sky); }
.cp-sx-sl__n { display: flex; flex-direction: column; color: color-mix(in srgb, var(--cp-sx-tint, var(--cp-sx-orange)) 55%, #000033); font-size: clamp(44px, 4.6vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.cp-sx-sl__n small { margin-bottom: 8px; color: var(--cp-sx-mute); font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.cp-sx-sl__c h3 { margin-top: 8px; color: var(--cp-sx-navy); font-size: 21px; line-height: 1.25; font-weight: 700; }
.cp-sx-sl__c > p:not(.cp-sx-sl__n) { color: var(--cp-sx-ink); font-size: 16px; line-height: 1.6; }
.cp-sx-sl__ex { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cp-sx-line); color: var(--cp-sx-navy); font-size: 15px; line-height: 1.5; }
.cp-sx-sl__ex a { color: var(--cp-sx-navy); font-weight: 700; text-decoration: none; box-shadow: inset 0 -2px rgba(255, 153, 0, .7); }

@media (max-width: 900px) {
	.cp-sx-dec,
	.cp-sx-arc,
	.cp-sx-cal,
	.cp-sx-eco,
	.cp-sx-sl { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-cal__tb { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-cal__tb > div { border-left: 0; border-top: 1px solid var(--cp-sx-line); }
	.cp-sx-cal__tb > div:first-child { border-top: 0; }
}
@media (max-width: 480px) {
	.cp-sx-arc__tb { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-arc__tb > div { border-left: 0; }
	.cp-sx-arc__tb > div:nth-child(n+2) { border-top: 1px solid var(--cp-sx-line); }
}

/* ---------- Réalisations (bloc Dernières réalisations) : fond brume sur toute la largeur ---------- */
.cp-sx-page > .cp-last {
	max-width: none;
	padding-inline: max(clamp(16px, 3vw, 40px), calc((100% - 1320px) / 2));
	background: var(--cp-sx-mist);
	scroll-margin-top: calc(var(--cp-bar-h, 76px) + 16px);
}
.cp-sx-page > .cp-last .cp-last__title { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -.012em; }

/* ---------- FAQ (rendue sous le bandeau du pied) : une seule colonne sur toute la largeur du contenu ----------
   Demande client du 01/10 : sans phrase d'introduction, titre puis questions, élargies et centrées dans la page.
   Une phrase ajoutée plus tard dans l'éditeur se place entre le titre et les questions. */
.cp-faq .cp-faq__grid:first-child { margin-top: 0 !important; }
.cp-faq .cp-faq__grid:has(> .cp-faq__intro > .cp-faq__title) { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 2.5vw, 32px); }
/* Demande client du 01/10 (« trop large ») : bloc centré de 1 000 px, lignes de réponse lisibles sur grand écran. */
.cp-faq .cp-faq__grid:has(> .cp-faq__intro > .cp-faq__title) { width: 100%; max-width: 1000px; margin-inline: auto !important; }
.cp-faq .cp-faq__intro:has(> .cp-faq__title) { display: contents; }
.cp-faq .cp-faq__intro > .cp-faq__title { grid-column: 1; padding-top: 0; }
.cp-faq .cp-faq__intro:has(> .cp-faq__title) > .cp-faq__lead,
.cp-faq .cp-faq__grid:has(> .cp-faq__intro > .cp-faq__title) > .cp-faq__list { grid-column: 1; }

@media (prefers-reduced-motion: reduce) {
	[class*="cp-sx-"],
	[class*="cp-sx-"] * { transition: none !important; }
	.cp-sx-ex .cp-sx-ex__img { transform: none; }
	.cp-sx-ex__pane.is-on { animation: none; }
}