/* ============================================================
   NESSMEDIA — INTEGRATION GRAPHIQUE PROPRE V4
   Couche graphique uniquement. Base = livraison dev V22 propre.
   Aucun remplacement de contenu métier, aucun changement JS.
   ============================================================ */

:root{
  --nm-shadow:0 26px 70px -34px rgba(2,40,99,.42),0 10px 30px -22px rgba(2,40,99,.25);
  --nm-shadow-soft:0 18px 50px -34px rgba(2,40,99,.28);
}

/* ===== ACCUEIL : vendre les services, pas une réalisation ===== */
.hero4{background:linear-gradient(110deg,#062b63 0%,#073a79 52%,#0b4f9f 100%)}
.hero4::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(800px 380px at 82% 10%,rgba(18,104,216,.22),transparent 68%),
  linear-gradient(90deg,rgba(0,20,55,.2),transparent 58%)}
.hero4 .h4-in{position:relative;z-index:2;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,5vw,76px)}
.hero4 .h4-l{padding-right:0}
.hero4 .h4-r{min-width:0;position:relative}
.hero4 .h4-lap{transform:none!important;width:100%;max-width:none;background:transparent;border:0;box-shadow:none;overflow:visible}
.hero4 .h4-lap .brow{border:0;background:transparent;box-shadow:var(--nm-shadow);border-radius:26px;overflow:hidden}
.hero4 .h4-lap .brow-h{display:none}
.hero4 .h4-lap .brow-b{padding:0;aspect-ratio:16/10;background:#071e3d}
.hero4 .h4-lap .brow-b img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.9) contrast(1.02)}
.hero4 .lap-base{display:none}
.hero4 .h4-card{right:-10px;bottom:-32px;top:auto;width:220px;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.55);box-shadow:var(--nm-shadow-soft);backdrop-filter:blur(12px)}
.hero4 .h4-card svg{display:none}
.hero4 .h4-card b{font-size:14px;color:var(--deep)}
.hero4 .h4-card span{font-size:12px;color:var(--ink2)}
.nm-service-floats{position:absolute;left:-22px;bottom:26px;display:grid;gap:8px;z-index:5}
.nm-service-floats span{display:flex;align-items:center;gap:8px;width:max-content;max-width:250px;background:rgba(255,255,255,.96);color:var(--ink);border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:8px 12px;font:700 12px/1 Manrope,sans-serif;box-shadow:0 10px 26px -18px rgba(0,0,0,.45)}
.nm-service-floats i{width:8px;height:8px;border-radius:50%;background:var(--dyn);flex:none}
.nm-service-floats span:nth-child(2) i{background:var(--woo)}
.nm-service-floats span:nth-child(3) i{background:var(--amber)}
.nm-service-floats span:nth-child(4) i{background:#0f5a48}

/* ===== HEROES SERVICES : grille stable, image réelle/technique ===== */
.upage .uhero{background:linear-gradient(135deg,var(--deep) 0%,color-mix(in srgb,var(--univers) 56%,var(--deep)) 100%)}
.upage .uhero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(680px 360px at 78% 8%,rgba(255,255,255,.09),transparent 70%)}
.upage .uhero-in{position:relative;z-index:2;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:clamp(34px,5vw,72px);align-items:center}
.upage .uhero h1{max-width:16ch;font-size:clamp(36px,4.4vw,58px);line-height:1.02}
.upage .uhero .lede-xl{max-width:54ch;font-size:clamp(16px,1.3vw,19px)}
.upage .uhero-v{min-width:0}
.upage .uhero-v .uvis,.upage .uhero-v .nm-hero-photo{position:relative;border-radius:26px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:0 30px 76px -34px rgba(0,0,0,.7)}
.upage .uhero-v .uvis::after,.upage .uhero-v .nm-hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.17);border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(2,40,99,.08)}
.upage .uhero-v .uvis img,.upage .uhero-v .nm-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}
.upage .uhero-cap{display:none}
.upage .upts{gap:8px}
.upage .upt{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#e4eefb}

/* image positioning by page */
.page-file-creation-site-vitrine-wordpress .uvis img{object-position:center 52%}
.page-file-refonte-site-vitrine .uvis img{object-position:center 50%}
.page-file-creation-de-blog .uvis img{object-position:center 48%}
.page-file-woocommerce .uvis img,.page-file-prestashop .uvis img,.page-file-shopify .uvis img{object-position:center 35%}
.page-file-refonte-e-commerce .uvis img{object-position:center 50%}
.page-file-referencement-naturel .uvis img{object-position:center 47%}
.page-file-google-ads .uvis img{object-position:center 58%}
.page-file-maintenance-wordpress .uvis img,.page-file-depannage-wordpress .uvis img{object-position:center 50%}
.page-file-hebergement-web .uvis img{object-position:center 50%}

/* ===== SECTIONS : corporate, rythme et profondeur sans changer le contenu ===== */
.upage section{position:relative}
.upage .bg-w{background:#fff}
.upage .bg-u{background:linear-gradient(180deg,color-mix(in srgb,var(--univers) 5%,#fff),#fff)}
.upage .bg-p2{background:#f6f9fd}
.upage .pr,.upage .cmp,.upage .ct-card,.upage .eb,.upage .bl-a{border-radius:18px;box-shadow:0 12px 34px -28px rgba(2,40,99,.34);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.upage .pr:hover,.upage .cmp:hover,.upage .eb:hover,.upage a.bl-a:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(2,40,99,.42)}
.upage .sec-x{align-items:end}
.upage .h-xl{max-width:19ch}

/* ===== BLOG : vraies miniatures sur les articles publiés ===== */
.page-file-blog .uhero-in{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr)!important}
.page-file-blog .nm-blog-hero{border-radius:24px;overflow:hidden;box-shadow:var(--nm-shadow);border:1px solid rgba(255,255,255,.2);margin-bottom:14px}
.page-file-blog .nm-blog-hero img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 48%}
.page-file-blog .ct-card{background:rgba(255,255,255,.96)}
.page-file-blog .bl-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.page-file-blog .bl-a{padding:0!important;overflow:hidden;background:#fff;border:1px solid var(--line)}
.page-file-blog .bl-a > :not(.nm-blog-thumb){margin-left:20px;margin-right:20px}
.page-file-blog .bl-a .bl-c{margin-top:18px}
.page-file-blog .bl-a .bl-m{margin-bottom:18px}
.nm-blog-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}

/* ===== RESSOURCES / EBOOKS ===== */
.page-file-ressources .uhero-in{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr)!important}
.page-file-ressources .nm-res-hero{border-radius:24px;overflow:hidden;box-shadow:var(--nm-shadow);border:1px solid rgba(255,255,255,.2);margin-bottom:14px}
.page-file-ressources .nm-res-hero img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 34%}
.page-file-ressources .eb-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.page-file-ressources .eb{background:#fff;border:1px solid var(--line);padding-bottom:18px;overflow:hidden}
.page-file-ressources .eb-v{margin:0 0 16px;border-radius:0!important;border:0!important;background:#071d3b}
.page-file-ressources .eb-v img{width:100%;height:auto;aspect-ratio:600/848;object-fit:cover;display:block}
.page-file-ressources .eb > :not(.eb-v){margin-left:18px;margin-right:18px}

/* ===== À PROPOS : remplacer le placeholder par un vrai visuel de travail ===== */
.page-file-a-propos .ph-vide{display:none}
.page-file-a-propos .nm-about-photo{border-radius:26px;overflow:hidden;box-shadow:var(--nm-shadow);border:1px solid rgba(255,255,255,.2)}
.page-file-a-propos .nm-about-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}

/* ===== Responsive : aucune colonne écrasée ===== */
@media(max-width:1023px){
  .hero4 .h4-in,.upage .uhero-in,.page-file-blog .uhero-in,.page-file-ressources .uhero-in{grid-template-columns:1fr!important}
  .hero4 .h4-l{padding-bottom:12px}
  .hero4 .h4-r{max-width:820px;width:100%;margin:0 auto}
  .nm-service-floats{left:16px;bottom:16px}
  .upage .uhero-v{max-width:820px;width:100%;margin:0 auto}
  .page-file-blog .bl-g,.page-file-ressources .eb-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .hero4 .h4-card{position:relative;right:auto;bottom:auto;width:auto;margin-top:14px}
  .nm-service-floats{position:static;display:flex;flex-wrap:wrap;margin-top:14px}
  .nm-service-floats span{font-size:11px;padding:7px 10px}
  .upage .uhero-in{gap:28px}
  .upage .uhero h1{font-size:clamp(34px,11vw,46px);max-width:none}
  .page-file-blog .bl-g,.page-file-ressources .eb-g{grid-template-columns:1fr}
  .page-file-blog .uhero-in,.page-file-ressources .uhero-in{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){.upage .pr,.upage .cmp,.upage .eb,.upage .bl-a{transition:none!important}}

/* e-commerce heroes already use a browser frame: keep it, but use approved branded visuals */
.page-file-woocommerce .uhero-v .brow,.page-file-prestashop .uhero-v .brow,.page-file-shopify .uhero-v .brow{border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.24);box-shadow:0 30px 76px -34px rgba(0,0,0,.7);background:#fff}
.page-file-woocommerce .uhero-v .brow-b,.page-file-prestashop .uhero-v .brow-b,.page-file-shopify .uhero-v .brow-b{padding:0;background:#fff;aspect-ratio:16/10;overflow:hidden}
.page-file-woocommerce .uhero-v .brow-b img,.page-file-prestashop .uhero-v .brow-b img,.page-file-shopify .uhero-v .brow-b img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}