/*
 * Page Notre équipe (bloc acf/equipe, maquette 2 validée le 07/10) : haut de page nuit avec les portraits des
 * membres (photos, relief au survol), agences sur calque avec l'estuaire dessiné, recrutement
 * sur blanc. Fonds : nuit, calque, blanc, puis le bandeau nuit du pied : jamais deux voisins identiques.
 */

.wp-site-blocks > .cp-main:has(.cp-eq-s) { margin-block-start: 0; }
.cp-main > .cp-sx-page > .cp-eq-s,
.cp-main > * > .cp-eq-s { margin-block: 0 !important; }
.cp-eq-s {
	--cp-eq-nuit: var(--wp--preset--color--navy, #000033);
	--cp-eq-nuit-2: #07073f;
	--cp-eq-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-eq-calque: #F3F5FA;
	--cp-eq-texte: #1B1F3B;
	--cp-eq-gris: #4A5070;
	--cp-eq-gris-nuit: #A9AECB;
	--cp-eq-trait: #D5D9E6;
	position: relative;
	box-sizing: border-box;
}
.cp-eq-s *, .cp-eq-s *::before, .cp-eq-s *::after { box-sizing: border-box; }
.cp-eq__in { position: relative; width: min(1240px, 100%); margin-inline: auto; padding-inline: 20px; }
.cp-eq__h2 { margin: 0 0 16px; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; font-weight: 700; color: var(--cp-eq-nuit); text-wrap: balance; }
.cp-eq__txt { color: var(--cp-eq-gris); }
.cp-eq__txt > * { margin: 0 0 14px; }
.cp-eq__txt a { color: var(--cp-eq-nuit); text-decoration: underline; text-decoration-color: var(--cp-eq-orange); text-underline-offset: 3px; }
.cp-eq__vide { margin: 24px 0 0; padding: 16px; border: 1px dashed currentColor; }

/* ---------- Haut de page et membres ---------- */
.cp-eq-equipe {
	overflow: hidden;
	color: #fff;
	padding-block: clamp(48px, 6vw, 92px) clamp(96px, 10vw, 150px);
	background:
		radial-gradient(60% 50% at 85% 10%, rgba(255, 153, 0, .16), transparent 70%),
		radial-gradient(70% 60% at 10% 100%, rgba(60, 70, 200, .35), transparent 70%),
		linear-gradient(180deg, var(--cp-eq-nuit) 0%, var(--cp-eq-nuit-2) 100%);
}
.cp-eq__ciel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; }
.cp-eq__tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.cp-eq__ariane { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; font-size: 14px; color: var(--cp-eq-gris-nuit); }
.cp-eq__ariane a { color: inherit; text-decoration: none; }
.cp-eq__ariane a:hover { color: #fff; }
.cp-eq__h1 { margin: 0; font-size: clamp(44px, 6.4vw, 92px); line-height: .98; font-weight: 900; letter-spacing: -.01em; color: #fff; }
.cp-eq__h1 span { display: block; font-size: .66em; line-height: 1.1; font-weight: 300; color: #fff; }
.cp-eq__chapo { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.7; color: #D3D6EC; }
.cp-eq__chapo > * { margin: 0 0 12px; }
.cp-eq__chapo a { color: #fff; text-decoration: underline; text-decoration-color: var(--cp-eq-orange); text-underline-offset: 3px; }
.cp-eq__compte { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 18px 0 0; }
.cp-eq__compte div { display: grid; }
.cp-eq__compte dt { font-size: 40px; line-height: 1; font-weight: 900; color: var(--cp-eq-orange); font-variant-numeric: tabular-nums; }
.cp-eq__compte dd { margin: 4px 0 0; font-size: 14px; color: var(--cp-eq-gris-nuit); }

/* Grille en quinconce : les cartes paires descendent ; la profondeur vient du décalage et de l'ombre. */
.cp-eq__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; perspective: 1200px; }
.cp-eq__grille > li { margin: 0; }
.cp-eq__grille > li:nth-child(4n+2), .cp-eq__grille > li:nth-child(4n+4) { transform: translateY(56px); }
.cp-eq__p { position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cp-eq__scene { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #050530;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.cp-eq-s .cp-eq__scene img.cp-eq__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Cartouche : il déborde de la photo et flotte devant, comme la signature d'un plan. */
.cp-eq__cart { position: relative; display: grid; grid-template-columns: 1fr auto; margin: -46px 14px 0; border-radius: 10px; overflow: hidden;
	background: #fff; color: var(--cp-eq-nuit); transform: translateZ(50px); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); }
.cp-eq__cart > div { padding: 12px 16px; }
.cp-eq__cart > div + div { display: grid; place-items: center; padding: 10px 14px; border-left: 1px solid var(--cp-eq-trait); }
.cp-eq__cart h2 { margin: 0; font-size: 20px; line-height: 1.15; font-weight: 700; color: var(--cp-eq-nuit); }
.cp-eq__cart p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--cp-eq-gris); }
.cp-eq__cart svg { width: 26px; height: 26px; }

/* ---------- Agences ---------- */
.cp-eq-agences { background: var(--cp-eq-calque); padding-block: clamp(64px, 8vw, 120px); color: var(--cp-eq-texte); }
.cp-eq-ag__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cp-eq-ag__grid.is-seul { grid-template-columns: minmax(0, 1fr); }
.cp-eq-ag__tel { display: inline-block; margin: 8px 0 28px; font-size: 30px; font-weight: 900; color: var(--cp-eq-nuit); text-decoration: none; font-variant-numeric: tabular-nums; }
.cp-eq-ag__adr { display: grid; gap: 12px; }
.cp-eq-ag__adr article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 12px; background: #fff;
	box-shadow: 0 14px 30px -18px rgba(0, 0, 51, .35); transition: transform .3s ease, box-shadow .3s ease; }
.cp-eq-ag__adr article:hover, .cp-eq-ag__adr article.is-on { transform: translateX(8px); box-shadow: 0 20px 40px -18px rgba(0, 0, 51, .45); }
.cp-eq-ag__adr i { width: 14px; height: 14px; border-radius: 50%; background: var(--cp-eq-orange); box-shadow: 0 0 0 5px rgba(255, 153, 0, .2); }
.cp-eq-ag__adr h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--cp-eq-nuit); }
.cp-eq-ag__adr span { display: block; font-size: 15px; color: var(--cp-eq-gris); }
.cp-eq-ag__adr a { font-size: 15px; font-weight: 700; color: var(--cp-eq-nuit); text-decoration: underline; text-decoration-color: var(--cp-eq-orange); text-underline-offset: 4px; }
.cp-eq-ag__carte { position: relative; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; background: var(--cp-eq-nuit); box-shadow: 0 40px 80px -30px rgba(0, 0, 51, .55); }
.cp-eq-ag__carte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-eq-ag__dep { fill: #7e83b8; font: 13px var(--wp--preset--font-family--titillium, "Titillium Web", sans-serif); letter-spacing: 2px; }
.cp-eq-ag__est { fill: #5e63a8; font: 12px var(--wp--preset--font-family--titillium, "Titillium Web", sans-serif); }
.cp-eq-ag__ville { fill: #fff; font: 700 20px var(--wp--preset--font-family--titillium, "Titillium Web", sans-serif); }
.cp-eq-ag__trajet { stroke-dasharray: 6 10; animation: cp-eq-file 1.6s linear infinite; }
@keyframes cp-eq-file { to { stroke-dashoffset: -32; } }
.cp-eq-ag__onde { transform-origin: center; transform-box: fill-box; animation: cp-eq-onde 2.6s ease-out infinite; }
.cp-eq-ag__onde.is-b { animation-delay: 1.3s; }
[data-cp-eq-pt].is-on .cp-eq-ag__onde { animation-duration: 1.2s; }
@keyframes cp-eq-onde { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }

/* ---------- Recrutement ---------- */
.cp-eq-recrutement { background: #fff; padding-block: clamp(64px, 8vw, 120px); color: var(--cp-eq-texte); }
.cp-eq-rec__t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.cp-eq-rec__t .cp-eq__h2 { margin: 0; }
.cp-eq-rec__t .cp-eq__txt > :last-child { margin-bottom: 0; }
.cp-eq-rec__postes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cp-eq-trait); }
.cp-eq-rec__postes li { margin: 0; }
.cp-eq-rec__postes a { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
	padding: 26px 8px; border-bottom: 1px solid var(--cp-eq-trait); color: var(--cp-eq-nuit); text-decoration: none; transition: color .3s ease, padding .4s ease; }
.cp-eq-rec__postes a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cp-eq-nuit); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cp-eq-rec__postes a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--cp-eq-orange); box-shadow: 0 0 14px 3px rgba(255, 153, 0, .55); opacity: 0; }
.cp-eq-rec__postes a:hover::before, .cp-eq-rec__postes a:focus-visible::before { transform: scaleX(1); }
.cp-eq-rec__postes a:hover::after, .cp-eq-rec__postes a:focus-visible::after { animation: cp-eq-raie .5s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes cp-eq-raie { 0% { left: 0; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.cp-eq-rec__postes a:hover, .cp-eq-rec__postes a:focus-visible { color: #fff; padding-left: 24px; }
.cp-eq-rec__n { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; }
.cp-eq-rec__f { font-size: 26px; color: var(--cp-eq-orange); }
.cp-eq-s a:focus-visible { outline: 2px solid var(--cp-eq-orange); outline-offset: 3px; }

@media (max-width: 1080px) {
	.cp-eq__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
	.cp-eq__grille > li:nth-child(n) { transform: none; }
	.cp-eq__grille > li:nth-child(2n) { transform: translateY(40px); }
	.cp-eq__tete, .cp-eq-ag__grid, .cp-eq-rec__t { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.cp-eq__grille { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.cp-eq__grille > li:nth-child(n) { transform: none; }
	.cp-eq__h1 { font-size: 46px; }
	.cp-eq-ag__adr article { grid-template-columns: auto minmax(0, 1fr); }
	.cp-eq-ag__adr article > a { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-eq__ciel, 	.cp-eq-ag__trajet, .cp-eq-ag__onde { animation: none; }
	.cp-eq__p { transition: none; }
}