/* Guides illustrés: la mise en page vient de la maquette (styles en ligne);
   ce fichier ne gère que ce que la maquette calculait en JavaScript
   (colonnes selon la largeur, survols, pastilles des figures). */

html, body { margin: 0; background: #070a10; }
body { -webkit-font-smoothing: antialiased; }
a { color: #4d9fff; }
a:hover { color: #64acff; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 400;
  display: inline-block;
}
.ms0 { font-variation-settings: 'FILL' 0, 'wght' 400; }

@keyframes cfPulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Liens (survols repris de la maquette). */
.cfg-back:hover, .cfg-aside-link:hover, .cfg-foot-link:hover { color: #ddeaff !important; }
.cfg-guide-btn:hover { background: rgba(221, 234, 255, .1) !important; }
.cfg-cta-btn:hover { background: #64acff !important; color: #fff !important; }
[aria-current="page"][hreflang] { pointer-events: none; }

/* Figures: la capture est dessinée à sa taille réelle puis réduite. */
.cfg-frame { height: auto !important; }
.cfg-screen { will-change: transform; }

.cfg-mark {
  opacity: 1;
  transform: scale(1);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
    transform .45s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
.cfg-figure.is-pending .cfg-mark { opacity: 0; transform: scale(.4); }
.cfg-figure.is-hot .cfg-mark { opacity: .4; transition-delay: 0ms; }
.cfg-figure.is-hot .cfg-mark.is-hot { opacity: 1; transform: scale(1.18); }
.cfg-mark.is-hot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4d9fff;
  animation: cfPulse 1.4s ease-out infinite;
}

.cfg-leg { background: transparent; }
.cfg-badge { color: #4d9fff; background: transparent; }
.cfg-leg-text { color: #b2bdcf; }
.cfg-figure.is-hot .cfg-leg-text { color: #6c7686; }
.cfg-leg.is-hot { background: rgba(77, 159, 255, .08); }
.cfg-leg.is-hot .cfg-badge { color: #fff; background: #4d9fff; }
.cfg-leg.is-hot .cfg-leg-text { color: #ddeaff; }

/* Moins de 980 px: l'encadré passe sous l'article, en cartes. */
@media (max-width: 979px) {
  .cfg-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  .cfg-aside {
    position: static !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Moins de 680 px: légendes et appel à l'action sur une colonne. */
@media (max-width: 679px) {
  .cfg-legend { grid-template-columns: minmax(0, 1fr) !important; }
  .cfg-cta { grid-template-columns: 1fr !important; }
}