/* =============================================================
   Sys Kabs Amazone — habillage du thème, servi sur TOUTES les pages
   client. Ce fichier était auparavant injecté en ligne par les hooks :
   ~16 Ko retéléchargés à chaque navigation au lieu d'être mis en cache
   une fois. Le contenu est repris tel quel, dans l'ordre des priorités
   de hook d'origine (layout 1, sharing 2, navigation 3) : la cascade
   est donc strictement identique.

   Les blocs restés dans les hooks sont ceux qui dépendent de variables
   PHP — ils ne peuvent pas vivre dans un fichier statique.
   ============================================================= */


/* ---------- Mise en page, en-tête, barre de navigation collante (ex-syskabs_layout.php) ---------- */
/* Ancre de positionnement du ruban de confiance suspendu sous l'en-tête
     (voir syskabs_footer.php, section « sceau DigiCert »). */
  header, .navbar { position: relative; }

  /* Logo MIT-SEC dans la barre de navigation. */
  .navbar-brand.ska-logo{padding-top:6px;padding-bottom:6px;display:inline-flex;align-items:center;gap:0}
  .navbar-brand.ska-logo img{height:42px;width:auto;max-width:240px;display:block}
  @media(max-width:576px){.navbar-brand.ska-logo img{height:34px;max-width:180px}}

  /* =====================================================================
     EN-TÊTE — barre de navigation principale
     =====================================================================
     Parti pris : un en-tête clair et sobre, où la couleur ne sert qu'à
     signaler. Le bloc bleu plein venait du thème parent ; il pesait lourd
     en haut de chaque page et entrait en concurrence avec le vert des
     boutons d'achat. Sur fond blanc, le regard va au logo, aux entrées de
     menu, puis au bouton d'action — dans cet ordre.

     Effet secondaire utile : la barre collée étant blanche elle aussi, le
     passage de l'une à l'autre au défilement ne change plus que l'ombre.

     Ces règles vivaient dans custom.css, qui n'est chargé que sur nos
     pages : l'en-tête était bleu ici et gris ailleurs. Elles sont ici,
     donc appliquées partout.
     ===================================================================== */
  header, .header, #header{background:#fff;}

  nav.navbar, .navbar-main, #main-menu.navbar{
    background:#fff !important;
    border-top:1px solid #F0F3F8;
    border-bottom:1px solid var(--ska-line);
    padding-top:0 !important; padding-bottom:0 !important;
  }

  /* Entrées de menu : lisibles, aérées, sans pastille de survol. */
  .navbar .navbar-nav > li > a,
  .navbar .navbar-nav .nav-link{
    color:#27374D !important;
    background:transparent !important;
    text-decoration:none !important;
    font-weight:600; font-size:.94rem; letter-spacing:-.01em;
    padding:19px 2px !important; margin:0 17px;
    position:relative; border-radius:0;
    transition:color .15s ease;
  }
  .navbar .navbar-nav > li:first-child > a{margin-left:0;}

  /* Soulignement qui se déploie au survol : discret à l'arrêt, net au
     passage. Remplace le fond plein, trop lourd sur une barre claire. */
  .navbar .navbar-nav > li > a::after,
  .navbar .navbar-nav .nav-link::after{
    content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;
    background:var(--ska-primary);border-radius:2px;
    transform:scaleX(0);transition:transform .18s ease;
  }
  .navbar .navbar-nav > li > a:hover,
  .navbar .navbar-nav > li > a:focus,
  .navbar .navbar-nav .nav-link:hover{color:var(--ska-primary) !important;}
  .navbar .navbar-nav > li > a:hover::after,
  .navbar .navbar-nav > li.active > a::after,
  .navbar .navbar-nav > li.show > a::after,
  .navbar .navbar-nav .nav-link.active::after{transform:scaleX(1);}
  .navbar .navbar-nav > li.active > a,
  .navbar .navbar-nav .nav-link.active{color:var(--ska-primary) !important;}

  /* Chevron des menus déroulants : plus fin, aligné sur le texte. */
  .navbar .navbar-nav .dropdown-toggle::after{
    border-top-width:5px;border-right-width:4px;border-left-width:4px;
    margin-left:7px;vertical-align:.16em;opacity:.55;
  }

  /* Bouton d'action, à droite de la barre. Le vert est celui des prix et
     des boutons « Commander » : une seule couleur pour une seule intention. */
  .ska-nav-cta{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    background:var(--ska-green);color:#fff !important;text-decoration:none !important;
    font-weight:700;font-size:.87rem;line-height:1;
    padding:11px 18px;border-radius:999px;white-space:nowrap;
    box-shadow:0 8px 18px -10px rgba(7,125,92,.9);
    transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
  }
  .ska-nav-cta:hover{background:#0A7D5C;transform:translateY(-1px);
    box-shadow:0 10px 22px -10px rgba(7,125,92,1);}
  .ska-nav-cta svg{width:15px;height:15px;}
  /* Une fois la barre collée, la recherche et le panier prennent le relais. */
  html.ska-stuck .ska-nav-cta{display:none;}

  /* Bouton du menu mobile : au ton de la barre claire. */
  .navbar .navbar-toggler{
    border:1px solid var(--ska-line);border-radius:10px;padding:7px 10px;
    color:#27374D;background:#fff;
  }
  .navbar .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(30,80,226,.16);outline:none;}

  /* Menu déroulé sur mobile : les entrées deviennent une liste, le
     soulignement n'a plus de sens, un liseré gauche marque le survol. */
  @media(max-width:992px){
    .ska-nav-cta{display:none;}
    .navbar .navbar-nav > li > a,
    .navbar .navbar-nav .nav-link{padding:12px 4px !important;margin:0;}
    .navbar .navbar-nav > li > a::after,
    .navbar .navbar-nav .nav-link::after{display:none;}
    .navbar .navbar-nav > li > a:hover{
      box-shadow:inset 3px 0 0 var(--ska-primary);padding-left:12px !important;}
  }

  /* ---- Barre de navigation collante ----------------------------------
     Au défilement, le menu se détache et reste visible en haut de l'écran.
     On utilise position:fixed et non position:sticky : responsive.css pose
     « body{overflow-x:hidden} », qui fait du body un conteneur de
     défilement et neutralise sticky sur ses descendants.
     Une cale (#skaNavSpacer) placée AVANT le menu reprend sa hauteur au
     moment où il se détache, pour que la page ne saute pas. */
  /* Hauteur nulle et non « display:none » : la cale doit rester mesurable
     pour servir de repère au calcul du seuil de déclenchement. */
  #skaNavSpacer{height:0;}
  html.ska-stuck #skaNavSpacer{height:var(--ska-nav-h,0px);}
  html.ska-stuck .ska-sticky-nav{
    position:fixed; top:0; left:0; right:0; z-index:1035;
    /* Bande blanche : un liseré et une ombre douce suffisent à la détacher
       du contenu, sans le bloc de couleur pleine. Le fond opaque est
       impératif — sinon le contenu défile visiblement au travers. */
    background:#fff;
    border-bottom:1px solid rgba(14,26,43,.10);
    box-shadow:0 6px 22px -12px rgba(14,26,43,.45);
    animation:skaNavDrop .22s ease-out;
  }
  @keyframes skaNavDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
  /* Le ruban du sceau pend sous l'en-tête : il n'a pas sa place dans la
     barre réduite, où il flotterait en permanence au-dessus du contenu. */
  html.ska-stuck .ska-seal-head{display:none;}
  /* Menu mobile déroulé dans la barre fixe : il ne doit jamais dépasser
     l'écran, sinon ses dernières entrées deviennent inatteignables.
     STRICTEMENT réservé au mobile : sur grand écran, « overflow-y » fait du
     conteneur une zone de rognage, et les menus déroulants qui s'ouvrent
     sous la barre (Boutique, Plus, Compte…) deviennent invisibles et
     inatteignables au clic. */
     Le seuil est celui du THÈME (navbar-expand-xl = 1200px) et non 992 :
     entre les deux, le menu est encore replié et doit être borné lui aussi.
     On se cale sur la hauteur RÉELLE de la barre collée (--ska-stuck-h) et
     non sur celle du repos : sur téléphone la barre du menu est quasi plate
     au repos (elle ne contient que le panneau replié), et le panneau
     débordait alors sous le bas de l'écran. */
  @media(max-width:1199.98px){
    html.ska-stuck .ska-sticky-nav .navbar-collapse{
      max-height:calc(100vh - var(--ska-stuck-h,64px)); overflow-y:auto;
    }
  }
  /* Les ancres (#ska-catalog-sec, #auto…) ne doivent pas se retrouver
     cachées derrière la barre au moment du saut. */
  html{scroll-padding-top:calc(var(--ska-nav-h,78px) + 6px);}

  /* ---- Contenu propre à la barre collée -------------------------------
     Logo, recherche et panier n'existent que dans l'état collé : au repos
     ils feraient doublon avec l'en-tête complet, juste au-dessus. */
  .ska-bar-brand,.ska-bar-tools,.ska-bar-toggler{display:none;}

  /* ---- Bouton du menu dans la barre collée -----------------------------
     L'en-tête du thème est fait de DEUX barres : celle du haut porte le
     logo, le panier et le bouton ☰ ; celle du dessous porte le panneau
     déroulant #mainNavbar. C'est la seconde qui devient collante (c'est
     elle qui contient le menu). Le bouton, lui, restait dans la première
     et s'en allait avec le défilement : une fois la barre collée, plus
     rien ne permettait d'ouvrir le menu sur téléphone.
     On place donc une copie du bouton dans la barre collée. Bootstrap
     délègue ses gestionnaires au document : la copie déclenche le même
     panneau que l'original, sans code supplémentaire. */
  html.ska-stuck .ska-sticky-nav .ska-bar-toggler{
    display:inline-flex;align-items:center;justify-content:center;
    order:-1;flex:0 0 auto;margin-right:10px;padding:0;
    width:42px;height:42px;border-radius:50%;
    border:1px solid var(--ska-line);background:#fff;color:var(--ska-ink);
    font-size:1.05rem;line-height:1;cursor:pointer;
    transition:background-color .15s,border-color .15s,color .15s;
  }
  html.ska-stuck .ska-sticky-nav .ska-bar-toggler:hover{
    background:#f2f6ff;border-color:var(--ska-primary);color:var(--ska-primary);}
  html.ska-stuck .ska-sticky-nav .ska-bar-toggler:focus{
    box-shadow:0 0 0 3px rgba(30,80,226,.16);outline:none;}
  /* Au-delà du point de rupture du thème, le menu est déployé en ligne :
     le bouton n'a plus lieu d'être. */
  @media(min-width:1200px){
    html.ska-stuck .ska-sticky-nav .ska-bar-toggler{display:none;}
  }

  html.ska-stuck .ska-bar-brand{display:inline-flex;align-items:center;flex:0 0 auto;
    margin-right:22px;text-decoration:none;}
  html.ska-stuck .ska-bar-brand img{height:34px;width:auto;display:block;}
  html.ska-stuck .ska-bar-tools{display:flex;align-items:center;gap:10px;
    margin-left:auto;flex:0 0 auto;}

  /* Recherche : compacte au repos, elle s'élargit à la saisie. */
  .ska-search{position:relative;display:flex;align-items:center;}
  .ska-search input{width:200px;height:40px;padding:0 38px 0 15px;
    border:1px solid var(--ska-line);border-radius:999px;background:#f6f8fc;
    font-size:.88rem;color:var(--ska-ink);outline:none;
    transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;}
  .ska-search input::placeholder{color:var(--ska-muted);}
  .ska-search input:focus{width:270px;background:#fff;border-color:var(--ska-primary);
    box-shadow:0 0 0 3px rgba(30,80,226,.14);}
  .ska-search button{position:absolute;right:4px;top:4px;width:32px;height:32px;
    border:0;border-radius:50%;background:transparent;color:#5b6b82;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;padding:0;}
  .ska-search button:hover{background:rgba(30,80,226,.10);color:var(--ska-primary);}
  .ska-search svg{width:17px;height:17px;}
  @media(max-width:1100px){.ska-search input{width:150px;}
    .ska-search input:focus{width:210px;}}

  /* Panier : pastille de comptage en vert de marque. */
  .ska-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;color:var(--ska-ink);text-decoration:none;
    border:1px solid var(--ska-line);background:#fff;transition:background-color .15s,border-color .15s,color .15s;}
  .ska-cart:hover{background:#f2f6ff;border-color:var(--ska-primary);color:var(--ska-primary);text-decoration:none;}
  .ska-cart svg{width:19px;height:19px;}
  .ska-cart-n{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
    border-radius:999px;background:var(--ska-green);color:#fff;font-size:.68rem;font-weight:800;
    line-height:19px;text-align:center;box-shadow:0 0 0 2px #fff;}
  .ska-cart-n[data-empty="1"]{display:none;}

  /* ---- Mobile : logo, menu et panier, sans recherche -------------------
     La place manque pour un champ de saisie, et le déplier sous la bande
     ajoutait une étape pour un usage rare sur téléphone. Le panier est ce
     qui compte ici : on lui laisse la place. La recherche reste accessible
     depuis la page catalogue. */
  @media(max-width:992px){
    html.ska-stuck .ska-bar-brand{margin-right:10px;}
    html.ska-stuck .ska-bar-brand img{height:30px;}
    /* Le bouton du menu passe en tête : repère habituel sur mobile. */
    html.ska-stuck .ska-sticky-nav .navbar-toggler{order:-1;margin-right:10px;}
    html.ska-stuck .ska-bar-tools{gap:8px;}
    html.ska-stuck .ska-search{display:none;}
  }
  @media(prefers-reduced-motion:reduce){
    html.ska-stuck .ska-sticky-nav{animation:none;}
  }


/* ---------- Partage et liens sociaux (ex-syskabs_sharing.php) ---------- */
.ska-share{max-width:960px;margin:26px auto 8px;padding:16px 18px;
  border:1px solid rgba(128,128,128,.2);border-radius:14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ska-share-t{font-size:.9rem;font-weight:700;opacity:.85;}
.ska-share-list{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ska-share-btn{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:inherit;opacity:.72;
  border:1px solid rgba(128,128,128,.28);text-decoration:none;cursor:pointer;
  background:none;padding:0;
  transition:opacity .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;}
.ska-share-btn svg{width:17px;height:17px;display:block;}
.ska-share-btn:hover{opacity:1;color:#fff;border-color:transparent;text-decoration:none;}
.ska-share-linkedin:hover{background:#0a66c2;}
.ska-share-whatsapp:hover{background:#25d366;}
.ska-share-facebook:hover{background:#1877f2;}
.ska-share-x:hover       {background:#000;}
.ska-share-email:hover   {background:var(--ska-muted);}
.ska-share-copy:hover    {background:var(--ska-green);}
.ska-share-copy.ska-done {background:var(--ska-green);color:#fff;border-color:transparent;opacity:1;}
@media(max-width:600px){.ska-share{justify-content:center;}}


/* ---------- Méga-menus (ex-syskabs_navigation.php) ---------- */
/* Mise en forme du panneau SANS propriété display : il reste masqué par
     défaut, comme tout .dropdown-menu Bootstrap. La grille ne s'applique
     qu'à l'ouverture (.show au clic, ou :hover au survol). */
  .dropdown-menu.ska-mega{
    width:min(940px,96vw);max-width:96vw;padding:22px 26px 24px;
    border:1px solid #e6ecf3;border-radius:14px;
    box-shadow:0 22px 55px -22px rgba(20,34,56,.38);
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 26px;
  }
  .dropdown-menu.ska-mega.show{display:grid;}
  .ska-mega .ska-col h4{
    margin:0 0 10px;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ska-primary);border-bottom:2px solid var(--ska-green-soft);padding-bottom:8px;
  }
  .ska-mega a.ska-itm{
    display:block;padding:6px 0;color:var(--ska-ink);text-decoration:none;font-weight:600;
    font-size:.92rem;line-height:1.25;white-space:normal;
  }
  .ska-mega a.ska-itm small{display:block;font-weight:400;color:var(--ska-muted);font-size:.75rem;}
  .ska-mega a.ska-itm:hover{color:var(--ska-green);background:transparent;}

  /* Desktop : ouverture AU SURVOL de tous les déroulants de la navigation.
     Seuil calé sur navbar-expand-xl (1200px), le point où le thème déploie
     réellement le menu en ligne. À 993px il s'appliquait à un menu encore
     replié. */
  @media(min-width:1200px){
    li.ska-mega-item{position:static;}
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .nav-item:hover > .dropdown-menu{display:block;}
    li.ska-mega-item:hover > .dropdown-menu.ska-mega{display:grid;}

    /* Empêche la fermeture quand la souris descend vers le panneau : on
       supprime l'espace sous le déclencheur (margin-top) et on ajoute un
       « pont » invisible au-dessus du panneau pour rester en survol. */
    .navbar .nav-item.dropdown > .dropdown-menu,
    .navbar .dropdown > .dropdown-menu{margin-top:0;}
    .navbar .dropdown > .dropdown-menu::before,
    .navbar .nav-item > .dropdown-menu::before{
      content:"";position:absolute;left:0;right:0;top:-16px;height:18px;background:transparent;
    }
  }
  @media(max-width:1199.98px){
    .dropdown-menu.ska-mega{grid-template-columns:1fr;width:auto;box-shadow:none;border:none;padding:6px 0;}
    .dropdown-menu.ska-mega.show{display:block;}
    .ska-mega .ska-col{margin-bottom:6px;}
  }

/* ---------- Pied de page, mentions et sceau (ex-syskabs_footer.php) ----------
   Ces règles étaient émises dans le pied de page. Elles n'utilisent aucun
   !important et ne ciblent que des classes propres au composant : les
   remonter dans le <head> ne change donc l'issue d'aucun conflit. */
.ska-buyer{max-width:1180px;margin:0 auto;padding:26px 24px 10px;}
/* Grille explicite : 4 colonnes de liens + 1 colonne pour le sceau.
   (auto-fit ne faisait tenir que 4 colonnes : la 5e repassait à la ligne.) */
.ska-buyer-grid{display:grid;gap:24px 30px;align-items:start;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;}
@media(max-width:1100px){.ska-buyer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.ska-fcol h4{margin:0 0 12px;font-size:.95rem;font-weight:700;color:inherit;opacity:.95;}
.ska-fcol ul{list-style:none;margin:0;padding:0;display:block;}
.ska-fcol li{margin:0 0 2px;}
.ska-fcol a{text-decoration:none;font-size:.87rem;opacity:.75;color:inherit;
  display:inline-block;padding:3px 0;line-height:1.35;}
.ska-fcol a:hover{opacity:1;text-decoration:underline;}
/* Colonne du sceau : alignée en haut, comme les titres des autres colonnes. */
.ska-fseal{display:flex;justify-content:flex-start;align-items:flex-start;}
.ska-fseal img{max-width:100%;height:auto;}

/* --- Réseaux sociaux --- */
.ska-social{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(128,128,128,.22);}
.ska-social-t{font-size:.87rem;font-weight:600;opacity:.8;}
.ska-social-list{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ska-soc{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;color:inherit;opacity:.72;
  border:1px solid rgba(128,128,128,.28);text-decoration:none;
  transition:opacity .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;}
.ska-soc svg{width:17px;height:17px;display:block;}
.ska-soc:hover{opacity:1;color:#fff;border-color:transparent;text-decoration:none;}
.ska-soc-linkedin:hover {background:#0a66c2;}
.ska-soc-facebook:hover {background:#1877f2;}
.ska-soc-x:hover        {background:#000;}
.ska-soc-whatsapp:hover {background:#25d366;}
.ska-soc-youtube:hover  {background:#ff0000;}
.ska-soc-instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);}
/* Icône en attente d'URL (mode aperçu) : non cliquable. */
.ska-soc[aria-disabled="true"]{pointer-events:none;opacity:.35;}

@media(max-width:600px){.ska-buyer{padding:20px 16px 6px;}.ska-buyer-grid{gap:18px;}
  .ska-fseal{justify-content:center;}
  .ska-social{justify-content:center;flex-direction:column;gap:10px;}}
.ska-legal-links{margin:0;padding:14px 12px;text-align:center;font-size:.85rem;color:var(--ska-muted);line-height:1.7}
.ska-legal-links a{color:var(--ska-muted);text-decoration:none;margin:0 .35em}
.ska-legal-links a:hover{color:var(--ska-primary);text-decoration:underline}
.ska-legal-links .sep{opacity:.5}
/* Ruban d'en-tête : suspendu en haut à droite, déborde sur la bannière. */
.ska-seal-head{
  position:absolute; top:100%; right:44px; z-index:40;
  background:#fff; padding:12px 16px 24px;
  box-shadow:0 8px 20px rgba(16,27,51,.16);
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
          clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  line-height:0;
}
.ska-seal-head img{max-height:60px;width:auto;}
/* Sur mobile la place manque : on ne garde que le sceau du pied de page. */
@media(max-width:900px){ .ska-seal-head{display:none;} }

/* Pied de page : dans la 5e colonne, à droite d'« Aide et support ». */
.ska-seal-foot{display:flex;justify-content:flex-start;align-items:flex-start;line-height:0;}
.ska-seal-foot img{max-width:100%;height:auto;}
/* Repli si la colonne n'existe pas (page sans le bloc de colonnes). */
footer > .ska-seal-foot{justify-content:center;padding:14px 12px;}
@media(max-width:600px){ .ska-seal-foot{justify-content:center;} }