/* =============================================================================
  COTE — ambiances
  ---------------------------------------------------------------------------
  Fichier      : assets/css/ambiances.css
  Version      : 2.0.0
  Modifié le   : 2026-09-06
  Rôle         : palettes immersives, fonds animés et effets d'interface
  Licence      : © 2026 Émile Snyers — voir LICENCE.txt
  Dépendances  : tokens.css

  Une ambiance remplace la palette du thème clair ou sombre et anime le fond.
  Toutes les animations respectent « animations réduites » et la préférence
  système prefers-reduced-motion.
   ============================================================================= */

/* --- Couche de fond, derrière tout le contenu ------------------------------ */
#ambiance{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
[data-ambiance="aucune"] #ambiance{ display:none; }
.entete, main, .pied{ position:relative; z-index:1; }

/* --- Forêt ----------------------------------------------------------------- */
[data-ambiance="foret"]{
  --pap:#101b13; --pap-2:#16261b; --pap-3:#1e3325;
  --enc:#e6f2e8; --enc-2:#adc6b4; --enc-3:#7d9a86;
  --trait:#27412f; --trait-fort:#3c6147; --grille:rgba(180,230,195,.05);
  --acc:#6fc98a; --acc-2:#8ed9a4; --acc-doux:rgba(111,201,138,.14); --acc-texte:#08210f;
  --sch-fond:#0d1811; --sch-piece:rgba(180,230,195,.05); --sch-trait:#dff0e4;
  --sch-cote:#6fc98a; --sch-axe:#547a5f; --sch-percage:rgba(111,201,138,.14);
}
[data-ambiance="foret"] #ambiance{
  background:radial-gradient(120% 80% at 50% 0%, #1b3222 0%, #101b13 60%);
}
[data-ambiance="foret"] .feuille{
  position:absolute; top:-6%; width:10px; height:14px; border-radius:60% 5% 60% 5%;
  background:rgba(111,201,138,.30); animation:tombe linear infinite;
}
@keyframes tombe{
  0%{ transform:translateY(-10vh) rotate(0deg); opacity:0 }
  10%{ opacity:.8 }
  90%{ opacity:.5 }
  100%{ transform:translateY(110vh) translateX(60px) rotate(420deg); opacity:0 }
}

/* --- Nucléaire ------------------------------------------------------------- */
[data-ambiance="nucleaire"]{
  --pap:#0a1520; --pap-2:#0f1f2d; --pap-3:#152a3b;
  --enc:#e4f6ff; --enc-2:#a2c6da; --enc-3:#6f93a8;
  --trait:#1d394c; --trait-fort:#2f5a75; --grille:rgba(120,230,255,.05);
  --acc:#4fd6c1; --acc-2:#7ee6d6; --acc-doux:rgba(79,214,193,.14); --acc-texte:#04231e;
  --sch-fond:#081320; --sch-piece:rgba(120,230,255,.05); --sch-trait:#dcf3ff;
  --sch-cote:#4fd6c1; --sch-axe:#4a7288; --sch-percage:rgba(79,214,193,.14);
}
[data-ambiance="nucleaire"] #ambiance{
  background:radial-gradient(70% 55% at 50% 108%, rgba(79,214,193,.22) 0%, transparent 62%),
             radial-gradient(100% 70% at 50% 0%, #12283a 0%, #0a1520 65%);
}
[data-ambiance="nucleaire"] #ambiance::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 40% at 50% 100%, rgba(126,230,214,.18), transparent 70%);
  animation:pulseNucleaire 6s ease-in-out infinite;
}
@keyframes pulseNucleaire{ 0%,100%{ opacity:.4 } 50%{ opacity:.95 } }
[data-ambiance="nucleaire"] .particule{
  position:absolute; bottom:-4%; width:3px; height:3px; border-radius:50%;
  background:rgba(126,230,214,.85); box-shadow:0 0 8px rgba(126,230,214,.9);
  animation:monteParticule linear infinite;
}
@keyframes monteParticule{
  0%{ transform:translateY(0) scale(.6); opacity:0 }
  15%{ opacity:1 }
  100%{ transform:translateY(-108vh) scale(1.1); opacity:0 }
}

/* --- Océan ----------------------------------------------------------------- */
[data-ambiance="ocean"]{
  --pap:#071a2a; --pap-2:#0c2438; --pap-3:#123048;
  --enc:#e2f2fb; --enc-2:#a3c6db; --enc-3:#6f92ab;
  --trait:#1b3d55; --trait-fort:#2b5c7d; --grille:rgba(150,215,245,.05);
  --acc:#4fb3e8; --acc-2:#7fcbf2; --acc-doux:rgba(79,179,232,.15); --acc-texte:#03202f;
  --sch-fond:#061725; --sch-piece:rgba(150,215,245,.05); --sch-trait:#dbeefb;
  --sch-cote:#4fb3e8; --sch-axe:#48748f; --sch-percage:rgba(79,179,232,.15);
}
[data-ambiance="ocean"] #ambiance{
  background:linear-gradient(180deg, #0d2e46 0%, #071a2a 100%);
}
[data-ambiance="ocean"] #ambiance::before,
[data-ambiance="ocean"] #ambiance::after{
  content:""; position:absolute; left:-50%; width:200%; height:46vh; bottom:-8vh;
  background:radial-gradient(60% 100% at 50% 100%, rgba(79,179,232,.20), transparent 70%);
  border-radius:45%; animation:vague 16s ease-in-out infinite;
}
[data-ambiance="ocean"] #ambiance::after{ bottom:-16vh; opacity:.6; animation-duration:23s; animation-direction:reverse; }
@keyframes vague{
  0%,100%{ transform:translateX(-4%) rotate(-1.2deg) }
  50%{ transform:translateX(4%) rotate(1.2deg) }
}

/* --- Rétro blueprint ------------------------------------------------------- */
[data-ambiance="blueprint"]{
  --pap:#0d2b57; --pap-2:#123367; --pap-3:#183c78;
  --enc:#ffffff; --enc-2:#cddcf5; --enc-3:#9db4dd;
  --trait:#2b4f92; --trait-fort:#4870b8; --grille:rgba(255,255,255,.10);
  --acc:#ffffff; --acc-2:#e6eeff; --acc-doux:rgba(255,255,255,.14); --acc-texte:#0d2b57;
  --sch-fond:#0b2650; --sch-piece:rgba(255,255,255,.06); --sch-trait:#ffffff;
  --sch-cote:#bcd2ff; --sch-axe:#7d9ad4; --sch-percage:rgba(255,255,255,.10);
  --ombre:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.6);
}
[data-ambiance="blueprint"] #ambiance{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    #0d2b57;
}
[data-ambiance="blueprint"] #ambiance::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:balayage 9s linear infinite;
}
@keyframes balayage{ 0%{ top:-2% } 100%{ top:102% } }

/* --- Espace ---------------------------------------------------------------- */
[data-ambiance="espace"]{
  --pap:#080a18; --pap-2:#0e1226; --pap-3:#161b36;
  --enc:#eceaff; --enc-2:#b3b0d8; --enc-3:#807da8;
  --trait:#232a4e; --trait-fort:#3a4478; --grille:rgba(200,200,255,.05);
  --acc:#9b8cf5; --acc-2:#b7abff; --acc-doux:rgba(155,140,245,.16); --acc-texte:#0a0820;
  --sch-fond:#070914; --sch-piece:rgba(200,200,255,.05); --sch-trait:#e6e4ff;
  --sch-cote:#9b8cf5; --sch-axe:#5b5a86; --sch-percage:rgba(155,140,245,.16);
}
[data-ambiance="espace"] #ambiance{
  background:
    radial-gradient(45% 35% at 78% 22%, rgba(155,140,245,.22), transparent 70%),
    radial-gradient(38% 30% at 18% 72%, rgba(90,190,220,.16), transparent 72%),
    #080a18;
}
[data-ambiance="espace"] .etoile{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; animation:scintille ease-in-out infinite;
}
@keyframes scintille{ 0%,100%{ opacity:.15 } 50%{ opacity:1 } }

/* --- Urbain nocturne ------------------------------------------------------- */
[data-ambiance="urbain"]{
  --pap:#12101a; --pap-2:#1a1726; --pap-3:#241f34;
  --enc:#f4eaff; --enc-2:#bfb0d0; --enc-3:#8d7fa3;
  --trait:#2e2740; --trait-fort:#463c62; --grille:rgba(255,180,255,.05);
  --acc:#ff5fa2; --acc-2:#ff8cbd; --acc-doux:rgba(255,95,162,.15); --acc-texte:#2a0616;
  --sch-fond:#100e18; --sch-piece:rgba(255,180,255,.05); --sch-trait:#f6ecff;
  --sch-cote:#ff5fa2; --sch-axe:#6c5f85; --sch-percage:rgba(255,95,162,.15);
}
[data-ambiance="urbain"] #ambiance{
  background:
    radial-gradient(60% 40% at 15% 100%, rgba(255,95,162,.20), transparent 70%),
    radial-gradient(55% 40% at 85% 100%, rgba(95,190,255,.16), transparent 70%),
    linear-gradient(180deg, #191426 0%, #12101a 100%);
}
[data-ambiance="urbain"] #ambiance::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  animation:scanUrbain 7s linear infinite;
}
@keyframes scanUrbain{ 0%{ opacity:.35 } 50%{ opacity:.8 } 100%{ opacity:.35 } }
[data-ambiance="urbain"] .neon{
  position:absolute; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  animation:derive linear infinite; opacity:.5;
}
@keyframes derive{
  0%{ transform:translateX(-30vw) }
  100%{ transform:translateX(130vw) }
}

/* --- Effets d'interface communs aux ambiances ------------------------------ */
html:not([data-ambiance="aucune"]) .bt--acc{ box-shadow:0 0 0 0 var(--acc-doux); transition:box-shadow .25s, transform .1s; }
html:not([data-ambiance="aucune"]) .bt--acc:hover{ box-shadow:0 0 18px -2px var(--acc); }
html:not([data-ambiance="aucune"]) .carte:hover{ box-shadow:0 0 26px -10px var(--acc); }
.bt:active, .calque:active, .carte:active{ transform:translateY(1px) scale(.995); }

/* Transition de page */
#contenu.apparait{ animation:entreePage .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes entreePage{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

[data-anim="non"] #ambiance *, [data-anim="non"] #ambiance::before, [data-anim="non"] #ambiance::after,
[data-anim="non"] #contenu.apparait{ animation:none !important; }
@media (prefers-reduced-motion: reduce){
  #ambiance *, #ambiance::before, #ambiance::after, #contenu.apparait{ animation:none !important; }
}