/*
 * Carte « cartouche de plan » d'une réalisation (conceptplan_work_plan(), inc/works.php), commune à
 * la page Réalisations, au bloc Dernières réalisations de l'accueil et aux réalisations liées des
 * articles : photo encadrée de repères d'angle, titre, lieu et client, chiffres du relevé dans un
 * tableau à filets, case flèche. Au survol : la carte se soulève, les repères s'écartent et passent à
 * l'orange, un balayage laser traverse la photo.
 * Fond bleu nuit en dégradé de bas en haut (variante B validée le 03/10) : nuit plein sous le titre et le
 * cartouche, éclairci vers un bleu moyen derrière la photo. Toujours posée sur un fond clair.
 */

.cp-plan {
	--cp-plan-ease: cubic-bezier(.2, .7, .2, 1);
	--cp-plan-navy: var(--wp--preset--color--navy, #000033);
	--cp-plan-line: rgba(255, 255, 255, .16);
	--cp-plan-soft: #B9BDD6;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--cp-plan-navy);
	border-radius: 8px;
	background: var(--cp-plan-navy) linear-gradient(0deg, #000033 0%, #000033 48%, #1E3478 76%, #4E6BB5 100%);
	color: #fff;
	text-decoration: none;
	transition: transform .45s var(--cp-plan-ease), box-shadow .45s var(--cp-plan-ease), background-color .45s;
}
.cp-plan *,
.cp-plan *::before,
.cp-plan *::after { box-sizing: border-box; }
.cp-plan p,
.cp-plan h3,
.cp-plan dl,
.cp-plan dd,
.cp-plan dt { margin: 0; }
.cp-plan:hover,
.cp-plan:focus-visible { transform: translateY(-4px); background: #05053D linear-gradient(0deg, #05053D 0%, #05053D 48%, #253C86 76%, #5A78C2 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 51, .6); }
.cp-plan:focus-visible { outline: 2px solid var(--wp--preset--color--orange, #FF9900); outline-offset: 4px; }
.cp-plan__fig { position: relative; margin: 16px 16px 0; }
.cp-plan__img { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-radius: 8px; background: #0A0A45; }
.cp-plan .cp-plan__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; /* posée en absolu : la hauteur du cadre s'impose même à une image panoramique ; .cp-plan en tête pour passer devant « [class*="cp-sx-"] img { height: auto } » de secteur.css */ transition: transform 1.2s var(--cp-plan-ease); }
.cp-plan:hover .cp-plan__img img,
.cp-plan:focus-visible .cp-plan__img img { transform: scale(1.05); }
/* Balayage laser au survol. */
.cp-plan__img::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--wp--preset--color--orange, #FF9900);
	box-shadow: 0 0 12px 2px rgba(255, 153, 0, .85), -60px 0 60px -20px rgba(255, 153, 0, .35);
	opacity: 0;
}
.cp-plan:hover .cp-plan__img::after,
.cp-plan:focus-visible .cp-plan__img::after { animation: cp-plan-sweep 1s var(--cp-plan-ease) forwards; }
@keyframes cp-plan-sweep { 0% { opacity: 1; left: 0; } 88% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
/* Repères d'angle, qui s'écartent et passent à l'orange au survol. */
.cp-plan__fig i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(255, 255, 255, .6); transition: transform .5s var(--cp-plan-ease), border-color .3s; }
.cp-plan__fig i:nth-of-type(1) { left: -7px; top: -7px; border-left-width: 1.5px; border-top-width: 1.5px; }
.cp-plan__fig i:nth-of-type(2) { right: -7px; top: -7px; border-right-width: 1.5px; border-top-width: 1.5px; }
.cp-plan__fig i:nth-of-type(3) { left: -7px; bottom: -7px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.cp-plan__fig i:nth-of-type(4) { right: -7px; bottom: -7px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.cp-plan:hover .cp-plan__fig i,
.cp-plan:focus-visible .cp-plan__fig i { border-color: var(--wp--preset--color--orange, #FF9900); }
.cp-plan:hover .cp-plan__fig i:nth-of-type(1) { transform: translate(-4px, -4px); }
.cp-plan:hover .cp-plan__fig i:nth-of-type(2) { transform: translate(4px, -4px); }
.cp-plan:hover .cp-plan__fig i:nth-of-type(3) { transform: translate(-4px, 4px); }
.cp-plan:hover .cp-plan__fig i:nth-of-type(4) { transform: translate(4px, 4px); }
.cp-plan__chips { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-plan__chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .95); color: var(--wp--preset--color--navy, #000033); font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.cp-plan__chip::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--cp-chip, #555B6B); }
.cp-plan__chip--tertiaire { --cp-chip: var(--wp--preset--color--secteur-tertiaire, #4DAF47); }
.cp-plan__chip--culturel { --cp-chip: var(--wp--preset--color--secteur-culturel, #A05C87); }
.cp-plan__chip--industrie { --cp-chip: var(--wp--preset--color--secteur-industrie, #6E92C7); }
.cp-plan__chip--patrimoine { --cp-chip: var(--wp--preset--color--secteur-patrimoine, #DDA145); }
.cp-plan__chip--visite { --cp-chip: var(--wp--preset--color--secteur-visite, #C59E52); }
.cp-plan__chip--projet { --cp-chip: var(--wp--preset--color--secteur-projet, #EE754E); }
.cp-plan__head { display: grid; gap: 4px; padding: 22px 24px 20px; }
.cp-plan .cp-plan__title { color: #fff; font-size: 23px; line-height: 1.2; font-weight: 700; }
/* Catégorie en grand, en orange de la charte (une div, pas un titre) puis, sous le lieu, le titre du projet,
   plus petit, en blanc : un titre ne prend pas de couleur (variante A validée le 03/10). */
.cp-plan .cp-plan__cat { color: var(--wp--preset--color--orange, #FF9900); font-size: 23px; line-height: 1.2; font-weight: 700; }
.cp-plan .cp-plan__name { margin: 10px 0 0; color: #fff; font-size: 16.5px; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none; }
.cp-plan__place { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px !important; color: var(--cp-plan-soft); font-size: 14.5px; }
.cp-plan__place b { color: #fff; font-weight: 600; }
.cp-plan__pin { flex: none; width: 15px; height: 15px; color: var(--wp--preset--color--orange, #FF9900); }
.cp-plan__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--cp-plan-line); }
/* Le cartouche : tableau à filets, comme le bas d'une planche de plan. */
/* Hauteur identique d'une carte à l'autre (cartouches alignés sur une rangée) : valeurs sur une ligne,
   à une taille qui suit la largeur du cartouche, libellés réservant deux lignes. */
.cp-plan__tb { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cp-plan-n, 3), minmax(0, 1fr)); margin-top: auto !important; border-top: 1px solid var(--cp-plan-line); }
.cp-plan__tb div { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 14px 14px; border-right: 1px solid var(--cp-plan-line); }
.cp-plan__tb div:last-child { border-right: 0; }
.cp-plan__tb dd { order: 1; color: #fff; font-size: clamp(14px, 6.4cqi, 22px); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-plan__tb dt { order: 2; min-height: 2.6em; color: var(--cp-plan-soft); font-size: 12.5px; line-height: 1.3; }
.cp-plan__foot { display: grid; grid-template-columns: minmax(0, 1fr) 56px; border-top: 1px solid var(--cp-plan-line); }
.cp-plan__tb + .cp-plan__foot { margin-top: 0; }
.cp-plan__head + .cp-plan__foot { margin-top: auto; }
.cp-plan__foot > span:first-child { padding: 14px 24px; color: #fff; font-size: 15px; font-weight: 700; }
.cp-plan__go { display: grid; place-items: center; border-left: 1px solid var(--cp-plan-line); border-radius: 0 0 8px 0; color: #fff; transition: background-color .35s var(--cp-plan-ease), color .35s; }
.cp-plan__go svg { transition: transform .35s var(--cp-plan-ease); }
.cp-plan:hover .cp-plan__go,
.cp-plan:focus-visible .cp-plan__go { background: var(--wp--preset--color--orange, #FF9900); color: var(--cp-plan-navy); }
.cp-plan:hover .cp-plan__go svg { transform: translateX(3px); }

@media (max-width: 700px) {
	.cp-plan__head { padding: 20px 20px 18px; }
	.cp-plan__foot > span:first-child { padding: 14px 20px; }
}
@media (hover: none) {
	.cp-plan:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-plan,
	.cp-plan__img img,
	.cp-plan__fig i,
	.cp-plan__go,
	.cp-plan__go svg { transition: none; }
	.cp-plan:hover,
	.cp-plan:hover .cp-plan__img img,
	.cp-plan:hover .cp-plan__fig i { transform: none; }
	.cp-plan:hover .cp-plan__img::after { animation: none; }
}