/* Page de la formation EBIOS RM (layouts/_default/ebios.html), chargée par
   cette page seule (paramètre « css »). Charte : nuit #1a1a2e, vert profond
   #003926, vert du logo #8cbf43. Contrastes WCAG AA vérifiés en modes clair
   et sombre (scripts/audit-accessibilite.mjs). */
:root {
  --eb-nuit: #1a1a2e;
  --eb-vert: #003926;
  --eb-accent: #8cbf43;
  --eb-texte: #1f2328;
  --eb-doux: #4a5058;
  --eb-carte: #ffffff;
  --eb-fond: #f3f6f2;
  --eb-bord: #dfe5dc;
  --eb-titre: #003926;
  --eb-lien: #00704a;
  /* Ateliers : couleurs du schéma ANSSI, assombries pour le texte blanc. */
  --eb-a1: #b8006b;
  --eb-a2: #6c2a6a;
  --eb-a3: #00756f;
  --eb-a4: #7a6d0f;
  --eb-a5: #c0283a;
}
[data-bs-theme="dark"] {
  --eb-texte: #e3e6ea;
  --eb-doux: #b4bcc6;
  --eb-carte: #23233a;
  --eb-fond: #1b1b2c;
  --eb-bord: #34344e;
  --eb-titre: #a9d97a;
  --eb-lien: #9fd36b;
}

/* En-tête */
.eb-hero {
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 85% 20%, rgba(140,191,67,.28), transparent 45%),
    linear-gradient(135deg, var(--eb-nuit) 0%, var(--eb-vert) 100%);
  padding: 4.5rem 0 4rem;
}
.eb-kicker {
  display: inline-block; margin-bottom: 1rem; padding: .3rem .8rem;
  border: 1px solid rgba(140,191,67,.6); border-radius: 999px;
  color: #cfe8b0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.eb-titre { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 1rem; }
.eb-accroche { font-size: 1.2rem; line-height: 1.55; color: #e4eadf; max-width: 38rem; }
.eb-chips { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.eb-chips li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem;
  border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .95rem;
}
.eb-chips i { color: var(--eb-accent); }

.eb-session {
  background: var(--eb-carte); color: var(--eb-texte); border-radius: 14px; padding: 1.8rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); border-top: 5px solid var(--eb-accent);
}
.eb-session-titre { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--eb-doux); margin-bottom: .3rem; }
.eb-session-date { font-size: 1.6rem; font-weight: 700; color: var(--eb-titre); margin-bottom: .4rem; line-height: 1.2; }
.eb-session-date span::first-letter { text-transform: uppercase; }
.eb-session-detail { color: var(--eb-doux); margin-bottom: 1.2rem; }
.eb-btn-principal { background: var(--eb-accent); color: var(--eb-nuit); font-weight: 700; border: 0; }
.eb-btn-principal:hover, .eb-btn-principal:focus { background: #a3d65a; color: var(--eb-nuit); }
.eb-btn-secondaire { border: 2px solid var(--eb-titre); color: var(--eb-titre); font-weight: 600; background: transparent; }
.eb-btn-secondaire:hover, .eb-btn-secondaire:focus { background: var(--eb-titre); color: var(--eb-carte); }

/* Sections */
.eb-section { padding: 4rem 0; background: var(--bs-body-bg); color: var(--eb-texte); }
.eb-fond { background: var(--eb-fond); }
.eb-h2 { font-size: 2rem; font-weight: 750; color: var(--eb-titre); margin-bottom: .8rem; }
.eb-intro { font-size: 1.1rem; color: var(--eb-doux); max-width: 46rem; margin-bottom: 2rem; }

/* Les cinq ateliers */
.eb-ateliers { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(5, 1fr); }
.eb-atelier {
  position: relative; background: var(--eb-carte); border: 1px solid var(--eb-bord); border-radius: 12px;
  padding: 1.3rem 1.1rem 1.1rem; border-top: 6px solid var(--eb-c);
  transition: transform .2s, box-shadow .2s;
}
.eb-atelier:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.eb-a1 { --eb-c: var(--eb-a1); } .eb-a2 { --eb-c: var(--eb-a2); } .eb-a3 { --eb-c: var(--eb-a3); }
.eb-a4 { --eb-c: var(--eb-a4); } .eb-a5 { --eb-c: var(--eb-a5); }
/* Numéro dans un losange (comme sur le schéma ANSSI) : le fond tourne,
   pas le chiffre. */
.eb-atelier-num {
  position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  margin: .2rem 0 .8rem .2rem; color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1; z-index: 0;
}
.eb-atelier-num::before {
  content: ""; position: absolute; inset: .35rem; z-index: -1; border-radius: 5px;
  background: var(--eb-c); transform: rotate(45deg);
}
.eb-atelier h3 { font-size: 1rem; font-weight: 700; color: var(--eb-texte); margin-bottom: .4rem; }
.eb-atelier p { font-size: .95rem; color: var(--eb-doux); margin: 0; }

.eb-figure { margin: 0; text-align: center; }
.eb-figure img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.eb-figure figcaption { font-size: .85rem; color: var(--eb-doux); margin-top: .6rem; }

/* Programme */
.eb-jour { background: var(--eb-carte); border: 1px solid var(--eb-bord); border-radius: 14px; padding: 1.6rem; height: 100%; }
.eb-jour-nom { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--eb-lien); margin-bottom: 1rem; }
.eb-demi { display: flex; gap: 1rem; padding: .9rem 0; }
.eb-demi + .eb-demi { border-top: 1px dashed var(--eb-bord); }
.eb-demi-num {
  flex: 0 0 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--eb-vert); color: #fff; font-weight: 800; font-size: 1.1rem;
}
[data-bs-theme="dark"] .eb-demi-num { background: var(--eb-accent); color: var(--eb-nuit); }
.eb-demi h3 { font-size: 1.1rem; font-weight: 700; color: var(--eb-texte); margin-bottom: .3rem; }
.eb-demi p { color: var(--eb-doux); margin: 0; }

/* Informations pratiques */
.eb-info { height: 100%; padding: 1.4rem; border-radius: 12px; background: var(--eb-fond); border: 1px solid var(--eb-bord); }
.eb-info i { font-size: 1.5rem; color: var(--eb-lien); margin-bottom: .7rem; }
.eb-info h3 { font-size: 1.05rem; font-weight: 700; color: var(--eb-texte); }
.eb-info p { color: var(--eb-doux); margin: 0; font-size: .95rem; }
.eb-carte { height: 100%; padding: 1.8rem; border-radius: 14px; background: var(--eb-carte); border: 1px solid var(--eb-bord); }
.eb-carte h2 { color: var(--eb-titre); font-weight: 700; }
.eb-carte p { color: var(--eb-doux); }
.eb-mesure { border-left: 6px solid var(--eb-accent); }
.eb-formateur-nom { font-size: 1.25rem; font-weight: 700; color: var(--eb-texte) !important; margin-bottom: 0; }
.eb-formateur-role { font-size: .95rem; margin-bottom: .8rem; }
.eb-formateur a, .eb-referentiel a { color: var(--eb-lien); font-weight: 600; }
.eb-referentiel { margin: 2rem 0 0; font-size: .9rem; color: var(--eb-doux); }

/* Appel final */
.eb-fin { padding: 3.5rem 0; background: linear-gradient(135deg, var(--eb-vert), var(--eb-nuit)); color: #fff; }
.eb-fin h2 { font-weight: 800; color: #fff; }
.eb-fin p { color: #e4eadf; font-size: 1.1rem; margin-bottom: 1.4rem; }

@media (max-width: 991.98px) {
  .eb-ateliers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .eb-hero { padding: 3rem 0; }
  .eb-ateliers { grid-template-columns: 1fr; }
  .eb-section { padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-atelier, .eb-atelier:hover { transition: none; transform: none; }
}