/* EPSI.exe — styles communs à toutes les pages (mobile d'abord + animations) */
:root{--bg:#171130;--panel:#261e48;--panel2:#2f2659;--line:#3d3375;--text:#ecebf5;--muted:#a39fc0;
  --green:#8fc056;--yellow:#fad154;--orange:#e58240;--red:#db4759;--purple:#935a9e;--indigo:#4b4b99;--cyan:#38b8d6}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img{max-width:100%}

/* bandeau arc-en-ciel animé */
.rainbow{background-size:200% 100%!important;animation:epsi-slide 12s linear infinite}
.rainbow{background-image:linear-gradient(90deg,var(--green),var(--yellow),var(--orange),var(--red),var(--purple),var(--indigo),var(--cyan),var(--green))!important}
@keyframes epsi-slide{to{background-position:200% 0}}

/* en-tête collant + menu mobile */
header{position:sticky;top:0;z-index:50;background:rgba(23,17,48,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:0 -16px;padding-left:16px!important;padding-right:16px!important}
header img{transition:transform .4s}
header:hover img{transform:rotate(-8deg) scale(1.08)}
.nav-toggle{display:none;margin-left:auto;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;width:44px;height:44px;font-size:22px;cursor:pointer}
header nav a{transition:background .2s,color .2s}
header nav a:hover{color:var(--cyan)}

@media (max-width:760px){
  .nav-toggle{display:block}
  header{flex-wrap:wrap}
  header nav{display:none!important;width:100%;flex-direction:column;gap:4px!important;padding:8px 0 12px;margin-left:0!important}
  header.open nav{display:flex!important;animation:epsi-drop .25s ease-out}
  header nav a{padding:12px 14px!important;font-size:16px!important;background:var(--panel);border-radius:10px}
  h1{font-size:30px!important;line-height:1.15}
  section,.card{padding:16px!important;border-radius:12px!important}
  table{font-size:13px!important}
  code{white-space:normal!important;word-break:break-word}
  .btn,button{min-height:44px}
}
@keyframes epsi-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* apparition au défilement */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* cartes : léger soulèvement */
.card,.step,.stat,section,.pr{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
@media (hover:hover){
  .card:hover,.step:hover,.stat:hover,.pr:hover{transform:translateY(-4px);box-shadow:0 14px 34px #0006}
}

/* logo qui flotte */
.float{animation:epsi-float 5s ease-in-out infinite}
@keyframes epsi-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.5deg)}}

/* point « en ligne » qui pulse */
.dot.on{animation:epsi-pulse 2s ease-out infinite}
@keyframes epsi-pulse{0%{box-shadow:0 0 0 0 #8fc05699}70%{box-shadow:0 0 0 10px #8fc05600}100%{box-shadow:0 0 0 0 #8fc05600}}

/* fond de petits cubes flottants */
#cubes{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}

/* pour ceux qui ne veulent pas d'animations */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #cubes{display:none}
}

/* carte « client conseillé : Dawn » (accueil + guide) */
.dawn{display:flex;align-items:center;gap:18px;margin-top:16px;padding:18px 20px;border-radius:16px;text-decoration:none;color:var(--text);
  background:linear-gradient(135deg,#2b1a0e 0%,#1f1433 70%);border:1px solid #ff8a1f55;box-shadow:0 0 0 1px #ff8a1f1f,0 18px 50px #ff6a0022;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.dawn:hover{transform:translateY(-2px);border-color:#ff8a1f99;box-shadow:0 0 0 1px #ff8a1f55,0 22px 60px #ff6a0044}
.dawn-icon{width:84px;height:84px;flex:none;filter:drop-shadow(0 10px 22px #ff6a0066)}
.dawn-txt{flex:1;min-width:0}
.dawn-badge{display:inline-block;background:linear-gradient(90deg,#ff8a1f,#ffb300);color:#1a0f05;font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;border-radius:6px;padding:2px 8px}
.dawn-logo{display:block;height:34px;width:auto;margin:8px 0 6px}
.dawn p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.dawn p b{color:var(--text)}
.dawn-os{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dawn-os span{font-size:12px;font-weight:700;border:1px solid #ff8a1f55;border-radius:99px;padding:2px 10px;color:#ffb46b}
.dawn-btn{flex:none;background:linear-gradient(90deg,#ff8a1f,#ffb300);color:#1a0f05;font-weight:800;font-size:14px;padding:11px 18px;border-radius:10px;box-shadow:0 8px 24px #ff8a1f44}
@media (max-width:760px){.dawn{flex-wrap:wrap;gap:14px}.dawn-icon{width:64px;height:64px}.dawn-btn{width:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.dawn,.dawn:hover{transition:none;transform:none}}