/* En-tête commun à toutes les pages du site (accueil, pages de présentation, aide, licences, comptes).
   Le fond reprend le haut du ciel de la photo du Mont-Blanc de l'accueil. */
.entete-site { position: sticky; top: 0; z-index: 100;   /* menu fixe pendant le défilement */
  background: linear-gradient(180deg, rgba(10,24,40,0.45) 0%, rgba(10,24,40,0.28) 100%),
    url(/presentation/img/hero-mont-blanc.jpg) center top / cover no-repeat, #5f93b8;
  box-shadow: 0 6px 18px -10px rgba(10,24,40,0.5); }
.entete-site li { margin: 0; }
.entete-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.entete-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 26px/1 "Barlow Condensed", sans-serif; }
.entete-logo img { width: 34px; height: 34px; }
.entete-site ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.entete-site ul a { color: #fff; text-decoration: none; font: 500 16px/1.2 Inter, sans-serif; opacity: .92; }
.entete-site ul a:hover, .entete-site ul a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.entete-site .entete-jouer { display: inline-flex; padding: 10px 18px; border-radius: 999px; background: #f2a531; color: #231500; font-weight: 600; font-size: 15px; opacity: 1; }
.entete-site .entete-jouer:hover { background: #ffb547; text-decoration: none; }
@media (max-width: 960px) { .entete-site .entete-section { display: none; } }
@media (max-width: 520px) {
  .entete-wrap { gap: 10px; }
  .entete-logo { font-size: 22px; white-space: nowrap; }
  .entete-logo img { width: 28px; height: 28px; }
  .entete-site ul { gap: 14px; }
  .entete-site ul a { white-space: nowrap; font-size: 15px; }
  .entete-site .entete-jouer { padding: 9px 14px; }
  .entete-site .entete-long { display: none; }
}

/* profil connecté : photo (ou initiales) et nom, en haut à droite */
.entete-profil { display: inline-flex; align-items: center; gap: 9px; }
.entete-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #f2a531; color: #231500; font: 700 13px/1 Inter, sans-serif; letter-spacing: .02em;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.entete-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entete-nom { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .entete-nom { display: none; } }

/* nom et devise : on comprend tout de suite qu'on vole à plusieurs */
.logo-nom { display: flex; flex-direction: column; line-height: 1; }
.logo-nom small { font: 500 12.5px/1.2 Inter, system-ui, sans-serif; color: rgba(255,255,255,0.82); margin-top: 3px; letter-spacing: 0.01em; }
@media (max-width: 640px) { .logo-nom small { display: none; } }   /* petits écrans : le titre de la page porte le message */

/* offre de lancement */
.offre-bandeau { background: #b5157a; color: #fff; }
.offre-bandeau p { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 10px 0; font: 500 15px/1.4 Inter, system-ui, sans-serif; color: #fff; }   /* prime sur le style des paragraphes de la page */
.offre-bandeau a { color: #fff; font-weight: 600; }
.offre-hero { display: inline-block; margin: 22px 0 0; padding: 8px 14px; border-radius: 999px; background: #b5157a; color: #fff; font: 500 15px/1.3 Inter, system-ui, sans-serif; }
.offre-hero b { font-weight: 700; }
.formule .offre-prix { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(181,21,122,0.1); color: #b5157a; font-size: 14px; font-weight: 600; }
.formule.phare .offre-prix { background: rgba(242,165,49,0.16); color: #f2a531; }