:root{--c1:#06b6d4;--c2:#0f766e;--ink:#0f172a;--mu:#64748b;--body:#374151;--bg:#f8fafc;--soft:#f1f5f9;--line:rgba(15,23,42,.08);--shadow-sm:0 1px 4px rgba(15,23,42,.06);--shadow-md:0 6px 24px rgba(15,23,42,.09);--ease:cubic-bezier(.22,1,.36,1);}
*{box-sizing:border-box;margin:0;padding:0;}

/* ═══ PAGE WRAPPER ═══ */
.art-page{font-family:'Inter',system-ui,sans-serif;color:var(--body);background:#fff;min-height:100vh;}

/* ═══ HERO ═══ */
.art-hero{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  min-height:80vh;padding:130px max(5vw,40px) 80px;
  position:relative;overflow:visible;background:var(--bg);gap:40px;
  border-bottom:1px solid var(--line);
}
.art-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 70% at 70% 40%,rgba(6,182,212,.09) 0%,transparent 65%),
    radial-gradient(ellipse 40% 45% at 15% 85%,rgba(15,118,110,.06) 0%,transparent 60%);
}
.art-hero-copy{position:relative;z-index:2;max-width:560px;}
.art-hero-copy>*{opacity:0;}
.art-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c1);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.art-eyebrow span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c1);animation:artPulse 2s ease-in-out infinite;}
@keyframes artPulse{0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,.5)}50%{box-shadow:0 0 0 7px rgba(6,182,212,0)}}
.art-hero-copy h1{font-size:clamp(34px,4.4vw,58px);font-weight:900;letter-spacing:-.05em;line-height:1.04;color:var(--ink);margin-bottom:20px;}
.art-hero-copy h1 span{background:linear-gradient(180deg,#5de7ff 0%,#06b6d4 65%,#0891b2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.art-hero-lead{font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:#64748b;margin-bottom:28px;max-width:460px;}
.art-hero-trust{font-size:12px;color:#64748b;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.art-hero-trust i{color:var(--c1);}

/* Visuel droite hero — Journal */
.art-hero-visual{position:relative;height:520px;perspective:1400px;perspective-origin:50% 45%;display:flex;align-items:center;justify-content:center;}
@media(max-width:1024px){.art-hero{grid-template-columns:1fr;min-height:auto;}.art-hero-visual{display:none;}}

/* ── iPad Pro hero ── */
.art-hero-visual{
  position:relative;height:520px;
  perspective:1600px;perspective-origin:50% 48%;
  display:flex;align-items:center;justify-content:center;
}

.ipad-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;opacity:0;}

/* Ombre portée réaliste sous le device */
.ipad-glow{
  position:absolute;bottom:-30px;left:50%;
  transform:translateX(-46%) scaleX(.78);
  width:460px;height:32px;
  background:radial-gradient(ellipse at 46%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 45%,transparent 72%);
  filter:blur(16px);pointer-events:none;
}

/* ─── Cadre iPad Pro M4 Space Black — 490 × 345 px paysage ─── */
.ipad-frame{
  position:relative;
  width:490px;height:345px;
  /* Biseau aluminium anodisé noir : léger gradient simulant les reflets de bords */
  background:linear-gradient(145deg,
    #242424 0%, #191919 12%,
    #0d0d0d 28%, #060606 50%,
    #0d0d0d 68%, #191919 84%,
    #232323 100%
  );
  border-radius:22px;
  padding:6px;
  box-shadow:
    /* ① Reflet biseau haut (lumière venant du haut-gauche) */
    inset 0 1.5px 0   rgba(255,255,255,.16),
    /* ② Reflet biseau gauche */
    inset 1.5px 0 0   rgba(255,255,255,.07),
    /* ③ Ombre biseau bas */
    inset 0 -1.5px 0  rgba(0,0,0,.85),
    /* ④ Ombre biseau droite */
    inset -1.5px 0 0  rgba(0,0,0,.6),
    /* ⑤ Liseré de bord (device outline) */
    0 0 0 .5px rgba(255,255,255,.1),
    0 0 0 1px   rgba(0,0,0,.98),
    /* ⑥ Ombre contact immédiate (ombre dure proche) */
    0 3px 6px   rgba(0,0,0,.45),
    /* ⑦ Ombre principale drop shadow */
    2px 16px 42px rgba(0,0,0,.58),
    /* ⑧ Ombre ambiante large (halo de profondeur) */
    6px 36px 88px rgba(0,0,0,.35),
    /* ⑨ Reflet de rebond (sol réfléchit légèrement) */
    -1px -2px 16px rgba(255,255,255,.025);
}

/* FaceID (côté gauche en paysage) */
.ipad-faceid{
  position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,#111,#1a1a1a,#111);
  box-shadow:inset 0 0 3px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.04);
}

/* Bouton power (bord haut, côté droit) */
.ipad-power{
  position:absolute;top:-3px;right:72px;
  width:28px;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#181818,#252525,#181818);
  box-shadow:0 -1px 0 rgba(255,255,255,.04),0 -2px 4px rgba(0,0,0,.6);
}

/* Volume (côté droit en paysage) */
.ipad-vol-btns{
  position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;
}
.ipad-vol-btns::before,.ipad-vol-btns::after{
  content:'';display:block;
  width:3px;height:26px;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#181818,#252525,#181818);
  box-shadow:1px 0 0 rgba(255,255,255,.04),2px 0 4px rgba(0,0,0,.7);
}

/* ─── Écran OLED ─── */
.ipad-screen{
  position:relative;height:100%;
  background:#f9fafb;
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  /* Reflet de verre léger sur les bords de l'écran */
  box-shadow:
    inset 0 0 0 .5px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.2);
}
/* Reflet vitré diagonal */
.ipad-screen::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(145deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.04) 35%,
    transparent 65%
  );
  pointer-events:none;z-index:30;border-radius:16px 16px 0 0;
}

/* ─── Chrome navigateur ─── */
.ipad-chrome{
  display:flex;align-items:center;gap:5px;
  padding:5px 9px;
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
  border-bottom:1px solid #e4e8ee;
  flex-shrink:0;position:relative;z-index:2;
}
.ic-dots{display:flex;gap:3.5px;}
.ic-dots span{display:block;width:5.5px;height:5.5px;border-radius:50%;}
.ic-dots span:nth-child(1){background:#ff5f57;}
.ic-dots span:nth-child(2){background:#febc2e;}
.ic-dots span:nth-child(3){background:#28c840;}
.ic-addr{
  flex:1;font-size:7.5px;font-family:-apple-system,system-ui,sans-serif;color:#64748b;
  background:#f1f5f9;border-radius:5px;
  padding:2.5px 8px;display:flex;align-items:center;gap:3px;
  white-space:nowrap;overflow:hidden;letter-spacing:.01em;
}
.ic-addr i{font-size:6.5px;color:#10b981;flex-shrink:0;}
.ic-srch{font-size:7.5px;color:#94a3b8;flex-shrink:0;}

/* ─── Fondus scroll (masque haut/bas) ─── */
.ipad-fade-top,.ipad-fade-bot{
  position:absolute;left:0;right:0;pointer-events:none;z-index:20;
}
.ipad-fade-top{top:27px;height:36px;background:linear-gradient(180deg,#f9fafb 0%,transparent 100%);}
.ipad-fade-bot{bottom:0;height:48px;background:linear-gradient(0deg,#f9fafb 0%,transparent 100%);}

/* ─── Feed — PAS de overflow:hidden ni flex:1 ─── */
/* Le clip est assuré par .ipad-screen (overflow:hidden) */
/* La hauteur naturelle = somme des cartes → GSAP translate vers le haut */
.ipad-feed{display:flex;flex-direction:column;flex-shrink:0;}

/* Carte featured (avec visuel) */
.iaf-feat{flex-direction:column!important;}
.iaf-img{
  height:70px;display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;
}
.iaf-img i{font-size:22px;opacity:.88;flex-shrink:0;}
.iaf-img-lines{display:flex;flex-direction:column;gap:5px;flex:1;}
.iaf-img-lines span{display:block;height:4px;background:rgba(255,255,255,.65);border-radius:3px;}
.iaf-feat .iaf-body{border-top:1px solid rgba(0,0,0,.07);}

/* Toutes les cartes */
.iaf-card{
  display:flex;align-items:stretch;
  background:#fff;
  border-bottom:1px solid #f0f4f8;
  flex-shrink:0;
  border-left:3px solid var(--cc,#6366f1);
  transition:background .15s;
}
.iaf-body{padding:10px 13px;flex:1;}
.iaf-tag{
  display:inline-block;
  font-size:7px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cc,#6366f1);background:var(--cl,rgba(99,102,241,.1));
  padding:2px 7px;border-radius:99px;margin-bottom:5px;
}
.iaf-title{
  font-size:11px;font-weight:800;color:#0f172a;
  line-height:1.35;margin:0 0 4px;letter-spacing:-.016em;
}
.iaf-meta{font-size:7px;color:#94a3b8;letter-spacing:.01em;}
.iaf-lines{display:flex;flex-direction:column;gap:3px;margin-top:5px;}
.iaf-lines span{display:block;height:3.5px;background:#edf2f7;border-radius:3px;width:100%;}

/* ═══ KPIs ═══ */
.art-kpis{
  width:min(900px,calc(100% - 48px));
  margin:36px auto;
  background:#e8edf3;
  border-radius:20px;
  box-shadow:0 8px 48px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.04);
  border:1px solid rgba(226,232,240,.8);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;overflow:hidden;
}
@media(max-width:700px){.art-kpis{width:calc(100% - 32px);grid-template-columns:1fr 1fr;border-radius:16px;margin:24px auto;}}
.art-kpi{background:#fff;text-align:center;padding:22px 16px;}
@media(max-width:700px){.art-kpi{padding:18px 12px;}}
.art-kpi-val{font-size:clamp(22px,2.8vw,36px);font-weight:900;letter-spacing:-.04em;color:#0f172a;line-height:1;}
.art-kpi-lbl{font-size:11px;color:#64748b;margin-top:4px;line-height:1.4;}

/* ═══ CATÉGORIES FILTER ═══ */
.art-filter{
  position:sticky;top:68px;z-index:80;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.art-filter-inner{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,48px);
}
.art-filter-inner::-webkit-scrollbar{display:none;}
.art-cat-btn{
  flex-shrink:0;padding:13px 16px;
  font-size:12.5px;font-weight:700;color:var(--mu);
  border:none;border-bottom:2.5px solid transparent;background:none;
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:color .2s,border-color .2s;display:flex;align-items:center;gap:6px;
}
.art-cat-btn:hover,.art-cat-btn.active{color:var(--c1);border-bottom-color:var(--c1);}
.art-cat-btn i{font-size:11px;}

/* ═══ ARTICLES GRID ═══ */
.art-main{max-width:1160px;margin:0 auto;padding:60px clamp(20px,5vw,48px) 100px;}
.art-section{margin-bottom:80px;}
.art-section-head{
  display:flex;align-items:center;gap:14px;margin-bottom:32px;
  padding-bottom:16px;border-bottom:2px solid var(--line);
}
.art-section-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.art-section-title{font-size:clamp(18px,2vw,24px);font-weight:900;color:var(--ink);letter-spacing:-.03em;}
.art-section-sub{font-size:13px;color:var(--mu);margin-top:2px;}

.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.art-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.art-grid{grid-template-columns:1fr;}}

/* ── Carte article ── */
.art-card{
  border-radius:20px;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow-sm);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s;
  opacity:0;transform:translateY(24px);
}
.art-card.vis{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .25s;}
.art-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.art-card-top{
  height:120px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.art-card-tag{
  position:absolute;top:14px;left:14px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
}
.art-card-read{
  position:absolute;top:14px;right:14px;
  font-size:9.5px;font-weight:700;color:rgba(255,255,255,.8);
  display:flex;align-items:center;gap:4px;
}
.art-card-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.art-card-title{font-size:15px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:10px;letter-spacing:-.02em;}
.art-card-excerpt{font-size:13px;color:#64748b;line-height:1.6;flex:1;margin-bottom:16px;}
.art-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--line);margin-top:auto;
}
.art-card-author{font-size:11px;color:#94a3b8;font-weight:600;}
.art-card-cta{
  font-size:11.5px;font-weight:800;color:var(--c1);
  display:flex;align-items:center;gap:5px;text-decoration:none;
  transition:gap .2s;
}
.art-card-cta:hover{gap:9px;}
.art-card-cta i{font-size:10px;}

/* ── Article featured (large) ── */
.art-card.feat{grid-column:span 2;}
@media(max-width:900px){.art-card.feat{grid-column:span 1;}}
.art-card.feat .art-card-top{height:200px;}
.art-card.feat .art-card-title{font-size:18px;}
.art-card.feat .art-card-excerpt{font-size:14px;}

/* ═══ CTA FINAL ═══ */
.art-cta{
  background:linear-gradient(135deg,#0c1829 0%,#0f2240 50%,#0c1829 100%);
  padding:clamp(72px,10vw,120px) clamp(20px,5vw,48px);
  text-align:center;position:relative;overflow:hidden;
}
.art-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(6,182,212,.13) 0%,transparent 65%);pointer-events:none;}
.art-cta::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(6,182,212,.055) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;}
.art-cta-in{position:relative;z-index:2;max-width:640px;margin:0 auto;}
.art-cta-ey{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:12px;}
.art-cta h2{font-size:clamp(28px,4.5vw,56px);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:#fff;margin-bottom:16px;}
.art-cta h2 span{background:linear-gradient(135deg,#5de7ff,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.art-cta p{font-size:15px;color:rgba(255,255,255,.45);margin-bottom:40px;}
.art-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.tw-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 28px;border-radius:16px;text-decoration:none;cursor:pointer;border:none;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;white-space:nowrap;font-family:inherit;}
.tw-btn:hover{transform:translateY(-4px) scale(1.025);}
.tw-btn-devis{background:linear-gradient(135deg,#06b6d4,#0f766e);color:#fff;box-shadow:0 4px 22px rgba(6,182,212,.35);}
.tw-btn-devis::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-100%);transition:transform .55s;pointer-events:none;}
.tw-btn-devis:hover{box-shadow:0 8px 36px rgba(6,182,212,.5);}
.tw-btn-devis:hover::after{transform:translateX(100%);}
.tw-btn-contact{background:#1e293b;color:#fff;border:1.5px solid rgba(6,182,212,.45);box-shadow:0 4px 18px rgba(0,0,0,.3);}
.tw-btn-contact:hover{background:#0f172a;border-color:rgba(6,182,212,.65);box-shadow:0 8px 28px rgba(0,0,0,.38),0 0 20px rgba(6,182,212,.15);}
.tw-btn > span{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left}
.tw-btn-label{font-size:14px;font-weight:800;line-height:1;display:block;}
.tw-btn-sub{font-size:10px;font-weight:500;opacity:.65;line-height:1;display:block;}
/* reveal */
.reveal-up{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s;}
.reveal-up.vis{opacity:1;transform:none;}

/* ═══ SECTION ICON — ANIMATIONS PAR CATÉGORIE ═══ */
.art-section-icon{transition:transform .35s var(--ease),box-shadow .35s;cursor:default;}
.art-section-icon:hover{transform:scale(1.12) rotate(-6deg);box-shadow:0 8px 24px rgba(15,23,42,.12);}
.ico-cat-design i{animation:palette-swing 3.2s ease-in-out infinite;}
@keyframes palette-swing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
.ico-cat-web i{animation:globe-spin 9s linear infinite;}
@keyframes globe-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.ico-cat-seo i{animation:search-scan 2.4s ease-in-out infinite;}
@keyframes search-scan{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.18) rotate(6deg)}}
.ico-cat-prospection i{animation:horn-blast 2s ease-in-out infinite;}
@keyframes horn-blast{0%,60%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-10deg) scale(1.1)}40%{transform:rotate(8deg) scale(1.08)}}
.ico-cat-crm i{animation:robot-think 2.8s ease-in-out infinite;}
@keyframes robot-think{0%,90%,100%{opacity:1;transform:scale(1)}45%{transform:scale(1.15)}95%{opacity:.25}}
.ico-cat-recrutement i{animation:users-pop 2.2s cubic-bezier(.36,.07,.19,.97) infinite;}
@keyframes users-pop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) scale(1.08)}}
.ico-cat-delocalisation i{animation:building-glow 3.5s ease-in-out infinite;}
@keyframes building-glow{0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}50%{filter:brightness(1.25) drop-shadow(0 0 8px rgba(15,118,110,.55))}}

/* ═══ FILTER BUTTON — ICÔNES ANIMÉES AU SURVOL ═══ */
.art-cat-btn[data-cat="design"]:hover i,.art-cat-btn[data-cat="design"].active i{animation:palette-swing .9s ease-in-out infinite;}
.art-cat-btn[data-cat="web"]:hover i,.art-cat-btn[data-cat="web"].active i{animation:globe-spin 3s linear infinite;}
.art-cat-btn[data-cat="seo"]:hover i,.art-cat-btn[data-cat="seo"].active i{animation:search-scan .8s ease-in-out infinite;}
.art-cat-btn[data-cat="prospection"]:hover i,.art-cat-btn[data-cat="prospection"].active i{animation:horn-blast .9s ease-in-out infinite;}
.art-cat-btn[data-cat="crm"]:hover i,.art-cat-btn[data-cat="crm"].active i{animation:robot-think 1.2s ease-in-out infinite;}
.art-cat-btn[data-cat="recrutement"]:hover i,.art-cat-btn[data-cat="recrutement"].active i{animation:users-pop .8s ease-in-out infinite;}
.art-cat-btn[data-cat="delocalisation"]:hover i,.art-cat-btn[data-cat="delocalisation"].active i{animation:building-glow 1.5s ease-in-out infinite;}

/* ═══ CARD TOP — ICÔNE WRAPPER ═══ */
.tct-ico{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;
}
.tct-ico i{font-size:34px;opacity:.88;position:relative;z-index:2;}
.tct-ico::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:rgba(255,255,255,.18);
  animation:tct-halo 3.2s ease-in-out infinite;
}
@keyframes tct-halo{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.18);opacity:.15}}

/* ═══ FOND CARD-TOP — SHIMMER DRIFT ═══ */
.art-card-top{position:relative;overflow:hidden;}
.art-card-top::after{
  content:'';position:absolute;
  width:220%;height:220%;top:-60%;left:-60%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.13) 0%,transparent 58%);
  animation:shine-drift 9s ease-in-out infinite;pointer-events:none;
}
@keyframes shine-drift{0%{transform:translate(-15%,-15%) rotate(0deg)}50%{transform:translate(12%,12%) rotate(55deg)}100%{transform:translate(-15%,-15%) rotate(0deg)}}


/* ═══ IMAGE ARTICLE CARD ═══ */
.art-card-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s;
  filter:brightness(.92) saturate(1.08);
}
.art-card:hover .art-card-img{
  transform:scale(1.06);
  filter:brightness(1) saturate(1.15);
}
/* Overlay dégradé léger pour lisibilité du tag + durée */
.art-card-top:has(.art-card-img)::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.18) 100%);
  pointer-events:none;
}
.art-card-top:has(.art-card-img) .art-card-tag{z-index:2;color:#fff!important;background:rgba(0,0,0,.38)!important;backdrop-filter:blur(8px);}
.art-card-top:has(.art-card-img) .art-card-read{z-index:2;color:rgba(255,255,255,.92);}
/* Désactiver le shine-drift sur les cartes avec image (garde l'effet sur les cartes sans image) */
.art-card-top:has(.art-card-img)::after{display:none;}

/* ═══ ANIMATIONS PAR ARTICLE ═══ */
/* — Design — */
.ani-logo-valeur .tct-ico i{animation:logo-spark 2.2s ease-in-out infinite;}
@keyframes logo-spark{0%,100%{filter:drop-shadow(0 0 3px rgba(8,145,178,.5))}50%{filter:drop-shadow(0 0 14px rgba(8,145,178,1)) brightness(1.3)}}
.ani-logo-valeur::before{content:'★';position:absolute;font-size:10px;color:rgba(8,145,178,.7);top:22%;left:20%;animation:star-orbit 5s linear infinite;pointer-events:none;}
@keyframes star-orbit{from{transform:rotate(0) translateX(52px)}to{transform:rotate(360deg) translateX(52px)}}

.ani-charte-graphique .tct-ico i{animation:palette-hue 5s ease-in-out infinite;}
@keyframes palette-hue{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(-40deg) brightness(1.15)}}

.ani-motion-design::before,.ani-motion-design::after{content:'';position:absolute;border-radius:50%;border:2px solid rgba(2,132,199,.35);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
.ani-motion-design::before{animation:ripple-ring 2.4s ease-out infinite;}
.ani-motion-design::after{animation:ripple-ring 2.4s ease-out .8s infinite;}
@keyframes ripple-ring{0%{width:56px;height:56px;opacity:.7}100%{width:150px;height:150px;opacity:0}}
.ani-motion-design .tct-ico i{animation:play-beat 2s ease-in-out infinite;}
@keyframes play-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* — Web — */
.ani-vitrine-ecom .tct-ico i{animation:globe-breathe 3.5s ease-in-out infinite;}
@keyframes globe-breathe{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}

.ani-core-web-vitals .tct-ico i{animation:bolt-flash 1.9s ease-in-out infinite;}
@keyframes bolt-flash{0%,100%{opacity:.88;filter:drop-shadow(0 0 0 transparent)}50%{opacity:1;filter:drop-shadow(0 0 10px rgba(29,78,216,.85))}}

.ani-wp-sur-mesure .tct-ico i{animation:code-flicker 3s steps(2) infinite;}
@keyframes code-flicker{0%,90%,100%{opacity:.88}45%{opacity:.4}}

/* — SEO — */
.ani-seo-local::before{content:'';position:absolute;border-radius:50%;background:rgba(5,150,105,.22);top:50%;left:50%;transform:translate(-50%,-50%);animation:pin-ripple 2.2s ease-out infinite;pointer-events:none;}
@keyframes pin-ripple{0%{width:44px;height:44px;opacity:.65}100%{width:120px;height:120px;opacity:0}}
.ani-seo-local .tct-ico i{animation:pin-drop 3.5s cubic-bezier(.36,.07,.19,.97) infinite;}
@keyframes pin-drop{0%,100%{transform:translateY(0)}20%{transform:translateY(-12px)}32%{transform:translateY(4px)}42%{transform:translateY(-4px)}52%{transform:translateY(0)}}

.ani-google-ads .tct-ico i{animation:ads-lift 2.5s ease-in-out infinite;}
@keyframes ads-lift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.12)}}

.ani-netlinking .tct-ico i{animation:link-connect 2.8s ease-in-out infinite;}
@keyframes link-connect{0%,100%{transform:rotate(-18deg) scale(.95)}50%{transform:rotate(18deg) scale(1.1)}}

/* — Prospection — */
.ani-prosp-b2b .tct-ico i{animation:horn-pulse 2s ease-in-out infinite;}
@keyframes horn-pulse{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.15) rotate(5deg)}}
.ani-prosp-b2b::before{content:'';position:absolute;top:30%;right:22%;width:8px;height:8px;border-radius:50%;background:rgba(13,148,136,.55);animation:wave-out 2s ease-out infinite;pointer-events:none;}
@keyframes wave-out{0%{width:8px;height:8px;opacity:.7}100%{width:44px;height:44px;opacity:0}}

.ani-cold-email .tct-ico i{animation:envelope-flap 3s ease-in-out infinite;}
@keyframes envelope-flap{0%,60%,100%{transform:translateY(0)}20%{transform:translateY(-8px) scale(1.1)}40%{transform:translateY(3px)}}

.ani-agent-prosp .tct-ico i{animation:headset-vibe 2s ease-in-out infinite;}
@keyframes headset-vibe{0%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}25%{transform:rotate(7deg)}35%{transform:rotate(0)}}
.ani-agent-prosp::before,.ani-agent-prosp::after{content:'';position:absolute;border-radius:50%;background:rgba(13,148,136,.4);animation:bubble-float 2.4s ease-in infinite;pointer-events:none;}
.ani-agent-prosp::before{width:7px;height:7px;top:28%;right:28%;}
.ani-agent-prosp::after{width:5px;height:5px;top:38%;right:34%;animation-delay:.8s;}
@keyframes bubble-float{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-28px);opacity:0}}

/* — CRM — */
.ani-crm-10h .tct-ico i{animation:clock-sweep 4s linear infinite;}
@keyframes clock-sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.ani-choisir-crm .tct-ico i{animation:compare-scale 3s ease-in-out infinite;}
@keyframes compare-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.1) translateY(-4px)}}

.ani-ia-pme .tct-ico i{animation:brain-think 2.5s ease-in-out infinite;}
@keyframes brain-think{0%,100%{filter:drop-shadow(0 0 4px rgba(67,56,202,.4))}50%{filter:drop-shadow(0 0 16px rgba(67,56,202,.9)) brightness(1.2)}}
.ani-ia-pme::before{content:'';position:absolute;border:1.5px dashed rgba(67,56,202,.3);border-radius:50%;width:92px;height:92px;top:50%;left:50%;transform:translate(-50%,-50%);animation:orbit-dash 7s linear infinite;pointer-events:none;}
@keyframes orbit-dash{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* — Recrutement — */
.ani-recruter-mada .tct-ico i{animation:recruit-wave 2.8s ease-in-out infinite;}
@keyframes recruit-wave{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}
.ani-recruter-mada::before{content:'';position:absolute;border-radius:50%;background:rgba(59,130,246,.2);top:50%;left:50%;transform:translate(-50%,-50%);animation:recruit-pulse 2.5s ease-out infinite;pointer-events:none;}
@keyframes recruit-pulse{0%{width:50px;height:50px;opacity:.6}100%{width:120px;height:120px;opacity:0}}

.ani-offshore-vs .tct-ico i{animation:scale-balance 4s ease-in-out infinite;}
@keyframes scale-balance{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.ani-onboarding-offshore .tct-ico i{animation:check-pop 2.8s ease-in-out infinite;}
@keyframes check-pop{0%,100%{transform:scale(1)}30%{transform:scale(1.25) rotate(-5deg)}50%{transform:scale(.9)}70%{transform:scale(1.08)}}

/* — Délocalisation — */
.ani-delocal-equipe .tct-ico i{animation:building-shimmer 4s ease-in-out infinite;}
@keyframes building-shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22) drop-shadow(0 0 10px rgba(15,118,110,.55))}}

.ani-mada-hub::before{content:'';position:absolute;border-radius:50%;border:2px solid rgba(15,118,110,.32);top:50%;left:50%;transform:translate(-50%,-50%);animation:hub-wave 2.8s ease-out infinite;pointer-events:none;}
@keyframes hub-wave{0%{width:52px;height:52px;opacity:.6}100%{width:138px;height:138px;opacity:0}}
.ani-mada-hub .tct-ico i{animation:globe-breathe 4s ease-in-out infinite;}

.ani-gestion-distance .tct-ico i{animation:satellite-sweep 4.5s ease-in-out infinite;}
@keyframes satellite-sweep{0%,100%{transform:rotate(-12deg) translateX(0)}50%{transform:rotate(12deg) translateX(4px)}}

/* ── Bouton retour accueil ── */
.art-home-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#06b6d4,#0f766e);
  border:none;padding:9px 20px;border-radius:100px;
  font-size:.8rem;font-weight:700;color:#fff;cursor:pointer;
  text-decoration:none;margin-bottom:22px;width:fit-content;
  box-shadow:0 4px 16px rgba(6,182,212,.3);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
}
.art-home-btn:hover{transform:translateY(-2px) translateX(-2px);box-shadow:0 8px 24px rgba(6,182,212,.42);}
.art-home-btn i{font-size:.8em;transition:transform .22s cubic-bezier(.22,1,.36,1);}
.art-home-btn:hover i{transform:translateX(-3px);}