/* ============================================================
   SMART KAPITAL - nav.css
   Header flottant unifie, commun a toutes les pages du site.
   Autosuffisant : variables locales (prefixe --sknav-), aucune
   dependance envers refonte-d.css ou style.css. Tout est scope
   sous .sk-header, plus deux utilitaires globaux (scroll-padding
   et verrou de defilement du menu mobile).

   Structure attendue (includes/nav.html) :
   nav.sk-header            espaceur statique, reserve la hauteur
     .sk-scrim              voile mobile derriere le panneau
     .sk-bar                barre flottante, position fixed
       .sk-brand            logo + nom
       .sk-panel            menu + actions (drawer en mobile)
         .sk-menu > .sk-item(.sk-item-sub > .sk-sub)
         .sk-actions        #theme-ctl + .sk-cta
       .sk-burger           bouton mobile
   ============================================================ */

/* ----- Fontes : redeclarees ici pour l'autonomie. Memes fichiers
   que les feuilles de page, le navigateur ne les charge qu'une fois. */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url(../fonts/bricolage-700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url(../fonts/instrumentsans-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url(../fonts/instrumentsans-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ============ VARIABLES · GABARIT (communes aux deux themes) ============ */
:root{
  --sknav-w:1180px;          /* largeur maximale de la barre */
  --sknav-h:66px;            /* hauteur de la barre au repos */
  --sknav-h-compact:56px;    /* hauteur apres 40px de defilement */
  --sknav-top:16px;          /* detachement du haut de page */
  --sknav-top-compact:10px;
  --sknav-gutter:44px;       /* marge laterale totale (2 x 22px) */
  --sknav-radius:18px;
  --sknav-disp:'Bricolage Grotesque','Instrument Sans',sans-serif;
  --sknav-body:'Instrument Sans',sans-serif;
  --sknav-ease:cubic-bezier(0.22,1,0.36,1);
}

/* ============ VARIABLES · THEME SOMBRE PAR DEFAUT : OR SUR NOIR ============
   Teintes alignees sur refonte-d.css / style.css (fond #0A0A0C,
   texte creme #F3F0EA, or #C9A84C / #E8C766), redeclarees localement. */
:root{
  --sknav-bg:rgba(12,12,16,0.60);
  --sknav-bg-strong:rgba(10,10,13,0.86);
  --sknav-panel:#111116;
  --sknav-txt:#F3F0EA;
  --sknav-muted:#9A9AA2;
  --sknav-gold:#C9A84C;
  --sknav-gold-2:#E8C766;
  --sknav-gold-soft:rgba(201,168,76,0.14);
  --sknav-gold-glow:rgba(201,168,76,0.09);
  --sknav-line:rgba(255,255,255,0.08);
  --sknav-line-gold:rgba(201,168,76,0.24);
  --sknav-line-gold-strong:rgba(201,168,76,0.42);
  --sknav-topline:rgba(232,199,102,0.55);
  --sknav-btn-txt:#0A0A0C;
  --sknav-btn-shadow:0 6px 22px rgba(201,168,76,0.24);
  --sknav-btn-shadow-hover:0 10px 30px rgba(201,168,76,0.36);
  --sknav-shadow:0 12px 40px rgba(0,0,0,0.35);
  --sknav-shadow-strong:0 22px 64px rgba(0,0,0,0.55);
  --sknav-scrim:rgba(5,5,8,0.62);
}

/* ============ VARIABLES · THEME "LIGHT" : BLEU NUIT + OR ============ */
:root[data-theme="light"]{
  --sknav-bg:rgba(10,18,48,0.60);
  --sknav-bg-strong:rgba(9,16,44,0.88);
  --sknav-panel:#12224A;
  --sknav-txt:#F5F5F2;
  --sknav-muted:#A9B0C6;
  --sknav-gold:#C9A84C;
  --sknav-gold-2:#E8C766;
  --sknav-gold-soft:rgba(201,168,76,0.14);
  --sknav-gold-glow:rgba(201,168,76,0.11);
  --sknav-line:rgba(255,255,255,0.10);
  --sknav-line-gold:rgba(201,168,76,0.26);
  --sknav-line-gold-strong:rgba(201,168,76,0.45);
  --sknav-topline:rgba(232,199,102,0.55);
  --sknav-btn-txt:#081027;
  --sknav-btn-shadow:0 6px 22px rgba(201,168,76,0.24);
  --sknav-btn-shadow-hover:0 10px 30px rgba(201,168,76,0.36);
  --sknav-shadow:0 12px 40px rgba(2,6,20,0.45);
  --sknav-shadow-strong:0 22px 64px rgba(2,6,20,0.6);
  --sknav-scrim:rgba(4,8,24,0.62);
}

/* ============ VARIABLES · THEME "DARK" EXPLICITE ============ */
:root[data-theme="dark"]{
  --sknav-bg:rgba(12,12,16,0.60);
  --sknav-bg-strong:rgba(10,10,13,0.86);
  --sknav-panel:#111116;
  --sknav-txt:#F3F0EA;
  --sknav-muted:#9A9AA2;
  --sknav-gold:#C9A84C;
  --sknav-gold-2:#E8C766;
  --sknav-gold-soft:rgba(201,168,76,0.14);
  --sknav-gold-glow:rgba(201,168,76,0.09);
  --sknav-line:rgba(255,255,255,0.08);
  --sknav-line-gold:rgba(201,168,76,0.24);
  --sknav-line-gold-strong:rgba(201,168,76,0.42);
  --sknav-topline:rgba(232,199,102,0.55);
  --sknav-btn-txt:#0A0A0C;
  --sknav-btn-shadow:0 6px 22px rgba(201,168,76,0.24);
  --sknav-btn-shadow-hover:0 10px 30px rgba(201,168,76,0.36);
  --sknav-shadow:0 12px 40px rgba(0,0,0,0.35);
  --sknav-shadow-strong:0 22px 64px rgba(0,0,0,0.55);
  --sknav-scrim:rgba(5,5,8,0.62);
}

/* ============ UTILITAIRES GLOBAUX ============ */
/* Les ancres s'arretent sous la barre flottante */
html{scroll-padding-top:calc(var(--sknav-top) + var(--sknav-h) + 18px)}
/* Verrou de defilement quand le menu mobile est ouvert (pose par nav.js) */
html.sk-nav-lock,
html.sk-nav-lock body{overflow:hidden}

/* ============ ESPACEUR ============
   La racine reste dans le flux et reserve la place de la barre :
   le contenu ne glisse jamais sous le header, quelle que soit la page. */
.sk-header{
  position:relative;
  z-index:900;
  height:calc(var(--sknav-top) + var(--sknav-h));
  font-family:var(--sknav-body);
  font-size:16px;
  line-height:1.4;
}
.sk-header *,
.sk-header *::before,
.sk-header *::after{box-sizing:border-box;margin:0;padding:0}
.sk-header ul{list-style:none}
.sk-header a{text-decoration:none;color:inherit}
.sk-header :focus-visible{
  outline:2px solid var(--sknav-gold-2);
  outline-offset:3px;
  border-radius:6px;
}

/* ============ BARRE FLOTTANTE ============ */
.sk-bar{
  position:fixed;
  top:var(--sknav-top);
  left:0;right:0;
  margin-inline:auto;
  width:min(var(--sknav-w), calc(100% - var(--sknav-gutter)));
  height:var(--sknav-h);
  z-index:20;
  display:flex;
  align-items:center;
  gap:clamp(16px, 2vw, 28px);
  padding:0 clamp(14px, 1.4vw, 20px) 0 clamp(16px, 1.6vw, 22px);
  background:var(--sknav-bg);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--sknav-line-gold);
  border-radius:var(--sknav-radius);
  box-shadow:var(--sknav-shadow), inset 0 1px 0 rgba(255,255,255,0.05);
  transition:
    top .4s var(--sknav-ease),
    height .4s var(--sknav-ease),
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .4s ease;
  animation:sk-nav-in .6s var(--sknav-ease) .05s backwards;
}
@keyframes sk-nav-in{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}
/* Filet or signature sur l'arete superieure */
.sk-bar::before{
  content:"";
  position:absolute;top:-1px;left:26px;right:26px;height:1px;
  background:linear-gradient(90deg, transparent, var(--sknav-topline), transparent);
  pointer-events:none;
}
/* Sans backdrop-filter : fond quasi opaque pour rester lisible */
@supports (not (backdrop-filter:blur(1px))) and (not (-webkit-backdrop-filter:blur(1px))){
  .sk-bar{background:var(--sknav-bg-strong)}
}

/* Etat compact apres ~40px de defilement (classe posee par nav.js) */
.sk-header.sk-scrolled .sk-bar{
  top:var(--sknav-top-compact);
  height:var(--sknav-h-compact);
  background:var(--sknav-bg-strong);
  border-color:var(--sknav-line-gold-strong);
  box-shadow:var(--sknav-shadow-strong), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ============ LOGO ============ */
.sk-brand{
  display:flex;align-items:center;gap:11px;
  flex:none;
  font-family:var(--sknav-disp);
  transition:opacity .2s ease;
}
.sk-brand:hover{opacity:.88}
.sk-brand img{
  display:block;width:auto;height:36px;
  transition:height .4s var(--sknav-ease);
}
.sk-header.sk-scrolled .sk-brand img{height:30px}
.sk-brand-name{
  font-weight:700;font-size:17px;letter-spacing:-0.01em;
  color:var(--sknav-txt);white-space:nowrap;
}
.sk-brand-k{color:var(--sknav-gold)}

/* ============ PANNEAU : MENU + ACTIONS ============ */
.sk-panel{
  display:flex;align-items:center;
  flex:1;min-width:0;
  gap:clamp(14px, 1.6vw, 24px);
}
.sk-menu{
  display:flex;align-items:center;
  gap:clamp(16px, 1.7vw, 28px);
  margin-inline:auto;
}
.sk-item{position:relative}

/* Liens de premier niveau : lien ou bouton, meme habillage */
.sk-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 2px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sknav-body);
  font-size:14.5px;font-weight:500;letter-spacing:0.01em;
  color:var(--sknav-muted);
  white-space:nowrap;
  position:relative;
  transition:color .2s ease;
}
/* Souligne or anime */
.sk-link::after{
  content:"";
  position:absolute;left:2px;right:auto;bottom:0;
  width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg, var(--sknav-gold), var(--sknav-gold-2));
  transition:width .28s var(--sknav-ease);
}
.sk-link:hover,
.sk-item-sub.is-open > .sk-subtoggle{color:var(--sknav-txt)}
.sk-link:hover::after{width:calc(100% - 4px)}

/* Page courante (aria-current pose par nav.js) */
.sk-link[aria-current="page"],
.sk-subtoggle.sk-current{color:var(--sknav-txt)}
.sk-link[aria-current="page"]::after,
.sk-subtoggle.sk-current::after{width:calc(100% - 4px);opacity:.85}

/* Chevron du declencheur "Le Cabinet" */
.sk-caret{
  width:11px;height:11px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--sknav-ease);
}
.sk-item-sub.is-open .sk-caret{transform:rotate(180deg)}

/* ============ MENU DEROULANT "LE CABINET" (desktop) ============ */
.sk-sub{
  position:absolute;top:calc(100% + 14px);left:50%;
  min-width:284px;
  transform:translateX(-50%) translateY(8px);
  background:var(--sknav-panel);
  border:1px solid var(--sknav-line-gold);
  border-radius:16px;
  box-shadow:var(--sknav-shadow-strong);
  padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:
    opacity .22s ease,
    transform .3s var(--sknav-ease),
    visibility 0s linear .3s;
}
/* Pont invisible : le survol ne se perd pas entre le lien et le panneau */
.sk-sub::before{
  content:"";position:absolute;top:-15px;left:0;right:0;height:15px;
}
/* Filet or en tete de panneau */
.sk-sub::after{
  content:"";position:absolute;top:-1px;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg, transparent, var(--sknav-topline), transparent);
  pointer-events:none;
}
.sk-item-sub.is-open .sk-sub{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:
    opacity .22s ease,
    transform .3s var(--sknav-ease),
    visibility 0s;
}
.sk-sub-list{display:grid;gap:2px}
.sk-sublink{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-radius:11px;
  transition:background-color .18s ease, transform .18s ease;
}
.sk-sublink:hover{background:var(--sknav-gold-soft);transform:translateX(2px)}
.sk-sublink-t{
  font-size:14px;font-weight:600;color:var(--sknav-txt);
  transition:color .18s ease;
}
.sk-sublink:hover .sk-sublink-t,
.sk-sublink[aria-current="page"] .sk-sublink-t{color:var(--sknav-gold-2)}
.sk-sublink-d{font-size:12.5px;color:var(--sknav-muted);line-height:1.45}

/* ============ ACTIONS : THEME + CTA ============ */
.sk-actions{display:flex;align-items:center;gap:12px;flex:none}

/* Commutateur de theme : structure imposee par js/theme.js (#theme-ctl),
   habillage local pour l'autonomie vis-a-vis des feuilles de page. */
.sk-header .theme-ctl{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;border:1px solid var(--sknav-line);border-radius:999px;
  background:transparent;
}
.sk-header .theme-ctl button{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:999px;
  border:none;background:transparent;color:var(--sknav-muted);cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.sk-header .theme-ctl button:hover{color:var(--sknav-txt)}
.sk-header .theme-ctl button[aria-pressed="true"]{
  background:var(--sknav-gold-soft);color:var(--sknav-gold-2);
}
.sk-header .theme-ctl svg{
  width:15px;height:15px;display:block;
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.sk-header .theme-ctl svg .half{fill:currentColor;stroke:none}

/* CTA or : leger relief, reflet discret au survol */
.sk-cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border-radius:11px;
  background:var(--sknav-gold);color:var(--sknav-btn-txt);
  font-family:var(--sknav-body);
  font-size:14px;font-weight:600;letter-spacing:0.01em;
  white-space:nowrap;
  box-shadow:var(--sknav-btn-shadow);
  transition:background-color .22s ease, box-shadow .25s ease, transform .22s var(--sknav-ease);
}
.sk-cta::before{
  content:"";
  position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg);
  transition:left .5s var(--sknav-ease);
  pointer-events:none;
}
.sk-cta:hover{
  background:var(--sknav-gold-2);
  box-shadow:var(--sknav-btn-shadow-hover);
  transform:translateY(-1px);
}
.sk-cta:hover::before{left:125%}
.sk-cta:active{transform:translateY(0)}

/* ============ BURGER (mobile) ============ */
.sk-burger{
  display:none;
  flex:none;
  width:42px;height:42px;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:transparent;
  border:1px solid var(--sknav-line);border-radius:12px;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.sk-burger:hover{border-color:var(--sknav-line-gold-strong)}
.sk-burger span{
  display:block;width:18px;height:2px;border-radius:2px;
  background:var(--sknav-txt);
  transition:transform .3s var(--sknav-ease), background-color .2s ease;
}
.sk-header.sk-open .sk-burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.sk-header.sk-open .sk-burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

/* ============ VOILE MOBILE ============ */
.sk-scrim{
  position:fixed;inset:0;z-index:10;
  background:var(--sknav-scrim);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.sk-header.sk-open .sk-scrim{
  opacity:1;visibility:visible;
  transition:opacity .3s ease, visibility 0s;
}

/* ============ MOBILE ET TABLETTE ============ */
@media (max-width:1100px){
  :root{
    --sknav-h:60px;
    --sknav-h-compact:52px;
    --sknav-top:12px;
    --sknav-top-compact:8px;
    --sknav-gutter:28px;
    --sknav-radius:16px;
  }
  .sk-burger{display:flex}
  .sk-brand img{height:32px}
  .sk-header.sk-scrolled .sk-brand img{height:28px}

  /* Barre opaque des que le panneau est ouvert */
  .sk-header.sk-open .sk-bar{
    background:var(--sknav-bg-strong);
    border-color:var(--sknav-line-gold-strong);
  }

  /* Le panneau devient une carte deroulante sous la barre */
  .sk-panel{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px 10px 16px;
    background:var(--sknav-panel);
    border:1px solid var(--sknav-line-gold);
    border-radius:var(--sknav-radius);
    box-shadow:var(--sknav-shadow-strong);
    max-height:calc(100vh - var(--sknav-top) - var(--sknav-h) - 34px);
    max-height:calc(100dvh - var(--sknav-top) - var(--sknav-h) - 34px);
    overflow-y:auto;
    overscroll-behavior:contain;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px);
    transition:
      opacity .28s ease,
      transform .32s var(--sknav-ease),
      visibility 0s linear .32s;
  }
  .sk-header.sk-open .sk-panel{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0);
    transition:
      opacity .28s ease,
      transform .32s var(--sknav-ease),
      visibility 0s;
  }

  .sk-menu{flex-direction:column;align-items:stretch;gap:2px;margin:0}
  .sk-item{position:static}
  .sk-link{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:13px 14px;border-radius:12px;
    font-size:16px;
    transition:background-color .18s ease, color .18s ease;
  }
  .sk-link::after{display:none}
  .sk-link:hover{background:var(--sknav-gold-glow)}
  .sk-link[aria-current="page"],
  .sk-subtoggle.sk-current{
    background:var(--sknav-gold-soft);color:var(--sknav-txt);
  }
  .sk-caret{width:13px;height:13px}

  /* Le deroulant devient une section depliable (accordeon) */
  .sk-sub{
    position:static;min-width:0;transform:none;
    background:transparent;border:none;border-radius:0;
    box-shadow:none;padding:0;
    opacity:1;visibility:visible;pointer-events:auto;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .34s var(--sknav-ease);
  }
  .sk-sub::before,
  .sk-sub::after{display:none}
  .sk-item-sub.is-open .sk-sub{grid-template-rows:1fr;transform:none}
  .sk-sub-list{
    overflow:hidden;min-height:0;
    margin:0 0 0 12px;padding-left:12px;
    border-left:1px solid var(--sknav-line-gold);
  }
  .sk-item-sub.is-open .sk-sub-list{margin-top:2px;margin-bottom:6px}
  .sk-sublink{padding:11px 12px}
  .sk-sublink:hover{transform:none}

  /* Theme + CTA regroupes en pied de panneau */
  .sk-actions{
    flex-direction:column;align-items:stretch;gap:14px;
    margin-top:12px;padding-top:16px;
    border-top:1px solid var(--sknav-line);
  }
  .sk-header .theme-ctl{align-self:center}
  .sk-cta{width:100%;padding:13px 20px;font-size:15px}
}

@media (max-width:480px){
  :root{--sknav-gutter:20px}
  .sk-brand-name{font-size:16px}
}

/* ============ ACCESSIBILITE : MOUVEMENT REDUIT ============ */
@media (prefers-reduced-motion:reduce){
  .sk-header *,
  .sk-header *::before,
  .sk-header *::after,
  .sk-bar{
    transition:none !important;
    animation:none !important;
  }
}