:root {
  color-scheme: light;
  --fond: #f8f5f4;
  --blanc: #fff;
  --encre: #292122;
  --bordeaux: #84243c;
  --bordeaux-fonce: #67182d;
  --rose: #f8edf0;
  --ligne: #e3d9d8;
  --texte-doux: #655a5b;
  font: 16px/1.45 "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--encre); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .52; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
}
.atelier { width: min(1360px, 100% - 80px); margin: 0 auto; padding: 36px 0 30px; }
.entete { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 29px; }
.embleme { flex: 0 0 auto; margin-top: 4px; }
h1, h2, p { margin: 0; }
h1 { font: 600 clamp(2rem, 3.6vw, 3rem)/1.08 Georgia, serif; letter-spacing: -.04em; }
.entete p { color: var(--texte-doux); margin-top: 8px; }
.espace { display: grid; grid-template-columns: 335px minmax(0, 1fr); gap: 20px; align-items: start; }
.reglages, .apercu { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; min-width: 0; }
.reglages { padding: 21px 21px 4px; }
h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
#equation {
  display: block;
  width: 100%;
  min-height: 72px;
  max-height: 144px;
  resize: vertical;
  color: var(--encre);
  margin-top: 11px;
  padding: 12px;
  font: 1.28rem/1.38 "Cambria Math", Cambria, Georgia, serif;
}
textarea, input[type="text"] { border: 1px solid #cec1c2; border-radius: 7px; background: #fff; }
input[type="text"] { width: 100%; min-width: 0; padding: 7px 8px; height: 38px; color: var(--encre); }
input::placeholder, textarea::placeholder { color: #817477; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bordeaux); }
.touches { display: flex; gap: 5px; margin-top: 7px; }
.touches button {
  background: var(--blanc);
  color: var(--bordeaux);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  font-size: .83rem;
  font-weight: 600;
  padding: 4px 9px;
  min-height: 31px;
}
.touches button { min-width: 36px; }
.touches button:hover, .secondaire:hover { background: var(--rose); border-color: #d9b6c0; }
.aide { color: var(--texte-doux); font-size: .82rem; }
#syntaxe { margin-top: 8px; }
.lecture { background: var(--rose); color: var(--bordeaux-fonce); border-radius: 7px; padding: 8px 11px 9px; margin-top: 12px; }
.lecture-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lecture span { display: block; font-size: .75rem; font-weight: 600; }
#copier-equation { border: 0; background: none; color: var(--bordeaux-fonce); font-size: .75rem; padding: 2px 0 4px; text-decoration: underline; text-underline-offset: 2px; }
.lecture output { display: block; font: 1.09rem/1.45 "Cambria Math", Cambria, Georgia, serif; overflow-wrap: anywhere; }
.erreur { color: #8b2336; font-size: .84rem; margin-top: 8px; }
.section-domaine { padding: 17px 0 13px; margin-top: 17px; border-top: 1px solid var(--ligne); }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.lien { border: 0; padding: 0 0 0 3px; color: var(--bordeaux); background: transparent; font-size: .81rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.lien:disabled { text-decoration: none; }
.champs-3, .champs-2 { display: grid; gap: 8px; }
.champs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-domaine .champs-3 { margin: 10px 0 10px; }
label { display: grid; gap: 4px; font-size: .81rem; font-weight: 550; }
.case { display: flex; gap: 7px; align-items: center; min-height: 26px; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--bordeaux); margin: 0; }
.personnaliser { border-top: 1px solid var(--ligne); }
summary { padding: 12px 0 13px; cursor: pointer; font-size: .88rem; font-weight: 650; }
summary::marker { color: var(--bordeaux); }
.detail-champs { display: grid; gap: 10px; padding-bottom: 14px; }
.barre-apercu { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--ligne); padding: 14px 19px; }
.barre-apercu p { margin-top: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; }
.actions button { display: inline-flex; align-items: center; gap: 7px; border-radius: 7px; padding: 8px 11px; min-height: 37px; font-size: .8rem; font-weight: 650; }
.actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linejoin: round; stroke-linecap: round; }
.principal { background: var(--bordeaux); border: 1px solid var(--bordeaux); color: var(--blanc); }
.principal:hover:not(:disabled) { background: var(--bordeaux-fonce); }
.secondaire { background: var(--blanc); border: 1px solid var(--ligne); color: var(--bordeaux); }
.feuille { overflow: auto; min-height: 295px; padding: 8px 9px 0; }
.feuille svg { display: block; width: 100%; min-width: 320px; height: auto; }
.invite { display: grid; place-items: center; min-height: 315px; padding: 24px; text-align: center; color: var(--texte-doux); font-size: .95rem; }
.etat { padding: 0 19px 12px; min-height: 32px; }
.visually-hidden { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
@media (max-width: 965px) {
  .atelier { width: min(100% - 36px, 1360px); padding-top: 28px; }
  .espace { grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }
  .reglages { padding-inline: 16px; }
}
@media (max-width: 760px) {
  .espace { grid-template-columns: minmax(0, 1fr); }
  .atelier { width: calc(100% - 26px); padding-top: 24px; }
  .entete { margin-bottom: 19px; gap: 11px; }
  .embleme { width: 38px; height: 38px; }
  .entete p { font-size: .91rem; }
  .barre-apercu { padding: 13px; }
  .feuille { padding-inline: 2px; }
}
@media (max-width: 405px) {
  .actions button { padding-inline: 8px; gap: 4px; }
  .barre-apercu { gap: 8px; }
}