/* Étape 2 : trois risques, une jauge chacun (la part de la SSI, puis le manque), et le cahier des charges. */
.regime__risques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.risque { background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px; display: grid; gap: 14px; align-content: start; }
.risque h2 { font-size: 25px; color: var(--petrole); }
.risque__manque { color: var(--encre-2); }
.risque__manque .chiffre { display: block; font-size: 44px; line-height: 1; color: var(--ambre-texte); margin-bottom: 2px; }

.jauge { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--ambre-voile); }
.jauge__ssi { width: var(--part); background: var(--petrole-2); animation: jauge 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.jauge__manque {
  flex: 1;
  background: repeating-linear-gradient(-45deg, var(--ambre-voile) 0 6px, rgba(212, 149, 42, 0.35) 6px 8px);
}
@keyframes jauge { from { width: 0; } }

.risque__chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.risque__chiffres div { display: grid; }
.risque__chiffres dt { font-size: 13px; color: var(--encre-2); display: flex; align-items: center; gap: 6px; }
.risque__chiffres div:first-child dt::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--petrole-2); }
.risque__chiffres div:last-child dt::before { content: ''; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--ambre); background: var(--ambre-voile); }
.risque__chiffres dd { margin: 0; font-weight: 500; font-size: 17px; }
.risque__calcul { font-size: 14px; color: var(--encre-2); padding-top: 12px; border-top: 1px solid var(--filet); }

.cahier__liste { margin: 0; padding: 0 20px 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.cahier__liste div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--filet); }
.cahier__liste dt { font-size: 14px; color: var(--encre-2); }
.cahier__liste dd { margin: 0; font-size: 15px; }
.cahier__liste strong { font-weight: 500; }
.cahier__recu { margin: 10px 20px 20px; font-size: 15px; color: var(--bleu-texte); }

@media (max-width: 1000px) {
  .regime__risques { grid-template-columns: minmax(0, 1fr); }
  .cahier__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cahier__liste div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .risque__manque .chiffre { font-size: 38px; }
}