.site-header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  padding: 16px 48px;
  background: rgba(5, 12, 32, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 120;
}

.has-fixed-header {
  padding-top: 88px;
}

.site-header .logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 0;
}

.site-header .logo img {
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

.site-header .logo span {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-header .nav-container {
  display: flex;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.site-header .user-box {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.site-header .user-box .user-badges {
  margin: 0;
}

.site-header .user-dropdown {
  position: relative;
  z-index: 160;
}

.site-header .user-dropdown .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Bloc utilisateur (haut a droite) ─────────────────────────────────
   Les trois elements avaient le meme poids : trois pastilles bordees et
   degradees, dont un badge Admin dore hors palette. Rien n'indiquait quoi
   regarder. On hierarchise : le credit est une information, Admin un
   raccourci discret, Espace client la seule action. */

/* Information : pas de cadre, pas de fond. Le solde se lit, il ne se clique
   pas en priorite. */
.site-header .user-credit {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  gap: 0.4rem;
  padding: 0.25rem 0.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-header .user-credit-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.site-header .user-credit-value {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  /* Chiffres a chasse fixe : le solde ne saute plus horizontalement quand il
     change, et les milliers s'alignent. */
  font-variant-numeric: tabular-nums;
}

.site-header .user-credit-link { text-decoration: none; }
.site-header .user-credit-link:hover .user-credit-value { color: var(--accent-3); }

/* Raccourci d'administration : sobre. L'ambre le faisait passer pour une
   alerte, et jurait avec le bleu de la marque. */
.site-header .user-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.site-header .user-admin-link:hover {
  color: #fff;
  border-color: var(--accent-1);
}

/* Espace entreprise : meme traitement que le raccourci Admin.
   Il aurait pu prendre l'aplat bleu de « Espace client », mais deux aplats
   cote a cote se disputent le regard et aucun ne ressort — or c'est bien
   l'espace client que les deux mènent a ouvrir. */
.site-header .user-company-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.site-header .user-company-link:hover {
  color: #fff;
  border-color: var(--accent-1);
}

/* Deja sur la page : un reperage, pas une cible. Il ne reagit donc pas au
   survol et ne prend pas le curseur du lien. */
.site-header .user-company-link.is-current {
  color: #fff;
  border-color: var(--accent-1);
  background: var(--surface-2);
  cursor: default;
}

/* Action principale : le seul aplat de la zone. */
.site-header .user-client-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-xs);
  border: 1px solid #2f7bf5;
  background: var(--accent-1);
  transition: background 0.16s ease;
}

.site-header .user-client-link:hover {
  background: var(--accent-3);
}

.site-header .user-client-current {
  color: #f2f7ff;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.2rem 0.1rem;
}

.site-header .user-dropdown .dropdown-menu {
  right: 0;
  left: auto;
  transform: none;
  top: 100%;
  margin-top: 0;
  min-width: 190px;
}

.site-header #navbar .dropdown > .dropdown-menu {
  left: 0;
  right: auto;
  transform: none;
}

.site-header nav a {
  text-decoration: none;
  color: #e7edff;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
  border-radius: 10px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header nav a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(17, 96, 224, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.site-header nav a:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(17, 96, 224, 0.35);
  border-color: rgba(17, 96, 224, 0.7);
}

.site-header .dropdown {
  position: relative;
}

.site-header .dropdown > a::after {
  content: "▼";
  font-size: 0.6rem;
  margin-left: 6px;
  opacity: 0.7;
  vertical-align: middle;
}

.site-header .dropdown-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: linear-gradient(135deg, rgba(5, 12, 32, 0.95), rgba(12, 32, 70, 0.92));
  border: 1px solid rgba(17, 96, 224, 0.35);
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 140;
  padding: 0.35rem 0;
}

.site-header .dropdown-menu li {
  list-style: none;
}

.site-header .dropdown-menu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.78rem 1.05rem;
  color: #e7edff;
  transition: background-color 0.18s ease, padding-left 0.18s ease;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
}

.site-header .dropdown-menu li a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1160e0, #2f7bf5);
  opacity: 0.75;
}

.site-header .user-dropdown .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

.site-header .dropdown-menu li a:hover {
  background-color: rgba(17, 96, 224, 0.16);
  padding-left: 1.2rem;
  border: none;
  box-shadow: none;
}

.site-header .dropdown:hover .dropdown-menu {
  display: flex;
}

.site-header #auth-btn-placeholder {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 170;
}

.site-header .user-box {
  max-width: 100%;
  overflow: visible;
}

.site-header .user-name {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header #loginBtn {
  display: inline-flex;
  padding: 10px 18px;
  background: linear-gradient(90deg, #1160e0, #2f7bf5);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* Ombre neutre : un halo bleu porte sous le bouton de connexion, present sur
     toutes les pages, etait le detail le plus visible du gabarit. La lumiere ne
     prend pas la couleur de l'objet qu'elle eclaire. */
  box-shadow: 0 4px 12px rgba(3, 8, 20, 0.45);
  transition: background 0.18s ease, border-color 0.18s ease;
}

/* Au survol : la couleur, rien d'autre. Le bouton qui se souleve de deux pixels
   a chaque passage de souris est un tic, pas une information. */
.site-header #loginBtn:hover {
  background: linear-gradient(90deg, #2f7bf5, #3d86f7);
}

.site-header .menu-toggle {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #fff;
  user-select: none;
}

#cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  max-width: 340px;
  background: #0c1328;
  color: #f5f7ff;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid rgba(17, 96, 224, 0.35);
  box-shadow: 0 14px 28px rgba(5, 12, 32, 0.55);
  z-index: 1000;
}

#cookie-banner p {
  margin: 0 0 10px 0;
  line-height: 1.45;
}

#cookie-banner button {
  background: linear-gradient(135deg, #1160e0, #2f7bf5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#cookie-banner button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(17, 96, 224, 0.35);
}

/* ── Bande intermediaire : la barre retrecit au lieu de deborder ────────
   Entre le grand ecran et le menu burger, sept entrees plus le bloc credit
   ne tiennent plus. Les liens etant en `white-space: nowrap`, la barre ne
   se comprimait pas : elle debordait, et « Contact » venait se poser sur le
   solde. Les deux paliers fixes d'avant (0.95rem puis rien) laissaient une
   plage entiere sans solution.

   Taille, espacement et remplissage suivent desormais la largeur de fenetre
   en continu. Les bornes de `clamp()` sont des garde-fous : jamais plus gros
   qu'avant, jamais en dessous de 0.8rem — sous cette taille on gagne
   quelques pixels contre de la lisibilite, ce qui n'est pas un echange
   acceptable. En dessous, c'est le burger qui prend le relais. */
@media (max-width: 1440px) {
  .site-header nav {
    gap: clamp(0.12rem, 0.5vw - 0.3rem, 0.5rem);
  }

  .site-header nav a {
    padding: 0.45rem clamp(0.4rem, 0.85vw - 0.35rem, 0.9rem);
    font-size: clamp(0.8rem, 0.5vw + 0.36rem, 1rem);
  }
}

@media (max-width: 1280px) {
  .site-header {
    padding: 14px 20px;
    gap: 0.6rem;
  }

  .site-header .logo span {
    display: none;
  }

  .site-header .logo img {
    width: 48px;
    height: auto;
  }

  .site-header .user-name {
    max-width: 130px;
  }

  .site-header #auth-btn-placeholder {
    margin-left: auto;
    max-width: calc(100vw - 96px);
  }
}

/* Passage au menu burger.
   Releve de 1160 a 1240 px : la barre compte une entree de plus depuis que
   l'hebergement web y figure, et le texte fluide ci-dessus ne rattrape la
   difference que jusque-la. En dessous, mieux vaut un menu franc que sept
   libelles ecrases. */
@media (max-width: 1240px) {
  .has-fixed-header {
    padding-top: 82px;
  }

  .site-header {
    padding: 12px 14px;
    gap: 0.55rem;
  }

  .site-header .logo span {
    display: none;
  }

  .site-header .logo img {
    width: 46px;
    height: auto;
  }

  .site-header .nav-container {
    flex: 0;
  }

  .site-header #auth-btn-placeholder {
    margin-left: auto;
    max-width: calc(100vw - 130px);
  }

  .site-header .user-box {
    gap: 0.45rem;
  }

  .site-header .user-box .user-badges {
    display: none;
  }

  .site-header .user-credit {
    padding: 0.2rem 0;
    font-size: 0.76rem;
    box-shadow: none;
    /* Plus de max-width fixe : elle tronquait purement et simplement les
       soldes a plusieurs milliers d'euros. */
  }

  .site-header .user-credit-label {
    display: none;
  }

  .site-header .user-credit-value {
    font-size: 0.76rem;
  }

  .site-header .user-admin-link,
  .site-header .user-company-link {
    padding: 0.2rem 0.42rem;
    font-size: 0.64rem;
    border-radius: 8px;
  }

  .site-header .user-dropdown .nav-link {
    padding: 0.45rem 0.6rem;
    max-width: clamp(92px, 26vw, 140px);
    font-size: 0.85rem;
  }

  .site-header .user-name {
    max-width: clamp(72px, 22vw, 120px);
  }

  .site-header nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 66px;
    left: auto;
    right: 8px;
    background: rgba(5, 12, 32, 0.95);
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.8rem 0.4rem;
    z-index: 40;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }

  .site-header nav > a,
  .site-header nav .dropdown > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    font-size: 0.95rem;
    padding: 0.65rem 0.8rem;
  }

  .site-header #navbar .dropdown-menu {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0.15rem 0 0.1rem;
    background: transparent;
  }

  .site-header #navbar .dropdown {
    width: 100%;
  }

  .site-header #navbar .dropdown-menu li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0.6rem 0.9rem 0.6rem 1.05rem;
    margin-left: 0;
    width: 100%;
  }

  .site-header #navbar .dropdown > .dropdown-menu {
    left: auto;
    right: auto;
  }

  .site-header .dropdown > a::after {
    margin-left: auto;
  }

  .site-header .user-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: min(220px, 88vw);
    transform: none;
    padding: 0.35rem 0;
    background: linear-gradient(135deg, rgba(5, 12, 32, 0.95), rgba(12, 32, 70, 0.92));
    border: 1px solid rgba(17, 96, 224, 0.35);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    z-index: 72;
  }

  .site-header .user-dropdown .dropdown-menu li a {
    padding: 0.7rem 0.9rem;
  }

  .site-header .dropdown:hover .dropdown-menu {
    display: none;
  }

  .site-header .dropdown.open .dropdown-menu {
    display: flex;
  }

  .site-header nav.active {
    display: flex;
  }

  .site-header .menu-toggle {
    display: block;
    line-height: 1;
  }

  #cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .site-header #auth-btn-placeholder {
    max-width: calc(100vw - 120px);
  }

  /* Sous 480 px il ne reste de la place que pour l'action principale. Les
     deux raccourcis disparaissent ensemble : la barre laterale de l'espace
     client mene aux memes pages, une fois entre. */
  .site-header .user-admin-link,
  .site-header .user-company-link {
    display: none;
  }

  .site-header .user-credit {
    display: none;
  }

  .site-header #loginBtn {
    padding: 8px 10px;
    font-size: 0.84rem;
  }

  .site-header .menu-toggle {
    font-size: 1.6rem;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header .logo {
    display: flex;
  }

  .site-header .logo img {
    width: 42px;
    height: auto;
  }

  .site-header #auth-btn-placeholder {
    max-width: calc(100vw - 72px);
  }
}

/* Navigation: links breathe without a separate frame around every label. */
.site-header { padding:14px clamp(16px,2.5vw,48px); gap:1.25rem; background:rgba(6,12,28,.96); }
.site-header .logo img { width:48px; height:48px; object-fit:contain; }
.site-header nav { gap:.35rem; }
.site-header nav > a, .site-header nav > .dropdown > a { display:flex; align-items:center; min-height:44px; box-sizing:border-box; border:0; border-radius:6px; padding:.6rem .7rem; font-size:.88rem; font-weight:600; background:transparent; box-shadow:none; }
.site-header nav > a:hover, .site-header nav > .dropdown > a:hover { background:#ffffff08; color:#fff; box-shadow:none; }
.site-header a:focus-visible, .site-header button:focus-visible { outline:2px solid #79aaff; outline-offset:3px; }
.site-header .dropdown-menu { background:#101a2e; border-radius:8px; }
.site-header .dropdown:focus-within > .dropdown-menu { display:flex; }
.site-header .menu-toggle { background:transparent; border:1px solid var(--border-strong,#283b59); border-radius:8px; padding:.45rem; min-width:44px; min-height:44px; flex-shrink:0; }
@media(max-width:1240px) {
  .site-header { height:72px; padding:10px 16px; gap:.7rem; }
  .has-fixed-header { padding-top:72px; }
  .site-header .logo img { width:42px; height:42px; }
  .site-header nav { top:100%; left:0; right:0; width:auto; max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); gap:4px; border-radius:0 0 12px 12px; background:#0c1424; box-sizing:border-box; }
  .site-header nav > a, .site-header nav > .dropdown > a { width:100%; min-height:48px; font-size:.95rem; padding:.7rem .85rem; border-bottom:1px solid #ffffff07; }
  .site-header nav > .dropdown { width:100%; }
  .site-header nav .dropdown-menu { margin:0 0 .5rem .65rem; padding:.2rem 0; border:0; border-left:2px solid #2f7bf5; border-radius:0; background:#ffffff03; }
  .site-header nav .dropdown-menu a { min-height:44px; box-sizing:border-box; font-size:.88rem; white-space:normal; }
  .site-header .dropdown:not(.open):focus-within > .dropdown-menu { display:none; }
  .site-header .user-dropdown .nav-link { min-height:44px; align-items:center; }
}
@media(max-width:480px) {
  .site-header { padding-left:12px; padding-right:12px; }
  .site-header #auth-btn-placeholder { max-width:calc(100vw - 126px); }
}

/* ── Espace (header.js) ──────────────────────────────────────────────────────
   Un lien texte discret a gauche de « Se connecter » : « Entreprise » sur le
   site, « Particulier » cote pro. Visible sans voler la vedette au bouton. Il
   disparait une fois connecte (le compte decide). Sur mobile : dans le menu. */
.site-header [hidden] { display:none !important; }
.site-header .espace-link--bar { display:inline-flex; align-items:center; min-height:40px; padding:0 .4rem; color:#c9d6f2; font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap; flex-shrink:0; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; }
.site-header .espace-link--bar:hover { color:#fff; border-bottom-color:rgba(255,255,255,.35); }
.site-header nav > a.espace-link--menu { display:none; }

/* Cote pro : « Pro » sous « Friday », meme police. */
.site-header .logo .logo-name { display:inline-flex; flex-direction:column; line-height:1.05; }
.site-header .logo .logo-pro { font:inherit; font-size:.72em; color:#c9d6f2; letter-spacing:.02em; }

@media (max-width:760px) {
  .site-header .espace-link--bar { display:none; }
  .site-header nav > a.espace-link--menu:not([hidden]) { display:flex; }
}
/* Bandeau d'information (header.js, fdNotice) : sous l'en-tete, centre. */
.fd-notice { position:fixed; top:88px; left:50%; z-index:1200; transform:translate(-50%,-12px); max-width:min(560px,calc(100vw - 32px)); padding:.8rem 1.1rem; border:1px solid rgba(111,174,255,.45); border-radius:12px; background:#0d1a33; color:#e6eeff; font:500 .92rem/1.45 Poppins,system-ui,sans-serif; text-align:center; box-shadow:0 16px 34px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.fd-notice.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:1240px) { .fd-notice { top:82px; } }