/* VIRTEON — fenetre des simulateurs, ouverte par l'entree de menu Simulators.
   Les quatre blocs flottent au-dessus de la page courante ; aucune navigation. */

.simlayer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
  /* Pas de flou sur la page : elle doit rester nette et reconnaissable,
     sinon on croit avoir change de page. Seul un voile sombre la recule. */
  background: rgba(2, 6, 12, .78);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.simlayer.open { opacity: 1; visibility: visible; }

.simlayer-inner {
  width: 100%; max-width: 900px;
  margin: auto;
  transform: translateY(16px);
  transition: transform .34s cubic-bezier(.2,.8,.3,1);
}
.simlayer.open .simlayer-inner { transform: none; }

/* Cadre de titre */
.simhead {
  position: relative;
  padding: 22px 26px 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(112,190,255,.30);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,24,44,.96), rgba(6,20,38,.92));
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  text-align: center;
}
.simhead .eyebrow { margin-bottom: 12px; }
.simhead h2 {
  margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #fff;
}
.simhead p { margin: 0; font-size: 15px; color: rgba(255,255,255,.72); }

.simclose {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(112,190,255,.28);
  background: rgba(74,168,255,.10);
  color: #cfe8ff; font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.simclose:hover { background: rgba(74,168,255,.22); transform: rotate(90deg); }

/* Les quatre blocs */
.simgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* une dernière carte seule occupe toute la largeur */
.simgrid > .simcard:last-child:nth-child(odd) { grid-column: 1 / -1; }

.simcard {
  position: relative; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  padding: 26px 24px; min-height: 184px;
  border: 1px solid rgba(112,190,255,.26);
  border-radius: 20px;
  background: #061426;
  box-shadow: 0 22px 48px rgba(0,0,0,.45);
  opacity: 0;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Vue du simulateur, floutee, sous le texte */
.simcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--shot); background-size: cover; background-position: center;
  opacity: 1;
  transform: scale(1.04);
  transition: opacity .25s ease, transform .4s ease;
}
/* Voile sombre : c'est lui qui garantit la lisibilite du texte */
.simcard::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(4,14,28,.38), rgba(4,12,24,.72) 52%, rgba(4,12,24,.88));
}
.simcard:hover::before { opacity: 1; transform: scale(1.08); }

.simcard[data-sim="protection"]   { --shot: url("sim/protection.jpg"); }
.simcard[data-sim="emt"]          { --shot: url("sim/emt.jpg"); }
.simcard[data-sim="ems"]          { --shot: url("sim/ems.jpg"); }
.simcard[data-sim="network"]      { --shot: url("sim/network.jpg"); }
.simcard[data-sim="oscilloscope"] { --shot: url("sim/oscilloscope.jpg"); }

/* Bandeau en diagonale sur ce qui n'est pas encore ouvert */
.simribbon {
  position: absolute; top: 16px; right: -46px; z-index: 2;
  width: 180px; padding: 6px 0;
  transform: rotate(38deg);
  text-align: center;
  background: linear-gradient(135deg, rgba(74,168,255,.92), rgba(31,114,255,.92));
  color: #fff; font-size: 10.5px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.simlayer.open .simcard { animation: simrise .46s cubic-bezier(.2,.8,.3,1) forwards; }
.simlayer.open .simcard:nth-child(1) { animation-delay: .06s; }
.simlayer.open .simcard:nth-child(2) { animation-delay: .12s; }
.simlayer.open .simcard:nth-child(3) { animation-delay: .18s; }
.simlayer.open .simcard:nth-child(4) { animation-delay: .24s; }
.simlayer.open .simcard:nth-child(5) { animation-delay: .30s; }

@keyframes simrise {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.simcard:hover {
  transform: translateY(-4px);
  border-color: rgba(114,220,255,.55);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.simcard .ic, .simcard h3, .simcard p, .simcard .tag { position: relative; z-index: 1; }
.simcard .ic { font-size: 25px; color: #72dcff; margin-bottom: 12px; }
.simcard h3 { margin: 0 0 .4em; font-size: 19px; color: #eaf6ff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.simcard p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.85); }
.simcard .tag {
  display: inline-block; margin-top: 14px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid rgba(112,190,255,.22);
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #72dcff;
}
.simcard.soon { cursor: default; }
.simcard.soon::before { opacity: .62; }
.simcard.soon:hover::before { opacity: .62; transform: scale(1.04); }
.simcard.soon h3 { color: rgba(234,246,255,.78); }
.simcard.soon p { color: rgba(255,255,255,.58); }
.simcard.soon .ic { color: rgba(114,220,255,.6); }
.simcard.soon:hover { transform: none; border-color: rgba(112,190,255,.26); box-shadow: 0 22px 48px rgba(0,0,0,.45); }
.simcard.soon .tag { color: rgba(255,255,255,.55); }

body.simlayer-open { overflow: hidden; }

@media (max-width: 760px) {
  .simlayer { padding: 18px 14px; align-items: flex-start; }
  .simgrid { grid-template-columns: 1fr; gap: 10px; }
  .simcard { min-height: 0; padding: 18px 16px; }
  .simcard p { font-size: 14px; }
  .simhead { padding: 44px 20px 16px; }
  .simclose { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .simlayer, .simlayer-inner, .simcard { transition: none; }
  .simlayer.open .simcard { animation: none; opacity: 1; }

}

/* ═══════════ Pastille ambre sur l'entree Simulators du menu ═══════════ */
.nav a[href$="simulators.html"]::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
  background: #ffc24a;
  box-shadow: 0 0 8px rgba(255,194,74,.85);
  animation: simpulse 2.8s ease-in-out infinite;
}
@keyframes simpulse {
  0%, 100% { opacity: .45; box-shadow: 0 0 5px rgba(255,194,74,.45); }
  50%      { opacity: 1;   box-shadow: 0 0 11px rgba(255,194,74,.95); }
}
/* Lueur unique a la premiere visite, posee par le script puis retiree */
.nav a[href$="simulators.html"].simglint {
  color: #ffd98a;
  text-shadow: 0 0 14px rgba(255,194,74,.7);
  transition: color .5s ease, text-shadow .5s ease;
}

/* ═══════════ Bande simulateurs sur la page d'accueil ═══════════ */
.simband {
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 56px 40px;
  position: relative; z-index: 1;
}
.simband-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 34px;
  align-items: center;
  padding: 34px 36px;
  border: 1px solid rgba(255,194,74,.26);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(255,194,74,.10), transparent 60%),
    linear-gradient(180deg, #071829, #04101f);
  background-color: #04101f;
}
.simband-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.simband-copy p {
  margin: 0 0 22px;
  color: rgba(255,255,255,.74);
  font-size: 16px; line-height: 1.6;
}
.simband-copy .eyebrow {
  border-color: rgba(255,194,74,.32);
  background: rgba(255,194,74,.10);
  color: #ffd98a;
}
.simband-copy .eyebrow::before { background: #ffc24a; box-shadow: 0 0 8px #ffc24a; }

.simband-btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  font-weight: 800; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: #0d1a07;
  background: linear-gradient(135deg, #ffd166, #ffb020);
  border: 1px solid rgba(255,214,120,.65);
  transition: transform .18s ease, box-shadow .2s ease;
}
.simband-btn:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255,194,74,.35); }

.simband-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border: 1px solid rgba(112,190,255,.28);
  background: url("sim/banner.jpg") center/cover no-repeat, #04101f;
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
.simband-shot::after {
  content: ""; position: absolute; inset: 0; border-radius: 17px;
  background: linear-gradient(180deg, rgba(4,16,31,0) 55%, rgba(4,16,31,.55));
}

@media (max-width: 1120px) { .simband { padding: 6px 28px 34px; } }
@media (max-width: 860px) {
  .simband { padding: 4px 18px 28px; }
  .simband-inner { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .simband-shot { order: -1; }
  .simband-btn { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a[href$="simulators.html"]::before { animation: none; opacity: 1; }
}

/* Le mot souligne de la bande suit l'ambre, pas le bleu du reste du site */
.simband-copy .gradient-text {
  background: linear-gradient(135deg, #ffd166, #ffb020);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}