:root{
  --blue:#004aad; --gold:#ffc952;
  --bg1:#073d7d; --bg2:#02224e; --bg3:#010f28;
  --gold-lite:#ffe89e; --gold-deep:#e2971f; --blue-accent:#4a90e2; --muted:#a0b0d0;
  --text:#eaf0fb; --text-soft:#b9c6e2; --card:rgba(255,255,255,.03); --line:#1c3a67;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',Arial,sans-serif;background:var(--bg2);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.btn-gold{background:linear-gradient(135deg,var(--gold-lite),var(--gold-deep));color:#2a1c00;padding:12px 22px;border-radius:10px;font-weight:700;font-size:14px;display:inline-block;box-shadow:0 8px 26px rgba(226,151,31,.28);transition:transform .2s,box-shadow .2s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(226,151,31,.42)}
.btn-ghost{border:1px solid #2f4d7f;color:var(--text);padding:12px 18px;border-radius:10px;font-size:14px;display:inline-block;transition:border-color .2s,background .2s}
.btn-ghost:hover{border-color:var(--gold-deep);background:rgba(226,151,31,.06)}
.grad{background:linear-gradient(135deg,var(--gold-lite),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-img{display:inline-block;background:url("logo-upnet.png") no-repeat left center/contain}
a .logo-img,.logo-img{cursor:pointer}
.tag{display:inline-block;font-size:11px;letter-spacing:1px;color:var(--gold-lite);border:1px solid #6a5a2a;background:rgba(226,151,31,.10);padding:6px 13px;border-radius:20px;font-weight:600}
header{position:sticky;top:0;z-index:30;background:rgba(1,15,40,.72);backdrop-filter:blur(12px);border-bottom:1px solid #0c2a52}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 26px}
nav a{font-size:13px;color:var(--text-soft);margin:0 10px;transition:color .2s}
nav a:hover{color:var(--gold-lite)}
nav a.active{color:var(--gold-lite)}
section{padding:66px 0;border-bottom:1px solid #0a2247}
h1{font-size:44px;font-weight:800;line-height:1.14}
h2{font-size:30px;font-weight:800}
.lead{color:var(--text-soft);font-size:16px;margin-top:14px;max-width:560px}
.grid{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;transition:transform .25s,border-color .25s,box-shadow .25s}
.card.hov:hover{transform:translateY(-5px);border-color:var(--gold-deep);box-shadow:0 16px 40px rgba(1,10,30,.5),0 0 22px rgba(226,151,31,.12)}
.ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(74,144,226,.12);color:var(--blue-accent);margin-bottom:12px}
.ico.g{background:rgba(226,151,31,.14);color:var(--gold-lite)}
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,var(--bg3));border-bottom:1px solid #0c2a52;min-height:520px}
.page-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--bg1),var(--bg2) 62%,var(--bg3));border-bottom:1px solid #0c2a52;padding:58px 0}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(126,170,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(126,170,255,.045) 1px,transparent 1px);background-size:38px 38px;z-index:0}
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.num{font-size:38px;font-weight:800}
.muted{color:var(--muted)}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:30px;align-items:center;width:max-content;animation:scroll 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track img{height:62px;background:#fff;border-radius:14px;padding:18px 30px;box-sizing:content-box;object-fit:contain;flex:0 0 auto;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .2s}
.marquee-track img:hover{transform:translateY(-3px)}
.fade{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.fade.in{opacity:1;transform:none}
.orbit{animation:spin 26s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse-line{stroke-dasharray:5 7;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-48}}
.blogcard{overflow:hidden}
.blogcard .thumb{height:112px;border-radius:12px;margin:-4px -4px 14px;background:radial-gradient(circle at 30% 25%,rgba(74,144,226,.28),transparent 60%),linear-gradient(135deg,#0a3a78,#02224e);border:1px solid #1c3a67;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.blogcard .thumb::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(126,170,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(126,170,255,.06) 1px,transparent 1px);background-size:22px 22px}
.blogcard .thumb i{font-size:46px;color:rgba(255,232,158,.9);position:relative;z-index:1}
.chip{display:inline-block;font-size:10.5px;font-weight:700;color:#2a1c00;background:var(--gold-lite);padding:3px 10px;border-radius:10px}
.faq{border:1px solid var(--line);border-radius:14px;padding:0;margin-top:14px;background:var(--card);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-lite);font-size:20px;font-weight:700;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 20px 18px;color:var(--text-soft);font-size:14px}
.eyebrow{font-size:12px;letter-spacing:.9px;text-transform:uppercase;color:var(--gold-lite);font-weight:600}
.compare{width:100%;border-collapse:collapse;margin-top:22px;font-size:14px}
.compare td,.compare th{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.compare th{color:#c7d3ec;font-weight:600}
.compare tr.win td{background:rgba(226,151,31,.08)}
.compare .price{font-weight:700;white-space:nowrap}
.tablewrap{overflow-x:auto}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.125em;flex:0 0 auto}
.article-body{font-size:16px;color:var(--text-soft);line-height:1.78}
.article-body h2{color:var(--text);font-size:23px;font-weight:800;margin:34px 0 12px;scroll-margin-top:90px}
.article-body h3{color:var(--text);font-size:18px;font-weight:700;margin:24px 0 8px}
.article-body p{margin:0 0 16px}
.article-body>ul,.article-body>ol{margin:0 0 16px 20px;display:flex;flex-direction:column;gap:8px}
.article-body a{color:var(--gold-lite);text-decoration:underline}
.article-body strong{color:var(--text)}
.article-body blockquote{border-left:3px solid var(--gold-deep);background:rgba(226,151,31,.06);padding:14px 18px;border-radius:0 12px 12px 0;margin:22px 0;color:var(--text);font-size:17px}
.toc a{color:var(--text-soft);font-size:13.5px;text-decoration:none;display:block;padding:5px 0;border-left:2px solid transparent;padding-left:10px;margin-left:-2px;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--gold-lite);border-color:var(--gold-deep)}
.sticky-cta{position:sticky;top:88px}
.inline-cta{background:rgba(226,151,31,.09);border:1px solid #6a5a2a;border-radius:14px;padding:22px 24px;margin:28px 0}
@media(max-width:900px){.article-layout{grid-template-columns:1fr!important}.sticky-cta{position:static}}
@media(max-width:820px){
  h1{font-size:30px}
  h2{font-size:24px}
  .hero-grid{grid-template-columns:1fr!important}
  .mgrid{grid-template-columns:1fr!important}
  .sysdiag{display:none!important}
  nav .navlink{display:none}
  section{padding:50px 0}
}
@media(max-width:520px){
  h1{font-size:25px}
  h2{font-size:21px}
  .wrap{padding:0 18px}
  header .wrap{padding:12px 18px}
  .num{font-size:30px}
}

/* --- Menu mobile (hamburger) --- */
.burger{display:none;background:rgba(255,255,255,.04);border:1px solid #2f4d7f;border-radius:10px;width:40px;height:38px;cursor:pointer;color:var(--text);align-items:center;justify-content:center;padding:0;flex:0 0 auto;margin-left:6px}
.burger:hover{border-color:var(--gold-deep)}
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mnav{display:none;position:fixed;inset:0;z-index:60;background:rgba(1,15,40,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:84px 24px 30px;flex-direction:column;overflow-y:auto}
.mnav.open{display:flex}
.mnav a.mlink{font-size:19px;font-weight:600;color:var(--text);padding:16px 2px;border-bottom:1px solid #12305c;text-decoration:none;display:flex;justify-content:space-between;align-items:center}
.mnav a.mlink:hover,.mnav a.mlink.active{color:var(--gold-lite)}
.mnav .btn-gold{margin-top:22px;text-align:center;font-size:16px;padding:15px;display:block}
.mnav-close{position:absolute;top:16px;right:22px;background:none;border:none;color:var(--text);cursor:pointer;padding:8px;line-height:0}
.mnav-close svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
body.menu-open{overflow:hidden}
@media(max-width:820px){
  .burger{display:flex}
  header .wrap{gap:8px}
}

/* --- Grands ecrans ---------------------------------------------------------
   Regle : le conteneur de LECTURE reste a 1160px (une ligne de texte confortable
   fait 50 a 75 caracteres ; au-dela on fatigue l'oeil). Seuls les elements
   VISUELS s'elargissent : le hero et les bandeaux. Le texte, lui, ne bouge pas.
   -------------------------------------------------------------------------- */
@media(min-width:1500px){
  /* le hero respire : c'est une banniere, pas un bloc de lecture */
  .hero .wrap, .page-hero .wrap{max-width:1320px}
  h1{font-size:52px}
  /* le bandeau de logos profite de toute la largeur */
  .marquee-track img{height:70px}
  /* un peu d'air vertical, sans etirer les lignes */
  section{padding:78px 0}
  .hero .wrap{padding-top:86px;padding-bottom:86px}
}
@media(min-width:1900px){
  .hero .wrap, .page-hero .wrap{max-width:1440px}
  h1{font-size:58px}
  .marquee-track img{height:78px}
}


/* --- Sous-menu Offres ------------------------------------------------------ */
.has-sub{position:relative;display:inline-flex;align-items:center}
.has-sub>.navlink{display:inline-flex;align-items:center;gap:4px}
.ic-sub{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.has-sub:hover .ic-sub,.has-sub:focus-within .ic-sub{transform:rotate(180deg)}
.subnav{
  position:absolute;top:100%;left:0;min-width:302px;padding:8px;margin-top:6px;
  background:#062a5c;border:1px solid #1b3c6e;border-radius:12px;
  box-shadow:0 22px 50px rgba(1,10,30,.55);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:60
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{display:block;padding:9px 11px;border-radius:8px;text-decoration:none;transition:background .15s}
.subnav a:hover,.subnav a:focus-visible{background:rgba(226,151,31,.12)}
.subnav a.active{background:rgba(226,151,31,.16)}
.sub-t{display:block;font-size:13.5px;font-weight:700;color:#eaf1ff}
.sub-d{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.sub-all{border-top:1px solid #14355f;margin-top:5px;padding-top:11px !important;font-size:12.5px;color:var(--gold-lite)}
/* le survol ne doit pas se declencher au doigt sur mobile */
@media(hover:none){.has-sub:hover .subnav{opacity:0;visibility:hidden}}
/* sous-entrees du menu mobile */
.mnav .msub{padding-left:18px;font-size:14px;opacity:.86;border-left:2px solid #14355f;margin-left:2px}


/* --- Illustration de banniere --------------------------------------------- */
.hero-art{width:100%;max-width:460px;justify-self:end}
/* le titre peut s'etaler, le sous-titre non : il se lit. */
.hero-grid .lead{max-width:540px}
/* la colonne est figee en inline a 460px : il faut la piste, pas seulement l'image */
@media(min-width:1500px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 500px!important}
  .hero-art{max-width:500px}
}
@media(min-width:1900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 540px!important}
  .hero-art{max-width:540px}
}
@media(max-width:900px){
  .hero-art{justify-self:center;max-width:400px;margin-top:26px}
  .hero-grid .lead{max-width:none}
}
/* une animation permanente ne doit jamais s'imposer a qui n'en veut pas */
@media(prefers-reduced-motion:reduce){
  .hero-art animate,.hero-art animateMotion{display:none}
  .hero-art *{animation:none!important}
}


/* --- Portrait de Jonathan -------------------------------------------------
   Photo carree arrondie en CSS : 7 Ko en JPEG contre 54 Ko en PNG detoure,
   pour un rendu identique. Le fond blanc du studio devient un disque assume,
   cercle par la bordure doree.
   ------------------------------------------------------------------------ */
.avatar{
  border-radius:50%;object-fit:cover;display:block;flex:0 0 auto;
  border:2px solid var(--gold-deep);
  background:#fff;
  box-shadow:0 6px 20px rgba(1,10,30,.45)
}
.avatar-sm{width:22px;height:22px;border-width:1.5px;vertical-align:-6px;display:inline-block}
.avatar-md{width:52px;height:52px}
.avatar-lg{width:76px;height:76px}


/* --- Media dans les articles ----------------------------------------------
   Les contenus viennent de WordPress (ex-Divi) : les images y ont souvent une
   largeur naturelle superieure a la colonne. Sans cette regle, elles debordent
   et passent sous la barre laterale.
   ------------------------------------------------------------------------ */
.article-body img{
  max-width:100%;height:auto;display:block;
  border-radius:12px;border:1px solid var(--line);
  margin:22px 0;box-shadow:0 14px 34px rgba(1,10,30,.35)
}
.article-body figure{margin:22px 0;max-width:100%}
.article-body figure img{margin:0}
.article-body figcaption,.article-body .wp-caption-text{
  font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center;font-style:italic
}
/* WordPress pose des largeurs en dur sur les legendes */
.article-body .wp-caption{max-width:100%!important;height:auto}
/* les alignements WordPress ne doivent pas casser une colonne etroite */
.article-body .alignleft,.article-body .alignright{float:none;margin:22px 0}
.article-body .aligncenter{margin:22px auto}
/* video, tableaux et code : rien ne doit deborder */
.article-body iframe,.article-body video,.article-body embed{
  max-width:100%;border:0;border-radius:12px;margin:22px 0;aspect-ratio:16/9;height:auto;width:100%
}
.article-body table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse}
.article-body pre{overflow-x:auto;max-width:100%}