/* ==========================================================================
   Thème Cyber - BTS SIO Bloc 3 (Cybersécurité)
   Utilisation : appliquer class="cyber" sur un <div> ou un conteneur.

   Les couleurs viennent des jetons --sio-* posés par le thème Moodle SIO
   (theme/sio/scss/post.scss). La valeur de repli qui suit la virgule permet
   de relire une page seule dans un navigateur, hors Moodle - c'est le même
   rendu dans les deux cas.

   Le violet reste la couleur du bloc 3, mais posé sur le fond bleu nuit du
   site : plus de pavé violet plein, un panneau sombre à liseré violet.
   ========================================================================== */

.cyber {
  /* Jetons locaux - alias des jetons du site */
  --cy-bg:          var(--sio-violet-soft, #1d1733);
  --cy-panel:       var(--sio-surface, #111a2e);
  --cy-border:      var(--sio-violet-line, #4a3a78);
  --cy-primary:     var(--sio-violet, #b39ddb);
  --cy-primary-dark: var(--sio-violet, #b39ddb);
  --cy-accent:      var(--sio-violet-mid, #7e57c2);
  --cy-text:        var(--sio-text, #d8e6f3);
  --cy-title:       var(--sio-title, #e8f1ff);
  --cy-muted:       var(--sio-muted, #8aa0b3);
  --cy-radius:      var(--sio-radius, 14px);
}

/* Conteneur principal */
.cyber {
  display: block;
  background: var(--cy-bg);
  color: var(--cy-text);
  padding: 18px 20px;
  border-radius: var(--cy-radius);
  border: 1px solid var(--cy-border);
  font-family: inherit;
  line-height: 1.55;
  margin: 0 0 22px 0;
  box-shadow: var(--sio-shadow, 0 10px 30px rgba(0, 0, 0, .45));
}

.cyber * { box-sizing: border-box; }

/* Titres */
.cyber h1,
.cyber h2,
.cyber h3 {
  color: var(--cy-primary);
  font-weight: 700;
  margin-top: 1em;
}

.cyber a {
  color: var(--sio-accent-2, #6dd5ff);
}

/* Bandeau titre de mission */
.cyber .banner {
  color: #fff;
  padding: 15px;
  border-radius: var(--sio-radius-sm, 8px);
  margin-bottom: 20px;
}
.cyber .banner h2 {
  margin: 0;
  color: #fff;
}
.cyber .banner h3 {
  margin-top: 5px;
  color: #fff;
  font-weight: 400;
}
.cyber .banner--violet { background: linear-gradient(135deg, #7e57c2 0%, #5a3a95 100%) !important; }
.cyber .banner--green  { background: linear-gradient(135deg, #2e7d32 0%, #1f5c24 100%) !important; }

/* Encadrés info / vigilance / danger */
.cyber .info {
  background: var(--sio-info-bg, #10243d);
  border: 1px solid var(--sio-info-line, #1d4d7a);
  color: var(--sio-info-text, #bcdcff);
  padding: 12px;
  border-radius: 10px;
  margin: 15px 0;
}
.cyber .warning {
  background: var(--sio-warn-bg, #2b2213);
  border: 1px solid var(--sio-warn-line, #6b4f1a);
  color: var(--sio-warn-text, #ffd98a);
  padding: 12px;
  border-radius: 10px;
  margin: 15px 0;
}
.cyber .danger {
  background: var(--sio-danger-bg, #2e1518);
  border: 1px solid var(--sio-danger-line, #7a2b32);
  color: var(--sio-danger-text, #ffb3b3);
  padding: 12px;
  border-radius: 10px;
  margin: 15px 0;
}

.cyber .info p,
.cyber .warning p,
.cyber .danger p { margin: 0 0 5px 0; }

.cyber .info ul,
.cyber .warning ul,
.cyber .danger ul {
  margin-top: 5px;
  padding-left: 20px;
}

.cyber .info a { color: var(--sio-accent-2, #6dd5ff); text-decoration: none; }
.cyber .info a:hover { text-decoration: underline; }

/* Tableaux */
.cyber table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: var(--cy-panel);
  border: 1px solid var(--cy-border);
  border-radius: 12px;
  overflow: hidden;
}
.cyber table th {
  background: #2a2145;
  color: var(--cy-primary);
  padding: 8px;
  text-align: left;
  border-bottom: 2px solid var(--cy-border);
}
.cyber table td {
  padding: 8px;
  border: 1px solid var(--cy-border);
  color: var(--cy-text);
}

/* Boutons */
.cyber .btn {
  display: inline-block;
  background: var(--cy-accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--sio-radius-sm, 8px);
  text-decoration: none;
}
.cyber .btn:hover {
  background: #9575cd;
  color: #fff;
}

/* Mise en page 2 colonnes */
.cyber .two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
.cyber .column-text p { text-align: justify; }
.cyber .img-fluid {
  width: 100%;
  border-radius: var(--sio-radius-sm, 8px);
  display: block;
}
.cyber img { max-width: 100%; }

@media (max-width: 768px) {
  .cyber .two-columns { grid-template-columns: 1fr; }
}

/* Bloc mission */
.cyber .mission-block { margin-top: 30px; }
.cyber .mission-header {
  background: linear-gradient(135deg, #ab47bc 0%, #7b2d8c 100%);
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 20px;
}
.cyber .mission-header h2,
.cyber .mission-header h3 { color: #fff; margin: 0; }
.cyber .mission-list { padding-left: 20px; }
.cyber .mission-list li { margin-top: 10px; }
.cyber .mission-list li:first-child { margin-top: 0; }

/* Explications repliables */
.cyber details {
  margin: 15px 0;
  background: var(--sio-warn-bg, #2b2213);
  border: 1px solid var(--sio-warn-line, #6b4f1a);
  border-radius: 10px;
  padding: 12px;
  transition: all .3s ease;
}
.cyber details[open] {
  background: #332815;
  border-color: #8a6520;
}

.cyber summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--sio-warn-text, #ffd98a);
  list-style: none;
  user-select: none;
  padding: 8px 0 8px 30px;
  position: relative;
}
.cyber summary::-webkit-details-marker { display: none; }
.cyber summary:hover { color: #ffe9b5; }

.cyber summary:before {
  content: "\25B8";                 /* ▸ */
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-block;
  transition: transform .3s ease;
  color: var(--sio-warn, #ffc857);
}
.cyber details[open] summary:before { transform: rotate(90deg); }

.cyber details .details-content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--sio-warn-line, #6b4f1a);
  color: var(--cy-text);
  animation: sioSlideDown .3s ease;
}

@keyframes sioSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Repliables logés dans un encadré : ils prennent sa couleur */
.cyber .info details {
  background: var(--sio-info-bg, #10243d);
  border-color: var(--sio-info-line, #1d4d7a);
}
.cyber .info details[open] { background: #14304f; }
.cyber .info summary { color: var(--sio-info-text, #bcdcff); }
.cyber .info summary:before { color: var(--sio-accent, #00e5ff); }
.cyber .info details .details-content { border-top-color: var(--sio-info-line, #1d4d7a); }

.cyber .warning details { background: #332815; }
.cyber .warning details[open] { background: #3b2e18; }

.cyber .danger details {
  background: var(--sio-danger-bg, #2e1518);
  border-color: var(--sio-danger-line, #7a2b32);
}
.cyber .danger details[open] { background: #3a1a1e; }
.cyber .danger summary { color: var(--sio-danger-text, #ffb3b3); }
.cyber .danger summary:before { color: var(--sio-danger, #ff6b6b); }
.cyber .danger details .details-content { border-top-color: var(--sio-danger-line, #7a2b32); }

/* Code */
.cyber code {
  background: var(--sio-code-bg, #0d1526);
  color: var(--sio-accent-2, #6dd5ff);
  padding: .15em .4em;
  border-radius: 4px;
  border: 1px solid var(--sio-line, #223355);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .9em;
}

/* --------------------------------------------------------------------------
   Surtitre et bandeau trio

   Ces trois classes ne sont pas préfixées par .cyber dans les pages
   existantes : on garde leur portée d'origine plutôt que de casser le
   balisage déjà écrit.
   -------------------------------------------------------------------------- */
.surtitre {
  text-transform: uppercase;
  font-size: .85em;
  letter-spacing: 2px;
  color: var(--sio-accent-2, #6dd5ff);
  margin-bottom: .5em;
  font-weight: 600;
}

.bandeau-trio {
  display: flex;
  gap: 1em;
  margin-top: 1.5em;
  flex-wrap: wrap;
}
.bandeau-item {
  flex: 1;
  min-width: 200px;
  background: rgba(0, 229, 255, .10);
  border-left: 4px solid var(--sio-accent, #00e5ff);
  padding: 1em;
  border-radius: 0 8px 8px 0;
}
.bandeau-item strong {
  display: block;
  margin-bottom: .5em;
  color: var(--sio-accent-2, #6dd5ff);
  font-size: 1.1em;
}
.bandeau-item p {
  margin: 0;
  font-size: .95em;
  line-height: 1.4;
}

/* Bloc de code multi-lignes */
.cyber .code-block {
  display: block;
  background: var(--sio-code-bg, #0d1526);
  color: var(--sio-code-text, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: .85em;
  padding: 15px;
  border: 1px solid var(--sio-line, #223355);
  border-radius: 8px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: pre;
}

/* Question posée à l'étudiant, avec sa pastille en débord */
.cyber .question {
  background: var(--sio-info-bg, #10243d);
  border: 2px solid var(--sio-info-line, #1d4d7a);
  padding: 20px;
  margin: 25px 0;
  border-radius: 10px;
  position: relative;
}
.cyber .question::before {
  content: "❓";
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: var(--sio-accent-deep, #00b0c7);
  color: #06222b;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: .9em;
}
.cyber .question strong {
  color: var(--sio-info-text, #bcdcff);
}
.cyber .question > strong:first-child {
  font-size: 1.15em;
  display: block;
  margin-bottom: 12px;
  padding-top: 5px;
}

/* ==========================================================================
   Impression - un livre Moodle s'imprime nativement, et une page sombre
   s'imprime illisible : les navigateurs suppriment les fonds mais gardent
   le texte clair. On repasse donc tout en noir sur blanc.
   ========================================================================== */
@media print {
  .cyber,
  .cyber .info,
  .cyber .warning,
  .cyber .danger,
  .cyber details,
  .cyber table,
  .cyber table th,
  .cyber table td,
  .cyber code,
  .cyber .code-block,
  .cyber .question,
  .bandeau-item {
    background: #fff !important;
    color: #111 !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }
  .surtitre,
  .bandeau-item strong,
  .cyber .question strong { color: #14304f !important; }
  .bandeau-item { border-left: 4px solid #14304f !important; }
  .cyber .code-block { border: 1px solid #999 !important; }
  .cyber .question { border: 2px solid #14304f !important; }
  .cyber .question::before {
    background: #fff !important;
    color: #14304f !important;
    border: 1px solid #14304f !important;
  }
  .cyber h1,
  .cyber h2,
  .cyber h3 { color: #4a2d7a !important; }
  .cyber summary { color: #111 !important; }
  .cyber .banner,
  .cyber .mission-header {
    background: #fff !important;
    color: #111 !important;
    border: 2px solid #4a2d7a !important;
  }
  .cyber .banner h2,
  .cyber .banner h3,
  .cyber .mission-header h2,
  .cyber .mission-header h3 { color: #4a2d7a !important; }
  .cyber details { border: 1px solid #999 !important; }
  .cyber details .details-content { border-top-color: #999 !important; }
}