/* =============================================================================
   L'EN-TÊTE DU SITE — une seule définition pour toutes les pages
   -----------------------------------------------------------------------------
   Chaque page portait sa propre barre : 1160 px sur l'accueil, 790 sur le blog
   et les guides, 760 sur les pages légales, avec trois boutons différents
   (dégradé à quatre ombres sur l'accueil, violet plat ailleurs). Mesuré le
   25/09/2026 sur 13 pages types. Demande de l'opérateur : la barre de
   l'accueil, partout, au pixel près.

   Les règles visent `header.entete` et ses enfants DIRECTS, jamais `.wrap` ou
   `.btn` tout court : sur le blog, `.wrap` règle aussi la largeur du texte des
   articles, et `.btn` sert à d'autres boutons dans les pages. La spécificité
   (header.entete …) l'emporte sur les anciennes règles de chaque page, qui
   peuvent rester sans rien casser.

   Valeurs recopiées de index.html (entête, .btn, .btn-encre) — c'est elle la
   référence. Couleurs écrites en clair : les pages ne définissent pas toutes
   les mêmes jetons (--lav-chaud, --halo-fort n'existent que sur l'accueil).
   ============================================================================= */

header.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(10,8,17,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid #241f36
}
header.entete > .wrap{
  display:flex;align-items:center;gap:26px;height:68px;
  max-width:1160px;margin:0 auto;padding:0 22px;position:relative;box-sizing:border-box
}
header.entete > .wrap > .logo{
  display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.035em;
  font-size:18px;line-height:1;color:#fffdf8;white-space:nowrap;text-decoration:none
}
header.entete > .wrap > .logo:hover{color:#fffdf8}

/* le bouton principal EST la source de lumière de la barre : un dégradé et une
   ombre de SA couleur, en quatre couches (liseré, lueur proche, bloom large,
   reflet intérieur) — la recette de l'accueil et de la caisse */
header.entete .btn-entete{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-left:auto;padding:10px 20px;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:14.5px;line-height:1.65;letter-spacing:-.01em;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;
  background:linear-gradient(135deg,#9670ff 0%,#b06bff 100%);color:#0b0814;
  box-shadow:
    0 0 0 1px rgba(188,163,255,.5),
    0 6px 18px -6px rgba(150,112,255,.7),
    0 16px 44px -14px rgba(150,112,255,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .15s ease, box-shadow .2s, background .15s, border-color .15s
}
header.entete .btn-entete:hover{
  transform:translateY(-2px);color:#0b0814;
  background:linear-gradient(135deg,#a888ff 0%,#c084ff 100%);
  box-shadow:
    0 0 0 1px rgba(188,163,255,.75),
    0 8px 24px -6px rgba(150,112,255,.85),
    0 24px 64px -16px rgba(150,112,255,.66),
    inset 0 1px 0 rgba(255,255,255,.36)
}
header.entete .btn-entete:focus-visible{outline:2px solid #bca3ff;outline-offset:3px}

@media(max-width:520px){
  header.entete > .wrap{gap:12px;height:60px;padding:0 16px}
  header.entete > .wrap > .logo{font-size:16px;gap:9px}
  header.entete .btn-entete{padding:9px 16px;font-size:13.5px}
}
@media(max-width:420px){
  header.entete > .wrap{gap:10px}
  header.entete > .wrap > .logo{font-size:15.5px}
  header.entete .btn-entete{padding:8px 14px;font-size:12.5px}
}
@media(max-width:380px){
  header.entete > .wrap{padding:0 14px}
}
/* L'accueil seul a un menu (burger) qui porte aussi « Open my wallet » : sous
   355 px il y cache le bouton. Les autres pages n'ont pas de menu et gardent
   donc leur seul appel à l'action. */
@media(max-width:355px){
  header.entete.avec-menu .btn-entete{display:none}
}