/* base.css */

/* 1. On stabilise les bases */
html {
  overflow: hidden; /* Empêche le rebond du scroll sur tout le document */
  height: 100%;
}

body {
  height: 100%;
  overflow-y: auto; /* Le scroll se passe ici maintenant, pas sur le html */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
  background-color: #000;
  margin: 0;
  padding-top: 60px;
  box-sizing: border-box; /* scroll-fix-marker : inclure le padding dans les 100% pour ne plus rogner 60px en bas */
  font-family: monospace;
}

/* 2. Le fond qui ne bougera PLUS JAMAIS */
body::before {
  content: "";
  position: fixed;
  /* On utilise les pixels physiques plutôt que les % ou vh */
  inset: 0; 
  width: 100vw;
  /* On utilise 'fill-available' pour dire : prends toute la place possible sans recalculer */
  height: -webkit-fill-available;
  height: 100%;
  
  background: url(https://cizi.fr/web_images/9c0722106004343.5f85fead2894a.gif) no-repeat center center;
  background-size: cover;
  
  /* On le sort du flux de rendu habituel */
  z-index: -1;
  transform: translateZ(0);
  will-change: transform;
}

a { color: inherit; text-decoration: none; }
/* ... reste du code inchangé ... */

:root {
  --fg:       rgba(240,235,220,0.9);
  --fg-dim:   rgba(240,235,220,0.55);
  --fg-faint: rgba(240,235,220,0.3);
  --bd:       rgba(240,235,220,0.2);
  --bd-hover: rgba(240,235,220,0.5);
  --bg-soft:  rgba(0,0,0,0.5);
  --bg-hover: rgba(255,255,255,0.08);
  --red-loc:  rgba(220,80,80,0.95);

  --content-max: 2000px;       /* largeur max du contenu sur grand écran */
}

/* ─── Marges latérales transparentes sur grand écran ─── */
.header {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
/* La slim reste en pleine largeur (style barre d'OS) */

.btn-round {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--fg-faint);
  background: var(--bg-soft);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px; font-weight: bold;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1;
  padding: 0;
}
.btn-heart:hover {
  border-color: #ff4d6d;
  color: #ff4d6d;
  background: rgba(255,77,109,0.1);
}
.btn-qmark:hover {
  border-color: var(--bd-hover);
  color: rgba(240,235,220,0.98);
  background: var(--bg-hover);
}

.btn-fullscreen {
  width: 32px; height: 32px;
  background: var(--bg-soft);
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-fullscreen:hover {
  border-color: var(--bd-hover);
  background: var(--bg-hover);
  color: rgba(240,235,220,0.98);
}
.btn-fullscreen svg { width: 16px; height: 16px; }

#hearts-rain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}
.heart {
  position: absolute; top: -40px;
  color: #ff4d6d;
  text-shadow: 0 0 10px rgba(255,77,109,0.6);
  animation: fall linear forwards;
  user-select: none;
}
@keyframes fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* nav-boutons-globaux-marker (06/09/2026) — BUG 20260906-102159
   « doubler la taille » : 66 → 96px, comme la pastille de Vision (w-24), pour
   que le même geste marche des deux côtés du site. Le bouton retour reprend
   exactement la même apparence, posé au milieu du bord gauche.
   Les deux ne sont rendus que hors accueil, cf. gabarits/pied.php. */
/* retour-moins-40-marker (08/09/2026) — BUG 20260907-221417 « bouton de retour
   à réduire de 40% partout ». 96 -> 58, 80 -> 48, chevron 56 -> 34 et 48 -> 29
   (arrondis a l'entier le plus proche). Le pendant Vision, components/
   nav-buttons.tsx, applique exactement les memes valeurs : les deux doivent
   rester d'accord, c'est le meme geste d'un ecran a l'autre.
   Le bouton « remonter en haut » n'est PAS touche : la demande ne visait que
   le retour. Ils ne sont donc plus de la meme taille — si l'ecart te gene,
   c'est ici et dans #scroll-top qu'il faut trancher. */
#nav-back {
  position: fixed;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  z-index: 150;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--bd);
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.6;
  transition: opacity 0.25s, background 0.2s, border-color 0.2s;
}
#nav-back:hover { opacity: 1; background: rgba(0,0,0,0.8); border-color: var(--bd-hover); }
#nav-back svg { width: 34px; height: 34px; display: block; }

@media (max-width: 640px) {
  #nav-back { width: 48px; height: 48px; left: 8px; }
  #nav-back svg { width: 29px; height: 29px; }
}

/* Bouton remonter en haut */
#scroll-top {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 150;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--bd);
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, background 0.2s, border-color 0.2s;
}
#scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#scroll-top:hover {
  background: rgba(0,0,0,0.8);
  border-color: var(--bd-hover);
}

/* nav-boutons-globaux-marker — 22 → 56px, comme le chevron de Vision (h-14). */
.icon-chevron-up {
  width: 56px; height: 56px;
  display: block;
}
@media (max-width: 640px) {
  .icon-chevron-up { width: 48px; height: 48px; }
  #scroll-top { width: 80px; height: 80px; }
}
.icon-chevron-up polyline {
  transition: transform 0.25s ease;
  transform-origin: center;
}
#scroll-top:hover .icon-chevron-up polyline:last-child {
  transform: translateY(-3px);
}
#scroll-top:hover .icon-chevron-up polyline:first-child {
  transform: translateY(-1px);
}

/* Bloc de page : largeur max + marges, partagé entre icônes, outils, etc. */
.bloc-page {
  /* largeur-contenu-marker (11/09/2026) — la valeur vit dans styles/topbar.css
     (:root), seul fichier que Vision charge aussi. Le repli garde la page
     lisible si topbar.css venait à manquer. */
  max-width: var(--cizi-contenu-max, 1080px);
  margin: 0 auto;
  padding: 14px;
}