/*
 * Secteurs de l'accueil : cadre orange du texte en haut à gauche, six cartes en escalier qui
 * montent vers la droite et mordent sur le bas du cadre, comme sur le site d'origine.
 * Au survol, la carte prend la couleur de son secteur, mélangée à 35 % de bleu nuit pour que le
 * texte blanc reste lisible (4,9:1 au minimum), et un grand pictogramme glisse depuis la droite.
 */

.cp-main > .cp-sect-part { margin-block: 0; }

.cp-sect {
	--cp-sect-navy: var(--wp--preset--color--navy, #000033);
	--cp-sect-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-sect-mute: var(--wp--preset--color--mute, #555B6B);
	margin: 0 !important;
	padding-block: clamp(64px, 8vw, 120px) clamp(64px, 7vw, 104px);
	background: var(--wp--preset--color--white, #fff);
}
.cp-sect,
.cp-sect * { box-sizing: border-box; }
.cp-sect > *,
.cp-sect__stage > *,
.cp-sect__intro > *,
.cp-sect__col > * { margin-block: 0 !important; }

/* ---------- Scène ---------- */
.cp-sect__stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
/* Le bas du cadre reste libre : les colonnes centrales viennent s'y poser. */
.cp-sect__intro {
	grid-column: 1 / 4;
	grid-row: 1;
	padding: clamp(40px, 4vw, 60px) clamp(28px, 4.5vw, 64px) 290px;
	border: 1px solid var(--cp-sect-orange);
	border-radius: 8px;
}
.cp-sect .cp-sect__heading { margin-bottom: 22px !important; color: var(--cp-sect-navy); font-size: clamp(32px, 3.1vw, 44px); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.cp-sect__text { color: var(--cp-sect-mute); font-size: 17px; }

/*
 * Escalier : colonnes 2 et 3 à deux cartes, la 3 nettement plus haute ; colonnes 1 et 4 à une
 * carte, centrée sur la paire voisine. Tout est calé sur le bas du cadre : si le texte s'allonge,
 * l'ensemble suit.
 */
.cp-sect__col { position: relative; z-index: 1; display: grid; gap: 28px; align-content: start; grid-row: 2; }
.cp-sect__col--1 { grid-column: 1; margin-top: -20px !important; }
.cp-sect__col--2 { grid-column: 2; margin-top: -160px !important; }
.cp-sect__col--3 { grid-column: 3; margin-top: -270px !important; }
.cp-sect__col--4 { grid-column: 4; margin-top: -130px !important; }

/* ---------- Carte ---------- */
.cp-sect__card {
	--cp-tone: var(--cp-sect-navy);
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 250px;
	padding: 26px 26px 28px;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 51, .22), 0 2px 6px rgba(0, 0, 51, .06);
	color: inherit;
	text-decoration: none;
	transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.cp-sect__card--tertiaire { --cp-tone: var(--wp--preset--color--secteur-tertiaire, #4DAF47); }
.cp-sect__card--culturel { --cp-tone: var(--wp--preset--color--secteur-culturel, #A05C87); }
.cp-sect__card--industrie { --cp-tone: var(--wp--preset--color--secteur-industrie, #6E92C7); }
.cp-sect__card--patrimoine { --cp-tone: var(--wp--preset--color--secteur-patrimoine, #DDA145); }
.cp-sect__card--visite { --cp-tone: var(--wp--preset--color--secteur-visite, #C59E52); }
.cp-sect__card--projet { --cp-tone: var(--wp--preset--color--secteur-projet, #EE754E); }

.cp-sect__icon { display: block; width: 44px; height: 44px; margin-bottom: 22px; color: var(--cp-sect-orange); transition: color .35s; }
.cp-sect__icon svg,
.cp-sect__ghost svg { display: block; width: 100%; height: 100%; }
.cp-sect .cp-sect__title { position: relative; margin: 0 0 10px; color: var(--cp-sect-navy); font-size: 18.5px; line-height: 1.25; font-weight: 700; transition: color .35s; }
.cp-sect .cp-sect__desc { position: relative; margin: 0; color: var(--cp-sect-mute); font-size: 15px; line-height: 1.5; transition: color .35s; }
/* Grand pictogramme du secteur, coupé par le bord droit, révélé au survol. */
.cp-sect__ghost {
	position: absolute;
	top: 50%;
	right: -46px;
	width: 190px;
	height: 190px;
	color: var(--cp-tone);
	opacity: 0;
	transform: translate(24px, -50%);
	transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
	z-index: 0;
}
.cp-sect__ghost svg { stroke-width: 1.2; }
/* Le contenu passe toujours au-dessus du grand pictogramme. */
.cp-sect__card { isolation: isolate; }
.cp-sect__icon,
.cp-sect .cp-sect__title,
.cp-sect .cp-sect__desc { position: relative; z-index: 1; }
.cp-sect__card:hover,
.cp-sect__card:focus-visible {
	background: color-mix(in srgb, var(--cp-tone) 65%, var(--cp-sect-navy));
	box-shadow: 0 22px 40px -16px rgba(0, 0, 51, .45);
	transform: translateY(-4px);
}
.cp-sect__card:hover .cp-sect__ghost,
.cp-sect__card:focus-visible .cp-sect__ghost { opacity: .9; transform: translate(0, -50%); }
.cp-sect__card:hover .cp-sect__icon,
.cp-sect__card:focus-visible .cp-sect__icon,
.cp-sect .cp-sect__card:hover .cp-sect__title,
.cp-sect .cp-sect__card:focus-visible .cp-sect__title,
.cp-sect .cp-sect__card:hover .cp-sect__desc,
.cp-sect .cp-sect__card:focus-visible .cp-sect__desc { color: #fff; }
.cp-sect__card:focus-visible { outline: 2px solid var(--cp-sect-orange); outline-offset: 3px; }

/* ---------- Éditeur : l'escalier est remplacé par une grille, pour modifier les cartes à l'aise. ---------- */
.editor-styles-wrapper .cp-sect__intro { padding-bottom: clamp(40px, 4vw, 60px); }
.editor-styles-wrapper .cp-sect__col { margin-top: 24px !important; }

/* ---------- Points de rupture ---------- */
@media (max-width: 1080px) {
	/* Deux colonnes, la seconde décalée vers le bas : l'escalier reste lisible. */
	.cp-sect__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.cp-sect__intro { grid-column: 1 / -1; padding-bottom: clamp(40px, 4vw, 60px); }
	.cp-sect__col { display: contents; }
	.cp-sect__col--2 > :first-child,
	.cp-sect__col--3 > :first-child,
	.cp-sect__col--4 > :first-child { transform: translateY(70px); }
	.cp-sect__col--2 > :first-child:hover,
	.cp-sect__col--3 > :first-child:hover,
	.cp-sect__col--4 > :first-child:hover,
	.cp-sect__col--2 > :first-child:focus-visible,
	.cp-sect__col--3 > :first-child:focus-visible,
	.cp-sect__col--4 > :first-child:focus-visible { transform: translateY(66px); }
	.cp-sect { padding-bottom: calc(clamp(64px, 7vw, 104px) + 70px); }
}
@media (max-width: 640px) {
	.cp-sect__stage { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.cp-sect__col--2 > :first-child,
	.cp-sect__col--3 > :first-child,
	.cp-sect__col--4 > :first-child,
	.cp-sect__col--2 > :first-child:hover,
	.cp-sect__col--3 > :first-child:hover,
	.cp-sect__col--4 > :first-child:hover { transform: none; }
	.cp-sect { padding-bottom: clamp(64px, 7vw, 104px); }
	.cp-sect__card { min-height: 0; }
	.cp-sect__intro { padding: 32px 22px; }
	.cp-sect .cp-sect__heading { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sect__card,
	.cp-sect__ghost,
	.cp-sect__icon,
	.cp-sect .cp-sect__title,
	.cp-sect .cp-sect__desc { transition: none; }
	.cp-sect__card:hover,
	.cp-sect__card:focus-visible { transform: none; }
}