/* Produits à la une — marquee GSAP. Chargé sur la home. */
.dgtl-feat__viewport{
	position:relative;
	overflow:hidden;
	margin-top:8px;
	/* l'opacité initiale est gérée par GSAP (fallback no-js plus bas) */
}
.dgtl-feat__track{
	display:flex;
	gap:20px;
	width:max-content;
	will-change:transform;
	padding:14px 4px 22px;
}
.dgtl-feat__card{
	flex:0 0 300px;
	width:300px;
	display:flex;
	flex-direction:column;
	background:var(--surface, #fff);
	border:1px solid var(--border, rgba(0,0,0,.08));
	border-radius:18px;
	overflow:hidden;
	color:inherit;
	text-decoration:none;
	transform-style:preserve-3d;
	transition:box-shadow .35s ease, border-color .35s ease;
	box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.dgtl-feat__card:hover{
	box-shadow:0 18px 40px -18px rgba(0,0,0,.35);
	border-color:hsl(var(--feat-hue,18) 60% 55% / .45);
}
.dgtl-feat__art{
	position:relative;
	aspect-ratio:16/10;
	overflow:hidden;
	background:linear-gradient(135deg,hsl(var(--feat-hue,18) 45% 92%),var(--surface-2,#f4f4f5));
	transform:translateZ(0);
	transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.dgtl-feat__card:hover .dgtl-feat__art{ transform:scale(1.04); }
.dgtl-feat__art .dgtl-tile-art,
.dgtl-feat__img{ width:100%;height:100%;object-fit:cover;display:block; }
.dgtl-feat__body{
	display:flex;
	flex-direction:column;
	gap:6px;
	padding:16px 18px 18px;
}
.dgtl-feat__cat{
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted,#6b7280);
	font-weight:600;
}
.dgtl-feat__title{
	font-size:16px;
	line-height:1.25;
	font-weight:650;
	color:var(--ink,#111);
	min-height:2.5em;
}
.dgtl-feat__price{
	display:flex;
	align-items:baseline;
	gap:5px;
	margin-top:2px;
	font-weight:700;
	color:var(--ink,#111);
}
.dgtl-feat__price small{
	font-size:11px;
	font-weight:600;
	color:var(--muted,#6b7280);
	text-transform:uppercase;
	letter-spacing:.04em;
}
.dgtl-feat__price .amount{ font-size:17px; }
.dgtl-feat__cta{
	margin-top:10px;
	font-size:13px;
	font-weight:650;
	color:hsl(var(--feat-hue,18) 65% 42%);
	opacity:.85;
	transition:transform .3s ease, opacity .3s ease;
}
.dgtl-feat__card:hover .dgtl-feat__cta{ transform:translateX(4px); opacity:1; }

/* Fondus latéraux pour masquer l'entrée/sortie des cartes */
.dgtl-feat__edge{
	position:absolute;top:0;bottom:0;width:80px;pointer-events:none;z-index:2;
}
.dgtl-feat__edge--l{ left:0;  background:linear-gradient(90deg,var(--bg,#fafaf9),transparent); }
.dgtl-feat__edge--r{ right:0; background:linear-gradient(270deg,var(--bg,#fafaf9),transparent); }

/* État initial avant animation d'entrée GSAP (évite le flash). JS retire ce voile. */
.js .dgtl-feat[data-anim="pending"] .dgtl-feat__card{ opacity:0; transform:translateY(28px); }

@media (max-width:600px){
	.dgtl-feat__card{ flex-basis:240px; width:240px; }
	.dgtl-feat__edge{ width:42px; }
}

/* Respect de prefers-reduced-motion : pas de marquee, grille statique scrollable */
@media (prefers-reduced-motion:reduce){
	.dgtl-feat__track{ animation:none !important; }
}
/* Marquee CSS (driver fiable, indépendant du RAF). JS gère pause+entrée+tilt. */
.dgtl-feat__track{ animation:dgtl-marquee var(--marquee-duration,40s) linear infinite; }
.dgtl-feat__viewport.is-paused .dgtl-feat__track{ animation-play-state:paused; }
@keyframes dgtl-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Pendant l'entrée au scroll on neutralise le marquee pour éviter le saut. */
.dgtl-feat[data-entering] .dgtl-feat__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .dgtl-feat__track{ animation:none !important; transform:none !important; } .dgtl-feat__viewport{ overflow-x:auto; } }


/* ===== Section Réalisations IA (piliers) — style cube : anthracite + argent métallique ===== */
.dgtl-iapil__eyebrow{display:inline-block;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;color:#9aa0a8;font-weight:700;margin-bottom:8px;text-transform:uppercase}
.dgtl-iapil__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.dgtl-iapil__card{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;border-radius:18px;
  text-decoration:none;color:#eef0f2;
  border:1.5px solid transparent;
  background:
    linear-gradient(165deg,#23262b 0%,#16181c 60%,#101216 100%) padding-box,
    linear-gradient(135deg,rgba(207,212,218,.55),rgba(120,126,135,.15) 40%,rgba(207,212,218,.45)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  transition:transform .25s,box-shadow .25s,background .4s}
/* barre métallique en haut */

/* reflet diagonal subtil */
.dgtl-iapil__card::after{content:"";position:absolute;top:-40%;left:-30%;width:60%;height:180%;
  background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 60%);
  transform:rotate(8deg);pointer-events:none;transition:left .5s ease}
.dgtl-iapil__card:hover{transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 22px 48px rgba(0,0,0,.5);
  background:
    linear-gradient(165deg,#2a2e34 0%,#191b20 60%,#121419 100%) padding-box,
    conic-gradient(from var(--iapil-angle,0deg),#cfd4da,#7c828b,#eef1f4,#8a9098,#cfd4da) border-box}
.dgtl-iapil__card:hover::after{left:90%}
/* tag argent métallique */
.dgtl-iapil__tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#1a1c20;
  background:linear-gradient(135deg,#e9edf1 0%,#b9bfc7 45%,#d6dbe1 70%,#9aa0a8 100%);
  padding:4px 11px;border-radius:20px;margin-top:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.5) inset}
.dgtl-iapil__title{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:#f5f7f9}
.dgtl-iapil__desc{font-size:13.5px;line-height:1.5;color:#aab0b8;flex:1}
.dgtl-iapil__kw{font-family:var(--mono,monospace);font-size:11px;color:#787e87;line-height:1.4}
.dgtl-iapil__cta{font-size:13px;font-weight:700;
  background:linear-gradient(90deg,#cfd4da,#eef1f4);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:1024px){.dgtl-iapil__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dgtl-iapil__grid{grid-template-columns:1fr}}
@property --iapil-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.dgtl-iapil__card:hover{animation:iapil-rotate 3s linear infinite}
@keyframes iapil-rotate{to{--iapil-angle:360deg}}