/* ============================================================
   chrome.css · SOURCE UNIQUE du style header + footer.
   Chargée par TOUTES les pages (home/SPA, docs, news, legal).
   Le HTML vient de chrome.mjs. Plus aucune définition de header
   ou de footer ailleurs (main.css / news.css ne les redéfinissent plus).

   Fond du header : gradient + blur par défaut (fond uni des pages docs/news/legal).
   Sur la home (html.is-spa), il se fond dans le WebGL animé via mix-blend-mode.
   ============================================================ */

/* ---- header ---- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;
  padding:1.15rem 4vw;
  background:linear-gradient(var(--basalte),rgba(25,23,21,.72) 62%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
/* home : le header se fond dans le fond WebGL animé (pas de fond opaque) */
html.is-spa .site-head{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;mix-blend-mode:difference}

.site-head .brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;letter-spacing:-.02em;color:var(--chaux);text-decoration:none}
.site-head .brand-mark{width:1.6rem;height:1.6rem;flex:0 0 auto;display:block}

.site-nav{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
.site-nav a{
  font-family:'Departure Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(233,228,219,.8);text-decoration:none;
  padding-bottom:.2rem;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.site-nav a:hover{color:var(--chaux)}
.site-nav a[aria-current="page"]{color:var(--chaux);border-bottom-color:var(--chaux)}
/* Commencer : mis en avant en or (la couleur de "la preuve · exit 0"), l'entrée du produit */
.site-nav a[href$="/commencer"]{color:rgba(201,164,92,.9)}
.site-nav a[href$="/commencer"]:hover,.site-nav a[href$="/commencer"][aria-current="page"]{color:var(--or);border-bottom-color:var(--or)}

.head-right{display:flex;align-items:center;gap:1.1rem}
.head-tag{color:rgba(201,210,198,.75);white-space:nowrap}
@media (max-width:860px){.head-tag{display:none}}
.lang-toggle{display:inline-flex;align-items:center;gap:.28rem}
.lang-toggle button{background:none;border:0;cursor:pointer;font-family:'Departure Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,228,219,.42);padding:0;transition:color .2s}
.lang-toggle button:hover{color:rgba(233,228,219,.8)}
.lang-toggle button.active{color:var(--chaux)}
.lang-toggle span{color:rgba(233,228,219,.28)}
/* pages légales : bascule de langue en liens (même rendu que les boutons) */
.lang-toggle a{font-family:'Departure Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,228,219,.42);text-decoration:none;transition:color .2s}
.lang-toggle a.active,.lang-toggle a:hover{color:var(--chaux)}

.gh-square{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid rgba(233,228,219,.28);color:var(--chaux);opacity:.85;text-decoration:none;
  transition:opacity .2s ease,border-color .2s ease,background .2s ease}
.gh-square:hover{opacity:1;border-color:rgba(233,228,219,.6);background:rgba(233,228,219,.06)}
.gh-square svg{width:15px;height:15px;display:block}

/* header responsive : la nav passe pleine largeur sous le brand (identique partout) */
@media (max-width:820px){.site-head{flex-wrap:wrap;row-gap:.5rem}.site-nav{gap:.9rem;order:3;width:100%}}
@media (max-width:640px){.site-head{padding:1.05rem 5vw}.site-nav{gap:1rem}}

/* ---- footer (colophon) ---- */
.colophon{
  position:relative;z-index:6;background:var(--basalte);
  display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between;
  padding:2rem 4vw 2.4rem;border-top:1px solid var(--hairline);
}
.colophon a{color:var(--chaux);text-decoration:none;border-bottom:1px solid var(--hairline)}
.colophon a:hover{border-bottom-color:var(--chaux)}
.colophon .gh-square{border:0;width:auto;height:auto;gap:.5rem;opacity:.85}
.colophon .gh-square--foot{display:inline-flex;align-items:center;color:inherit;border-bottom:0}
.colophon .gh-square--foot svg{width:14px;height:14px;border:1px solid rgba(233,228,219,.28);padding:2px;box-sizing:content-box}
.colophon .gh-square--foot span{border-bottom:1px solid var(--hairline)}
.colophon .gh-square--foot:hover span{border-bottom-color:var(--chaux)}
.colophon .legal-link{color:rgba(233,228,219,.5);text-decoration:none;border-bottom:0;transition:color .2s}
.colophon .legal-link:hover{color:var(--chaux);border-bottom:0}