/* Styles propres à la page du symbole m². */
.symbol-copy-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}
.symbol-copy-value{
  color:var(--text-strong);
  font-size:32px;
  line-height:40px;
  font-weight:700;
}
.symbol-copy-button{
  min-width:180px;
  max-width:100%;
}
.symbol-copy-status{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.notation-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.notation-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  padding:12px;
  border:1px solid var(--border);
}
.notation-correct{
  border-left:4px solid #27823b;
  background:#f3faf4;
}
.notation-incorrect{
  border-left:4px solid var(--badge);
  background:#fff5f5;
}
.notation-label{
  color:var(--text);
  font-size:16px;
}
.notation-value{
  color:var(--text-strong);
  font-size:18px;
  line-height:24px;
}
.notation-correct .notation-value{
  color:#1f6f32;
}
.notation-incorrect .notation-value{
  color:var(--badge);
}
kbd{
  display:inline-block;
  padding:2px 6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-strong);
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.9em;
}
.method-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.method-card{
  padding:16px;
  border:1px solid var(--border);
  background:var(--bg-soft-2);
}
.method-card h3{
  margin-top:0;
}
.method-card p{
  margin-bottom:0;
}
@media (max-width:600px){
  .method-grid{
    grid-template-columns:1fr;
  }
}