/* Ambiance « Charbon ardent » (T-050, issue de design/braises/d.css) : fond de charbon de bois et braises qui palpitent.
   CSS seul pour l'animation (opacity uniquement) ; images same-origin (CSP img-src 'self'). Réglage « Ambiance : braises »
   dans Compte → classe `effet-off` sur <html>. Pause quand l'onglet est caché → classe `onglet-cache` (js/ui/ambiance.js). */

.charbon {
  position: fixed; inset: 0; z-index: -1;            /* derrière tout le contenu (le fond de body passe sur le canvas) */
  pointer-events: none; overflow: hidden; contain: strict;
  background: #0d0a08 url('../images/charbon-froid.webp') 0 0 / 512px 512px repeat;
}
/* Braises : un seul motif aligné sur le charbon froid (même tuile, même origine) ; seule l'intensité respire. */
.braises { position: absolute; inset: 0; animation: charbon-declin 75s ease-in-out infinite; }
.braise {
  position: absolute; inset: 0;
  background: url('../images/braise-chaude.webp') 0 0 / 512px 512px repeat;
  opacity: 0; will-change: opacity;
}
.b1 { animation: charbon-pulse1 8s ease-in-out infinite; }
.b2 { animation: charbon-pulse2 13s ease-in-out -5s infinite; mix-blend-mode: screen; }

/* Voile : adoucit le centre (zone de texte) et ancre le haut/bas */
.voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 5, 3, .6), rgba(8, 5, 3, .35) 30%, rgba(8, 5, 3, .35) 70%, rgba(8, 5, 3, .5)),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(8, 5, 3, .35), transparent 80%);
}
@keyframes charbon-declin { 0%, 100% { opacity: 1; } 55% { opacity: .35; } 75% { opacity: .5; } }
@keyframes charbon-pulse1 { 0%, 100% { opacity: .78; } 50% { opacity: .32; } }
@keyframes charbon-pulse2 { 0%, 100% { opacity: .05; } 50% { opacity: .30; } }

/* Fonds opaques → semi-opaques : le charbon transparaît dans les marges et légèrement sous les blocs (texte ≥ 7:1) */
.carte { background-color: rgba(26, 22, 18, .9); }
.barre-haute, .nav-bas { background-color: rgba(20, 16, 13, .94); }
/* Onglets : l'indice de défilement (dégradés « local » aux bords) reprend la même teinte en rgba, sans texture */
.onglets {
  background:
    linear-gradient(90deg, rgba(20, 16, 13, .94) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(270deg, rgba(20, 16, 13, .94) 30%, transparent) right center / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(201, 169, 97, 0.45), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(201, 169, 97, 0.45), transparent) right center / 14px 100% no-repeat scroll,
    rgba(20, 16, 13, .94);
}
.feuille { background-color: rgba(20, 16, 13, .96); }
.toast { background-color: rgba(45, 36, 25, .97); }
.b-verrou { background-color: rgba(42, 34, 24, .93); }
.b-edition { background-color: rgba(31, 42, 23, .93); }
.b-erreur { background-color: rgba(42, 22, 22, .93); }
.b-hors-ligne { background-color: rgba(42, 31, 18, .93); }
.b-mj { background-color: rgba(42, 34, 16, .93); }

/* Grain de charbon commun : uniquement sur les blocs à fond coloré (jamais sur un fond transparent : bande grise claire
   en soft-light). Les onglets (dégradés) et .btn-lien / boutons « fantômes » n'en reçoivent pas. */
.carte, .barre-haute, .nav-bas, .bandeau, .feuille, .toast, .btn,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background-image: url('../images/charbon-froid.webp');
  background-size: 256px 256px;
  background-blend-mode: soft-light;
}
.carte, .bandeau, .feuille, .toast { box-shadow: inset 0 -12px 16px -14px rgba(255, 100, 30, .22), inset 0 1px 0 rgba(255, 190, 120, .05); }
.barre-haute { box-shadow: 0 6px 16px -10px rgba(255, 100, 20, .5); }

/* Réglage « Ambiance : braises » désactivé : charbon froid seul, plus de grain ni de liseré */
.effet-off .braises { display: none; }
.effet-off :is(.carte, .barre-haute, .nav-bas, .bandeau, .feuille, .toast, .btn, input, select, textarea) { background-image: none; box-shadow: none; }

/* Onglet caché : pause des animations */
.onglet-cache .braises, .onglet-cache .braise { animation-play-state: paused; }

/* Mouvement réduit : image fixe à mi-intensité */
@media (prefers-reduced-motion: reduce) {
  .braises, .braise { animation: none; }
  .b1 { opacity: .6; } .b2 { opacity: .12; }
}