/* ============================================================
   MBEZORA — Visuel du pôle « Cybersécurité » (pages/services.php)
   ------------------------------------------------------------
   Fichier : assets/css/services-securite.css
   Chargé par services.php via $page_css.
   Réutilise .sv-mock et .sv-mock-bar de main.css ;
   la variable --sv porte la couleur du pôle (#DC2626).
============================================================ */

.sv-sec-body { padding: 1.25rem; background: #F8FAFF; display: grid; gap: 1.1rem; }

/* ---- Jauge d'exposition ---- */
.sv-sec-score { display: flex; align-items: center; gap: 1.1rem; }
.sv-sec-gauge { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.sv-sec-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sv-sec-track {
  fill: none;
  stroke: #E2E8F5;
  stroke-width: 10;
}
.sv-sec-fill {
  fill: none;
  stroke: var(--sv, #DC2626);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 302;                 /* 2 × π × 48 */
  stroke-dashoffset: 302;
  animation: sv-sec-gauge 1.4s cubic-bezier(.22,1,.36,1) forwards .3s;
}
@keyframes sv-sec-gauge { to { stroke-dashoffset: 115; } }   /* environ 62 % */

.sv-sec-gauge b {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);

  font-size: 1.25rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sv-sec-gauge small { font-size: .62rem; font-weight: 600; color: var(--text-muted); }

.sv-sec-score strong { display: block; color: var(--text); font-size: .95rem; }
.sv-sec-score span { display: block; margin-top: .15rem; color: var(--text-muted); font-size: .8rem; }

/* ---- Constats, révélés l'un après l'autre ---- */
.sv-sec-list { display: grid; gap: .45rem; }
.sv-sec-list li {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .55rem .8rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--g, #DC2626);
  color: var(--text);
  font-size: .82rem; line-height: 1.45;
  opacity: 0;
  animation: sv-sec-in .45s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--d) * .22s + .5s);
}
@keyframes sv-sec-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.sv-sec-list b {
  flex-shrink: 0;
  padding: .1rem .5rem;
  border-radius: 50px;
  background: color-mix(in srgb, var(--g, #DC2626) 14%, #fff);
  color: color-mix(in srgb, var(--g, #DC2626) 85%, #0F172A);
  font-size: .7rem; font-weight: 800;
}
.sv-sec-list i { margin-left: auto; color: var(--text-muted); font-size: .62rem; }
.sv-sec-list em {
  flex-shrink: 0;
  padding: .1rem .5rem;
  border-radius: 50px;
  background: #DCFCE7;
  color: #15803D;
  font-style: normal;
  font-size: .7rem; font-weight: 700;
}

/* ---- Pied ---- */
.sv-sec-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap;
  padding-top: .6rem;
  border-top: 1px dashed var(--border);
  font-size: .74rem;
}
.sv-sec-ok { display: inline-flex; align-items: center; gap: .4rem; color: var(--sv, #DC2626); font-weight: 700; }
.sv-sec-meta { color: var(--text-muted); }

@media (max-width: 640px) {
  .sv-sec-body { padding: 1rem .9rem; gap: .85rem; }
  .sv-sec-gauge { width: 72px; height: 72px; }
  .sv-sec-list i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-sec-list li { opacity: 1; animation: none; }
  .sv-sec-fill { animation: none; stroke-dashoffset: 115; }
}