/* En-tête commun (03.11.2026) : le même sur toutes les pages, site public et application (/app, tableau de contrôle).
   Edouard : « j'aimerais que le header reste stable, peu importe la page ». Logo, puis Accueil, Impact Engine et
   Tarifs, au même endroit, à la même taille, dans la même police partout ; à droite, ce qui est propre à la page
   (connexion ou menu du compte sur le site, analyse en cours, solde, aide, thème et compte dans l'application).
   Pages publiques : <header class="quambio-header entete">, lien vers ce fichier après mobile.css, qui l'emporte sur
   les styles écrits dans chaque page (sélecteurs plus précis). Application : App.barre de /app/socle.js, couleurs de
   son thème par les variables --entete-* posées dans /app/app.css. Fixé en haut pendant le défilement partout.
   Dès 1024 px : une ligne, conteneur de 1180 px centré comme les pages publiques. En dessous : deux lignes, le logo
   et la droite de la page (bouton du tiroir du site, boutons de l'application), puis les trois liens.
   Mesures contrôlées au pixel par tools/refonte/verifier_app.js (section « En-tête identique partout »). */
.entete {
  position: sticky; top: 0; z-index: 50;
  --entete-lien: rgba(24, 53, 80, 0.65);
  --entete-lien-survol: #183550;
  --entete-actif: #1669c1;
  --entete-actif-fond: rgba(30, 136, 229, 0.12);
  --entete-actif-trait: rgba(30, 136, 229, 0.35);
}
/* hauteur fixe : ce qui est à droite (propre à chaque page) ne peut ni grandir ni tasser l'en-tête */
.entete > .nav {
  box-sizing: border-box; max-width: 1180px; height: 84px; min-height: 0; margin: 0 auto; padding: 20px 32px;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 24px;
}
.entete > .nav > .brand {
  display: flex; align-items: center; flex: none; gap: 0; margin: 0; padding: 0; line-height: 0; text-decoration: none;
}
.entete > .nav > .brand img { display: block; width: auto; height: 27.5px; margin: 0; border-radius: 0; }  /* logo : moitié de 44 px, puis 25 % de plus (05.11.2026) */
.entete .liens-site { display: flex; align-items: center; flex: none; gap: 4px; margin: 0; padding: 0; }
.entete .liens-site a {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 42px; margin: 0;
  padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: transparent;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 600;
  line-height: 1; letter-spacing: normal; white-space: nowrap; text-decoration: none; color: var(--entete-lien);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.entete .liens-site a:hover { color: var(--entete-lien-survol); background: var(--entete-actif-fond); }
.entete .liens-site a[aria-current="page"] {
  color: var(--entete-actif); border-color: var(--entete-actif-trait); background: var(--entete-actif-fond);
}
/* la droite de la page : connexion et menu du compte (site), boutons de l'application */
.entete > .nav > .menu, .entete > .nav > .barre-droite { margin-left: auto; }

@media (max-width: 1023.98px) {
  .entete > .nav {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 46px 32px; height: 106px;
    align-items: center; column-gap: 8px; row-gap: 6px; padding: 14px 16px 8px;
  }
  .entete > .nav > .brand { grid-column: 1; grid-row: 1; }
  .entete > .nav > .brand img { height: 27.5px; border-radius: 0; }
  .entete .liens-site { grid-column: 1 / -1; grid-row: 2; }
  .entete .liens-site a { height: 32px; padding: 0 12px; font-size: 14px; }
  .entete > .nav > .menu, .entete > .nav > .barre-droite { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
}

/* sous 400 px, les quatre liens tiennent sur la ligne (« What's next » dépassait de 6 px en anglais, 06.11.2026) */
@media (max-width: 400px) {
  .entete .liens-site a { padding: 0 9px; }
}