/* Gabarit « Pôle d'expertise » (template-pole.php, parts/pole/*.php).
   Reprend les composants existants (page-hero, pole-problem, included, method, faq, proj-card, cta, hub-card) ;
   ce fichier ne contient que les fonds alternés et les blocs propres au pôle.
   Alternance : lilas (hero) · blanc · bleu nuit · blanc · lilas · sable · blanc · lilas · bleu nuit.
   Mouvement : transform et opacity uniquement, désactivé avec « réduire les animations ». */

/* --- En-tête --- */
.pole-hero__promesse { display: inline-flex; align-items: center; gap: .5em; margin: 0; font-weight: 600; color: var(--nuit); }
.pole-hero__promesse .icon { flex: none; color: var(--galactic-ink); }
.pole-hero__down { transform: rotate(90deg); }

/* --- Le problème (blanc) --- */
.pole-problems--blanc { background: var(--blanc); }
.pole-problems--blanc .pole-problem { background: var(--lila); }
.pole-problems--blanc .pole-problem__list .icon { background: var(--blanc); }
.pole-reponse { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; margin-top: var(--s-6); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-l); border: 1px solid var(--line); }
.pole-reponse__title { display: flex; gap: .5em; align-items: flex-start; margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; }
.pole-reponse__title .icon { flex: none; margin-top: .1em; color: var(--galactic-ink); }
.pole-reponse .lead { margin: 0; color: var(--ink-soft); }

/* --- Prestations (bleu nuit) --- */
.pole-svc { background: var(--nuit-950); color: var(--on-dark); }
.pole-svc .pole-lead { color: var(--on-dark-soft); }
.pole-svc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pole-svc__card {
	position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--s-3);
	padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: var(--r-l);
	background: rgba(241, 240, 255, .05); border: 1px solid var(--line-dark);
}
.pole-svc__court { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--boreal); }
.pole-svc__name { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.pole-svc__text { margin: 0; color: var(--on-dark-soft); }
.pole-svc__benefice { display: flex; gap: .6em; align-items: flex-start; margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line-dark); font-weight: 600; color: #fff; }
.pole-svc__benefice .icon { flex: none; margin-top: .15em; color: var(--boreal); }
.pole-svc__link { display: inline-flex; align-items: center; gap: .4em; margin-top: auto; min-height: 2.75rem; font-weight: 650; color: var(--boreal); }
.pole-svc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pole-svc__link:focus-visible { outline: none; }
.pole-svc__link:focus-visible::after { outline: 0.1875rem solid var(--boreal); outline-offset: 0.25rem; }

/* 3 prestations : une ligne de 3 sur grand écran (pas de carte seule sur sa ligne). */
@media (min-width: 1100px) {
	.pole-svc__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Ce qui est inclus (blanc) --- */
.included--blanc { background: var(--blanc); }
/* Titre de la colonne : taille plafonnée pour qu'un mot long (« l'accompagnement ») tienne dans la colonne. */
.page--pole .included__aside, .page--gabarit .included__aside { min-width: 0; }
.page--pole .included__aside .h2, .page--gabarit .included__aside .h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); overflow-wrap: break-word; hyphens: auto; }
.included--blanc .included__list li { background: var(--lila); box-shadow: none; }

/* --- Prestation : « Ce qui est inclus » en bleu nuit (section mise en avant) --- */
.included--nuit { background: var(--nuit-950); color: var(--on-dark); }
.included--nuit .lead, .included--nuit .included__note { color: var(--on-dark-soft); }
.included--nuit .included__list li { background: rgba(241, 240, 255, .06); border: 1px solid var(--line-dark); box-shadow: none; color: #fff; }
.included--nuit .h2 { color: #fff; }

/* --- Prestation : « Atouts & bon à savoir » sur sable --- */
.proscons--sable { background: var(--sable); }
.proscons--sable .pros__item { background: var(--blanc); }

/* --- Pourquoi WEBECO (sable) --- */
.pole-why { background: var(--sable); }
.pole-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pole-why__item { display: grid; align-content: start; gap: var(--s-3); padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: var(--r-l); background: var(--blanc); }
.pole-why__item p { margin: 0; color: var(--ink-soft); }
.pole-why__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--grad); color: var(--nuit-950); }
@media (min-width: 1200px) {
	.pole-why__grid[data-count="3"], .pole-why__grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pole-why__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Réalisations (blanc) et FAQ (lilas) --- */
.related-work--blanc { background: var(--blanc); }
.faq--lila { background: var(--lila); }
.faq--lila .faq__item { background: var(--blanc); }

/* --- Passerelle vers les autres pôles, en haut du CTA final --- */
.pole-passerelle { position: relative; z-index: 1; display: grid; gap: var(--s-4); margin-bottom: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line-dark); }
.pole-passerelle__title { margin: 0; font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.pole-passerelle__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pole-passerelle__card { position: relative; isolation: isolate; height: 100%; background: rgba(241, 240, 255, .06); color: var(--on-dark); border: 1px solid var(--line-dark); box-shadow: none; }
.pole-passerelle__card .hub-card__desc { color: var(--on-dark-soft); }
.pole-passerelle__card .hub-card__more { color: var(--boreal); }
.pole-passerelle__pole { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--boreal); }

/* --- Survol des cartes cliquables (prestations, passerelle) ---
   Uniquement transform / translate / opacity : la carte se soulève (propriété translate, distincte du
   transform de l'apparition au défilement), un halo et un liseré turquoise apparaissent en fondu,
   la flèche part en diagonale, les cartes voisines s'estompent légèrement. Même effet au clavier. */
.pole-svc__card::before, .pole-passerelle__card::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(90% 70% at 50% 0%, rgba(78, 108, 255, .22), transparent 70%);
	opacity: 0;
}
/* Liseré d'une seule couleur, posé exactement sur la bordure de 1 px : même épaisseur et même éclat
   sur les quatre côtés (un dégradé bleu → turquoise faisait paraître le côté droit plus épais). */
.pole-svc__card::after, .pole-passerelle__card::after {
	content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
	border: 1px solid rgba(48, 213, 200, .6); border-radius: calc(var(--r-l) + 1px);
	opacity: 0;
}
.pole-svc__benefice .icon, .pole-svc__link .icon, .pole-passerelle__card .hub-card__more .icon { transition: transform var(--dur-s) var(--ease-out); }
.pole-svc__card:focus-within::before, .pole-svc__card:focus-within::after,
.pole-passerelle__card:focus-visible::before, .pole-passerelle__card:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.pole-svc__card, .pole-passerelle__card { transition: translate var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out); }
	.pole-passerelle__card:hover { transform: none; box-shadow: none; }
	.pole-svc__card::before, .pole-svc__card::after, .pole-passerelle__card::before, .pole-passerelle__card::after { transition: opacity var(--dur-s) var(--ease-out); }
	.pole-svc__card:hover, .pole-passerelle__card:hover { translate: 0 -0.5rem; }
	.pole-svc__card:hover::before, .pole-svc__card:hover::after, .pole-passerelle__card:hover::before, .pole-passerelle__card:hover::after { opacity: 1; }
	.pole-svc__card:hover .pole-svc__link .icon { transform: translate(0.25rem, -0.25rem); }
	.pole-svc__card:hover .pole-svc__benefice .icon { transform: scale(1.15); }
	.pole-passerelle__card:hover .hub-card__more .icon { transform: translateX(0.3rem); }
	.pole-svc__grid:has(.pole-svc__card:hover) .pole-svc__card:not(:hover),
	.pole-passerelle__list:has(.pole-passerelle__card:hover) .pole-passerelle__card:not(:hover) { opacity: .6; }
}

/* --- Emplacement à compléter (comptes connectés uniquement) --- */
.pole-a-remplacer { display: flex; align-items: center; gap: .5em; width: min(100% - 2rem, 72rem); margin: var(--s-4) auto; padding: .9rem 1.2rem; border: 2px dashed #C2410C; border-radius: var(--r-m); background: #FFF7ED; color: #7C2D12; font-size: var(--fs-sm); }
.page-hero .pole-a-remplacer { width: auto; margin: var(--s-3) 0 0; }

@media (max-width: 860px) {
	.pole-reponse, .pole-svc__grid, .pole-passerelle__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pole-why__grid { grid-template-columns: 1fr; }
}

/* --- Mouvement : cartes révélées une à une au défilement --- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.pole-svc__card, .pole-why__item, .page--pole .pole-problem, .pole-passerelle__list > li, .page--gabarit .pros__item {
			animation: pole-up linear both; animation-timeline: view();
			animation-range: entry calc(var(--i, 0) * 8%) cover calc(22% + var(--i, 0) * 5%);
		}
		.pole-reponse { animation: pole-up linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
	}
}
@keyframes pole-up { from { opacity: 0; transform: translateY(var(--dist-m, 2rem)); } }
@media (prefers-reduced-motion: reduce) {
	.pole-svc__card, .pole-passerelle__card, .pole-svc__link .icon, .pole-svc__benefice .icon, .pole-passerelle__card .hub-card__more .icon { transition-property: opacity; }
	.pole-svc__card:hover, .pole-passerelle__card:hover { translate: none; }
	.pole-svc__card:hover .pole-svc__link .icon, .pole-svc__card:hover .pole-svc__benefice .icon, .pole-passerelle__card:hover .hub-card__more .icon { transform: none; }
}