/* Outil · Calcul RAID (RAID calculator) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : rd-
   À gauche (en haut sur téléphone) : le schéma, le résultat, le détail, la note ; à droite : les réglages.
   Emplacements fixes (schéma, 2 lignes sous le résultat, 5 lignes de détail, note) : rien ne bouge quand on change un réglage. */
.rd .outil-fixe { align-items: stretch; }

/* Le schéma : un disque par colonne, 6 bandes ; données en papier, parité en orange, copie hachurée */
.rd-schema { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(6, 14px); gap: 4px 5px;
  padding: 14px; border-radius: 16px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); transition: opacity .3s var(--courbe); }
.rd-schema.erreur { opacity: .3; }
.rd-schema i, .rd-legende i { display: block; border-radius: 3px; }
.rd-d { background: rgba(242, 240, 235, .82); }
.rd-p { background: var(--orange); }
.rd-c { background: repeating-linear-gradient(135deg, rgba(242, 240, 235, .45) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .35); }
.rd-legende { display: flex; gap: 16px; justify-content: center; margin-top: -10px; font: var(--valeur); letter-spacing: .04em; color: var(--texte2); }
.rd-legende span { display: inline-flex; align-items: center; gap: 7px; }
.rd-legende i { width: 14px; height: 10px; }

/* Le résultat */
.rd-resultat { display: flex; flex-direction: column; gap: 4px; }
.rd-resultat .groupe { padding: 0; }
.rd-grand { margin: 0; font: 700 clamp(34px, 10vw, 52px)/1.1 var(--display); letter-spacing: -.03em; color: var(--papier); }
.rd-tio { margin: 0; height: 2lh; font: var(--valeur); line-height: 1.6; letter-spacing: .04em; color: var(--texte2); }
.rd-tio.alerte { color: var(--peche); }
.rd-details { display: flex; flex-direction: column; }
.rd-ligne { cursor: default; height: 42px; flex: none; align-items: center; padding: 0; }   /* hauteur fixe : une valeur longue ne fait rien bouger */
.rd-ligne .nom { color: var(--texte2); font-weight: 400; white-space: nowrap; }
.rd-ligne:hover .nom { color: var(--texte2); }
.rd-ligne .val { color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.rd-note { margin: 0; height: 4lh; overflow: hidden; font: 400 13.5px/1.5 var(--corps); color: var(--texte2); }
@media (min-width: 960px) { .rd-note { height: 3lh; } }

/* La taille d'un disque : le champ et To / Go sur une ligne, les tailles courantes dessous */
.rd-taille { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.rd-champ { flex: 1; min-width: 0; font: 500 18px/1.4 var(--display); }
.rd-mini { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); }
.rd-mini button { border: 0; background: none; border-radius: 999px; padding: 8px 12px; font: var(--valeur); line-height: 1; letter-spacing: .06em;
  color: var(--texte2); transition: background .4s var(--courbe), color .4s var(--courbe); }
.rd-mini button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.rd-sauvegarde { margin: 0; padding-top: 14px; border-top: 1px solid var(--filet-doux); font: 400 13px/1.5 var(--corps); color: var(--texte2); }