/* =========================================================
   TRAME.CSS — Structure (Header / Fond / Zone scroll / Footer)
   Compatible avec ton app.css existant
   - Pas de :root
   - Ne touche pas aux composants (cards, btn, etc.)
   - Ne touche pas au widget translate (garde dans app.css)
   ========================================================= */

/* -------- Base / reset minimal -------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

/* -------- Fond fixe sur toute la hauteur --------
   Objectif : un fond type "photo bleu tamisé"
   + plus clair en haut à droite
   + plus sombre en haut et en bas
   + fond non scrollable (fixe)
*/
body{
  min-height: 100vh;

  /* On empêche le body de scroller (c’est .app qui scroll) */
  overflow: hidden;

  /* On ne touche pas à tes couleurs "text" via variables,
     on garde une valeur sûre ici */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  background-color: #071b29;
  background-image:
/* halo clair en haut à droite */
radial-gradient(900px 520px at 88% 10%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
/* léger halo en bas (facultatif) */
radial-gradient(900px 520px at 30% 105%, rgba(11,47,69,.35), rgba(11,47,69,0) 60%),
/* dégradé principal plus sombre haut & bas */
linear-gradient(226deg, #b5d6f2, #228dcf 20.59%, #244995); 
  

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  /* clé : fond fixe */
  background-attachment: fixed;
}

/* Un voile très léger pour "tamisé" (comme ton overlay photo)
   Tu peux réduire/augmenter l’opacité si besoin */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(7,27,41,.08);
  z-index: 0;
}

/* Liens (tu peux laisser ça ici si tu veux séparer la trame)
   sinon tu peux le supprimer */
a{ color: inherit; text-decoration: none; }

/* =========================================================
   1) HEADER : même taille/couleur, MAIS il doit scroller
   => on neutralise le sticky du app.css
   ========================================================= */
.app-header{
  position: relative; /* au lieu de sticky */
  top: auto;
  z-index: 1100;

  /* ton app.css met déjà le fond/blurry etc.
     on ne change pas sa couleur */
}

/* Le header doit rester visuellement au-dessus du voile */
.app-header,
.app-header *{
  position: relative;
  z-index: 2;
}

/* =========================================================
   2) BODY : contenu scrollable, fond fixe
   => ta zone de scroll = .app (elle existe déjà)
   ========================================================= */

/* .app est ton wrapper principal dans app.css
   On le transforme en zone scrollable */
.app{
  position: relative;
  z-index: 1;             /* au-dessus du ::before */
  height: 100vh;          /* occupe la hauteur écran */
  overflow-y: auto;       /* c'est lui qui scrolle */
  -webkit-overflow-scrolling: touch;

  /* IMPORTANT :
     On ajoute un padding-top pour ne pas coller au header
     et surtout un padding-bottom pour ne pas passer sous le footer (.bottom-nav)
     -> Ton app.css avait déjà padding:16px 16px 96px
     -> Ici on garde le principe, mais on l’adapte proprement */
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;

  /* footer (bottom-nav) = fixed, donc reserve la place en bas */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* Sur desktop tu as d'autres tailles max dans app.css,
   on ne touche pas. */

/* =========================================================
   3) FOOTER : toujours visible, background légèrement transparent,
      écriture plus petite et adaptable aux langues
   => tu utilises .bottom-nav dans app.css
   ========================================================= */
.bottom-nav{
  /* ton app.css le met déjà fixed + blur + etc.
     On ne casse pas, on ajuste juste le rendu demandé */
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.28);

  /* Pour que ce soit moins massif visuellement */
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}

/* Texte plus petit pour adaptation langues */
.bn-item{
  font-size: 11.5px;
  line-height: 1.1;
  white-space: nowrap;      /* évite de casser sur 2 lignes */
  overflow: hidden;
  text-overflow: ellipsis;  /* si une langue est trop longue */
}

/* Option : réduire un peu l'espace vertical interne */
.bn-item{
  padding: 8px 6px;
  gap: 3px;
}

/* Si tes labels sont dans un span (selon ton HTML),
   ça aide encore plus */
.bn-item span{
  display: block;
  max-width: 100%;
}

/* =========================================================
   Petits détails iOS / confort
   ========================================================= */
* { -webkit-tap-highlight-color: transparent; }

/* Evite que certains éléments débordent (images etc.) */
img, video { max-width: 100%; height: auto; }