/* Sivotis — mise en forme de la couche composition, charte « signal »
 *
 * PENDANT CSS de js/layouts/signal.js. Ce dernier décide de la STRUCTURE du
 * DOM ; ce fichier décide de sa forme. Les deux chartes émettent les mêmes
 * classes (`site-nav`, `site-btn`, `site-footer`…) sur des arbres différents :
 * il faut donc un discriminant en CSS, et c'est `data-theme`, posé sur <html>
 * par js/theme-switch.js dans tous les cas — production comprise.
 *
 * POURQUOI UN FICHIER SÉPARÉ, et pas un bloc de plus dans css/base.css : les
 * règles ci-dessous ne s'appliquent JAMAIS en thème OPS×INTEL, le sélecteur ne
 * pouvant pas matcher. Le fichier est donc strictement additif, et le retirer
 * des <link> suffit à annuler l'ensemble. Le pendant OPS×INTEL, lui, reste dans
 * base.css : l'en sortir changerait l'ordre de la cascade, donc le rendu.
 *
 * Aucune couleur littérale ici : tout passe par les jetons de css/tokens/.
 * Les valeurs de forme (hauteurs, rayons, gouttières) viennent de
 * mockups/refonte-2026-08/assets/sivotis.css, dont les noms de jetons sont
 * traduits : --hair → --hairline, --dust → --muted, --paper → --fg,
 * --void → --bg, --display → --font-sans, --mono → --font-mono.
 *
 * ÉCART ASSUMÉ AVEC LA MAQUETTE — la barre est `sticky` et non `fixed`.
 * La maquette la sort du flux : son hero est dimensionné pour passer dessous.
 * Tant que le contenu des pages n'est pas porté (il ne l'est pas), `fixed`
 * masquerait le haut de chaque page. `sticky` donne le même comportement au
 * défilement — la barre flotte à 16 px du haut — sans recouvrir quoi que ce
 * soit. Repasser à `fixed` sera une déclaration à changer, une fois les hero
 * portés.
 */

/* ═══════════════════════════════ BARRE ═══════════════════════════════ */

/* Conteneur pleine largeur : il ne porte que la gouttière et le collage.
 * Il faut défaire ici tout ce que la version OPS×INTEL pose sur la même
 * classe — fond, filet bas, flou — sans quoi les deux se superposeraient. */
[data-theme="signal"] .site-nav {
  display: block;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 16px var(--gut) 0;
  /* Fondu et non transparent : la barre flotte à 16 px du haut, et ce qui
   * défilait dans cette bande (un bouton plein, surtout) y apparaissait tranché
   * net au-dessus de la carte. */
  background: linear-gradient(180deg, var(--bg) 0, var(--bg) 12px, rgba(var(--bg-rgb), 0) 100%);
  backdrop-filter: none;
  border-bottom: 0;
}

/* La barre elle-même : une carte flottante, bornée à la mesure du site. */
[data-theme="signal"] .site-nav-in {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 34px;
  height: 60px;
  padding: 0 12px 0 22px;
  background: rgba(var(--panel-rgb), .78);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

[data-theme="signal"] .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -.03em;
  color: var(--fg);
  text-decoration: none;
}
[data-theme="signal"] .site-brand svg { display: block; flex: none; }

/* Les liens sont posés à plat dans un <div>, là où OPS×INTEL les met en <ul> :
 * les règles `.site-nav ul a` de base.css ne matchent donc rien ici. */
[data-theme="signal"] .site-nav-links {
  display: flex;
  gap: 26px;
  margin-left: 6px;
}
[data-theme="signal"] .site-nav-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s;
}
[data-theme="signal"] .site-nav-links a:hover,
[data-theme="signal"] .site-nav-links a.current { color: var(--fg); }

/* `.site-nav-status` hérite de base.css (margin-left:auto, flex, gap:16px) :
 * les deux chartes s'accordent sur ce point, rien à redéfinir. */

/* Bouton « Menu » et son panneau : absents au-dessus de 860 px, où les liens
 * tiennent dans la barre (voir RESPONSIVE). Deux traits en currentColor, qui
 * se croisent quand le panneau est ouvert. */
[data-theme="signal"] .site-nav-burger {
  display: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
[data-theme="signal"] .site-nav-burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: currentColor;
  transition: transform .18s, top .18s;
}
[data-theme="signal"] .site-nav-burger span:first-child { top: 13px; }
[data-theme="signal"] .site-nav-burger span:last-child { top: 20px; }
[data-theme="signal"] .is-open .site-nav-burger span:first-child { top: 17px; transform: rotate(45deg); }
[data-theme="signal"] .is-open .site-nav-burger span:last-child { top: 17px; transform: rotate(-45deg); }
[data-theme="signal"] .site-nav-panel {
  display: none;
  max-width: var(--measure);
  margin: 8px auto 0;
  padding: 8px 0;
  flex-direction: column;
  background: rgba(var(--panel-rgb), .96);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
[data-theme="signal"] .site-nav-panel a {
  padding: 13px 18px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  text-decoration: none;
}
[data-theme="signal"] .site-nav-panel a + a { border-top: 1px solid var(--hairline); }
[data-theme="signal"] .site-nav-panel a.current,
[data-theme="signal"] .site-nav-panel a:hover { color: var(--fg); }

/* ═══════════════════════════════ BOUTONS ═════════════════════════════ */
/* Dans cette charte le bouton plein est CLAIR, pas bleu : le bleu reste
 * l'accent des liens et des marqueurs, et ne sert jamais de fond de bouton.
 * Les lueurs portées d'OPS×INTEL sont donc annulées, pas retouchées. */
[data-theme="signal"] .site-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  /* L'espace de Schibsted Grotesk est étroit (2,9 px à 14 px) et l'approche
   * négative le rogne encore : sur un écran de densité 1, « Sign in » se
   * lisait « Signin ». */
  word-spacing: .1em;
  text-transform: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .18s, background .18s, color .18s;
}
[data-theme="signal"] .site-btn:hover {
  border-color: rgba(var(--white-rgb), .24);
  background: rgba(var(--white-rgb), .04);
  color: var(--fg);
  box-shadow: none;
}
[data-theme="signal"] .site-btn.primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 500;
  box-shadow: none;
}
[data-theme="signal"] .site-btn.primary:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--bg);
  box-shadow: none;
}

/* ═══════════════════════════ COMMUTATEUR DE LANGUE ═══════════════════ */
/* La maquette n'a qu'une mention inerte (« FR / EN »), la production un vrai
 * commutateur à deux boutons. On garde la fonction et on prend la forme : pas
 * de pastille pleine, la langue active est simplement plus claire. */
[data-theme="signal"] .lang-switch {
  border-color: var(--hairline);
  border-radius: 8px;
  font-family: var(--font-mono);
  letter-spacing: .1em;
}
[data-theme="signal"] .lang-switch button {
  padding: 7px 10px;
  color: var(--faint);
}
[data-theme="signal"] .lang-switch button.is-active {
  background: transparent;
  color: var(--fg);
  font-weight: 400;
}

/* ═══════════════════════════════ PIED ════════════════════════════════ */
/* La gouttière n'est PAS portée ici mais par les blocs qu'il contient, comme
 * pour `.sg-wrap` dans css/signal.css : `--gut` s'applique à L'INTÉRIEUR de
 * `--measure`, jamais autour. La poser des deux côtés décalait le pied de 64 px
 * par rapport au reste de la page. */
[data-theme="signal"] .site-footer {
  border-top: 1px solid var(--hairline);
  padding: 72px 0 30px;
  background: var(--bg);
  position: relative;
  z-index: 2;
}
[data-theme="signal"] .site-foot-bot {
  max-width: var(--measure);
  margin: 56px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px var(--gut) 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Pied sans contenu au-dessus de la ligne de bas de page : la marge de 56 px
 * n'a alors rien à séparer. */
[data-theme="signal"] .site-foot-bot:first-child { margin-top: 0; }

/* ═══════════════════════════════ RESPONSIVE ══════════════════════════ */
/* Le seuil est celui de la maquette (860 px), pas celui d'OPS×INTEL (900 px).
 * Entre les deux, les règles ci-dessus l'emportent en spécificité — un
 * sélecteur d'attribut suffit à battre la media query de base.css. */
@media (max-width: 860px) {
  [data-theme="signal"] .site-nav { padding: 10px var(--gut) 0; }
  [data-theme="signal"] .site-nav-in { gap: 12px; height: 54px; padding: 0 10px 0 16px; }
  [data-theme="signal"] .site-nav-links { display: none; }
  [data-theme="signal"] .site-nav-burger { display: block; }
  [data-theme="signal"] .site-nav-panel:not([hidden]) { display: flex; }
  [data-theme="signal"] .site-btn { padding: 10px 14px; font-size: 13.5px; }
}
/* Téléphone : la barre porte la marque, le commutateur et deux boutons. En
 * français (« Se connecter ») elle dépassait de 23 px à 360 px de large, et le
 * bouton « Démo » sortait de la carte dès 390 px. On resserre les espacements
 * plutôt que de retirer un élément. */
@media (max-width: 420px) {
  [data-theme="signal"] .site-nav-in { gap: 8px; padding: 0 8px 0 12px; }
  [data-theme="signal"] .site-brand { gap: 7px; font-size: 16px; }
  [data-theme="signal"] .site-nav-status { gap: 6px; }
  [data-theme="signal"] .lang-switch button { padding: 7px 7px; }
  [data-theme="signal"] .site-btn { padding: 9px 10px; font-size: 13px; white-space: nowrap; }
}
/* Même resserrée, la barre (marque, commutateur, « Se connecter », bouton
 * Menu) ne tient plus en français sous 360 px, ni en anglais sous 340 px : on
 * garde alors le logo seul — le lien porte déjà aria-label="Sivotis".
 * font-size: 0 masque le mot sans toucher au composant, le SVG ayant une
 * taille fixe. `lang` est posé sur <html> par i18n.js. Le seuil français était
 * de 400 px tant que la barre portait aussi le bouton « Démo ». */
@media (max-width: 359px) {
  html[lang="fr"][data-theme="signal"] .site-brand { font-size: 0; gap: 0; }
}
@media (max-width: 340px) {
  [data-theme="signal"] .site-brand { font-size: 0; gap: 0; }
}