/* ═══════════════════════════════════════════════════════════════════════════
   VISUELS DES DÉCODAGES : composants réutilisables par tous les articles.

   Ils sont en HTML + CSS (et non en SVG de bout en bout) pour une raison : sur
   téléphone, un SVG qui contient du texte rétrécit avec la page et le texte devient
   illisible. Ici le texte reste du texte, les cartes se replient en colonne, et
   seuls les petits personnages (le robot) sont des dessins.

   Généré par docs/decodages/generer-visuels.py. Les couleurs viennent de la charte
   via les variables de style.css, sauf le bleu nuit #0F1F6B et le bleu pâle, qui sont
   ceux des supports (BNI Castres, diaporamas).
   ═══════════════════════════════════════════════════════════════════════════ */

.vis { margin: 36px 0; }
.vis-cap { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 12px 2px 0; }
.vis svg { display: block; max-width: 100%; height: auto; }

/* ── Un grand chiffre, une rangée de points (19 sur 20) ───────────────── */
.vis-pct { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; background: linear-gradient(135deg, #0F1F6B 0%, #1E3ABA 60%, #2F5FD0 100%); border-radius: 18px; padding: 30px 32px; color: #fff; }
.vis-pct-n { font-family: var(--heading); font-weight: 900; font-size: clamp(60px, 13vw, 96px); line-height: 1; letter-spacing: -0.03em; }
.vis-pct-corps { flex: 1 1 240px; min-width: 0; }
.vis-pct-txt { font-size: 17px; line-height: 1.55; color: #fff; margin-bottom: 16px; }
.vis-pct-txt b { color: #FED2AF; font-weight: 700; }
.vis-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; max-width: 320px; }
.vis-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.32); }
.vis-dots i.on { background: var(--orange); }
.vis-pct-sous { font-size: 13px; font-weight: 700; color: #DDE4FA; margin-top: 10px; letter-spacing: 0.02em; }

/* ── Quatre tuiles chiffrées (les études) ──────────────────────────────── */
.vis-tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vis-tuiles.n3 { grid-template-columns: repeat(3, 1fr); }
.vis-tuiles.n3 .vis-tuile-n { font-size: 24px; line-height: 1.15; }
.vis-tuile { background: #fff; border: 1px solid var(--sep); border-top: 4px solid var(--blue-dark); border-radius: 14px; padding: 16px 20px 18px; min-width: 0; }
.vis-tuile.t2 { border-top-color: var(--blue); }
.vis-tuile.t3 { border-top-color: var(--orange); }
.vis-tuile.t4 { border-top-color: #0F1F6B; }
.vis-tuile-src { font-family: var(--heading); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.vis-tuile-n { font-family: var(--heading); font-weight: 900; font-size: 44px; line-height: 1.05; color: var(--blue-dark); letter-spacing: -0.02em; margin: 6px 0 4px; }
.vis-tuile-n.long { font-size: 26px; line-height: 1.2; margin: 10px 0 6px; }
.vis-tuile-t { font-size: 14px; line-height: 1.5; color: var(--text-mid); }

/* ── Avant / après : informations éparpillées ou rangées ────────────────── */
.vis-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vis-pan { background: #FFF6EE; border-radius: 16px; padding: 16px 16px 14px; text-align: center; min-width: 0; }
.vis-pan.ok { background: #EEF4FF; }
.vis-pan-t { font-family: var(--heading); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.vis-fiches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 92px; align-content: center; }
.vis-fiche { display: inline-block; background: #fff; border: 1px solid #F3C9A4; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: #0F1F6B; transform: rotate(var(--r, 0deg)); box-shadow: 2px 2px 0 #F3C9A4; }
.vis-fiche.ok { border-color: #C9D4F2; box-shadow: 2px 2px 0 #C9D4F2; transform: none; }
.vis-pan svg { width: 74px; margin: 10px auto 4px; }
.vis-pan-s { font-size: 13px; line-height: 1.5; color: var(--text-mid); }

/* ── Quatre cartes à icône ─────────────────────────────────────────────── */
.vis-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vis-cartes.n3, .vis-cartes.n6 { grid-template-columns: repeat(3, 1fr); }
.vis-carte { position: relative; background: #EEF4FF; border-radius: 16px; padding: 18px 16px 16px; min-width: 0; }
.vis-carte-num { position: absolute; top: 10px; right: 14px; font-family: var(--heading); font-weight: 900; font-size: 30px; color: #C9D4F2; line-height: 1; }
.vis-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--blue-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.vis-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vis-carte svg.rb { width: 46px; margin: -4px 0 8px -2px; }
.vis-carte-t { font-family: var(--heading); font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--blue-dark); }
.vis-carte-s { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

/* ── Deux durées face à face (le test du collaborateur) ────────────────── */
.vis-duel { background: #fff; border: 1px solid var(--sep); border-radius: 18px; padding: 22px 26px; }
.vis-duel-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.vis-duel-tete svg { width: 64px; flex: none; }
.vis-duel-q { font-family: var(--heading); font-weight: 800; font-size: 16px; line-height: 1.4; color: var(--blue-dark); }
.vis-ligne { margin-top: 14px; }
.vis-ligne-l { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-mid); margin-bottom: 6px; }
.vis-ligne-l b { font-family: var(--heading); font-weight: 800; color: var(--blue-dark); white-space: nowrap; }
.vis-piste { height: 16px; border-radius: 8px; background: #EEF4FF; overflow: hidden; }
.vis-piste span { display: block; min-width: 8px; height: 100%; border-radius: 8px; background: var(--blue-dark); }
.vis-piste span.o { background: var(--orange); }
.vis-piste span.c { background: var(--blue); }

/* ── Boucle en trois temps ─────────────────────────────────────────────── */
.vis-boucle { display: flex; align-items: stretch; gap: 0; }
.vis-etape { flex: 1 1 0; min-width: 0; background: #EEF4FF; border-radius: 16px; padding: 18px 14px 16px; text-align: center; }
.vis-etape .vis-ico { margin: 0 auto 10px; }
.vis-etape-t { font-family: var(--heading); font-weight: 800; font-size: 16px; color: var(--blue-dark); }
.vis-etape-s { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.vis-etape svg.rb { width: 46px; margin: -4px auto 2px; }
.vis-fleche { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 24px; font-weight: 700; }
.vis-retour { margin-top: 12px; text-align: center; font-family: var(--heading); font-weight: 700; font-size: 14px; color: var(--blue-dark); }
.vis-retour span { color: var(--orange); font-size: 18px; margin-right: 6px; }


/* ── Repère en gros au-dessus d'une étape (24 h, 72 h, 1 mois) ──────────── */
.vis-etape-g { font-family: var(--heading); font-weight: 900; font-size: 26px; line-height: 1; color: var(--orange); margin-bottom: 10px; letter-spacing: -0.02em; }

/* ── Panneaux à puces (qui doit quoi) ──────────────────────────────────── */
.vis-pan-ul { text-align: left; margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--text-mid); }
.vis-pan-ul li { font-size: 13.5px; line-height: 1.55; margin-bottom: 9px; }

/* ── Frise : des dates, ce qui s'applique, ce qui est reporté ──────────── */
.vis-frise { display: flex; background: #EEF4FF; border-radius: 16px; padding: 22px 22px 18px; }
.vis-jalon { position: relative; flex: 1 1 0; min-width: 0; padding: 26px 14px 0 0; }
.vis-jalon::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: #C9D4F2; }
.vis-jalon:last-child::before { right: 50%; }
.vis-jalon-p { position: absolute; top: 0; left: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--blue-dark); border: 3px solid #EEF4FF; box-sizing: border-box; box-shadow: 0 0 0 2px var(--blue-dark); }
.vis-jalon.avenir .vis-jalon-p { background: #fff; box-shadow: 0 0 0 2px var(--orange); }
.vis-jalon.bloque .vis-jalon-p { background: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.vis-jalon-d { font-family: var(--heading); font-weight: 800; font-size: 15px; color: var(--blue-dark); margin-bottom: 4px; }
.vis-jalon-t { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }

/* ── Pyramide des niveaux de risque ────────────────────────────────────── */
.vis-niveaux { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vis-niv { border-radius: 12px; padding: 12px 18px; text-align: center; box-sizing: border-box; }
.vis-niv b { display: block; font-family: var(--heading); font-weight: 800; font-size: 15px; }
.vis-niv span { display: block; font-size: 13px; line-height: 1.45; margin-top: 2px; }
.vis-niv.n1 { background: #0F1F6B; color: #fff; }
.vis-niv.n2 { background: #1E3ABA; color: #fff; }
.vis-niv.n3 { background: #BFD4FF; color: #0F1F6B; }
.vis-niv.n4 { background: #EEF4FF; color: #0F1F6B; border: 1px solid #C9D4F2; }

@media (max-width: 640px) {
  .vis-tuiles, .vis-tuiles.n3 { grid-template-columns: 1fr; }
  .vis-cartes, .vis-cartes.n6 { grid-template-columns: repeat(2, 1fr); }
  .vis-cartes.n3 { grid-template-columns: 1fr; }
  .vis-frise { flex-direction: column; gap: 6px; }
  .vis-jalon { padding: 0 0 12px 34px; }
  .vis-jalon::before { top: 0; bottom: 0; left: 8px; right: auto; width: 3px; height: auto; }
  .vis-jalon:last-child::before { bottom: 50%; right: auto; }
  .vis-niv { width: 100% !important; }
  .vis-duo { grid-template-columns: 1fr; }
  .vis-boucle { flex-direction: column; }
  .vis-fleche { width: auto; height: 30px; transform: rotate(90deg); }
  .vis-pct { padding: 24px 22px; }
}