/* ============================================================
   PES-TOGO — Catalogue Solaire — background.css
   Fond dégradé animé (très doux) avec un léger grain, aux couleurs
   de l'application : bleu marine #02245B, orange #FF5E14, crème.
   Chargé après index.html et about.css : il ne fait que surcharger
   le fond et rendre les barres translucides.
   ============================================================ */

html{background:var(--paper);}
body{background:transparent;}

/* Quatre halos flous qui dérivent lentement (seul « transform » est animé :
   rendu par le GPU, sans recalcul de la page). Le grain est une petite tuile
   PNG répétée par-dessus. */
.bg-fx{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(165deg,#FFFDF9 0%,#FBF4EA 46%,#F0E9E1 100%);
}
.bg-fx i{position:absolute;display:block;border-radius:50%;will-change:transform;}
.bg-fx .b1{ /* orange, en haut à gauche */
  width:62vmax;height:62vmax;left:-20vmax;top:-26vmax;
  background:radial-gradient(closest-side,rgba(255,94,20,.24),rgba(255,94,20,0));
  animation:fx-drift-1 38s ease-in-out infinite alternate;
}
.bg-fx .b2{ /* bleu marine, à droite */
  width:58vmax;height:58vmax;right:-22vmax;top:4vmax;
  background:radial-gradient(closest-side,rgba(2,36,91,.20),rgba(2,36,91,0));
  animation:fx-drift-2 46s ease-in-out infinite alternate;
}
.bg-fx .b3{ /* pêche (#FFB58F, déjà utilisé dans l'appli), en bas à gauche */
  width:52vmax;height:52vmax;left:4vmax;bottom:-28vmax;
  background:radial-gradient(closest-side,rgba(255,181,143,.42),rgba(255,181,143,0));
  animation:fx-drift-3 52s ease-in-out infinite alternate;
}
.bg-fx .b4{ /* bleu plus clair, en bas à droite */
  width:46vmax;height:46vmax;right:2vmax;bottom:-20vmax;
  background:radial-gradient(closest-side,rgba(58,96,168,.16),rgba(58,96,168,0));
  animation:fx-drift-4 42s ease-in-out infinite alternate;
}
.bg-fx::after{
  content:"";position:absolute;inset:0;
  background:url('assets/noise.png') repeat;background-size:128px 128px;
}
@keyframes fx-drift-1{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(16vmax,12vmax,0) scale(1.18);}}
@keyframes fx-drift-2{from{transform:translate3d(0,0,0) scale(1.1);}to{transform:translate3d(-14vmax,10vmax,0) scale(.92);}}
@keyframes fx-drift-3{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(18vmax,-8vmax,0) scale(1.2);}}
@keyframes fx-drift-4{from{transform:translate3d(0,0,0) scale(.95);}to{transform:translate3d(-12vmax,-12vmax,0) scale(1.12);}}
@media (prefers-reduced-motion:reduce){.bg-fx i{animation:none;}}

/* Barres translucides : le dégradé transparaît à travers */
.topbar{
  background:rgba(251,248,243,.74);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
}
.about-nav{
  background:rgba(251,248,243,.74);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);
}
.tabbar{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
}

/* Le même grain adoucit les bannières bleu marine */
.hero::after,.about-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('assets/noise.png') repeat;background-size:128px 128px;opacity:.9;
}
.about-hero{position:relative;overflow:hidden;}
.about-hero-inner{position:relative;z-index:1;}

/* La pastille des numéros de prestations reprenait le fond crème uni : on l'adapte au dégradé */
.steps>li::before{box-shadow:0 0 0 4px rgba(255,255,255,.8),0 6px 12px -6px rgba(2,36,91,.45);}

/* Carte de la page « À propos », graphiques et cartes de la section Innovations */
.a-card .led-chart{margin-top:18px;}
.a-card .innov-shot{margin:16px 0 0;}
.presence-map{margin:26px auto 0;max-width:680px;}
.cert-row{margin-top:22px;}

/* Panneau admin fermé : son ombre ne doit pas déborder sur le bord droit de l'écran */
.admin-drawer:not(.active){box-shadow:none;visibility:hidden;transition:transform .25s ease,visibility 0s .25s;}

/* Espace entre les deux cartes d'innovation et le bloc « Mode de fonctionnement » */
.card-grid + .innov-grid{margin-top:34px;}