/* ============================================================
   SAGI — header partagé (home-sagi / team / pricing)
   Valeurs MESURÉES sur contracko.com/fr (desktop @1440, mobile @390)
   Une seule source de vérité : ne pas redéfinir ces règles dans les pages.
   ============================================================ */

/* ── conteneur : île flottante, transparente, sans ombre, aucun effet au scroll ── */
.nav2{position:fixed;top:24px;left:0;right:0;z-index:50;height:66px;padding:0 24px;display:flex;justify-content:center;background:transparent}
.nav2-inner{width:100%;max-width:1280px;height:66px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 15px -3px rgba(11,13,18,.07),0 4px 6px -4px rgba(11,13,18,.05)}
.nav2-grid{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;height:40px}
.nav2-panel{display:contents}

/* ── logo (32px de haut, comme le leur) ── */
.brand{display:flex;align-items:center;justify-self:start}
/* logo Sagi 2026 (assets/sagi-logo-2026.webp, source 1246×426 détourée).
   Ratio 2.93 : à 30px de haut il fait ~88px de large, comparable à
   l'ancien lockup. Source ≈14× la taille affichée. */
.brand img{height:30px;width:auto;display:block}

/* ── liens centraux : 14/500, pad 8/16, r7, h32, gap 4 ── */
.nav2links{display:flex;align-items:center;gap:4px;justify-content:flex-start;margin-left:16px}
.nav2-item{position:static;display:inline-flex}
.nav2-link{display:inline-flex;align-items:center;gap:4px;height:32px;font-size:14px;font-weight:500;color:var(--ink);padding:8px 16px;border-radius:7px;line-height:20px;white-space:nowrap;background:transparent;border:0;cursor:pointer;font-family:inherit}
.nav2-link:hover,.nav2-item.open>.nav2-link{background:var(--surface)}
.nav2-link i{font-size:12px;color:var(--muted);transition:transform .15s}
.nav2-item.open>.nav2-link i{transform:rotate(180deg)}

/* ── cluster droit : gap 12, boutons h40 r10 ── */
.nav2right{display:flex;align-items:center;gap:12px;justify-content:flex-end}
/* lien de connexion : discret, à gauche du CTA */
.nav2-signin{display:inline-flex;align-items:center;height:36px;padding:8px 12px;border-radius:7px;font-size:14px;font-weight:500;line-height:20px;color:var(--ink);white-space:nowrap}
.nav2-signin:hover{background:var(--surface)}
.nav2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;transition:.12s}
.nav2 .btn-primary{background:var(--accent);color:#fff}
.nav2 .btn-primary:hover{background:var(--accent-2)}
.nav2 .btn-ghost{background:var(--surface);color:var(--ink);box-shadow:none}
.nav2 .btn-ghost:hover{background:var(--line)}

/* ── sélecteur de langue : pill h36 r7 transparent, menu déroulant ── */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:94px;height:36px;background:transparent;border:none;box-shadow:none;border-radius:7px;padding:8px 16px;font-size:14px;font-weight:500;line-height:20px;color:var(--ink);cursor:pointer;font-family:inherit}
.lang-btn:hover,.lang-btn.open{background:var(--surface)}
.lang-btn i{font-size:12px;color:var(--muted);transition:transform .15s}
.lang-btn.open i{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:6px;min-width:160px;display:none;z-index:60}
.lang-menu.open{display:block}
.lang-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.lang-item:hover{background:var(--surface)}
.lang-item.active{background:var(--accent-tint);color:var(--accent-2)}

/* ── sous-menus : panneau ancré sous son déclencheur, tuile d'icône +
   libellé + description (pattern repris du projet `site/`). Le boîtier
   du header, lui, ne bouge pas : îlot blanc arrondi flottant. ── */
.nav2-item{position:relative}
.mega{position:absolute;left:0;top:calc(100% + 10px);display:none;padding-top:0;z-index:55}
.nav2-item.open>.mega,.nav2-item:hover>.mega{display:block}
/* pont invisible : le panneau ne se ferme pas en traversant l'espace */
.mega::before{content:"";position:absolute;top:-12px;left:0;height:12px;width:100%}
.mega-card{width:var(--mega-w,560px);max-width:calc(100vw - 48px);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 28px 70px -28px rgba(0,0,0,.30);animation:megaIn .2s ease-out}
@keyframes megaIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* le panneau porte deux groupes côte à côte : la plateforme, puis les métiers */
.mega-groups{display:grid;grid-template-columns:var(--mega-gc,1fr 1.9fr);gap:8px}
.mega-group + .mega-group{border-left:1px solid var(--line);padding-left:8px}
.mega-h{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:4px 10px 6px}
.mega-cols{display:grid;grid-template-columns:repeat(var(--mega-c,2),minmax(0,1fr));gap:4px}
.mega-link{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:12px;text-decoration:none;transition:background .15s}
.mega-link:hover{background:var(--surface)}
.mega-ic{margin-top:2px;flex-shrink:0;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;transition:.15s}
.mega-ic i{font-size:18px}
.mega-link:hover .mega-ic{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.mega-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-txt b{font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
.mega-txt span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:12px 10px 4px;border-top:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .15s}
.mega-foot:hover{color:var(--ink)}
.mega-foot i{font-size:14px}

/* ── hamburger (desktop : caché) ── */
.nav2-burger{display:none;width:32px;height:32px;border-radius:10px;background:var(--surface);border:0;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:0;justify-self:end}
.nav2-burger span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav2-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav2-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav2-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ============================================================
   MOBILE ET TABLETTE (< 1024px) — mesuré : barre blanche pleine largeur en haut,
   r 0 0 10 10, pad 12, h57 fermée ; ouverte : liens empilés h40 r10,
   puis les CTA empilés en pleine largeur.
   ============================================================ */
@media (max-width:1023px){
  .nav2{top:0;padding:0;height:auto}
  .nav2-inner{max-width:none;height:auto;background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:none;padding:12px}
  .nav2-grid{position:static;display:flex;flex-wrap:wrap;align-items:center;height:auto;gap:0}
  .brand{margin-right:auto}
  .nav2-burger{display:flex;order:3}
  .nav2-panel{display:none;width:100%;order:4;padding-top:12px}
  .nav2-panel.open{display:block}
  .nav2links{flex-direction:column;align-items:stretch;gap:0}
  .nav2-item{display:block}
  .nav2-link{display:flex;width:100%;height:40px;border-radius:10px;padding:8px 16px;justify-content:space-between}
  .nav2-link i{margin-left:auto}
  .mega{position:static;display:none;padding:0 0 4px}
  .nav2-item.open>.mega{display:block}
  .nav2-item:hover>.mega{display:none}
  .nav2-item.open:hover>.mega{display:block}
  .mega::before{display:none}
  .mega-card{width:100%;max-width:none;background:transparent;border:0;box-shadow:none;padding:0;animation:none}
  .mega-groups{grid-template-columns:1fr;gap:0}
  .mega-group + .mega-group{border-left:0;padding-left:0}
  .mega-h{display:block;font-size:10.5px;padding:10px 8px 4px}
  .mega-cols{grid-template-columns:1fr !important;gap:2px;padding:2px 0 6px 8px}
  .mega-link{padding:8px}
  .mega-ic{width:30px;height:30px;border-radius:8px}
  .mega-ic i{font-size:15px}
  .mega-txt span{display:none}
  .mega-foot{display:none}
  .nav2right{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:24px}
  .nav2right .btn{width:100%}
  .nav2-signin{width:100%;height:40px;justify-content:center;background:var(--surface);order:-1}
  /* langue : visible uniquement menu ouvert, dans la barre du haut à gauche du hamburger (mesuré x=257,y=12) */
  .nav2-inner{position:relative}
  .nav2right .lang{position:absolute;top:12px;right:56px}
}


/* ── fond de page : pointillé fin, motif unique du site ───────────
   Le quadrillage était trop présent. Points de 1px à 6% sur un module
   de 24px — plus fin qu'une trame de lignes à surface égale.
   Posé en couche dédiée : chaque page redéfinit son fond de body, une
   règle body{} ici serait écrasée. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle, rgba(13,13,18,.06) 1px, transparent 1px);
  background-size:24px 24px;
}